xinelu-applet-ui/pagesB/AddMembers/AddMembers.vue
2023-10-13 15:34:14 +08:00

789 lines
18 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">
<view class="name">
身份证号
<u-input @blur="inputBlur()" v-model="form.identity" placeholder="请输入身份证号" />
<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>
<view class="name">
姓名
<u-input v-model="value" placeholder="请输入姓名" />
</view>
<view class="name">
性别
<view class="sex">
<u-radio-group v-model="form.gender" 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>
<view class="name">
民族
<view class="select" @click="showNation = true;">
<text>请选择民族</text>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
</view>
<view class="name">
出生日期
<view class="select">
<text>请选择出生日期</text>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
</view>
<view class="name">
与户主的关系
<view class="select" @click="showRelationshipWithHouseholder = true;">
<text>请选择与户主的关系</text>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
</view>
<view class="name">
居住地址
<u-input v-model="form.address" placeholder="请输入居住地址" />
</view>
<view class="name">
手机号
<u-input v-model="form.phone" placeholder="请输入手机号" />
</view>
</view>
<u-select v-model="showNation" :list="actions" @confirm="nationSelect"></u-select>
<u-select v-model="showRelationshipWithHouseholder" :list="actions" @confirm="nationSelect"></u-select>
<view class="nextpage" @tap="gonextstep">
添加
</view>
</view>
</view>
</view>
</template>
<script>
// import {
// bindFamilyUser,
// getDictByType
// } from '@/service/api/api.js'
// import QQMapWX from '@/utils/qqMap/qqmap-wx-jssdk.js';
export default {
data() {
return {
sexlist: [{
name: '男',
disabled: false
},
{
name: '女',
disabled: false
}
],
mode: '',
newTime: '',
barTitle: '添加成员',
showBirthday: false,
showNation: false,
showRelationshipWithHouseholder: false,
// isShow: false,
loading: false,
// value1: '',
//校验性别 flag
ifSex: '',
form: {
identity: '',
residentName: '',
gender: '',
nation: '汉族',
address: '',
phone: '',
birthday: '',
relationshipWithHouseholder: '',
bindingCity: ''
},
relationshipWithHouseholder: '',
actions: [{
value: '1',
label: '汉族'
},
{
value: '2',
label: '少数名族'
}
],
radiolist: [{
name: '男',
disabled: false
},
{
name: '女',
disabled: false
}
],
rules: {
identity: [{
//必填
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'],
}],
residentName: [{
required: true,
message: '请输入姓名',
trigger: ['change', 'blur']
}],
gender: [{
min: 1,
required: true,
message: '请选择性别',
trigger: ['change']
}],
nation: [{
min: 1,
required: true,
message: '请选择民族',
trigger: ['blur', 'change']
}],
birthday: [{
min: 1,
required: true,
message: '请选择出生日期',
trigger: ['blur', 'change']
}],
// relationshipWithHouseholder: [{
// 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'],
}]
},
columns: [
['山东省'],
['德州市', '东营市', '济南市']
],
columnData: [
['德州市', '东营市', '济南市']
],
gxcolumn: [],
dictList: [],
address: uni.getStorageSync('location'),
addInfo: {
longitude: '', //经度
latitude: '', //纬度
},
}
},
onLoad(options) {
console.log(this.address, '546545454');
getDictByType('householderRelationship').then(res => {
this.dictList = res.data.data
console.log(res);
let arr = []
for (let i of res.data.data) {
arr.push(i.dictLabel)
}
this.gxcolumn.push(arr)
})
this.form.openid = uni.getStorageSync('openId')
if (uni.getStorageSync('location') == '德州市') {
this.form.bindingCity = '1'
} else if (uni.getStorageSync('location') == '东营市') {
this.form.bindingCity = '2'
} else if (uni.getStorageSync('location') == '济南市') {
this.form.bindingCity = '3'
}
console.log(this.form.bindingCity);
if (options.mode) {
this.mode = options.mode
this.barTitle = '授权登录'
} else {
return
}
this.qqmapsdk = new QQMapWX({
// 在腾讯平台自己申请的秘钥
key: 'Q4DBZ-UIMC2-B63UX-CUZ6A-S3UT7-TBF3V'
}),
this.getAddress(),
this.getLocal(),
//进入页面调用
this.getAtTime()
},
onShow() {
if (this.address != uni.getStorageSync('location')) {
uni.navigateBack({
delta: 1
})
}
this.address = uni.getStorageSync('location')
// console.log('aaaa',this.address);
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
onReady() {
// this.$refs.uForm.setRules(this.rules);
},
beforeDestroy() {
wx.exitMiniProgram({
success(e) {
console.log(e)
}
})
},
methods: {
// 注册
register() {
const _this = this
this.$refs.uForm.validate().then(res => {
if (this.form.gender == '男') {
this.form.gender = '1'
} else {
this.form.gender = '2'
}
if (this.form.gender) {
bindFamilyUser(_this.form).then(res => {
if (res.data.code == '0') {
uni.showModal({
title: '提示',
content: res.data.msg,
})
}
if (res.header.Authorization) {
uni.setStorageSync('token', res.header.Authorization)
}
if (res.data.msg == '请求成功') {
if (_this.mode == '注册') {
uni.setStorageSync('userInfo', res.data.data)
uni.showToast({
title: '注册成功',
duration: 1000
});
setTimeout(function() {
uni.switchTab({
url: '/pages/user/user'
})
}, 1000);
} else {
uni.showToast({
title: '添加成功',
duration: 1000
});
setTimeout(function() {
uni.navigateBack({
delta: 1
})
}, 1000);
}
}
})
} else {
uni.showToast({
title: "校验失败"
})
}
}).catch(errors => {
uni.showToast({
title: "校验失败"
})
})
if (this.ifSex == '') {
this.ifSex = true
}
},
back() {
uni.navigateBack({
delta: 1
})
},
changeGender(e) {
if (e == '男') {
this.form.gender = '1'
} else {
this.form.gender = '2'
}
},
nationSelect(e) {
this.form.nation = e.name
this.$refs.uForm.validateField('nation')
},
//点击出生日期按钮 获取当前时间戳 赋值data的newTime newTime传入 最大限制时间
getAtTime() {
const atNewdate = new Date().getTime();
this.newTime = atNewdate
},
//身份证 自动截取渲染出生日期
inputBlur(e) {
this.$refs.uForm.validateField('identity', (errorsRes) => {
if (errorsRes == '') {
const cutIdYear = e.substr(6, 4) //截取年
const cutIdMonth = e.substr(10, 2) //截取月
const cutIdDay = e.substr(12, 2) //截取日
const newCutId = cutIdYear + "-" + cutIdMonth + "-" + cutIdDay //拼接年月日 xxxx-xx-xx
this.form.birthday = newCutId
this.$refs.uForm.validateField('birthday') //单独校验 修复不实时校验的bug
// 渲染性别
let mySex = e.substr(16, 1)
console.log(mySex)
if (parseInt(mySex) % 2 === 1) {
this.form.gender = this.radiolist[0].name;
} else {
this.form.gender = this.radiolist[1].name;
}
console.log(mySex);
} else {
this.form.birthday = ''
}
})
},
//出生日期确定按钮
confirm(e) {
this.showBirthday = false //隐藏弹出层
const timeFormat = uni.$u.timeFormat //时间戳 → 年月日
const newDate = timeFormat(e.value, 'yyyy-mm-dd') //年月日格式
this.form.birthday = newDate //赋值
this.$refs.uForm.validateField('birthday') //单独校验
},
//出生日期取消按钮
cancel() {
this.showBirthday = false //隐藏弹出层
this.$refs.uForm.validateField('birthday') //单独校验
},
gxcancel() {
this.showRelationshipWithHouseholder = false
this.$refs.uForm.validateField('relationshipWithHouseholder')
},
gxconfirm(e) {
this.relationshipWithHouseholder = e.value[0]
this.form.relationshipWithHouseholder = this.dictList.find(item => item.dictLabel == e.value[0]).dictValue
this.showRelationshipWithHouseholder = false
this.$refs.uForm.validateField('relationshipWithHouseholder')
},
//校验性别按钮
radioChange(e) {
this.ifSex = e
// if(e == '男') {
// this.form.gender = '1'
// } else {
// this.form.gender = '2'
// }
},
//获取当前位置
getAddress() {
//vm === vue实例对象
let vm = this;
uni.getLocation({
type: 'wgs84',
//成功
success: (res) => {
// console.log(res);
vm.addInfo.latitude = res.latitude
vm.addInfo.longitude = res.longitude
//vm.getLocal Vue实例对象的方法
vm.getLocal(vm.addInfo.latitude, vm.addInfo.longitude)
},
//失败
fail: (res) => {
// console.log('fail' + JSON.stringify(res))
uni.showToast({
icon: 'none',
title: '获取地址失败,请打开定位',
})
}
})
},
getLocal(latitude, longitude) {
let vm = this
//调用qqmap里面的 reverseGeocoder 方法
vm.qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: (res) => {
// vm.address = res.result.ad_info.city
// uni.setStorageSync('location', res.result.ad_info.city)
// if (res.result.ad_info.city == '德州市') {
// this.form.bindingCity = '1'
// } else if (res.result.ad_info.city == '东营市') {
// this.form.bindingCity = '2'
// }
},
fail: (res) => {
// console.log(res)
}
})
},
// goLocation() {
// uni.navigateTo({
// url: '/pages/location/location'
// })
// },
//赋值定位
// FunConfirm(e) {
// console.log(e);
// this.isShow = false
// this.address = e.value[1]
// },
}
}
</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: 15rpx auto;
position: relative;
::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;
}
}
.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: 42%;
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%);
top: 4%;
}
.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: 87rpx;
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;
}
.select {
width: 636rpx;
height: 63rpx;
background: #F6F6F6;
margin: 12rpx auto;
border-radius: 5rpx;
display: flex;
position: relative;
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>