xinelu-applet-ui/pagesB/AddMembers/AddMembers.vue
2024-05-08 10:14:53 +08:00

1133 lines
24 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="app">
<view class="content">
<view class="text_title">
<text>家庭医生想要你授权信息</text>
</view>
<view class="text_con">
<view class="text_con_pic">
<image src="@/static/pagesB/shflt.png" mode=""></image>
</view>
<view class="text_con_right">
信息仅用于授权您的资料将被严格保密
</view>
</view>
<view class="contentbottom">
<u-form :model="form" ref="uForm">
<u-form-item prop="cardNo" :border-bottom="false">
<view class="name">
身份证号
<u-input v-model="form.cardNo" placeholder="请输入身份证号" @blur="searchfun_close" />
<view class="idScan">
<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
<image style="width: 28rpx;height: 28rpx;" src="@/static/pagesB/sweep.png" mode="">
</image>
</view>
</view>
</u-form-item>
<u-form-item prop="patientName" :border-bottom="false">
<view class="name">
姓名
<u-input v-model="form.patientName" placeholder="请输入姓名" />
</view>
</u-form-item>
<u-form-item prop="sexname" :border-bottom="false">
<view class="name">
性别
<view class="sex">
<u-radio-group v-model="form.sexname" size='30'>
<u-radio @change='changeGender' 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>
</u-form-item>
<u-form-item prop="nation" :border-bottom="false">
<view class="name">
民族
<view class="select" @click="showNation = true;">
<text v-if="!nation">请选择民族</text>
<!-- <text v-if="!householdRelationship">请选择与户主关系</text> -->
<text v-else class="testitem">{{nation}}</text>
<image src="@/static/huijiantou.png" mode=""></image>
</view>
</view>
</u-form-item>
<u-form-item prop="birthDate" :border-bottom="false">
<view class="name">
出生日期
<view class="select" @tap='timeshow=true'>
<text v-if="form.birthDate==''">请选择出生日期</text>
<text v-else class="testitem">{{form.birthDate}}</text>
<image src="@/static/huijiantou.png" mode=""></image>
</view>
</view>
</u-form-item>
<u-form-item prop="householdRelationship" :border-bottom="false">
<view class="name">
与户主的关系
<view class="select" @click="showRelationshipWithHouseholder = true;">
<text v-if="!householdRelationship">请选择与户主关系</text>
<text v-else class="testitem">{{householdRelationship}}</text>
</view>
</view>
</u-form-item>
<u-form-item prop="" :border-bottom="false">
<view class="name">
户主身份证号
<u-input v-model="form.householdCardNo" placeholder="请输入身份证号" />
</view>
</u-form-item>
<u-form-item prop="address" :border-bottom="false">
<view class="name">
居住地址
<u-input v-model="form.address" placeholder="请输入居住地址" />
</view>
</u-form-item>
<view class="name">
所属区域
<view class="select" @tap='showPicker'>
<text v-if="!addressinfo">请选择所属区域</text>
<text v-else class="testitem"
style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{addressinfo}}</text>
<!-- <image src="@/static/huijiantou.png" mode=""></image> -->
</view>
</view>
<view class="name">
所在位置
<view class="selectdata" @tap='getAddress'>
<text v-if="form.locationName ==''">请选择所在位置</text>
<text class="testitem">{{form.locationName}}</text>
</view>
</view>
<u-form-item prop="phone" :border-bottom="false">
<view class="name">
手机号
<u-input v-model="form.phone" placeholder="请输入手机号" />
</view>
</u-form-item>
</u-form>
</view>
<u-toast ref="uToast" />
<view class="nextpage" @tap="register">
添加
</view>
<!-- 民族 -->
<u-select v-model="showNation" :list="actions" @confirm="nationSelect"></u-select>
<!-- 与户主关系 -->
<u-select v-model="showRelationshipWithHouseholder" :list="relationship"
@confirm="relationshipSelect"></u-select>
<!-- 出生日期 -->
<u-picker mode="time" v-model="timeshow" :params="params" @confirm='timechange' @canel='timeshow=false'
start-year='1900'>
</u-picker>
<view class="">
<m-city style='z-index: 10076;' :provinceData="list" headTitle="地区选择" ref="cityPicker"
@funcValue="getpickerParentValue" pickerSize="3">
</m-city>
</view>
</view>
</view>
</template>
<script>
import {
registerdata
} from '@/api/pages/register/register.js'
import gkcity from "@/components/m-city/m-city.vue";
import ldSelect from '../../components/ld-select/ld-select.vue';
import {
getSubordinateRegions,
} from '@/api/pagesB/modifyAddress/modifyAddress.js';
import {
detail,
} from '@/api/pages/homepage/homepage.js'
import {
getSex,
getBirthday
} from '@/api/conversion.js'
export default {
components: {
ldSelect,
"m-city": gkcity,
},
data() {
return {
addresslength: null,
addressinfo: '',
sexlist: [{
name: '男',
disabled: false
},
{
name: '女',
disabled: false
}
],
timeshow: false, //出生日期
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
mode: '',
newTime: '',
barTitle: '添加成员',
showBirthday: false,
showNation: false,
showRelationshipWithHouseholder: false,
// isShow: false,
loading: false,
// value1: '',
//校验性别 flag
ifSex: '',
form: {
cardNo: '',
patientName: '',
sexname: '',
sex: '',
nation: '',
address: '',
phone: '',
birthDate: '',
householdRelationship: '',
locationName: '',
homeLongitude: '',
homeLatitude: '',
areaCode: '',
},
householdRelationship: '',
userinfo: {},
nation: '',
actions: [{
label: "汉族",
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: "14",
},
{
label: "土家族",
value: '15',
},
{
label: "哈尼族",
value: '16',
},
{
label: "哈萨克族",
value: '17',
},
{
label: "傣族",
value: '18',
},
{
label: "黎族",
value: '19',
},
{
label: "傈僳族",
value: '20',
},
{
label: "佤族",
value: '21',
},
{
label: "畲族",
value: '22',
},
{
label: "高山族",
value: '23',
},
{
label: "拉祜族",
value: '24',
},
{
label: "水族",
value: '25',
},
{
label: "东乡族",
value: '26',
},
{
label: "纳西族",
value: '27',
},
{
label: "景颇族",
value: '28',
},
{
label: "柯尔克孜族",
value: '29',
},
{
label: "土族",
value: '30',
},
{
label: "达斡尔族",
value: '31',
},
{
label: "仫佬族",
value: '32',
},
{
label: "羌族",
value: '33'
},
{
label: "布朗族",
value: '34',
},
{
label: "撒拉族",
value: '35',
},
{
label: "毛难族",
value: '36',
},
{
label: "仡佬族",
value: '37',
},
{
label: "锡伯族",
value: '38',
},
{
label: "阿昌族",
value: '39',
},
{
label: "普米族",
value: '40',
},
{
label: "塔吉克族",
value: '41',
},
{
label: "怒族",
value: '42',
},
{
label: "乌孜别克族",
value: '43',
},
{
label: "俄罗斯族",
value: '44',
},
{
label: "鄂温克族",
value: '45',
},
{
label: "德昂族",
value: '46',
},
{
label: "保安族",
value: '47',
},
{
label: "裕固族",
value: '48',
},
{
label: "京族",
value: '49',
},
{
label: "塔塔尔族",
value: '50',
},
{
label: "独龙族",
value: '51',
},
{
label: "鄂伦春族",
value: '52',
},
{
label: "赫哲族",
value: '53',
},
{
label: "门巴族",
value: '54',
},
{
label: "珞巴族",
value: '55',
},
{
label: "基诺族",
value: '56',
},
],
relationship: [{
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: '其他'
},
],
radiolist: [{
name: '男',
disabled: false
},
{
name: '女',
disabled: false
}
],
list: [{
id: "",
localName: "请选择",
children: [],
}, ],
rules: {
cardNo: [{
//必填
required: true,
message: '请输入身份证号',
trigger: ['change', 'blur'],
}, {
// 自定义验证函数,见上说明
validator: (rule, value, callback) => {
// 上面有说返回true表示校验通过返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.idCard(value);
},
message: '请输入正确的身份证号',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}],
patientName: [{
required: true,
message: '请输入姓名',
trigger: ['change', 'blur']
}],
sexname: [{
min: 1,
required: true,
message: '请选择性别',
trigger: ['change']
}],
nation: [{
min: 1,
required: true,
message: '请选择民族',
trigger: ['blur', 'change']
}],
birthDate: [{
min: 1,
required: true,
message: '请选择出生日期',
trigger: ['blur', 'change']
}],
householdRelationship: [{
min: 1,
required: true,
message: '请选择与户主关系',
trigger: ['blur', 'change']
}],
address: [{
required: true,
message: '请输入居住地址',
trigger: ['change', 'blur']
}],
phone: [{
// type: 'number',
// len: 13,
required: true,
message: '请输入正确手机号',
trigger: ['change', 'blur']
}, {
// 自定义验证函数,见上说明
validator: (rule, value, callback) => {
// 上面有说返回true表示校验通过返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}]
},
address: uni.getStorageSync('location'),
addInfo: {
longitude: '', //经度
latitude: '', //纬度
},
}
},
onLoad(options) {
this.form.openid = uni.getStorageSync('openid')
this.areaInfo()
},
onShow() {
if (this.address != uni.getStorageSync('location')) {
uni.navigateBack({
delta: 1
})
}
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
},
beforeDestroy() {
wx.exitMiniProgram({
success(e) {
console.log(e)
}
})
},
methods: {
searchfun_close() {
const idCardReg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
if (!idCardReg.test(this.form.cardNo)) {} else {
// 身份证号码合法
detail(this.form.cardNo).then(res => {
if (res.code == 200 && res.data) {
this.actions.forEach(e => {
if (e.value == res.data.nation) {
this.nation = e.label
}
})
this.relationship.forEach(e => {
if (e.value == res.data.relationshipWithHouseholder) {
this.householdRelationship = e.label
}
})
let gender = res.data.gender == '2' ? '女' : res.data.gender == '1' ? '男' : ''
this.form = {
cardNo: this.form.cardNo,
patientName: res.data.residentName,
sexname: gender,
sex: '',
nation: res.data.nation,
address: res.data.address,
phone: res.data.phone,
birthDate: res.data.birthday,
householdRelationship: res.data.relationshipWithHouseholder,
locationName: '',
homeLongitude: '',
homeLatitude: '',
areaCode: '',
}
} else {
let sex = getSex(this.form.cardNo)
this.form.sexname = sex
this.form.birthDate = getBirthday(this.form.cardNo)
}
})
}
},
//获取所在位置
getAddress() {
var that = this;
uni.chooseLocation({
success: function(location) {
that.form.locationName = location.address
that.form.homeLongitude = location.longitude;
that.form.homeLatitude = location.latitude;
},
fail(err) {
console.log(err)
}
});
},
// 显示三级地址联动
showPicker() {
this.$refs.cityPicker.show();
},
// 三级地址联动回调
getpickerParentValue(e) {
e = e.filter(ele => ele.localName != '暂不选择')
e = e.filter(ele => ele.localName != '暂无需选择')
this.addresslength = e
this.addressinfo = ''
this.form.areaCode = ''
if (e && e.length >= 1) {
e.forEach(el => {
this.addressinfo = this.addressinfo + el.localName
})
this.form.areaCode = e[e.length - 1].id
} else {
this.addressinfo = ''
this.form.areaCode = ''
}
},
//区街道
areaInfo() {
// getSubordinateRegions().then(res => {
// this.list = res.data;
// })
this.list = [{
areaCode: "370500000000",
areaLevel: 2,
areaName: "东营市",
id: 255903,
parentId: 188870,
}, {
areaCode: "371400000000",
areaLevel: 2,
areaName: "德州市",
id: 398888,
parentId: 188870,
}]
},
//选择出生日期
timechange(e) {
this.form.birthDate = e.year + '-' + e.month + '-' + e.day
},
// 添加
register() {
const that = this
that.userinfo = uni.getStorageSync('userinfo');
that.form.openid = uni.getStorageSync('openid');
that.form.cityCode = uni.getStorageSync('region');
console.log(that.form.cityCode, 'that.form.cityCode')
if (that.form.cityCode == "") {
that.form.cityCode = 2
}
if (that.form.sexname == '男') {
that.form.sex = 'MALE';
} else if (that.form.sexname == '女') {
that.form.sex = 'FEMALE';
}
console.log(that.form)
if (that.form.sex == "") {
that.$refs.uToast.show({
title: '请选择性别',
type: 'error'
})
}
if (that.form.areaCode == "") {
that.$refs.uToast.show({
title: '请选择所属区域',
type: 'error'
})
}
that.$refs.uForm.validate(valid => {
if (valid) {
if (that.addresslength) {
if (that.addresslength.length > 2) {
registerdata(that.form).then(res => {
if (res.code == 500) {
that.$refs.uToast.show({
title: res.msg,
type: 'error'
})
} else {
that.$refs.uToast.show({
title: '添加成功',
type: 'success'
})
uni.navigateBack({
delta: 1
})
// this.back()
}
})
} else {
that.$refs.uToast.show({
title: '所属区域应选择所在的区或街道,请重新选择!',
type: 'error'
})
}
}
}
});
},
back() {
uni.navigateBack({
delta: 1
})
},
changeGender(e) {
if (e == '男') {
this.form.sex = 'MALE';
} else if (e == '女') {
this.form.sex = 'FEMALE';
}
},
// 民族
nationSelect(e) {
this.form.nation = e[0].value
this.nation = e[0].label
},
// 与户主关系
relationshipSelect(e) {
this.form.householdRelationship = e[0].value
this.householdRelationship = e[0].label
},
}
}
</script>
<style lang="scss">
.app {
height: 100vh;
background-color: #F7F5F5;
padding: 30rpx 0 0 0;
.content {
width: 95%;
height: 100%;
overflow: scroll;
background: #FFFFFF;
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 5rpx;
margin: 0 auto;
position: relative;
::v-deep .u-input {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
color: #8E8E8E;
// border: 1rpx solid red;
// margin: 12rpx auto;
border: none !important;
border-radius: 5rpx;
.u-input__input {
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000 !important;
padding-left: 20rpx;
}
}
.u-form-item {
padding: 0 0 !important;
}
.text_title {
// width: 358rpx;
height: 29rpx;
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 42rpx;
margin: 40rpx 30rpx 0 7%;
}
.text_con {
display: flex;
// align-items: center;
// justify-content: center;
//
width: 47%;
margin: 23rpx 30rpx 0 55rpx;
color: rgb(23, 20, 22);
border-radius: 16rpx;
background: #E9F6F3;
border-radius: 2rpx;
.text_con_pic {
margin-right: 10rpx;
margin-left: 9rpx;
image {
width: 14rpx;
height: 18rpx;
}
}
.text_con_right {
// width: 251rpx;
// height: 15rpx;
font-size: 14rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 42rpx;
}
}
.nextpage {
width: 496rpx;
height: 61rpx;
background: #26A888;
border-radius: 5rpx;
line-height: 61rpx;
color: white;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 100rpx;
bottom: 27rpx;
}
.contentbottom {
position: relative;
top: 2%;
}
.name {
padding: 10rpx 30rpx 0 7%;
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 38rpx;
::v-deep .input-placeholder {
color: #8E8E8E !important;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
padding-left: 20rpx;
}
.idScan {
position: absolute;
top: 75rpx;
right: 60rpx;
// transform: translate(0%, -40%);
}
.sex {
width: 630rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx 0 12rpx 0;
border: none;
border-radius: 5rpx;
}
::v-deep .u-radio {
margin-top: 8rpx !important;
margin-left: 20rpx !important;
}
::v-deep .u-input {
width: 636rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx auto;
border: none;
border-radius: 5rpx;
}
// ::v-deep.uni-input-placeholder {
// color: #8E8E8E !important;
// font-size: 20rpx !important;
// }
::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;
}
::v-deep .u-input__input.data-v-fdbb9fe6 {
font-size: 26rpx !important;
}
// ::v-deep.input-placeholder {
// color: #8E8E8E !important;
// font-size: 20rpx !important;
// }
::v-deep .uni-input-input {
padding-left: 20rpx !important;
}
// .selectdata{
// }
.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%);
}
}
.select {
width: 636rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx auto;
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%);
}
}
}
.numberone {
width: 90rpx;
height: 90rpx;
position: absolute;
top: 6%;
left: 15%;
background: #26A888;
border-radius: 50%;
color: #fff;
line-height: 90rpx;
text-align: center;
font-size: 50rpx;
font-family: Source Han Sans CN;
font-weight: bold;
.information {
width: 160rpx;
margin: 11px 4px 4px -10px;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #26A888;
line-height: 38rpx;
}
}
.number {
.numbertwo:hover {
background-color: #26A888;
color: #fff;
}
.information:hover {
color: #26A888;
}
}
// ::v-deep .uni-input-input {
// left: 20rpx;
// }
.number {
width: 180rpx;
height: 150rpx;
position: absolute;
top: 6%;
left: 65%;
.numbertwo {
width: 90rpx;
height: 90rpx;
left: 50%;
transform: translateX(50%);
background: #F0F1F6;
border-radius: 50%;
line-height: 90rpx;
text-align: center;
font-size: 50rpx;
font-family: Source Han Sans CN;
font-weight: bold;
// border: 1rpx solid #A6C8C0;
color: #A6C8C0;
}
.information {
padding-top: 20rpx;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8E8E8E;
line-height: 38rpx;
text-align: center;
}
}
.item {
position: absolute;
width: 202rpx;
height: 1rpx;
top: 10%;
left: 34%;
background: linear-gradient(-90deg, #E6E6E6, #26A888);
}
}
}
</style>