369 lines
8.6 KiB
Vue
369 lines
8.6 KiB
Vue
<template>
|
|
<view class="container">
|
|
|
|
<view class="content-box">
|
|
<view class="content">
|
|
<view v-if="userLevelInfo" class="verify-status-box acea-row row-center row-middle">
|
|
<img v-if="userLevelInfo.checkState==3" class="verify-status-img" :src="webUrl+'/20200824093220483259.png'"/>
|
|
<span class="verify-status-text">{{ getCheckState(userLevelInfo) }}</span>
|
|
</view>
|
|
<view v-if="userLevelInfo && userLevelInfo.checkState==4" class="reason">原因:{{ userLevelInfo.checkRemark }}
|
|
</view>
|
|
<view class="electronic-box acea-row row-middle row-center">
|
|
<view class="checkbox-wrapper">
|
|
<checkbox-group @change="toggleProtocolCheck()">
|
|
<label class="well-check">
|
|
<checkbox :checked="protocolChecked" color="#fff"
|
|
style="border-radius: 50%;transform:scale(0.7)"></checkbox>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="electronic-tip">
|
|
<span class="">我已同意</span>
|
|
<span @click="toggleProtocolPage()" class="electronic-protocol-text">《香道滇股东协议》</span>
|
|
</view>
|
|
</view>
|
|
<view class="upload-box acea-row row-column row-center">
|
|
<view class="idcard_pictrue">
|
|
<view @tap="chooseIdCardFrontImage">
|
|
<view class="pictrue">
|
|
<img v-if="idCardFrontImg.length>0" :src="idCardFrontImg"/>
|
|
<img v-else :src="webUrl+'/20200824092942325489.png'"/>
|
|
</view>
|
|
<view v-if="idCardFrontImg.length==0" class="add-icon">
|
|
<img :src="webUrl+'/20200824093150470953.png'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<span class="upload-tip">上传身份证正面照</span>
|
|
<view class="idcard_pictrue">
|
|
<view class="" @tap="chooseIdCardBackImage">
|
|
<view class="pictrue">
|
|
<img v-if="idCardBackImg.length>0" :src="idCardBackImg"/>
|
|
<img v-else :src="webUrl+'/20200824093104069571.png'"/>
|
|
</view>
|
|
<view v-if="idCardBackImg.length==0" class="add-icon">
|
|
<img :src="webUrl+'/20200824093150470953.png'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<span class="upload-tip">上传身份证反面照</span>
|
|
</view>
|
|
<view v-if="userLevelInfo && userLevelInfo.checkState!=3 && userLevelInfo.checkState!=2" class="submit-btn"
|
|
@click="submitBtnClick">保存
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var that;
|
|
import {mapGetters} from "vuex";
|
|
import {chooseImage} from "@/utils";
|
|
import {getUserLevelInfo, saveUserProtocol} from "@/api/user"
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
|
export default {
|
|
|
|
components: {
|
|
uniPopup
|
|
},
|
|
props: {},
|
|
data: function () {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
idCardFrontImg: "",
|
|
idCardBackImg: "",
|
|
protocolChecked: true,
|
|
protocolShow: false,
|
|
verifyPass: 0,//是否审核通过
|
|
userLevelInfo: null,
|
|
avatar: ''
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: mapGetters(["userInfo"]),
|
|
onShow() {
|
|
if (this.$store.getters.token) {
|
|
this.$store.dispatch("getUser", true);
|
|
}
|
|
},
|
|
onLoad: function () {
|
|
//setTimeout里的this不是页面的this
|
|
//所以这里要处理一下用that
|
|
that = this;
|
|
this.getUserLevelInfo();
|
|
|
|
},
|
|
methods: {
|
|
toggleProtocolCheck() {
|
|
this.protocolChecked = !this.protocolChecked;
|
|
},
|
|
//checkState:1-新增 2-待审核 3-已审核 4-已驳回
|
|
getCheckState(info) {
|
|
var status = '';
|
|
if (info) {
|
|
switch (info.checkState) {
|
|
case 1:
|
|
status = '新增';
|
|
break;
|
|
case 2:
|
|
status = '待审核';
|
|
break;
|
|
case 3:
|
|
status = '审核通过';
|
|
break;
|
|
case 4:
|
|
status = '审核驳回';
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
return status;
|
|
|
|
},
|
|
//显示协议内容
|
|
toggleProtocolPage() {
|
|
//this.$refs.popup.open();
|
|
this.$yrouter.push('/pages/user/UpgradeProtocolDetail/UpgradeProtocolDetail')
|
|
|
|
},
|
|
chooseIdCardFrontImage() {
|
|
|
|
// if(this.userLevelInfo && this.userLevelInfo.checkState!=3){
|
|
// chooseImage(img => {
|
|
// console.log(img)
|
|
// this.avatar = img;
|
|
// });
|
|
// }
|
|
|
|
chooseImage(img => {
|
|
console.log(img)
|
|
|
|
that.idCardFrontImg = img;
|
|
|
|
});
|
|
|
|
},
|
|
chooseIdCardBackImage() {
|
|
chooseImage(img => {
|
|
console.log(img)
|
|
|
|
that.idCardBackImg = img;
|
|
|
|
});
|
|
},
|
|
//提交
|
|
submitBtnClick: function () {
|
|
//var that = this;
|
|
if (this.idCardFrontImg.length == 0) {
|
|
this.$dialog.toast({mes: '请上传身份证正面照片'});
|
|
return;
|
|
}
|
|
|
|
if (this.idCardBackImg.length == 0) {
|
|
this.$dialog.toast({mes: '请上传身份证反面面照片'});
|
|
return;
|
|
}
|
|
|
|
this.$dialog.loading.open();
|
|
saveUserProtocol({
|
|
uid: that.userInfo.uid,
|
|
idcardOne: that.idCardFrontImg,
|
|
idcardTwo: that.idCardBackImg
|
|
}).then((res) => {
|
|
that.$dialog.toast({mes: "保存成功!"});
|
|
//跳转回上一页
|
|
setTimeout(function () {
|
|
that.$yrouter.back();
|
|
}, 1000);
|
|
}).catch(err => {
|
|
that.$dialog.error(err.msg || "保存失败!");
|
|
}).finally(() => {
|
|
that.$dialog.loading.close();
|
|
});
|
|
},
|
|
// 获取用户等级信息
|
|
getUserLevelInfo: function () {
|
|
var that = this;
|
|
getUserLevelInfo().then((res) => {
|
|
if (res.data) {
|
|
that.userLevelInfo = res.data;
|
|
that.idCardFrontImg = res.data.idcardOne || "";
|
|
that.idCardBackImg = res.data.idcardTwo || "";
|
|
}
|
|
}).catch(err => {
|
|
|
|
}).finally(() => {
|
|
|
|
});
|
|
},
|
|
idCardFrontImageuploaded(res) {
|
|
if (res.errno !== 0)
|
|
return this.$dialog.error(res.msg || "上传图片失败");
|
|
this.idCardFrontImg = res.link;
|
|
//this.$set(this.idCardFrontImg, "avatar", res.link);
|
|
},
|
|
idCardBackImageuploaded(res) {
|
|
if (res.errno !== 0)
|
|
return this.$dialog.error(res.msg || "上传图片失败");
|
|
this.idCardBackImg = res.link;
|
|
//this.$set(this.idCardBackImg, "avatar", res.link);
|
|
},
|
|
onBackClick: function () {
|
|
this.$yrouter.back();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-box {
|
|
background-color: #FFFAF5;
|
|
padding: 38rpx;
|
|
}
|
|
|
|
.content {
|
|
border: 1px solid rgba(195, 172, 149, 1);
|
|
padding: 54rpx;
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
/* width: 0.8rem; */
|
|
width: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.checkbox-wrapper .icon {
|
|
/* left: calc((0.8rem - 18px)/2); */
|
|
left: 0;
|
|
}
|
|
|
|
.checkbox-wrapper input:checked + .icon {
|
|
background-color: #FD2C4B !important;
|
|
border-color: #FD2C4B !important;
|
|
}
|
|
|
|
.electronic-tip {
|
|
color: #9B6E40;
|
|
font-size: 28rpx;
|
|
/* padding-left: 48rpx; */
|
|
}
|
|
|
|
.electronic-protocol-text {
|
|
color: #FF8D5B;
|
|
}
|
|
|
|
.protocol-wrapper {
|
|
/* display: flex; */
|
|
/* align-items: center; */
|
|
/* justify-content: center; */
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.p-content {
|
|
background-color: #fff;
|
|
margin: 100rpx;
|
|
padding: 20rpx;
|
|
overflow-y: scroll;
|
|
border-radius: 16rpx;
|
|
height: calc(100% - 200rpx);
|
|
}
|
|
|
|
.p-content .title {
|
|
font-weight: bold;
|
|
color: #000;
|
|
font-size: 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.overlay-protocol {
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
.upload-box {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.upload-box .idcard_pictrue {
|
|
width: 568rpx;
|
|
height: 320rpx;
|
|
/* background:rgba(255,255,255,1); */
|
|
position: relative;
|
|
}
|
|
|
|
.upload-tip {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #C3AC95;
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.upload-box .idcard_pictrue .pictrue {
|
|
width: 568rpx;
|
|
height: 320rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.upload-box .idcard_pictrue .pictrue img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.add-icon {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
position: absolute;
|
|
left: calc((100% - 92rpx) / 2);
|
|
top: calc((100% - 92rpx) / 2);
|
|
}
|
|
|
|
.add-icon img {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
}
|
|
|
|
.verify-status-box {
|
|
margin: 32rpx auto;
|
|
}
|
|
|
|
.verify-status-img {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.verify-status-text {
|
|
color: #9B6E40;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.submit-btn {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
/* width:6.9rem; */
|
|
height: 90rpx;
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
background-color: #00AAEA;
|
|
margin: 76rpx auto 0 auto;
|
|
}
|
|
|
|
.reason {
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #FF0000;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|