Refactor:分包
This commit is contained in:
lifizer
@@ -0,0 +1,368 @@
|
||||
<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('/pagesUser/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>
|
||||
Reference in New Issue
Block a user