java-mall-app/paotui/index/authentication.vue
2024-11-01 16:35:40 +08:00

323 lines
8.9 KiB
Vue

<template>
<view class="fill">
<view class="bg-white padding margin-bottom-sm" @tap="NumSteps">
<view class="cu-steps" >
<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
<text class="num" :data-index="index + 1"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white margin-bottom-sm">
<view class="cu-form-group ">
<view class="title">{{__('姓')}}<span class="padding-left padding-right"></span>{{__('名')}}</view>
<input :placeholder="__('请输入')" name="input" v-model="user_realname"></input>
</view>
<view class="cu-form-group ">
<view class="title">{{__('性')}}<span class="padding-left padding-right"></span>{{__('别')}}</view>
<view>
<radio-group @change="radioChange">
<radio name="name1" class="radio" color="#F2C100" :checked="user_gender == 1? true : false" value="1"></radio>{{__('男')}}
<span class="padding-left"></span>
<radio name="name1" class='radio' color="#F2C100" :checked="user_gender == 2? true : false" value="2"></radio>{{__('女')}}
</radio-group>
</view>
</view>
<view class="cu-form-group ">
<view class="title">{{__('申请业务')}}</view>
<view>
<radio-group @change="radioChange">
<radio name="name1" class="radio" color="#F2C100" :checked="radio=='A'?true:false" value="A"></radio>{{__('跑腿')}}
<span class="padding-left-sm"></span>
<!-- <radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>代驾
<span class="padding-left-sm"></span>
<radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>货运
<span class="padding-left-sm"></span>
<radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>家政 -->
</radio-group>
</view>
</view>
<view class="cu-form-group ">
<view class="title">{{__('身份证号')}}</view>
<input :placeholder="__('请输入')" name="input" v-model="user_idcard"></input>
</view>
<view class="cu-form-group ">
<view class="title">{{__('居住地址')}}</view>
<input :placeholder="__('请输入')" name="input" v-model="user_address"></input>
</view>
</view>
<view class="pic bg-white padding">
<view class="pic_01">
<view v-if="(user_idcard_images0)">
<img class="uni-uploader__img" :src="user_idcard_images0" data-index="0" @click.stop="upImgs"></img>
</view>
<view v-else>
<img src="../images/user/sfz1.png" data-index="0" @click.stop="upImgs"></img>
</view>
{{__('请上传身份证正面')}}
</view>
<view class="pic_01">
<view v-if="(user_idcard_images1)">
<img class="uni-uploader__img" :src="user_idcard_images1" data-index="1" @click.stop="upImgs"></img>
</view>
<view v-else>
<img src="../images/user/sfz2.png" data-index="1" @click.stop="upImgs"></img>
</view>
{{__('请上传身份证反面')}}
</view>
<view class="pic_01">
<view v-if="(user_idcard_images2)">
<img class="uni-uploader__img" :src="user_idcard_images2" data-index="2" @click.stop="upImgs"></img>
</view>
<view v-else>
<img src="../images/user/sfz2.png" data-index="2" @click.stop="upImgs"></img>
</view>
{{__('请上传手持身份证照片')}}
</view>
</view>
<view class=" padding qy-bg-white">
<view class=" flex flex-direction bbtn_10 padding-left-xs" >
<button class="cu-btn bg-yellow text-white round lg" v-if="(ptm_state == 1)">{{__('已完成')}}</button>
<button class="cu-btn bg-yellow text-white round lg" @click="submit" v-else>{{__('确认提交')}}</button>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
data() {
return {
numList: [{
name: '注册',
}, {
name: '完善资料',
}, {
name: '审核中',
}, {
name: '审核通过',
}, ],
info: {},
user_realname: '',
user_idcard: '',
user_address: '',
user_gender: 1,
user_idcard_images0: '',
user_idcard_images1: '',
user_idcard_images2: '',
num: 1,
radio: 'A',
checkbox: [{
value: 'A',
checked: true
}, {
value: 'B',
checked: true
}, {
value: 'C',
checked: false
}],
ptm_state: 0,
};
},
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
onLoad: function(options) {
var that =this;
uni.setNavigationBarTitle({
title:this.__('完善资料')
});
that.forceUserInfo(function(user) {
console.log('..........')
});
if(options.ptm_state)
{
that.setData({
ptm_state: options.ptm_state
})
that.init()
}
},
methods:{
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
radioChange(e){
this.setData({
user_gender: e.detail.value
})
},
NumSteps() {
this.num= this.num == this.numList.length - 1 ? 0 : this.num + 1
},
init: function() {
var that = this;
var params = {};
that.$.request({
url: that.Config.URL.account.certificate.replace(/typ=e/, "typ=json"),
data: params,
success: function(data, status, msg, code) {
if(data.user_certification > 0)
{
that.setData({
user_realname: data.user_realname,
user_gender: data.user_gender,
user_address: data.user_address,
user_idcard: data.user_idcard,
num: data.user_idcard,
user_idcard_images0: data.user_idcard_images[0],
user_idcard_images1: data.user_idcard_images[1],
user_idcard_images2: data.user_idcard_images[2],
})
if(data.user_certification == 1)
{
that.setData({
num: 4,
})
}
else
{
that.setData({
num: 3,
})
}
}
}
});
},
upImgs: function(e) {
var that = this;
var index = e.currentTarget.dataset.index;
let ukey = uni.getStorageSync('ukey');
that.$.chooseImage({
count: 1,
sizeType: ["compressed"],
success: function(n) {
that.$.showLoading();
var r = n.tempFilePaths;
that.$.uploadFile({
url: that.Config.URL.upload,
method: "POST",
filePath: r[0],
name: "upfile",
formData: {'perm_key':ukey},
// header: {
// "content-type": "multipart/form-data"
// },
success: function(n) {
that.$.hideLoading();
var up_res = that.$.parseJSON(n.data);
var s = up_res.data.url;
switch(parseInt(index)){
case 0:
that.user_idcard_images0 = s
break;
case 1:
that.user_idcard_images1 = s
break;
case 2:
that.user_idcard_images2 = s
break;
default:
break;
}
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
fail: function(e) {
that.$.hideLoading()
},
complete: function(e) {
that.$.hideLoading()
}
})
},
submit: function() {
var that = this;
var user_idcard_images = [];
user_idcard_images[0] = that.user_idcard_images0;
user_idcard_images[1] = that.user_idcard_images1;
user_idcard_images[2] = that.user_idcard_images2;
var params = {
user_realname: that.user_realname,
user_idcard: that.user_idcard,
user_address: that.user_address,
user_gender: that.user_gender,
user_idcard_images: JSON.stringify(user_idcard_images),
};
that.$.request({
url: that.Config.URL.city.paotui_certificate,
data: params,
success: function(data, status, msg, code) {
that.$.showModal({
title: that.__("提示"),
content: msg,
success: function (res) {
if (res.confirm) {
that.$.navigateTo({
url: "/paotui/index/index"
})
}
},
})
}
});
},
}
}
</script>
<style lang="scss">
@import "../../styles/colorui/animation";
@import "../../styles/colorui/icon";
@import "../../styles/colorui/main";
.fill{
padding:0 20rpx;
.pic{display: flex;flex-wrap: wrap;justify-content: space-between;
.pic_01{width: 46%;text-align: center;padding-bottom: 5px;line-height: 25px;
img{width: 100%;height: 120px;border-radius: 5px;box-shadow: 0 0 5px #EDEDED;}
}
}
}
.bg-white {
border-radius: 16rpx;
}
.text-blue, .line-blue, .lines-blue {
color: #F2C100;
}
</style>