641 lines
19 KiB
Vue
641 lines
19 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="top">
|
|
<view class="base">
|
|
<view class="white">
|
|
<view class="base-title">
|
|
<view class="base-name">
|
|
基本信息
|
|
</view>
|
|
<view class="base-number">
|
|
<!-- 6/12 -->
|
|
</view>
|
|
</view>
|
|
<view class="base-list">
|
|
<view class="base-block">
|
|
<view class="base-block-name">
|
|
<text>*</text>姓名
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.name}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block">
|
|
<view class="base-block-name">
|
|
<text>*</text>性别
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.sex}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block">
|
|
<view class="base-block-name">
|
|
<text>*</text>年龄
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.age}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block">
|
|
<view class="base-block-name">
|
|
<text>*</text>属相
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.zodiak}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-name">
|
|
<text>*</text>身份证号
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.id_card}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-name">
|
|
<text>*</text>身份证地址
|
|
</view>
|
|
<view class="base-block-write prohibit">
|
|
{{baseData.address}}
|
|
</view>
|
|
</view>
|
|
<view class="base-block">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>婚姻 <image v-if="baseData.check_params.marriage" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.marriage.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-write">
|
|
<picker class="idcardAdd-picker" @change="marriageChange($event)" :range="marriage">
|
|
<view class="uni-input">{{marriage[marriageIndex]}}</view>
|
|
</picker>
|
|
<image src="/static/imgs/basic_down.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="base-block" v-if="marriageIndex == 1">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>配偶 <image v-if="baseData.check_params.mate" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.mate.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-write">
|
|
<input class="base-block-input" :value="mate" maxlength="4" type="text" placeholder="请输入配偶姓名" placeholder-class="placeholderClass" @input="blurInput($event, 'mate')"/>
|
|
</view>
|
|
</view>
|
|
<view class="base-block" :class="{baseAline : marriageIndex == 1}">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>学历 <image v-if="baseData.check_params.education" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.education.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-write">
|
|
<picker class="idcardAdd-picker" @change="educationChange($event)" :range="education">
|
|
<view class="uni-input">{{education[educationIndex]}}</view>
|
|
</picker>
|
|
<image src="/static/imgs/basic_down.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>毕业学院 <image v-if="baseData.check_params.school" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.school.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-write">
|
|
<input class="base-block-input" type="text" :value="school" placeholder="请输入毕业学院" placeholder-class="placeholderClass" @input="blurInput($event, 'school')"/>
|
|
</view>
|
|
</view>
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>联系电话 <image v-if="baseData.check_params.mobile" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.mobile.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-write">
|
|
<input class="base-block-input" maxlength="11" :value="mobile" type="tel" placeholder="请输入联系电话" placeholder-class="placeholderClass" @input="blurInput($event, 'mobile')"/>
|
|
</view>
|
|
</view>
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>联系地址
|
|
</view>
|
|
<view class="base-block-write from-city-picker">
|
|
<uni-data-picker
|
|
:localdata="cityPicker"
|
|
:border="false"
|
|
split="-"
|
|
placeholder="选择城市"
|
|
v-model="baseData.district_id"
|
|
@change="onCityPicker"
|
|
></uni-data-picker>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="base-block baseAline">
|
|
<view class="base-block-name" v-if="baseData.check_params">
|
|
<text>*</text>联系地址 <image v-if="baseData.check_params.contact_address" class="base-notesIcon" @click="seeTips('驳回原因', baseData.check_params.contact_address.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="base-block-site">
|
|
<view class="base-site-white">
|
|
<picker @change="areasChange" :value="area.areaIndex" :range="area.areasArr" :range-key="'name'">
|
|
<view class="nowrap picker" v-if="area.areasArr[area.areaIndex]">
|
|
{{ area.areasArr[area.areaIndex].name }}
|
|
</view>
|
|
<image src="/static/imgs/basic_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
<view class="base-site-white">
|
|
<picker @change="cityDrop" :value="city.cityIndex" :range="city.cityArr" :range-key="'name'" class="conneColor">
|
|
<view class="nowrap picker" v-if="city.cityArr[city.cityIndex]">
|
|
{{ city.cityArr[city.cityIndex].name }}
|
|
</view>
|
|
<image src="/static/imgs/basic_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
<view class="base-site-white">
|
|
<picker @change="regiDrop" :value="regi.regiIndex" :range="regi.regiArr" :range-key="'name'" class="conneColor">
|
|
<view class="nowrap picker" v-if="regi.regiArr[regi.regiIndex]">
|
|
{{ regi.regiArr[regi.regiIndex].name }}
|
|
</view>
|
|
<image src="/static/imgs/basic_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-textarea">
|
|
<textarea placeholder-style="color:#999999; font-size: 30rpx" maxlength="500" :value="address" @input="blurInput($event, 'address')" placeholder="请填写详细地址..."/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="introduce-btn">
|
|
<button class="btn" size="mini" :disabled="disabled" @click="infoSubmit">提交审核</button>
|
|
</view>
|
|
|
|
<!-- 驳回提示 -->
|
|
<mouldTips :see-data="seeData" @tipsClose="($event) => {seeData.seeShow = $event}"></mouldTips>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';
|
|
import mouldTips from '@/components/mould-tips.vue'
|
|
import { BaseFirst, userBase, basePut, create, createAll } from '@/apis/interfaces/user'
|
|
export default {
|
|
components: {
|
|
mouldTips
|
|
},
|
|
data() {
|
|
return {
|
|
disabled: false, // 按钮状态
|
|
baseData: '', // 基础信息
|
|
mobile : '', // 联系方式
|
|
mate : '', // 配偶名称
|
|
school : '', // 毕业学院
|
|
address : '', // 联系地址
|
|
|
|
// 查看提示组件
|
|
seeData : {
|
|
seeShow : false,
|
|
seeTitle: '',
|
|
seeText : '',
|
|
},
|
|
|
|
marriage: [],
|
|
marriageIndex : 0, // 婚姻选择index
|
|
|
|
education: [],
|
|
educationIndex: 0, // 学历选择index
|
|
|
|
cityPicker : [],
|
|
|
|
// 省份选择
|
|
area: {
|
|
areasArr : [],
|
|
areaId : '',
|
|
areaIndex : 0,
|
|
areaName : ''
|
|
},
|
|
|
|
// 市级选择
|
|
city: {
|
|
cityArr : [],
|
|
cityId : '',
|
|
cityIndex : 0,
|
|
cityName : ''
|
|
},
|
|
|
|
// 区域选择
|
|
regi: {
|
|
regiArr : [],
|
|
regiId : '',
|
|
regiIndex : 0,
|
|
regiName : ''
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 先获取是否添加过信息
|
|
// this.baseFirst();
|
|
|
|
// 获取基础信息
|
|
this.baseInfo();
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
createAll().then(res => {
|
|
this.cityPicker = res;
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 首次信息
|
|
baseFirst() {
|
|
BaseFirst(this.$Route.query.id).then(res => {
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 基础信息
|
|
baseInfo() {
|
|
userBase(this.$Route.query.id).then(res => {
|
|
// let areasValue = res.province.findIndex(val=> val.id == res.base.province_id),
|
|
// cityValue = res.city.findIndex(val=> val.id == res.base.city_id),
|
|
// regiValue = res.district.findIndex(val=> val.id == res.base.district_id)
|
|
|
|
// 当编辑资料后
|
|
// this.area.areaIndex = areasValue > 0 ? areasValue : 0
|
|
// this.city.cityIndex = cityValue > 0 ? cityValue : 0
|
|
// this.regi.regiIndex = regiValue > 0 ? regiValue : 0
|
|
this.baseData = res.base
|
|
this.education = res.base.educations
|
|
this.marriage = res.base.marriages
|
|
|
|
this.mobile = res.base.mobile || '' // 联系方式
|
|
this.mate = res.base.mate || '' // 配偶名称
|
|
this.school = res.base.school || '' // 毕业学院
|
|
this.address = res.base.tmp_address || '' // 联系地址
|
|
this.marriageIndex = res.base.marriage // 婚姻选择index
|
|
this.educationIndex = res.base.education // 婚姻选择index
|
|
|
|
// 获取省市区列表
|
|
// this.createInfo();
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 婚姻选择
|
|
marriageChange(e) {
|
|
this.marriageIndex = e.detail.value
|
|
},
|
|
|
|
// 学历选择
|
|
educationChange(e) {
|
|
this.educationIndex = e.detail.value
|
|
},
|
|
|
|
// 输入框
|
|
blurInput(e, name) {
|
|
let value = e.detail.value
|
|
switch(name)
|
|
{
|
|
case 'mobile':{
|
|
this.mobile = value
|
|
break;
|
|
}
|
|
case 'mate':{
|
|
this.mate = value
|
|
break;
|
|
}
|
|
case 'school':{
|
|
this.school = value
|
|
break;
|
|
}
|
|
case 'address':{
|
|
this.address = value
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
// 选择城市
|
|
onCityPicker(e){
|
|
let { value } = e.detail
|
|
this.baseData.district_id = value[0].value
|
|
this.baseData.city_id = value[1].value
|
|
this.baseData.province_id = value[2].value
|
|
},
|
|
|
|
// 修改基础信息 - 提交
|
|
infoSubmit() {
|
|
let data = {
|
|
mobile : this.mobile, //联系方式
|
|
mate : this.mate, //配偶姓名
|
|
school : this.school, //毕业学院
|
|
tmp_address : this.address,
|
|
province_id : this.baseData.district_id,
|
|
city_id : this.baseData.city_id,
|
|
district_id : this.baseData.province_id,
|
|
education : this.educationIndex, //学历
|
|
marriage : this.marriageIndex //婚姻状态
|
|
}
|
|
basePut(this.baseData.business_order_user_id,data).then(res=>{
|
|
this.disabled = true
|
|
uni.showToast({
|
|
title: res,
|
|
icon: "none"
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateBack(1)
|
|
uni.hideLoading()
|
|
}, 1500)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 省市区列表
|
|
createInfo() {
|
|
create().then(res => {
|
|
let areas = res,
|
|
areaIndex = this.area.areaIndex
|
|
this.area.areaId = areas[areaIndex].id
|
|
this.area.areaName= areas[areaIndex].name
|
|
this.area.areasArr= areas
|
|
this.citylist(areas[areaIndex].id)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 所在省份-下拉
|
|
areasChange(e) {
|
|
let area = this.area.areasArr,
|
|
index = e.detail.value,
|
|
atcode = area[index].id,
|
|
atname = area[index].name
|
|
if (index != this.area.areaIndex) {
|
|
this.area.areaIndex = index
|
|
this.area.areaId = atcode
|
|
this.area.areaName = atname
|
|
// 获取市级列表
|
|
this.citylist(atcode)
|
|
}
|
|
},
|
|
|
|
// 市级列表
|
|
citylist(cityId) {
|
|
create({
|
|
parent_id: cityId
|
|
}).then(res=>{
|
|
let cityArr = res
|
|
let cityIndex = ''
|
|
let index = res.find((branchValve) => {
|
|
return branchValve.id == this.baseData.city_id;
|
|
});
|
|
if (index) {
|
|
cityIndex = this.city.cityIndex
|
|
} else {
|
|
cityIndex = 0
|
|
}
|
|
this.city.cityId = cityArr[cityIndex].id
|
|
this.city.cityName = cityArr[cityIndex].name
|
|
this.city.cityArr = cityArr
|
|
this.city.cityIndex = cityIndex
|
|
this.regilist(cityArr[cityIndex].id)
|
|
})
|
|
},
|
|
|
|
// 市级下拉筛选
|
|
cityDrop(e) {
|
|
let city = this.city.cityArr,
|
|
index = e.detail.value,
|
|
citycode = city[index].id,
|
|
cityname = city[index].name
|
|
if (index != this.area.areaIndex) {
|
|
this.city.cityIndex = index
|
|
this.city.cityId = citycode
|
|
this.city.cityName = cityname
|
|
|
|
// 获取市级列表
|
|
this.regilist(citycode)
|
|
}
|
|
},
|
|
|
|
// 区列表
|
|
regilist(areaId) {
|
|
create({
|
|
parent_id: areaId
|
|
}).then(res=>{
|
|
let regiIndex = ''
|
|
let index = res.find((branchValve) => {
|
|
return branchValve.id == this.baseData.district_id;
|
|
});
|
|
if (index) {
|
|
regiIndex = this.regi.regiIndex
|
|
} else {
|
|
regiIndex = 0
|
|
}
|
|
this.regi.regiArr = res
|
|
this.regi.regiId = res[regiIndex].id
|
|
this.regi.regiName = res[regiIndex].name
|
|
this.regi.regiIndex = regiIndex
|
|
})
|
|
},
|
|
|
|
// 区下拉筛选
|
|
regiDrop(e) {
|
|
let newIndex = e.detail.value
|
|
this.regi.regiIndex = newIndex
|
|
this.regi.regiId = this.regi.regiArr[newIndex].id
|
|
this.regi.regiName = this.regi.regiArr[newIndex].name
|
|
},
|
|
|
|
// 提示组件 -- 赋值
|
|
seeTips(title, text) {
|
|
this.seeData.seeShow = true
|
|
this.seeData.seeTitle = title
|
|
this.seeData.seeText = text
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top {
|
|
background-color: #f5f5f5;
|
|
border-bottom: transparent 140rpx solid;
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
background-color: $mian-color;
|
|
border-radius: 0 0 $radius*5 $radius*5;
|
|
width: 100%;
|
|
height: 260rpx;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.base {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: $padding + 20 $padding;
|
|
box-sizing: border-box;
|
|
.white {
|
|
padding: $padding $padding 0;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
border-radius: $radius-m;
|
|
overflow: hidden;
|
|
.base-title {
|
|
display: flex;
|
|
line-height: 38rpx;
|
|
.base-name {
|
|
flex: 1;
|
|
color: $mian-color;
|
|
font-weight: 600;
|
|
font-size: $title-size + 2;
|
|
}
|
|
.base-number {
|
|
color: #999999;
|
|
font-size: $title-size-m;
|
|
}
|
|
}
|
|
.base-list {
|
|
margin: 40rpx -10rpx 0;
|
|
overflow: hidden;
|
|
.base-block {
|
|
width: calc(50% - 20rpx);
|
|
margin: 0 10rpx $margin + 10;
|
|
float: left;
|
|
.base-block-name {
|
|
margin-bottom: $margin - 10;
|
|
color: #111111;
|
|
display: flex;
|
|
text {
|
|
color: $mian-color;
|
|
padding-right: 10rpx;
|
|
}
|
|
.base-notesIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin: 6rpx 0 0 10rpx;
|
|
}
|
|
}
|
|
.base-block-textarea {
|
|
background-color: #F6F6F6;
|
|
border-radius: $radius-sm;
|
|
padding: $padding;
|
|
font-size: $title-size-lg;
|
|
color: #111111;
|
|
}
|
|
.base-block-write {
|
|
background-color: #F6F6F6;
|
|
border-radius: $radius-sm;
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
color: #111111;
|
|
font-size: $title-size-lg;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
&.prohibit {
|
|
color: #999999;
|
|
}
|
|
.idcardAdd-picker {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.base-block-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: $title-size-lg;
|
|
}
|
|
.base-block-textarea {
|
|
padding: $padding 0;
|
|
}
|
|
.placeholderClass {
|
|
color: #999999;
|
|
}
|
|
image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: $margin;
|
|
right: $margin;
|
|
}
|
|
}
|
|
.base-block-site {
|
|
display: flex;
|
|
margin: 0 -5rpx;
|
|
.base-site-white {
|
|
background-color: #F6F6F6;
|
|
border-radius: $radius-sm;
|
|
flex: 3;
|
|
color: #111111;
|
|
font-size: $title-size-lg;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
padding: 0 $padding - 10 0 $padding;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
margin: 0 5rpx;
|
|
width: 100%;
|
|
.picker {
|
|
width: calc(100% - 30rpx)
|
|
}
|
|
image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: $margin;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.baseAline {
|
|
width: calc(100% - 20rpx);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.introduce-btn {
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-color: #f5f5f5;
|
|
text-align: center;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
.btn {
|
|
background-color: $mian-color;
|
|
color: #ffffff;
|
|
border-radius: $radius-sm;
|
|
width: 100%;
|
|
line-height: 90rpx;
|
|
font-size: $title-size;
|
|
&[disabled] {
|
|
background-color: #eba5a5;
|
|
}
|
|
}
|
|
}
|
|
</style> |