the code
<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 = this
this.$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.href
if ((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 = false
this.roomListBlockShow = false
this.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) {
// return
this.$request(this.$api.user.addUserInfo, parmes).then((res) => {
if (res.code != 0) return
this.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) return
this.roomList = res.data.list;
})
},
// 获取职称
getPositionData() {
this.$request(this.$api.user.getPositionData, {}).then((res) => {
if (res.code != 0) return
this.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) return
this.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.city
this.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>