xinelu-applet-ui/pages/register/register.vue
2024-01-03 17:15:09 +08:00

958 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" mode="" :src="require('@/pagesB/images/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="请输入手机号" :disabled="true" />
</u-form-item>
<span>身份证号</span>
<u-form-item prop="cardNo" :border-bottom="false">
<u-input v-model="query.cardNo" placeholder="请输入身份证号" />
</u-form-item>
<span>户主身份证号</span>
<u-form-item prop="householdCardNo" :border-bottom="false">
<u-input v-model="query.householdCardNo" placeholder="请输入身份证号" />
</u-form-item>
<view class="name">
与户主关系
<view class="select" @click="showNation = true;">
<text v-if="!householdRelationship">请选择与户主关系</text>
<text v-else class="testitem">{{householdRelationship}}</text>
<image src="@/static/huijiantou.png" mode=""></image>
</view>
</view>
<view class="name">
所属区域
<view class="select" @tap='showPicker'>
<text v-if="!address">请选择所属区域</text>
<text v-else class="testitem"
style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{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="selectdata" @tap='getAddress'>
<text v-if="query.locationName ==''">请选择所在位置</text>
<text class="testitem"
style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{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-content">
<view class="radio-right" @tap="changeRadio">
<view class="radio" :class="selected == 2 ? 'radio-default':''">
<view :class="selected == 2 ? 'radio-active':''"></view>
</view>
</view>
<view class="agreement">我已阅读并同意<text style="color: #26A888;" @tap='maskshow=true'>《用户协议》</text>
</view>
</view>
<view class="sbumit" @tap="submit">
提交
</view>
</view>
<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>
<u-select v-model="showNation" :list="actions" @confirm="nationSelect"></u-select>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getCurrentUser,
} from '@/api/pages/homepage/homepage.js'
import {
AppIdentification
} from '@/api/pagesB/AppIdentification/index.js'
import {
getRegionAndStreetInfo,
getNurseType,
information
} from '@/api/pagesB/information/index.js'
import contenttext from '@/pagesC/logintext/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'
import {
mapMutations
} from "vuex";
export default {
components: {
contenttext,
ldSelect,
"m-city": gkcity,
},
// components: {ldSelect},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
data() {
return {
SOCKETURL: '',
showNation: false, //户主关系
actions: [{
value: '1',
label: '户主本人'
},
{
value: '2',
label: '配偶'
},
{
value: '3',
label: '子女'
}, {
value: '4',
label: '(外)孙子女'
}, {
value: '5',
label: '父母'
}, {
value: '6',
label: '(外)祖父母'
}, {
value: '7',
label: '兄弟姐妹'
}, {
value: '8',
label: '儿媳'
}, {
value: '9',
label: '女婿'
}, {
value: '10',
label: '孙子女'
}, {
value: '11',
label: '侄子女'
}, {
value: '12',
label: '曾孙子女'
}, , {
value: '13',
label: '祖父母'
}, , {
value: '99',
label: '其他'
},
],
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
}
],
selected: 1,
options: [{
value: '1',
label: '高血压'
}, {
value: '2',
label: '高血糖'
}, {
value: '3',
label: '高血脂'
}, ],
arealist: [], //区街道list
list: [{
id: "",
localName: "请选择",
children: [],
}, ],
maskshow: false, //用户协议
getNurseTypelist: [], //护理类型数组
medicalcarelist: [], //医疗护理数组
address: '', //页面所属区域
query: { //信息请求数组
headPictureUrl: '',
couponId: null,
patientName: "",
cardNo: "",
phone: "",
address: "",
areaCode: "",
homeLongitude: '118.5816',
homeLatitude: '37.44875',
nurseTypeIdList: [],
diseaseInfoList: [],
patientId: '',
locationName: '东营',
sex: '',
sexname: '',
birthDate: '',
cityCode: '',
householdCardNo: '',
householdRelationship: '',
},
householdRelationship: '',
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: {
...mapMutations(['scoket']),
// 与户主关系
nationSelect(e) {
console.log(e)
this.query.householdRelationship = e[0].value
this.householdRelationship = e[0].label
// console.log(this.query.householdRelationship)
// this.$refs.uForm.validateField('nation')
},
onChange(e) {
this.selected = e
// console.log(e)
// this.allChecked = !this.allChecked;
// this.selected = e.detail.value;
},
// 下拉框多选
selectChange(val) {
console.log(val, '999');
},
cancel() {},
confirm(e) {
this.query.diseaseList = e.map(Number)
console.log(e, '打印e')
},
submit() {
var that = this
that.query.openid = uni.getStorageSync('openid');
that.query.cityCode = uni.getStorageSync('region');
if (that.query.sexname == '男') {
that.query.sex = 'MALE';
} else if (that.query.sexname == '女') {
that.query.sex = 'FEMALE';
}
if (that.selected == 1) {
that.$refs.uToast.show({
title: '请审核并同意用户协议',
type: 'error'
})
return
} else if (that.query.sex == "") {
that.$refs.uToast.show({
title: '请选择性别',
type: 'error'
})
return
} else if (!that.query.locationName) {
that.$refs.uToast.show({
title: '请选择所在位置',
type: 'error'
})
return
} else if (!that.query.birthDate) {
that.$refs.uToast.show({
title: '请选择出生日期',
type: 'error'
})
return
}
that.$refs.uForm.validate(valid => {
if (valid) {
if (that.addresslength) {
if (that.addresslength.length > 2) {
registerdata(that.query).then(res => {
if (res.code == 200) {
getCurrentUser(that.query.openid).then(res => {
uni.setStorageSync('patientId', res.data.id);
uni.setStorageSync('patientName', res.data
.patientName);
uni.setStorageSync("userinfo", res.data)
uni.setStorageSync("region", 2)
that.scoket();
that.$refs.uToast.show({
title: '注册成功',
type: 'success',
back: 1,
})
})
} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
})
} else {
that.$refs.uToast.show({
title: '所属区域应选择所在的区或街道,请重新选择!',
type: 'error'
})
}
}
}
});
},
//切换
changeRadio() {
if (this.selected == 1) {
this.selected = 2;
} else {
this.selected = 1;
}
},
// 性别
sexchange(e) {
if (e == '男') {
this.query.sex = 'MALE';
} else if (e == '女') {
this.query.sex = 'FEMALE';
}
},
// 人脸采集
Face() {
uni.navigateTo({
url: '/pagesB/facecollection/facecollection'
})
},
//性别
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;
},
fail(err) {
console.log(err)
}
});
},
//区街道
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) {},
tapradio() {
this.selected = 2;
this.maskshow = false;
},
},
//进入界面加载
onLoad(options) {
let that = this
// console.log(options, '00')
uni.$on('headPictureUrl', (res) => {
console.log(res, '99999')
this.query.headPictureUrl = res.tempImg
uni.$off('headPictureUrl')
// 为 B 页面传过来的值
})
// 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();
},
//带参返回
// 从地图选点插件返回后在页面的onShow生命周期函数中能够调用插件接口取得选点结果对象
onShow() {
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
}
this.query.phone = uni.getStorageSync("phone")
// 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;
// }
},
}
</script>
<style lang="scss">
.register {
padding-bottom: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
::v-deep .select-modal .select-dialog {
height: 370rpx !important;
}
.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 .u-radio.data-v-643b3322 {
padding-left: 32rpx;
padding-top: 7rpx;
}
::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 !important;
margin-left: 30rpx !important;
}
::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%);
}
}
.selectdata {
width: 636rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx auto;
border-radius: 5rpx;
display: flex;
position: relative;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
.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-content {
width: 100%;
height: 100rpx;
text-align: center;
margin: 0 auto;
display: flex;
align-items: center;
.agreement {
color: #333333;
width: 80%;
text-align: left;
padding-left: 20rpx;
}
.radio-right {
width: 20%;
.radio {
display: inline-block;
width: 30rpx;
height: 30rpx;
border-radius: 70%;
border: 2rpx solid #26A888;
position: relative;
float: right;
.radio-active {
width: 15rpx;
height: 15rpx;
border-radius: 50%;
background-color: #178ffb;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
.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: 100rpx;
// -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>