xinelu-applet-ui/pages/register/register.vue
2023-10-11 14:22:12 +08:00

942 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="register">
<view class="head" @tap="Face">
<image class="Facecollection" :src="query.headPictureUrl" v-if="query.headPictureUrl"></image>
<image class="Facecollection" src="../../static/pages/Facecollection.png" v-else></image>
<span>人脸采集</span>
</view>
<view class="form">
<u-form :model="query" ref="uForm">
<span>姓名</span>
<u-form-item prop="name" :border-bottom="false">
<u-input v-model="query.patientName" placeholder="请输入姓名" />
</u-form-item>
<view class="name">
性别
<view class="sex">
<u-radio-group v-model="query.sexname" size='30'>
<u-radio @change='sexchange' v-for="(item, index) in sexlist" :key="index" :name="item.name"
active-color="#26A888" :disabled="item.disabled">
{{item.name}}
</u-radio>
</u-radio-group>
</view>
</view>
<view class="name">
出生日期
<view class="select" @tap='timeshow=true'>
<text v-if="query.birthDate==''">请选择出生日期</text>
<text v-else class="testitem">{{query.birthDate}}</text>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
</view>
<span>手机号</span>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="query.phone" placeholder="请输入手机号" />
</u-form-item>
<span>身份证号</span>
<u-form-item prop="cardNo" :border-bottom="false">
<u-input v-model="query.cardNo" placeholder="请输入身份证号" />
</u-form-item>
<view class="name">
所属区域
<view class="select" @tap='showPicker'>
<text v-if="!address">请选择所属区域</text>
<text v-else class="testitem">{{address}}</text>
<!-- <image src="../../static/huijiantou.png" mode=""></image> -->
</view>
</view>
<span>详细地址</span>
<u-form-item prop="address" :border-bottom="false">
<u-input :clearable='false' v-model="query.address" type="text" placeholder='小区、单元、门牌号'
maxlength='40' />
</u-form-item>
<!-- <view class="name">
详细地址
<u-input :clearable='false' v-model="query.address" type="text" placeholder='小区、单元、门牌号'
maxlength='40' />
</view> -->
<view class="name">
所在位置
<view class="select" @tap='getAddress()'>
<text v-if="query.locationName ==''">请选择所在位置</text>
<text class="testitem">{{query.locationName}}</text>
</view>
</view>
<view class="name">
基础疾病
<view class="select" @tap="godisease">
<!-- <text v-if="!query.diseaseInfoList">请选择基础疾病</text> -->
<ld-select :multiple="true" :list="options" label-key="label" value-key="value"
placeholder="请选择" v-model="value2" @change="selectChange" @cancel="cancel"
@confirm="confirm"></ld-select>
<!-- <text v-else v-for="(item,index) in query.diseaseInfoList">{{item.diseaseName}}</text>
<image src="../../static/huijiantou.png" mode=""></image> -->
</view>
</view>
</u-form>
</view>
<view class="bottom">
<view class="radio">
<u-radio-group style="display: inline-block;position: relative;top: 5rpx;left: 26rpx;" size='20'
@change="onChange" v-model="selected">
<u-radio shape="circle" active-color="#26A888" name="1" />
<!-- <radio value="1" active-color="#26A888"></radio> -->
</u-radio-group>
<view class="agreement">我已阅读并同意<text @tap='maskshow=true'>《用户协议》</text>
</view>
</view>
<view class="sbumit" @tap="submit">
提交
</view>
</view>
<u-toast ref="uToast" />
<u-mask :show="maskshow" class='mask' @click='maskshow=false'>
<view class="Agreement">
<view class="title">
用户协议与隐私政策
</view>
<scroll-view scroll-y="true" class="scroll-Y" style="">
<contenttext></contenttext>
</scroll-view>
<view class="cancel" @tap='maskshow=false'>
取消
</view>
<view class="determine" @tap='tapradio'>
确定并同意
</view>
</view>
</u-mask>
<u-picker mode="time" v-model="timeshow" :params="params" @confirm='timechange' @canel='timeshow=false'>
</u-picker>
<view class="">
<m-city style='z-index: 10076;' :provinceData="list" headTitle="地区选择" ref="cityPicker"
@funcValue="getpickerParentValue" pickerSize="4">
</m-city>
</view>
</view>
</template>
<script>
import {
AppIdentification
} from '@/api/pagesB/AppIdentification/index.js'
import {
getRegionAndStreetInfo,
getNurseType,
information
} from '@/api/pagesB/information/index.js'
import contenttext from '../../components/text.vue'
import {
getSubordinateRegions,
} from '@/api/pagesB/modifyAddress/modifyAddress.js';
import gkcity from "@/components/m-city/m-city.vue";
import ldSelect from '../../components/ld-select/ld-select.vue';
import {
registerdata
} from '@/api/pages/register/register.js'
export default {
components: {
contenttext,
ldSelect,
"m-city": gkcity,
},
// components: {ldSelect},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
data() {
return {
tipsText: '',
form: {
name: '',
phone: '',
indent: ''
},
value2: [],
timeshow: false, //出生日期
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
sexlist: [{
name: '男',
disabled: false
},
{
name: '女',
disabled: false
}
],
// radio: 1,
selected: '',
options: [{
value: '1',
label: '高血压'
}, {
value: '2',
label: '高血糖'
}, {
value: '3',
label: '高血脂'
}, {
value: '0',
label: '无'
}],
// checked:false,
// chooseLocation: '', //地图选址
arealist: [], //区街道list
list: [{
id: "",
localName: "请选择",
children: [],
}, ],
maskshow: false, //用户协议
getNurseTypelist: [], //护理类型数组
medicalcarelist: [], //医疗护理数组
address: '', //页面所属区域
query: { //信息请求数组
headPictureUrl: '',
couponId: null,
patientName: "",
cardNo: "",
phone: "",
address: "",
areaCode: "",
homeLongitude: null,
homeLatitude: null,
nurseTypeIdList: [],
diseaseInfoList: [],
diseaseList: [],
patientId: '',
locationName: '',
sex: '',
sexname:'',
birthDate: '',
cityCode: '1'
},
timer: null,
addresslength: null,
patientDiseaseInfoList: [], //获取个人信息
rules: {
patientName: [{
required: true,
message: '请输入姓名',
trigger: ['change', 'blur'],
}],
sex: [{
required: true,
message: '请选择性别',
trigger: ['change', 'blur'],
}],
address: [{
required: true,
message: '请输入详细地址',
trigger: ['change', 'blur'],
}],
birthDate: [{
required: true,
message: '请选择出生日期',
trigger: ['change', 'blur'],
}],
phone: [{
required: true,
message: '请输入手机号',
trigger: ['change', 'blur'],
}, {
validator: (rule, value, callback) => {
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
trigger: ['blur'],
}],
cardNo: [{
required: true,
message: '请输入身份证号',
trigger: ['change', 'blur'],
}, {
validator: (rule, value, callback) => {
return uni.$u.test.idCard(value);
},
message: '请输入正确的身份证号',
trigger: ['blur'],
}]
}
}
},
// onload(){
// },
// onUnload() {
// // 移除监听事件
// uni.$off('code');
// },
methods: {
onChange(e) {
this.selected=e
// console.log(e)
// this.allChecked = !this.allChecked;
// this.selected = e.detail.value;
},
// 下拉框多选
selectChange(val) {
console.log(val);
},
cancel() {
},
confirm(e) {
this.query.diseaseList = e.map(Number)
console.log(e)
},
submit() {
console.log(this.query)
// this.query.openid = uni.getStorageSync('openid');
// uni.navigateTo({
// url: '/pagesB/information/information'
// })
var that = this
that.query.openid = uni.getStorageSync('openid');
if (that.query.sexname == '男') {
that.query.sex = 'MALE';
} else if (that.query.sexname == '女') {
that.query.sex = 'FEMALE';
}
if(that.query.sex==""){
that.$refs.uToast.show({
title: '请选择性别',
type: 'error'
})
}
console.log(that.selected)
if (!that.query.locationName) {
that.$refs.uToast.show({
title: '请选择所在位置',
type: 'error'
})
}
if (!that.query.birthDate) {
that.$refs.uToast.show({
title: '请选择出生日期',
type: 'error'
})
}
that.$refs.uForm.validate(valid => {
console.log(valid)
if (valid) {
if (!that.selected) {
that.$refs.uToast.show({
title: '请审核并同意用户协议',
type: 'error'
})
}else{
registerdata(that.query).then(res => {
if (res.code == 500) {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}else{
uni.setStorageSync("userinfo", that.query)
that.$refs.uToast.show({
title: '注册成功',
type: 'success',
duration: '1000',
})
uni.switchTab({
url: '/pages/homepage/homepage' ,
});
}
})
}
} else {
console.log('验证失败');
}
});
},
// 性别
sexchange(e) {
if (e == '男') {
this.query.sex = 'MALE';
} else if (e == '女') {
this.query.sex = 'FEMALE';
}
},
// 人脸采集
Face() {
uni.navigateTo({
url: '/pages/facecollection/facecollection'
})
},
//提交信息
// informationinfo() {
// var that = this
// if (that.query.sex == '男') {
// that.query.sex = 'MALE';
// } else if (that.query.sex == '女') {
// that.query.sex = 'FEMALE';
// }
// if (this.addresslength) {
// if (this.addresslength.length > 2) {
// const value = uni.getStorageSync('phone');
// if (value) {
// that.query.phone = value
// if (that.radio == 1) {
// that.$refs.uToast.show({
// title: '请审核并同意用户协议',
// type: 'error'
// })
// } else {
// const patientId = uni.getStorageSync('patientId');
// AppIdentification(patientId).then(resp => {
// if (resp.code == 200) {
// if (resp.data.loginFlag) {
// that.$refs.uToast.show({
// title: '您已完善',
// type: 'success',
// })
// if (that.timer) {
// clearTimeout(that.timer)
// }
// that.timer = setTimeout(e => {
// uni.navigateBack({
// delta: 1
// })
// }, 1500)
// } else {
// information(that.query).then(res => {
// if (res.code == 200) {
// uni.removeStorageSync('invitationPatientId');
// that.$refs.uToast.show({
// title: '完善信息成功',
// type: 'success',
// duration: '1500'
// })
// if (that.timer) {
// clearTimeout(that.timer)
// }
// that.timer = setTimeout(e => {
// uni.navigateBack({
// delta: 1
// })
// }, 1500)
// } else if (res.code == 500) {
// that.$refs.uToast.show({
// title: res.msg,
// type: 'error',
// })
// }
// })
// }
// }
// })
// }
// }
// } else {
// that.$refs.uToast.show({
// title: '所属区域应选择所在的区或街道,请重新选择!',
// type: 'error'
// })
// }
// } else {
// that.$refs.uToast.show({
// title: '所属区域应选择所在的区或街道,请重新选择!',
// type: 'error'
// })
// }
// },
//性别
sexchange(e) {
if (e == '男') {
this.query.sex = 'MALE';
} else if (e == '女') {
this.query.sex = 'FEMALE';
}
},
//选择出生日期
timechange(e) {
this.query.birthDate = e.year + '-' + e.month + '-' + e.day
},
//获取所在位置
getAddress() {
var that = this;
uni.chooseLocation({
success: function(location) {
that.query.locationName = location.address
that.query.homeLongitude = location.longitude;
that.query.homeLatitude = location.latitude;
}
});
},
// getAddress() {
// uni.getLocation({
// type: 'wgs84',
// success: function(res) {
// const key = '3VABZ-6LZWK-YPAJ3-AMQED-D7RUK-VPB37'; //使用在腾讯位置服务申请的key
// const referer = '新医路健康服务平台'; //调用插件的app的名称
// const location = JSON.stringify({
// latitude: 39.89631551,
// longitude: 116.323459711
// });
// wx.navigateTo({
// url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
// });
// }
// });
// },
//护理类型请求
// getNurseTypeInfo() {
// getNurseType().then(res => {
// this.medicalcarelist = res.data.filter(e => e.nurseTypeName == '医疗护理')
// this.getNurseTypelist = res.data.filter(e => e.nurseTypeName != '医疗护理')
// })
// },
//区街道
areaInfo() {
getSubordinateRegions().then(res => {
this.list = res.data;
})
},
// 三级地址联动回调
getpickerParentValue(e) {
e = e.filter(ele => ele.localName != '暂不选择')
e = e.filter(ele => ele.localName != '暂无需选择')
this.addresslength = e
this.address = ''
this.query.areaCode = ''
if (e && e.length >= 1) {
e.forEach(el => {
this.address = this.address + el.localName
})
this.query.areaCode = e[e.length - 1].id
} else {
this.address = ''
this.query.areaCode = ''
}
},
// 显示三级地址联动
showPicker() {
this.$refs.cityPicker.show();
},
//点击所需服务
addnurseType(item) {
if (this.query.nurseTypeIdList.findIndex(e => e == item.id) == -1) {
this.query.nurseTypeIdList.push(item.id)
} else {
this.query.nurseTypeIdList = this.query.nurseTypeIdList.filter(e => e != item.id)
}
},
godisease(item) {
// uni.navigateTo({
// url: `/pagesB/disease/disease?diseaseInfoList=${JSON.stringify(this.query.diseaseInfoList)}`
// })
},
changeRadio() {
if (this.radio == 1) {
this.radio = 2;
} else {
this.radio = 1;
}
},
tapradio() {
this.selected = 1;
this.maskshow = false;
},
},
//进入界面加载
onLoad(options) {
let that = this
console.log(options, '00')
this.query.headPictureUrl = options.headPictureUrl
// this.query.couponId = Number(options.couponId)
// const value = uni.getStorageSync('patientId');
// if (value) {
// that.query.patientId = value
// }
this.areaInfo()
// this.getNurseTypeInfo();
},
// onUnload() {
// // 移除监听事件
// uni.$off('code');
// },
//带参返回
// 从地图选点插件返回后在页面的onShow生命周期函数中能够调用插件接口取得选点结果对象
onShow() {
// uni.$on('headPictureUrl',(res)=>{
// console.log(res, '000') // 为 B 页面传过来的值
// // this.usnerinfo = options;
// })
var that = this
const invitationPatientId = uni.getStorageSync('invitationPatientId')
if (invitationPatientId) {
that.query.source = 'FRIEND_INVITATION'
that.query.invitationPatientId = Number(invitationPatientId)
} else {
that.query.source = 'REGISTER_YOURSELF'
that.query.invitationPatientId = null
}
// const chooseLocation = requirePlugin('chooseLocation');
// const location = chooseLocation.getLocation(); // 如果点击确认选点按钮则返回选点结果对象否则返回null
// if (location) {
// that.query.locationName = location.address
// that.chooseLocation = location.address
// that.query.homeLongitude = location.longitude;
// that.query.homeLatitude = location.latitude;
// }
uni.$on('disease', function(data) {
that.query.diseaseInfoList = JSON.parse(data.disease)
if (that.query.diseaseInfoList.length > 0) {
that.medicalcarelist.forEach(e => {
if (that.query.nurseTypeIdList.findIndex(el => el == e.id) == -1) {
that.query.nurseTypeIdList.push(e.id)
} else {}
})
} else {
that.medicalcarelist.forEach(e => {
that.query.nurseTypeIdList = that.query.nurseTypeIdList.filter(el => el != e.id)
})
}
uni.$off('disease')
})
},
}
</script>
<style lang="less" scoped>
.register {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Agreement{
width: 100%;
background-color: #fff;
text-align: center;
height: 1000rpx;
position: absolute;
top:5%;
font-size: 30rpx;
.title{
height: 100rpx;
line-height: 100rpx;
border-bottom: 1px solid #eeeeee;
font-size: 34rpx;
margin: 0px auto;
width: 100%;
text-align: center;
}
.scroll-Y{
height:830rpx ;
overflow-y:scroll;
text-align: left;
text-indent: 2em;
}
.cancel {
height:70rpx;
line-height: 70rpx;
font-size: 32rpx;
background-color: #F4F5F7;
position: absolute;
border-top: 1rpx solid #000000;
bottom:0;
right:0;
width: 50%;
color: #000000;
}
.determine {
height:70rpx;
line-height: 70rpx;
font-size: 32rpx;
width: 50%;
color: #F4F5F7;
background: #26A888;
position: absolute;
bottom:0;
left:0;
}
}
.radio-content {
margin: 50rpx auto;
width: 70%;
text-align: center;
font-size: 28rpx;
position: relative;
.agreement {
position: absolute;
top:50%;
left:20%;
transform: translateY(-50%);
color: #878987;
}
.radio-right {
height: 100rpx;
.radio {
display: inline-block;
width: 50rpx;
height: 50rpx;
border-radius: 70%;
border: 2rpx solid #178ffb;
position: absolute;
top:50%;
left:5%;
transform: translateY(-50%);
.radio-active {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #178ffb;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
}
}
}
.head {
margin-top: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
span {
margin-top: 48rpx;
}
}
.form {
margin-top: 106rpx;
::v-deep .u-input {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
color: #8E8E8E;
// border: 1rpx solid red;
// margin: 12rpx auto;
border: none;
border-radius: 5rpx;
.u-input__input {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000 !important;
padding-left: 20rpx;
}
}
::v-deep.input-placeholder {
color: #8E8E8E !important;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
}
::v-deep.uni-input-placeholder {
color: #8E8E8E !important;
font-size: 20rpx;
}
.name {
// padding: 25rpx 30rpx 0 30rpx;
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 38rpx;
.sex {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx 0 12rpx 0;
border: none;
border-radius: 5rpx;
}
::v-deep .u-radio.data-v-643b3322 {
margin-top: 8rpx;
margin-left: 30rpx;
}
::v-deep .u-input {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx auto;
border: none;
border-radius: 5rpx;
}
.select {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
margin: 20rpx 0 20rpx 0;
// border: 1rpx solid #F6F6F6;
border-radius: 5rpx;
display: flex;
position: relative;
.testitem {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000;
}
text {
padding-left: 20rpx;
line-height: 63rpx;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8E8E8E;
}
image {
width: 9rpx;
height: 17rpx;
position: absolute;
right: 40rpx;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
}
/deep/ .u-input--border {
margin: 0 0 12rpx 0;
width: 600rpx;
background: #F6F6F6;
border-radius: 5rpx !important;
border: 0;
input {
color: #8E8E8E !important;
font-size: 22rpx !important;
}
}
span {
color: #333333;
font-size: 30rpx;
}
}
.bottom {
position: relative;
width: 100%;
.radio {
position: relative;
width: 44%;
left: 50%;
transform: translateX(-50%);
margin-top: 10%;
bottom: 20rpx;
.agreement {
// width: 225rpx;
// height: 17rpx;
font-size: 18rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #26A888;
// line-height: 38rpx;
display: inline-block;
}
}
.sbumit {
width: 496rpx;
height: 61rpx;
line-height: 61rpx;
text-align: center;
background: #26A888;
border-radius: 5rpx;
font-size: 31rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
left: 50%;
position: relative;
margin-top: 20rpx;
// -webkit-transform: translateY(-50%);
transform: translateX(-50%);
bottom: 20rpx;
}
}
// .btn {
// width: 496rpx;
// height: 61rpx;
// background: #26A888;
// border-radius: 5rpx;
// font-size: 31rpx;
// color: #FFFFFF;
// line-height: 61rpx;
// text-align: center;
// position: absolute;
// bottom: 72rpx;
// }
}
.Facecollection {
width: 266rpx;
height: 266rpx;
}
/deep/ .u-form-item__message {
padding-left: 0 !important;
}
</style>