650 lines
20 KiB
Vue
650 lines
20 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">
|
|
<block v-if="baseData.is_finish == 0">
|
|
<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>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<block v-if="baseData.check_params.marriage">
|
|
<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>
|
|
</block>
|
|
<view class="idcardAdd-picker" v-else>
|
|
<view class="uni-input grey">{{marriage[marriageIndex]}}</view>
|
|
</view>
|
|
</block>
|
|
</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">
|
|
<block v-if="baseData.is_finish == 0">
|
|
<input class="base-block-input" :value="mate" maxlength="4" type="text" placeholder="请输入配偶姓名" placeholder-class="placeholderClass" @input="blurInput($event, 'mate')"/>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<block v-if="baseData.check_params.mate">
|
|
<input class="base-block-input" :value="mate" maxlength="4" type="text" placeholder="请输入配偶姓名" placeholder-class="placeholderClass" @input="blurInput($event, 'mate')"/>
|
|
</block>
|
|
<block v-else-if="marriageIndex == 1 && baseData.check_params.marriage">
|
|
<input class="base-block-input" :value="mate" maxlength="4" type="text" placeholder="请输入配偶姓名" placeholder-class="placeholderClass" @input="blurInput($event, 'mate')"/>
|
|
</block>
|
|
<view class="idcardAdd-picker" v-else>
|
|
<input class="base-block-input grey" disabled :value="mate" maxlength="4" type="text" placeholder="请输入配偶姓名" placeholder-class="placeholderClass" @input="blurInput($event, 'mate')"/>
|
|
</view>
|
|
</block>
|
|
</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">
|
|
<block v-if="baseData.is_finish == 0">
|
|
<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>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<block v-if="baseData.check_params.education">
|
|
<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>
|
|
</block>
|
|
<view class="idcardAdd-picker" v-else>
|
|
<view class="grey">{{education[educationIndex]}}</view>
|
|
</view>
|
|
</block>
|
|
</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">
|
|
<block v-if="baseData.is_finish == 0">
|
|
<input class="base-block-input" type="text" :value="school" placeholder="请输入毕业学院" placeholder-class="placeholderClass" @input="blurInput($event, 'school')"/>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<block v-if="baseData.check_params.school">
|
|
<input class="base-block-input" type="text" :value="school" placeholder="请输入毕业学院" placeholder-class="placeholderClass" @input="blurInput($event, 'school')"/>
|
|
</block>
|
|
<input v-else disabled class="base-block-input grey" type="text" :value="school" placeholder="请输入毕业学院" placeholder-class="placeholderClass" @input="blurInput($event, 'school')"/>
|
|
</block>
|
|
</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">
|
|
<block v-if="baseData.is_finish == 0">
|
|
<input class="base-block-input" maxlength="11" :value="mobile" type="tel" placeholder="请输入联系电话" placeholder-class="placeholderClass" @input="blurInput($event, 'mobile')"/>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<block v-if="baseData.check_params.mobile">
|
|
<input class="base-block-input" maxlength="11" :value="mobile" type="tel" placeholder="请输入联系电话" placeholder-class="placeholderClass" @input="blurInput($event, 'mobile')"/>
|
|
</block>
|
|
<input v-else disabled class="base-block-input grey" maxlength="11" :value="mobile" type="tel" placeholder="请输入联系电话" placeholder-class="placeholderClass" @input="blurInput($event, 'mobile')"/>
|
|
</block>
|
|
</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.mobile.description)" src="/static/icon/notesIcon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<block v-if="baseData.is_finish == 0">
|
|
<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>
|
|
</block>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<view class="base-block-write from-city-picker" v-if="baseData.check_params.contact_address">
|
|
<uni-data-picker
|
|
:localdata="cityPicker"
|
|
:border="false"
|
|
split="-"
|
|
placeholder="选择城市"
|
|
v-model="baseData.district_id"
|
|
@change="onCityPicker"
|
|
></uni-data-picker>
|
|
</view>
|
|
<view class="base-block-textarea" style="color: #999;" v-else>
|
|
<textarea disabled placeholder-style="font-size: 30rpx; color: #999999" maxlength="500" :value="baseData.contact_address"/>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class="base-block baseAline">
|
|
<view class="base-block-textarea" v-if="baseData.is_finish == 0">
|
|
<textarea placeholder-style="color:#999999; font-size: 30rpx" maxlength="500" :value="address" @input="blurInput($event, 'address')" placeholder="请填写详细地址..."/>
|
|
</view>
|
|
<block v-else-if="baseData.is_finish == 2">
|
|
<view class="base-block-textarea" v-if="baseData.check_params.contact_address">
|
|
<textarea placeholder-style="font-size: 30rpx; color: #999999" maxlength="500" :value="address" @input="blurInput($event, 'address')" placeholder="请填写详细地址..."/>
|
|
</view>
|
|
</block>
|
|
</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 class="backFirst" v-if="popFirst"></view>
|
|
<view class="contFirst" v-if="popFirst">
|
|
<view class="tipsWhite">
|
|
<view class="tipsWhite-top">
|
|
<view class="tipsWhite-name">
|
|
温馨提示
|
|
</view>
|
|
<view class="tipsWhite-text">
|
|
是否使用首次录入信息
|
|
</view>
|
|
</view>
|
|
<view class="tipsWhite-btn">
|
|
<view class="idcardBtn-go active" @click="popFirst = false">
|
|
暂不使用
|
|
</view>
|
|
<view class="idcardBtn-go" @click="goFirst">
|
|
立即使用
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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 { userBase, basePut, create, createAll } from '@/apis/interfaces/user'
|
|
export default {
|
|
components: {
|
|
mouldTips
|
|
},
|
|
data() {
|
|
return {
|
|
popFirst: false, // 首次录入信息状态
|
|
disabled: false, // 按钮状态
|
|
baseData: '', // 基础信息
|
|
mobile : '', // 联系方式
|
|
mate : '', // 配偶名称
|
|
school : '', // 毕业学院
|
|
address : '', // 联系地址
|
|
|
|
// 查看提示组件
|
|
seeData : {
|
|
seeShow : false,
|
|
seeTitle: '',
|
|
seeText : '',
|
|
},
|
|
|
|
marriage: [],
|
|
marriageIndex : 0, // 婚姻选择index
|
|
|
|
education: [],
|
|
educationIndex: 0, // 学历选择index
|
|
|
|
cityPicker : [],
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 获取基础信息
|
|
this.baseInfo();
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
|
|
createAll().then(res => {
|
|
this.cityPicker = res;
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 基础信息
|
|
baseInfo() {
|
|
userBase(this.$Route.query.id).then(res => {
|
|
this.userId = res.base.business_order_user_id
|
|
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
|
|
|
|
// 是否使用首次录入信息
|
|
if(res.base.is_finish == 0 && res.userBase) {
|
|
this.popFirst = true
|
|
this.baseId = res.userBase.user_base_id
|
|
}
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 跳转新页面-首次录入信息
|
|
goFirst() {
|
|
this.popFirst = false
|
|
this.$Router.replace({name: 'userBase', params: {userId: this.userId, baseId: this.baseId, type: 'first'}})
|
|
},
|
|
|
|
// 婚姻选择
|
|
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.province_id,
|
|
city_id : this.baseData.city_id,
|
|
district_id : this.baseData.district_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"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 提示组件 -- 赋值
|
|
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: $padding - 10 $padding;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
color: #111111;
|
|
font-size: $title-size-lg;
|
|
line-height: 44rpx;
|
|
&.prohibit {
|
|
color: #999999;
|
|
}
|
|
.idcardAdd-picker {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.grey {
|
|
color: #999999;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.backFirst {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 99;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.contFirst {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: center;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
padding: 0 10%;
|
|
box-sizing: border-box;
|
|
.tipsWhite {
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tipsWhite-top {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tipsWhite-name {
|
|
text-align: center;
|
|
color: #111111;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: $padding;
|
|
border-bottom: solid #F6F6F6 2rpx;
|
|
}
|
|
|
|
.tipsWhite-text {
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
padding: $padding + 10 0;
|
|
}
|
|
|
|
.tipsWhite-btn {
|
|
line-height: 90rpx;
|
|
border-top: 2rpx solid #F6F6F6;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.idcardBtn-go {
|
|
width: 50%;
|
|
background-color: $mian-color;
|
|
color: #ffffff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: $title-size;
|
|
text-align: center;
|
|
&.active {
|
|
background-color: #ffffff;
|
|
color: $mian-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |