forked from zhongyuanhaiju/uniapp
329 lines
9.6 KiB
Vue
329 lines
9.6 KiB
Vue
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="apply-upgrade">
|
|
<!--顶部提示内容-->
|
|
<view class="top-tips" v-if="parseInt(info.status) === 3">驳回原因：{{ info.reject_cause }}</view>
|
|
<!--表单让你-->
|
|
<view class="title">1.填写注册申请代理的信息</view>
|
|
<view class="form-list">
|
|
<view class="form-list-block">
|
|
<view class="left">真实姓名</view>
|
|
<view class="right">
|
|
<input class="uni-input" v-model="info.username" placeholder="请输入真实姓名" />
|
|
</view>
|
|
</view>
|
|
<view class="form-list-block">
|
|
<view class="left">联系电话</view>
|
|
<view class="right">
|
|
<input class="uni-input" v-model="info.phone" placeholder="请输入联系电话" />
|
|
</view>
|
|
</view>
|
|
<view class="form-list-block">
|
|
<view class="left">身份证号</view>
|
|
<view class="right">
|
|
<input class="uni-input" v-model="info.id_card" placeholder="请输入身份证号" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="title">2.请拍摄并上传你的有效身份证</view>
|
|
<view class="id-card">
|
|
<view class="id-card-content">
|
|
<view class="id-card-block">
|
|
<image :src="$util.img(info.id_card_front || default_card_front)" mode="widthFix"></image>
|
|
<view class="upload-buttons" @click="uploadCard('id_card_front')">上传身份证正面</view>
|
|
</view>
|
|
<view class="id-card-block">
|
|
<image :src="$util.img(info.id_card_reverse || default_card_reverse)" mode="widthFix"></image>
|
|
<view class="upload-buttons" @click="uploadCard('id_card_reverse')">上传身份证反面</view>
|
|
</view>
|
|
</view>
|
|
<view class="id-card-tips">
|
|
<view class="id-card-tips-line">大陆公民持有的本人有效二代身份证</view>
|
|
<view class="id-card-tips-line">
|
|
上传时确保身份证<text class="tips-stress">边框完整，字体清晰，亮度均匀。</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="title" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">3.请完成协议</view>
|
|
<view class="agree" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">
|
|
<textarea class="textarea-content" placeholder="请填写如下段落" auto-height v-model="info.upgrade_agree"></textarea>
|
|
<view class="agree-text">
|
|
<text class="agree-red">请输入这段话：</text>
|
|
{{ baseInfo.upgrade_agree }}
|
|
<text class="agree-red" @click="$util.copy(baseInfo.upgrade_agree)">[复制]</text>
|
|
</view>
|
|
</view>
|
|
<button class="submit-button" @click="submitApply" v-if="parseInt(info.status) === 1" disabled>审核中</button>
|
|
<button class="submit-button" @click="submitApply" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">确定提交</button>
|
|
<!--登录弹框-->
|
|
<ns-login ref="login"></ns-login>
|
|
<!--加载动画-->
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
baseInfo : {},
|
|
default_card_front: 'public/static/img/fenxiao/id_card_front.png',
|
|
default_card_reverse: 'public/static/img/fenxiao/id_card_reverse.png',
|
|
info: {
|
|
username: '',
|
|
phone: '',
|
|
id_card: '',
|
|
id_card_front: '',
|
|
id_card_reverse: '',
|
|
upgrade_agree: '',
|
|
},
|
|
};
|
|
},
|
|
mixins: [],
|
|
onLoad(option) {},
|
|
onReady(){
|
|
if (uni.getStorageSync('token')) {
|
|
this.getBaseInfo();
|
|
} else {
|
|
this.$refs.login.open('/pages_promotion/fenxiao/apply_upgrade');
|
|
}
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 获取基本信息
|
|
getBaseInfo(){
|
|
let _this = this;
|
|
_this.$api.sendRequest({
|
|
url: '/fenxiao/api/apply/upgradeBase',
|
|
success: res => {
|
|
if (res.code === 0) {
|
|
_this.baseInfo = res.data;
|
|
_this.info = res.data.info;
|
|
|
|
if(parseInt(this.info.status) === 2){
|
|
_this.$util.showToast({
|
|
title: "审核已经通过",
|
|
mask: true,
|
|
duration: 1000,
|
|
success: function () {
|
|
setTimeout(() => {
|
|
_this.$util.redirectTo('/pages_promotion/fenxiao/index', {}, 'redirectTo');
|
|
}, 1000);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
else{
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
}
|
|
},
|
|
fail: res => {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
},
|
|
// 身份证上传
|
|
uploadCard(type) {
|
|
let _this = this;
|
|
this.$util.upload(1, {path: 'evaluateimg'}, res => {
|
|
if(type === 'id_card_front') _this.info.id_card_front = res[0];
|
|
else _this.info.id_card_reverse = res[0];
|
|
|
|
this.$forceUpdate();
|
|
});
|
|
},
|
|
// 提交内容
|
|
submitApply(){
|
|
let _this = this;
|
|
let defaultRule = [
|
|
{name: 'username', checkType: 'required', errorMsg: '请输入真实姓名'},
|
|
{name: 'phone', checkType: 'required', errorMsg: '请输入联系电话'},
|
|
{name: 'phone', checkType: 'phoneno', errorMsg: '请输入正确的手机号'},
|
|
{name: 'id_card', checkType: 'required', errorMsg: '请输入身份证号'},
|
|
{name: 'id_card_front', checkType: 'required', errorMsg: '请上传身份证正面'},
|
|
{name: 'id_card_reverse', checkType: 'required', errorMsg: '请上传身份证反面'},
|
|
{name: 'upgrade_agree', checkType: 'required', errorMsg: '请输入协议内容以代表同意当前协议'},
|
|
{name: 'upgrade_agree', checkType: 'same', errorMsg: '协议不一致，请检查输入协议是否和下放协议内容一直', checkRule: this.baseInfo.upgrade_agree},
|
|
];
|
|
_this.$util.verify(_this.info,defaultRule).then(res => {
|
|
_this.$api.sendRequest({
|
|
url: '/fenxiao/api/apply/upgradeApply',
|
|
data: _this.info,
|
|
success: res => {
|
|
if (res.code === 0) {
|
|
_this.$util.showToast({
|
|
title: '申请成功',
|
|
success: function () {
|
|
_this.getBaseInfo();
|
|
_this.$forceUpdate();
|
|
}
|
|
});
|
|
}else{
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
}
|
|
},
|
|
fail: res => {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
}).catch((reject)=>{
|
|
console.log(reject);
|
|
});
|
|
},
|
|
|
|
},
|
|
onBackPress(options) {
|
|
if (options.from === 'navigateBack') return false;
|
|
this.$util.redirectTo('/pages/member/index');
|
|
return true;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.apply-upgrade{
|
|
padding: 30rpx;
|
|
|
|
.top-tips{
|
|
color: #f56c6c;
|
|
background-color: #fde2e2;
|
|
position: relative;
|
|
left: -15px;
|
|
top: -15px;
|
|
width: 100%;
|
|
padding: 15px;
|
|
line-height: 20px;
|
|
font-size: 15px;
|
|
}
|
|
.title{
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
color: #999999;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.form-list{
|
|
|
|
.form-list-block{
|
|
width: 100%;
|
|
color: #000000;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
height: 70rpx;
|
|
font-size: 30rpx;
|
|
width: 240rpx;
|
|
}
|
|
.right{
|
|
font-size: 30rpx;
|
|
width: calc(100% - 240rpx);
|
|
input{
|
|
height: 70rpx;
|
|
text-align: right;
|
|
font-size: 30rpx;
|
|
color: #898989;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.id-card{
|
|
.id-card-content{
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
|
|
.id-card-block{
|
|
width: calc(50% - 15rpx);
|
|
position: relative;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 75rpx;
|
|
|
|
/deep/ image{
|
|
width: 90%;
|
|
div{
|
|
background-position: top center!important;
|
|
}
|
|
}
|
|
|
|
.upload-buttons{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
background: #5581fe;
|
|
color: #ecefff;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
.id-card-tips{
|
|
padding: 30rpx 0;
|
|
|
|
.id-card-tips-line{
|
|
.tips-stress{
|
|
color: #e15c5c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.agree{
|
|
.textarea-content{
|
|
width: calc(100% - 40rpx);
|
|
border: 2rpx solid #7796e9;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
min-height: 300rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.agree-text{
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.agree-red{
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
color: #ee7877;
|
|
}
|
|
}
|
|
}
|
|
.submit-button{
|
|
background: #5581fe;
|
|
border-radius: 100rpx;
|
|
color: #cbd9f7;
|
|
font-size: 30rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
}
|
|
</style>
|