583 lines
16 KiB
Vue
583 lines
16 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="bg" v-if="isAddShow">
|
||
<image class="bg-img" src="/static/images/bind-child-bg.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="form-area">
|
||
<view class="form-inner">
|
||
<view class="form-item">
|
||
<view class="form-item-label">儿童姓名</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入孩子姓名" border="none" clearable v-model="children.username" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">儿童性别</view>
|
||
<view class="form-item-input" @click="childSexClick">
|
||
<u--input inputAlign="right" v-model="children.sex" placeholder="请选择孩子性别" border="none" clearable placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"
|
||
readonly></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">儿童出生年月</view>
|
||
<view class="form-item-input" @click="childDateClick">
|
||
<u--input inputAlign="right" v-model="children.birthday" placeholder="请选择孩子出生日期" border="none" clearable placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"
|
||
readonly></u--input>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="form-item">
|
||
<view class="form-item-label">儿童身份证号</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入18位身份证号" border="none" clearable v-model="children.idCard" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view> -->
|
||
<view class="form-item">
|
||
<view class="form-item-label">家长姓名</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入家长姓名" border="none" clearable v-model="children.parentName" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">手机号</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入家长手机号" border="none" clearable v-model="children.tel" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">与儿童关系</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入与孩子的关系" border="none" clearable v-model="children.relation" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-item-label">家庭住址</view>
|
||
<view class="form-item-input" @click="cityClick">
|
||
<u--input inputAlign="right" :value="cityName" border="none" placeholder="请选择省市县区" readonly placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"></u--input>
|
||
<!-- 城市选择 -->
|
||
<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @change="changeHandler" @cancel="cityShow = false"></u-picker>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">详细地址</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入详细地址" border="none" clearable v-model="children.address" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="form-item-label">所在学校(选填)</view>
|
||
<view class="form-item-input">
|
||
<u--input inputAlign="right" placeholder="请输入所在学校" border="none" clearable v-model="children.school" placeholderStyle="color:#8C8C8C;text-align:right;"
|
||
fontSize="24rpx"></u--input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="privacy-policy" v-if="isAddShow">
|
||
<view class="privacy-policy-checkbox">
|
||
<u-checkbox-group @change="checkboxChange" v-model="privacyPolicyChecked">
|
||
<u-checkbox activeColor="#FFA521" size="16" name="1"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="privacy-policy-text">
|
||
<text>同意运营商收集以上信息，</text>
|
||
<text class="privacy-policy-text-btn" @click="goPolicy">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn" @tap="userAddChildren" v-if="isAddShow">
|
||
提交申请
|
||
</view>
|
||
|
||
<view class="btn" style="margin-top:50rpx" @tap="userEditChildren" v-else>
|
||
保存信息
|
||
</view>
|
||
<u-picker :show="childSexShow" :columns="childSexColumns" @confirm="childSexConfirm" @cancel="childSexCancel" :defaultIndex="childSexDefaultIndex"></u-picker>
|
||
<u-datetime-picker :show="childDateShow" mode="date" @confirm="childDateConfirm" :maxDate="maxDate" :minDate="minDate" @cancel="childDateCancel"></u-datetime-picker>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import cityData from '@/util/city.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
children: {
|
||
"parentName": "",
|
||
"tel": "",
|
||
"username": "",
|
||
"sex": null,
|
||
"birthday": "",
|
||
"idCard": "",
|
||
"relation": "",
|
||
"address": "",
|
||
"state": "",
|
||
"city": "",
|
||
"district": "",
|
||
"school": ""
|
||
},
|
||
cityName: "",
|
||
|
||
// 城市选择器
|
||
cityShow: false,
|
||
// 打开选择器显示默认城市
|
||
cityList: [],
|
||
|
||
cityLevel1: [],
|
||
cityLevel2: [],
|
||
cityLevel3: [],
|
||
show: false, //是否显示
|
||
columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
|
||
columnData: [], //市数据
|
||
columnDatas: [], //区地址
|
||
privacyPolicyChecked: [],
|
||
childSexShow: false,
|
||
childSexColumns: [
|
||
['男', '女']
|
||
],
|
||
childSexDefaultIndex: [0],
|
||
childDate: "",
|
||
childDateShow: false,
|
||
maxDate: new Date((new Date().getFullYear()) + "/12/31").getTime(),
|
||
minDate: new Date("2000/1/1").getTime(),
|
||
isAddShow: true //新增时显示 修改时不显示
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.initCityData();
|
||
if (option.id) {
|
||
uni.setNavigationBarTitle({
|
||
title: '修改信息'
|
||
});
|
||
this.isAddShow = false;
|
||
this.children.id = option.id;
|
||
this.userChildrenById(option.id);
|
||
}
|
||
},
|
||
methods: {
|
||
goPolicy(){
|
||
uni.navigateTo({
|
||
url:"/loginPackage/pages/PrivacyPolicy"
|
||
})
|
||
},
|
||
//复选框
|
||
checkboxChange(e) {
|
||
// console.log(e);
|
||
console.log(this.privacyPolicyChecked);
|
||
},
|
||
childSexClick() {
|
||
this.childSexShow = true;
|
||
},
|
||
childSexConfirm(e) {
|
||
console.log('176',e)
|
||
this.children.sex = e.value[0];
|
||
this.childSexShow = false
|
||
},
|
||
childSexCancel() {
|
||
this.childSexShow = false
|
||
},
|
||
|
||
childDateClick() {
|
||
this.childDateShow = true;
|
||
},
|
||
childDateCancel() {
|
||
this.childDateShow = false;
|
||
},
|
||
childDateConfirm(date) {
|
||
this.children.birthday = uni.$u.timeFormat(date.value, 'yyyy-mm-dd');
|
||
this.childDateShow = false;
|
||
},
|
||
cityClick() {
|
||
console.log(342);
|
||
this.cityShow = true
|
||
},
|
||
// 城市选择器
|
||
initCityData() {
|
||
// 遍历城市js
|
||
cityData.forEach((item1, index1) => {
|
||
let temp2 = [];
|
||
this.cityLevel1.push(item1.provinceName);
|
||
let temp4 = [];
|
||
let temp3 = [];
|
||
// 遍历市
|
||
item1.cities.forEach((item2, index2) => {
|
||
temp2.push(item2.cityName);
|
||
// 遍历区
|
||
item2.counties.forEach((item3, index3) => {
|
||
temp3.push(item3.countyName);
|
||
})
|
||
temp4[index2] = temp3;
|
||
temp3 = [];
|
||
})
|
||
this.cityLevel3[index1] = temp4;
|
||
this.cityLevel2[index1] = temp2;
|
||
})
|
||
// 选择器默认城市
|
||
this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
|
||
},
|
||
// 选中时执行
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
index,
|
||
indexs,
|
||
value,
|
||
values,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker
|
||
} = e;
|
||
if (columnIndex === 0) { // 选择第一列数据时
|
||
// 设置第二列关联数据
|
||
picker.setColumnValues(1, this.cityLevel2[index]);
|
||
// 设置第三列关联数据
|
||
picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
|
||
} else if (columnIndex === 1) { // 选择第二列数据时
|
||
// 设置第三列关联数据
|
||
picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
|
||
}
|
||
},
|
||
|
||
// 单击确认按钮时执行
|
||
cityConfirm(e) {
|
||
// 输出数组 [省, 市, 区]
|
||
console.log(e.value);
|
||
this.cityName = e.value.join("-");
|
||
this.children.state = e.value[0];
|
||
this.children.city = e.value[1];
|
||
this.children.district = e.value[2];
|
||
// 隐藏城市选择器
|
||
this.cityShow = false;
|
||
},
|
||
|
||
|
||
addressClick() {
|
||
this.show = true
|
||
},
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
confirm(e) {
|
||
console.log(e.value);
|
||
this.children.state = e.value[0].name
|
||
this.children.city = e.value[1].name
|
||
this.children.district = e.value[2].name
|
||
this.cancel()
|
||
},
|
||
// 添加儿童信息
|
||
async userAddChildren() {
|
||
if (uni.$u.test.isEmpty(this.privacyPolicyChecked.length)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请查看隐私政策",
|
||
complete() {
|
||
// params.url && uni.navigateTo({
|
||
// url: params.url
|
||
// })
|
||
}
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.username)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写儿童姓名",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.sex)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择儿童性别",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.birthday)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择出生日期",
|
||
})
|
||
return
|
||
}
|
||
// if (uni.$u.test.isEmpty(this.children.idCard)) {
|
||
// this.$refs.uToast.show({
|
||
// type: 'error',
|
||
// message: "请填写身份证号码",
|
||
// })
|
||
// return
|
||
// }
|
||
// if (!uni.$u.test.idCard(this.children.idCard)) {
|
||
// this.$refs.uToast.show({
|
||
// type: 'error',
|
||
// message: "身份证号码不正确",
|
||
// })
|
||
// return
|
||
// }
|
||
if (uni.$u.test.isEmpty(this.children.parentName)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写家长姓名",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.tel)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写家长手机号",
|
||
})
|
||
return
|
||
}
|
||
if (!uni.$u.test.mobile(this.children.tel)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "家长手机号填写不正确",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.relation)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写与儿童关系",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.state) || uni.$u.test.isEmpty(this.children.city) || uni.$u.test
|
||
.isEmpty(this.children.district)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择省市县",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.address)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写详细地址",
|
||
})
|
||
return
|
||
}
|
||
|
||
const res = await this.$myRequest({
|
||
url: '/system/children/userAddChildren',
|
||
method: 'POST',
|
||
data: this.children
|
||
})
|
||
if (res.data.code == 200) {
|
||
this.$refs.uToast.show({
|
||
type: 'success',
|
||
message: res.data.msg,
|
||
complete() {
|
||
uni.switchTab({
|
||
url: '/pages/tabbar/mine/Mine'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
async userChildrenById(id) {
|
||
const res = await this.$myRequest({
|
||
url: '/system/children/userChildrenById/' + id,
|
||
method: 'GET'
|
||
})
|
||
console.log(res)
|
||
this.children = res.data.data
|
||
this.cityName = res.data.data.state + '-' + res.data.data.city + '-' + res.data.data.district;
|
||
|
||
},
|
||
// 添加儿童信息
|
||
async userEditChildren() {
|
||
if (uni.$u.test.isEmpty(this.children.username)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写儿童姓名",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.sex)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择儿童性别",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.birthday)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择出生日期",
|
||
})
|
||
return
|
||
}
|
||
// if (uni.$u.test.isEmpty(this.children.idCard)) {
|
||
// this.$refs.uToast.show({
|
||
// type: 'error',
|
||
// message: "请填写身份证号码",
|
||
// })
|
||
// return
|
||
// }
|
||
// if (!uni.$u.test.idCard(this.children.idCard)) {
|
||
// this.$refs.uToast.show({
|
||
// type: 'error',
|
||
// message: "身份证号码不正确",
|
||
// })
|
||
// return
|
||
// }
|
||
if (uni.$u.test.isEmpty(this.children.parentName)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写家长姓名",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.tel)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写家长手机号",
|
||
})
|
||
return
|
||
}
|
||
if (!uni.$u.test.mobile(this.children.tel)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "家长手机号填写不正确",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.relation)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写与儿童关系",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.state) || uni.$u.test.isEmpty(this.children.city) || uni.$u.test
|
||
.isEmpty(this.children.district)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请选择省市县",
|
||
})
|
||
return
|
||
}
|
||
if (uni.$u.test.isEmpty(this.children.address)) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
message: "请填写详细地址",
|
||
})
|
||
return
|
||
}
|
||
|
||
const res = await this.$myRequest({
|
||
url: '/system/children/userEditChildren',
|
||
method: 'PUT',
|
||
data: this.children
|
||
})
|
||
if (res.data.code == 200) {
|
||
this.$refs.uToast.show({
|
||
type: 'success',
|
||
message: res.data.msg,
|
||
complete() {
|
||
uni.switchTab({
|
||
url: '/pages/tabbar/mine/Mine'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
page {
|
||
background-color: #287BCE;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
|
||
.bg {
|
||
width: 100%;
|
||
|
||
.bg-img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.form-area {
|
||
width: 100%;
|
||
|
||
.form-inner {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.form-item {
|
||
width: 95%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 2rpx #EEEEF0 solid;
|
||
|
||
.form-item-label {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #101010;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.form-item-input {
|
||
width: 350rpx;
|
||
height: 50rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.privacy-policy {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.privacy-policy-checkbox {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.privacy-policy-text {
|
||
margin-left: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
|
||
.privacy-policy-text-btn {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.btn {
|
||
width: 80%;
|
||
margin: 0 auto 30rpx;
|
||
padding: 30rpx 0;
|
||
text-align: center;
|
||
background-color: #FFA521;
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
</style> |