首页 > 其他分享 >直播app开发搭建,注册页面样式,全部代码

直播app开发搭建,注册页面样式,全部代码

时间:2023-02-09 14:24:58浏览次数:44  
标签:&# multiArray app pid value height 直播 12288 页面

直播app开发搭建,注册页面样式,全部代码

<template>
<view>
<view>
新用户注册
</view>
<image :src="sanjiao" mode="widthFix"></image>
<!-- <image style="width: 100vw;" :src="bolang" mode="widthFix"></image> -->
<view>
<view>
<view>
姓&#12288;&#12288;名
</view>
<input class="input w100" type="number" placeholder-class="placeholderClass"
placeholder="请输入姓名"></input>
</view>
<view>
<view>
手机号码
</view>
<input class="input w100" type="number" placeholder-class="placeholderClass"
placeholder="11位手机号码"></input>
<view>
获取验证码
</view>
</view>
<view>
<view class="left " style="letter-spacing: 16rpx;">
验证码
</view>
<input class="input w100" type="text" placeholder-class="placeholderClass" placeholder="请输入验证码"></input>
</view>
<view>
<view>
医&#12288;&#12288;院
</view>
 
<picker mode="multiSelector" :value="multiIndex" range-key="name" :range="multiArray"
@columnchange="MultiPickerColumnChange" @change="MultiPickerChange">
 
<input type="text" placeholder-class="placeholderClass" placeholder="请输入您的医院"></input>
 
</picker>
</view>
<view>
<view>
科&#12288;&#12288;室
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="请输入您的科室"></input>
</view>
<view>
<view>
职&#12288;&#12288;务
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="请输入您的职务"></input>
</view>
<view>
<view>
性&#12288;&#12288;别
</view>
<input type="text" placeholder-class="placeholderClass" placeholder="请输入您的性别"></input>
</view>
</view>
<view>
 
</view>
<view @click="goIndex">
提 交
</view>
</view>
</template>
 
<script>
var that;
import {
city,
province
} from '@/util/city.js'
export default {
data() {
return {
sanjiao: this.$config.cdn_url + 'sanjiao.png',
bolang: this.$config.cdn_url + 'bolang.png',
multiArray: [province, []],
multiIndex: [0, 0],
pid: '',
cid: '',
pname: '',
cname: '',
}
},
onLoad(option) {
this.$common.Init.call(this);
that = this;
console.log('option', option)
console.log('city', city)
 
city.forEach(item => {
if (item.pid == province[0].pid) this.multiArray[1].push(item)
// if(item.pid==this.multiArray[0][this.multiIndex[0]].pid)
})
},
onShow() {
 
},
onHide() {},
methods: {
MultiPickerColumnChange(e) {
console.log('MultiPickerColumnChange', e)
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var column = e.detail.column;
var value = e.detail.value;
switch (e.detail.column) {
case 0:
this.multiArray[1] = []
city.forEach(item => {
if (item.pid == province[value].pid) this.multiArray[1].push(item)
})
break;
case 1:
break;
}
 
},
MultiPickerChange(e) {
console.log('MultiPickerChange', e)
 
var value = e.detail.value;
this.pname = this.multiArray[0][value[0]].name;
this.cname = this.multiArray[1][value[1]].name;
 
this.pid = this.multiArray[0][value[0]].pid;
this.cid = this.multiArray[1][value[1]].cid;
console.log('pid', this.pid,this.pname)
console.log('cid', this.cid,this.cname)
 
},
goIndex() {
let url = '/pages/index/index'
this.goOtherPages(url)
}
}
}
</script>
 
<style scoped>
.page {
top: 0;
height: 100vh;
}
 
.sanjiao {
width: 38rpx;
position: absolute;
right: 50rpx;
top: 180rpx;
}
 
.btn {
background: #D7000F;
width: 320rpx;
margin-left: -160rpx;
transform: translateX(50vw);
position: absolute;
height: 80rpx;
font-size: 36rpx;
font-weight: 600;
line-height: 80rpx;
border-radius: 50rpx;
margin-top: 134rpx;
text-align: center;
color: #fff;
}
 
