样式集（14）填写信息弹窗

代码

<template><view class="mxBoom"><view class="mxBoomContent"><view class="mxBoomTip">完善信息</view><view class="centent"><view class="p_r"><view class="left">地　　区<text style="color: red;"> *</text></view><picker mode="multiSelector" :value="multiIndex" range-key="name" :range="multiArray"@columnchange="MultiPickerColumnChange" @change="MultiPickerChange"><input class="input" disabled :value="diqu" type="text" placeholder-class="placeholderClass"placeholder="请选择省市"></input></picker></view><view class="p_r "><view class="left">医　　院<text style="color: red;"> *</text></view><input class="input" @blur="inputBlur" adjust-position v-model="hospital" type="text"placeholder-class="placeholderClass" placeholder="请输入您的医院"></input><view class="mohuhListBlock" v-if="mohuhListBlockShow&&mohuhList.length>0"><view class="mohuhListItem" @click="choiceHospital(item)" v-for="(item,idx) in mohuhList">{{item.name}}</view></view></view><view class="p_r"><view class="left">科　　室<text style="color: red;"> *</text></view><picker mode="selector" :value="0" range-key="name" :range="roomList" @change="roomChange"><input class="input" disabled v-model="room" type="text" placeholder-class="placeholderClass"placeholder="请选择您的科室"></input></picker></view><view class="p_r"><view class="left">职　　务<text style="color: red;"> *</text></view><uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"parent-field="parent_code" @change="onchange" @nodeclick="onnodeclick"><input class="input" disabled @blur="inputBlur" adjust-position v-model="position" type="text"placeholder-class="placeholderClass" placeholder="请选择您的职务"></input></uni-data-picker></view><view class="p_r"><view class="left">性　　别<text style="color: red;"> *</text></view><view class="radioInput"><radio-group @change="radioChange"><label class="radio"><radio value="1" />男</label><label class="radio" style="margin-left: 60rpx;"><radio value="2" />女</label></radio-group></view></view><view class="tips">标记为 <text style="color: red;">*</text> 的为必填信息</view><view class="submitBtn" @click="submit">提 交</view></view></view><image :src="xIcon" class="xIcon" @click="goIndex"></image></view>
</template><script>var that;export default {props: ['pageType'],data() {return {choiceRed: this.$config.cdn_url_forum + 'choiceRed.png',choiceHui: this.$config.cdn_url_forum + 'choiceHui.png',xIcon: this.$config.cdn_url_forum + 'xIcon.png',mxBoom: false,bolang: this.$config.cdn_url_forum + 'bolang.png',sanjiao: this.$config.cdn_url_forum + 'sanjiao.png',bolang: this.$config.cdn_url_forum + 'bolang.png',pid: '',cid: '',name: "",sex: "", //(1男2女)    mobile: "",code: "",province: "",city: "",hospital: "",room: "",position: "",mohuhListBlockShow: false,roomListBlockShow: false,positionListBlockShow: false,hospitalList: [], //医院列表mohuhList: [], //模糊查询的医院列表roomList: [], //科室列表mohuRoomList: [], //模糊科室列表positionList: [], //职位列表mohuPositionList: [], //模糊职位列表loc: '',diqu: ''};},watch: {},mounted() {that = thisthis.$common.Init.call(this);if (getApp().globalData.regInfo && getApp().globalData.regInfo.sex) {this.ifShow(getApp().globalData.regInfo)} else {getApp().globalData.regInfoPro.then(res => {console.log('getApp().globalData.regInfo-2', res);this.ifShow(res)})}city.forEach(item => {if (item.pid == province[0].pid) this.multiArray[1].push(item)// if(item.pid==this.multiArray[0][this.multiIndex[0]].pid)})},methods: {onchange(e) {const value = e.detail.value},onnodeclick(node) {},ifShow(res) {var ifUrl = (loc) => {var arr = ['/FAQ', '/live', '/bookingLive', '/eid', '/college'];var status = false;arr.forEach(item => {if (loc.indexOf(item) != -1) {status = true;}})return status;};var loc = location.hrefif ((ifUrl(loc)) || this.pageType) {if (!res.sex || !res.province || !res.room || !res.hospital || !res.position) {console.log('信息', res, !res.sex, !res.province, !res.room, !res.hospital, !res.position);this.getRoomData()this.getPositionData()this.mxBoom = true}}},roomChange(e) {this.room = this.roomList[e.detail.value].name;},positionChange(e) {this.position = this.positionList[e.detail.value].name;},inputBlur() {setTimeout(() => {this.mohuhListBlockShow = falsethis.roomListBlockShow = falsethis.positionListBlockShow = false}, 500)},submit() {var parmes = {sex: this.sex, //(1男2女)    province: this.province,city: this.city,hospital: this.hospital,room: this.room,position: this.position,}var regu = "^[ ]+$";var re = new RegExp(regu);console.log('提交了', re.test(parmes.hospital));if (!parmes.sex || !parmes.province || !parmes.city || !parmes.hospital || !parmes.room || !parmes.position || re.test(parmes.hospital)) {this.showToast('请您补充完整身份信息，以便继续访问')return}if (parmes.sex && parmes.province && parmes.city &&parmes.hospital && parmes.room && parmes.position) {// returnthis.$request(this.$api.user.addUserInfo, parmes).then((res) => {if (res.code != 0) returnthis.showToast('补充信息成功')getApp().globalData.regInfo = {...getApp().globalData.regInfo,...parmes}setTimeout(() => {this.mxBoom = false}, 1500)})}},choicePosition(item) {this.position = item.name;this.mohuPositionList = [];setTimeout(() => {this.positionListBlockShow = false;}, 500)},choiceRoom(item) {this.room = item.name;this.mohuRoomList = [];setTimeout(() => {this.roomListBlockShow = false;}, 500)},choiceHospital(item) {this.hospital = item.name;this.mohuhList = [];setTimeout(() => {this.mohuhListBlockShow = false;}, 500)},radioChange(e) {console.log('e', e.detail.value)this.sex = e.detail.value;},// 获取科室getRoomData() {this.$request(this.$api.user.getRoomData, {}).then((res) => {if (res.code != 0) returnthis.roomList = res.data.list;})},// 获取职称getPositionData() {this.$request(this.$api.user.getPositionData, {}).then((res) => {if (res.code != 0) returnthis.positionList = res.data.list;})},// 获取医院getHospitalData() {this.$request(this.$api.user.getHospitalData, {province_id: this.pid,city_id: this.cid}).then((res) => {if (res.code != 0) returnthis.hospitalList = res.data.list;})},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) {var value = e.detail.value;this.province = this.multiArray[0][value[0]].name;this.city = this.multiArray[1][value[1]].name;this.pid = this.multiArray[0][value[0]].pid;this.cid = this.multiArray[1][value[1]].cid;this.diqu = this.province + '-' + this.citythis.getHospitalData()console.log('pid', this.pid, this.province)console.log('cid', this.cid, this.city)},goIndex() {let url = '/pages/index/index?activePage=1'this.goOtherPages(url, 'reLaunch')}}};
</script><style lang="scss" scoped>.tips {color: #666;font-size: 26rpx;margin-top: -20rpx;}.centent {margin-top: 60rpx;width: 85%;margin-left: 10%;.p_r {margin-bottom: 40rpx;height: 60rpx;line-height: 60rpx;position: relative;}.left {width: 150rpx;}.radioInput {height: 60rpx;border-radius: 8rpx;padding-left: 12rpx;width: 450rpx;font-size: 28rpx;}.input {border: 2rpx solid #d0d0d0;height: 60rpx;line-height: 60rpx;border-radius: 8rpx;padding-left: 12rpx;width: 350rpx;font-size: 28rpx;}.mohuhListBlock {position: absolute;top: 64rpx;left: 150rpx;height: 400rpx;font-size: 30rpx;line-height: 38rpx;background: #f2f2f2;border-radius: 10rpx;padding: 20rpx;z-index: 999;overflow-x: hidden;overflow-y: scroll;}.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;}}.mxBoom {position: fixed;width: 100vw;height: 100vh;z-index: 4;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);.submitBtn {margin-top: 80rpx;width: 300rpx;line-height: 70rpx;height: 70rpx;color: #fff;background-color: $red;position: relative;left: 50%;margin-left: -150rpx;text-align: center;font-size: 32rpx;font-weight: 600;border-radius: 50rpx;}.xIcon {margin-top: 24rpx;width: 70rpx;height: 70rpx;text-align: center;position: relative;left: 50%;margin-left: -35rpx;}.mxBoomContent {width: 90vw;margin-left: 5vw;margin-top: 180rpx;height: 1000rpx;background-color: #FFFFFF;border-radius: 40rpx;.choiceItem {margin-left: 86rpx;margin-top: 60rpx;.choiceIcon {width: 30rpx;height: 30rpx;border-radius: 50%;}.answer {margin-top: -10rpx;font-size: 30rpx;margin-left: 30rpx;line-height: 50rpx;}}.mxTitle {margin-bottom: 14rpx;width: 600rpx;margin-top: 70rpx;margin-left: 5%;text-align: left;color: $red;font-size: 36rpx;font-weight: 600;}.mxBoomTip {width: 100%;border-radius: 40rpx 40rpx 0 0;font-size: 50rpx;letter-spacing: 6rpx;font-weight: 600;text-align: center;background-color: $red;height: 130rpx;line-height: 130rpx;color: #fff;}}}
</style>

样式集（14）填写信息弹窗相关推荐

样式集（八）弹窗，规则弹窗，半透明弹窗
效果图: 代码: <view class="popupBlock" v-if="showPopupBlock"><view class=&qu ...
如何用CDR创建样式与样式集
样式是一组定义对象属性的格式化属性,如轮廓或填充.例如,要定义轮廓样式,您可以指定轮廓宽度.颜色和线条类型等属性.要定义字符样式,您可以指定字体类型.字体样式和大小.文本颜色和背景色.字符位置.大写等 ...
中国研究生招生信息网登陆服务器错误,2019考研网上报名填写信息常见问题及解决办法...
网上报名的步骤很多,需要填写的内容也很多,对于初次考研报名的考生来说总是会有些战战兢兢,生怕填错信息影响报名,为此,东湖武大考研网特意整理收集了2018年考研网上报名填写信息常见问题及解决办法,这些解 ...
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
文章目录百度地图webgl使用自定义地图样式地区镂面棱柱效果绘制点信息以及信息弹窗百度地图webgl使用在项目的index.html中引入 <script type="te ...
根据excel中的容填写信息
一句话使用xlrd 中的row方法读取一行返回的为一个所有值的list list中的所有值的索引和excel中的索引是绝对关系只要在list中找到你想要的值得索引即可根据excel中的内容填写信 ...
word精华样式篇之三使用样式集让所有文档风格统一
回顾:样式是样式是一组格式特征,例如字体名称.字号.颜色.段落对齐方式和间距. 一. 保存自己的专属样式我们将自己工作文档设置好了各级标题格式后,希望以后打开word就直接使用这种样式,在关闭当前文 ...
ElasticSearch5.3插件开发（二）获取集群健康信息
前面一篇,简单讲过插件开发,打印信息,今天我们开发一个有实际意义的插件,获得集群健康信息. 先看代码 MyFirstPlugin.java package es.plugins; import org ...
【论文阅读】基于区块链的无人集群作战信息共享架构_臧义华
区块链论文阅读以下所有的内容都是我的观点,本人能力有限,该篇主要作为我自己的读书笔记. 基于区块链的无人集群作战信息共享架构_臧义华一.阅读笔记 1. 本文概述本文针对无人机群的场景,利用区块链 ...
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后的同步问题概括主要说一下前端的实现概括今天在做实训作业时,有个对数据信息进行修改的操作,要求点击修改按钮后弹出修改框,栏目中需要显 ...

样式集（14）填写信息弹窗

样式集（14）填写信息弹窗相关推荐

最新文章

热门文章