uniapp/pages_promotion/fenxiao/apply_upgrade.vue

567 lines
14 KiB
Vue

<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="apply-upgrade">
<view v-if="status === ''">
<!--顶部提示内容-->
<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.mobile" 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>
{{ basicsConfig.upgrade_agree }}
<text class="agree-red" @click="$util.copy(basicsConfig.upgrade_agree)">[复制]</text>
</view>
</view>
<button class="submit-button" @click="submitApply">确定提交</button>
</view>
<view class="empty" v-else>
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
<text v-if="status == 1">您已提交{{ fenxiaoWords.fenxiao_name }}申请,等待平台审核</text>
<block v-else-if="status == -1">
<text>您提交的{{ fenxiaoWords.fenxiao_name }}申请,已被拒绝,请再接再厉</text>
<view class="again-btn color-base-bg" @click="againApply">重新申请</view>
</block>
</view>
<!--登录弹框-->
<ns-login ref="login"></ns-login>
<!--加载动画-->
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
export default {
components: {},
data() {
return {
isChecked: false,
isShow: true,
isIphoneX: false,
// 推荐人信息
sourceMemberInfo: {
fenxiao_name: '无'
},
formData: {
fenXiaoName: '',
mobile: ''
},
fenXiaoAgreement: {
agreement: {},
document: {}
},
isAgreement: false,
back: '',
isAbled: false,
status: '',
isSub: false,
fenxiaoConfig: {
fenxiao_condition: 0
},
basicsConfig: {},
goodsList: [],
isOpen: false,
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: '',
mobile: '',
id_card: '',
id_card_front: '',
id_card_reverse: '',
upgrade_agree: '',
status: 0
}
};
},
mixins: [fenxiaoWords],
onLoad(option) {
if (option.back) this.back = option.back;
},
onReady() {
// if (uni.getStorageSync('token')) {
// this.getBaseInfo();
// } else {
// this.$refs.login.open('/pages_promotion/fenxiao/apply_upgrade');
// }
},
async onShow() {
setTimeout(() => {
if (this.addonIsExist && !this.addonIsExist.fenxiao) {
this.$util.showToast({
title: '商家未开启分销',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
return;
}
}, 1000);
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (this.fenxiaoWords && this.fenxiaoWords.fenxiao_name) this.$langConfig.title(this.fenxiaoWords.fenxiao_name + '申请');
if (uni.getStorageSync('token')) {
this.applyStatus();
this.getSourceMemberInfo();
} else {
this.$util.redirectTo(
'/pages_tool/login/login',
{
back: '/pages_promotion/fenxiao/apply'
},
'redirectTo'
);
}
this.getFenxiaoConfig();
this.getFenxiaoBasicsConfig();
},
methods: {
toClose() {
this.$refs.applyPopup.close();
},
ckeckedRuler() {
this.isChecked = !this.isChecked;
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0]
? this.$util.img(imgs[0], {
size: 'mid'
})
: this.$util.getDefaultImage().goods;
},
imgError(index) {
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
},
onOpen() {
this.isOpen = this.isOpen ? false : true;
this.getFenxiaoConfig();
},
goodsTag(data) {
return data.label_name || '';
},
applyStatus() {
this.$api.sendRequest({
url: '/fenxiao/api/apply/status',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.status = res.data.status;
this.isSub = false;
if (this.status == 2) {
this.$util.redirectTo('/pages/member/index');
}
}
this.$refs.loadingCover.hide();
}
});
},
navigateBack() {
this.$util.goBack();
},
// 申请协议
getAgreement() {
this.$api.sendRequest({
url: '/fenxiao/api/config/agreement',
success: res => {
if (res.code === 0) {
this.fenXiaoAgreement = res.data;
if (this.fenXiaoAgreement.agreement.is_agreement === '1') {
this.isAgreement = true;
}
}
}
});
},
openPopup() {
if (this.isAgreement) this.$refs.applyPopup.open();
},
closePopup() {
this.$refs.applyPopup.close();
},
fenXiaoValidata() {
let rule = [
{
name: 'fenXiaoName',
checkType: 'required',
errorMsg: '请输入' + this.fenxiaoWords.fenxiao_name + '名称'
},
{
name: 'mobile',
checkType: 'required',
errorMsg: '请输入手机号'
},
{
name: 'mobile',
checkType: 'phoneno',
errorMsg: '请输入正确的手机号'
}
];
var checkRes = validate.check(this.formData, rule);
if (checkRes) {
return true;
} else {
this.$util.showToast({
title: validate.error
});
return false;
}
},
// 获取推广人信息
getSourceMemberInfo() {
this.$api.sendRequest({
url: '/fenxiao/api/fenxiao/sourceinfo',
success: res => {
if (res.code == 0 && res.data) {
this.sourceMemberInfo = res.data;
}
}
});
},
/**
* 重新申请
*/
againApply() {
this.status = '';
},
/**
* 获取申请条件
*/
getFenxiaoConfig() {
this.$api.sendRequest({
url: '/fenxiao/api/config/fenxiao',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.fenxiaoConfig = res.data;
this.goodsList = res.data.goods_list;
if (this.goodsList.length <= 3) {
this.isShow = false;
} else if (this.goodsList.length > 3 && this.isOpen == true) {
this.isShow = true;
this.goodsList = res.data.goods_list.slice(0, 3);
}
}
}
});
},
/**
* 获取分销基本配置
*/
getFenxiaoBasicsConfig() {
this.$api.sendRequest({
url: '/fenxiao/api/config/basics',
data: {},
success: res => {
if (res.code >= 0 && res.data) {
this.basicsConfig = res.data;
}
}
});
},
onBackPress(options) {
if (options.from === 'navigateBack') {
return false;
}
this.$util.redirectTo('/pages/member/index');
return true;
},
// 获取基本信息
getBaseInfo() {
let _this = this;
_this.$api.sendRequest({
url: '/fenxiao/api/apply/upgradeBase',
success: res => {
if (res.code === 0) {
_this.baseInfo = res.data;
if (res.data.info) _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: 'mobile', checkType: 'required', errorMsg: '请输入联系电话' },
{ name: 'mobile', 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.basicsConfig.upgrade_agree }
];
_this.$util
.verify(_this.info, defaultRule)
.then(res => {
_this.$api.sendRequest({
url: '/fenxiao/api/apply/applyfenxiao',
data: {
..._this.info,
fenxiao_condition: 1
},
success: res => {
if (res.code >= 0 && res.data) {
if (this.basicsConfig.is_examine == 1) {
this.applyStatus();
} else {
this.$util.redirectTo('/pages_promotion/fenxiao/index');
}
} else {
this.isSub = false;
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;
}
.again-btn {
display: flex;
justify-content: center;
width: auto;
border-radius: $border-radius;
margin-top: 20rpx;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 60rpx;
box-sizing: border-box;
}
.empty {
width: 100%;
margin-top: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 300rpx;
height: 176rpx;
margin-bottom: 50rpx;
}
text {
font-size: $font-size-goods-tag;
font-weight: 600;
}
}
}
</style>