.top {
background: #D7000F;
text-align: center;
width: 100vw;
height: 180rpx;
line-height: 180rpx;
color: #fff;
font-weight: 600;
font-size: 40rpx;
 
}
 
.centent {
margin-top: 60rpx;
width: 85%;
margin-left: 10%;
 
.p_r {
margin-bottom: 40rpx;
height: 60rpx;
line-height: 60rpx;
}
 
.left {
width: 150rpx;
}
 
.input {
border: 1px solid #d0d0d0;
height: 60rpx;
border-radius: 8rpx;
padding-left: 12rpx;
width: 450rpx;
font-size: 28rpx;
}
 
.placeholderClass {
font-size: 28rpx;
}
 
.w100 {
width: 260rpx;
}
 
.getCode {
background: $red;
width: 170rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 8rpx;
text-align: center;
margin-left: 16rpx;
font-size: 26rpx;
color: #fff;
 
}
}
</style>

​以上就是 直播app开发搭建,注册页面样式,全部代码,更多内容欢迎关注之后的文章

 

标签:&#,multiArray,app,pid,value,height,直播,12288,页面
From: https://www.cnblogs.com/yunbaomengnan/p/17105104.html

相关文章

  • 直播软件app开发,CSS超出隐藏并且能滚动
    直播软件app开发,CSS超出隐藏并且能滚动实现CSS代码: height:500rpx;overflow-x:hidden;overflow-y:scroll;​效果图的代码:<!--豆豆明细弹窗--><viewclass="mxB......
  • 搭建直播平台,uniapp滚动条置顶实现
    搭建直播平台,uniapp滚动条置顶实现实现代码: uni.pageScrollTo({  scrollTop:0,  duration:300});​以上就是搭建直播平台,uniapp滚动条置顶实现,更多内容欢......
  • Production Debugging for .NET Framework Applications 2002
    LargeObjectHeapThe.NETmemorymanagerplacesallallocationsof85,000bytesorlargerintoaseparateheapcalledthelargeobjectheap.Thisheapconsist......
  • Webpack实现多页面打包
    1.多页面应用(MPA)概念单页面在开发时会把所有的业务放在一个大的入口里面去,不同的子业务还是同一个URL地址,只不过后面的hash会有所不同。多页面相对于单页面的区别在于,项......
  • Webpack提取页面公共资源
    1.利用html-webpack-externals-plugin分离基础库在做React开发时,经常需要引入react和react-dom基础库,这样在打包的时候速度就会比较慢,这种情况下我们可以将这些基础库忽略......
  • 直播预告丨 立即解锁 ALB Ingress 高级特性
    随着云原生应用微服务化、Serverless化,用户需要面对复杂业务路由规则配置,保证服务访问的安全性以及流量的可监控、可观测性。阿里云ALBIngress基于应用型负载均衡ALB(A......
  • 个人所得税App住房贷款利息解读
    咨询了当地税务部门工作人员核实个人所得税中的住房贷款利息扣除比例选择问题如下:1.房产证只有一方姓名不能分摊给对方,只能扣除一方只能一方填写扣除比例选择“否”(1......
  • Vitualenvwrapper: 管理 python的 虚拟环境
            linux:install  Vitualenvwrapper[user]-3D05SQ3:~/python/managing-python-packages-virtual-environments/flask/venv$python3-mpipi......
  • 条件构造器 wrapper
    有时候Sql语句中的筛选条件是非常复杂的,比如or关键,>,<,模糊查询等其实就是另一种sql语法Wrapper:条件构造抽象类,最顶端父类AbstractWrapper: 用于生成sql的whe......
  • 小白也能做应用(一)之fusion app介绍
    一、应用介绍”所有网页都是客户端“为fusionapp的核心概念,让我们利用它可以快速的做出属于自己的应用。由于作者已经停止更新原版app,文章采用FA重制版完成。成品展示:......