daoji_h5/agent/pages/apply.vue

315 lines
8.0 KiB
Vue
Raw Normal View History

2024-03-21 05:53:51 +00:00
<template>
<view class="apply-pages" v-if="isLoad">
<view class="page-height" v-if="mineInfo.is_admin">
<abnor percent="150%" @confirm="$util.goUrl({url:`/agent/pages/index?agent=1`,openType: `reLaunch`})"
title="您已经是代理商了" :tip="[{ text: '快去管理订单吧', color: 0 }]" :button="[{ text: '去管理', type: 'confirm' }]"
image="https://lbqny.migugu.com/admin/public/apply_suc.jpg"></abnor>
</view>
<block v-else>
<view class="apply-info-box rel" :style="{background:primaryColor}">
<image class="bg-1 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-4.png">
</image>
<image class="bg-2 abs" src="https://lbqny.migugu.com/admin/anmo/apply/bg-3.png">
</image>
<image class="join-us abs" src="https://lbqny.migugu.com/admin/anmo/apply/join-us-1.png">
</image>
<view class="join-us pd-lg abs" style="z-index: 3;">
<view style="height:90rpx"></view>
<view class="f-title c-title text-bold">您的姓名</view>
<input v-model="form.user_name" type="text"
class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10" maxlength="20"
placeholder-class="c-caption" :placeholder="rule[0].errorMsg"
:style="{borderColor:primaryColor}" />
<view class="mt-md f-title c-title text-bold">代理类型</view>
<view class="flex-y-center mt-sm">
<view @tap.stop="form.city_type = item.id" class="flex-y-center f-mini-title c-title"
:class="[{'mr-lg pr-lg':index!=2}]"
:style="{color:form.city_type == item.id ? primaryColor:''}"
v-for="(item,index) in cityList" :key="index"><i class="iconfont mr-sm"
:class="[{'icon-xuanze':form.city_type != item.id},{'icon-radio-fill':form.city_type == item.id}]"></i>{{item.title}}代理
</view>
</view>
<view class="mt-md f-title c-title text-bold">手机号</view>
<view class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10"
style="height:auto;min-height:82rpx" :style="{borderColor:primaryColor}">
<input v-model="form.phone" type="text" maxlength="20" placeholder-class="c-caption"
:placeholder="rule[1].errorMsg" style="margin-top: 15rpx;" />
<view class="flex-between" v-if="configInfo.short_code_status">
<input v-model="form.short_code" type="text" maxlength="6" placeholder-class="c-caption"
placeholder="请输入验证码" :style="{borderColor:primaryColor}" />
<view @tap.stop="toSend" :style="{color:primaryColor}">
{{authTime>0?`重新获取(${authTime}s)`:'获取验证码'}}
</view>
</view>
</view>
<view class="mt-md f-title c-title text-bold">申请加入的区域</view>
<input v-model="form.city" type="text"
class="item-input fill-base f-mini-title c-title mt-sm pl-lg pr-lg radius-10" maxlength="50"
placeholder-class="c-caption" :placeholder="rule[2].errorMsg"
:style="{borderColor:primaryColor}" />
</view>
<image @tap.stop="submit" class="submit abs"
src="https://lbqny.migugu.com/admin/anmo/apply/submit-1.png">
</image>
</view>
</block>
</view>
</template>
<script>
import {
mapState,
mapActions,
mapMutations
} from "vuex"
export default {
components: {},
data() {
return {
isLoad: false,
options: {},
authTime: 0,
timer: null,
cityList: [{
id: 3,
title: '省'
}, {
id: 1,
title: '城市'
}, {
id: 2,
title: '区县'
}],
form: {
user_name: '', //姓名
city_type: 3,
phone: '', //手机号
short_code: '',
city: ''
},
rule: [{
name: "user_name",
checkType: "isNotNull",
errorMsg: "输入您的姓名",
regType: 2
},
{
name: "phone",
checkType: "isMobile",
errorMsg: "输入手机号"
},
{
name: "city",
checkType: "isNotNull",
errorMsg: "请输入您想代理的区域"
}
],
lockTap: false
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
mineInfo: state => state.user.mineInfo,
}),
async onLoad(options) {
this.options = options
this.$util.showLoading()
await this.initIndex()
},
methods: {
...mapActions(['getConfigInfo', 'getMineInfo']),
...mapMutations(['updateUserItem']),
async initIndex(refresh = false) {
// #ifdef H5
if (!refresh && this.$jweixin.isWechat()) {
await this.$jweixin.initJssdk();
this.$jweixin.wxReady(() => {
this.$jweixin.hideOptionMenu()
})
}
// #endif
if (!this.configInfo.id || !this.configInfo.hasOwnProperty(
'plugAuth') || (this.configInfo.hasOwnProperty(
'plugAuth') && !this.configInfo.plugAuth.hasOwnProperty(
'store')) || refresh) {
await this.getConfigInfo()
}
await this.getMineInfo()
let {
is_admin = 0
} = this.mineInfo
uni.setNavigationBarTitle({
title: is_admin ? '' : '招商加盟'
})
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
this.$util.hideAll()
this.isLoad = true
},
initRefresh() {
this.initIndex(true)
},
// 发送验证码
async toSend() {
let {
authTime
} = this
if (authTime) return
let {
phone = ''
} = this.form
if (phone == null || !/^(1[0-9]{10})$/.test(phone)) {
this.$util.showToast({
title: phone == null ? `请输入手机号` : `${phone} 手机号无效`
});
return;
}
if (this.lockTap) return
this.lockTap = true
this.$util.showLoading()
try {
await this.$api.user.sendShortMsg({
phone
})
this.$util.hideAll()
this.lockTap = false
let time = 60
this.timer = setInterval(() => {
if (time === 0) {
clearInterval(this.timer)
return
}
time--
this.authTime = time
}, 1000)
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
}
},
//表单验证
validate(param) {
let validate = new this.$util.Validate();
this.rule.map(item => {
let {
name,
} = item
validate.add(param[name], item);
})
let message = validate.start();
return message;
},
async submit() {
let param = this.$util.deepCopy(this.form)
let msg = this.validate(param);
if (msg) {
this.$util.showToast({
title: msg
});
return;
}
let {
short_code_status
} = this.configInfo
if (short_code_status && (param.short_code == null || param.short_code.length != 6)) {
this.$util.showToast({
title: `请输入6位数短信验证码`
})
return
}
if (!short_code_status) {
delete param.short_code
}
if (this.lockTap) return
this.lockTap = true
this.$util.showLoading()
try {
await this.$api.agent.agentApply(param)
this.$util.hideAll()
this.$util.showToast({
title: `提交成功,即将跳转个人中心`,
})
if (this.timer) {
clearInterval(this.timer)
}
setTimeout(() => {
if (getCurrentPages().length > 1) {
this.$util.back()
}
this.$util.goUrl({
url: '/pages/mine',
openType: `reLaunch`
})
}, 2000)
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
}
}
}
}
</script>
<style lang="scss">
.apply-info-box {
width: 100%;
height: 1632rpx;
.bg-1 {
width: 750rpx;
height: 1632rpx;
top: 0;
left: 0;
z-index: 1;
}
.bg-2 {
width: 750rpx;
height: 575rpx;
top: 0;
left: 0;
z-index: 3;
}
.join-us {
width: 671rpx;
height: 890rpx;
top: 482rpx;
left: 44rpx;
z-index: 2;
.item-input {
height: 74rpx;
border: 4rpx solid #069F5E;
.flex-between {
height: 74rpx;
}
}
.item-input.text {
height: 82rpx;
}
}
.submit {
width: 662rpx;
height: 93rpx;
top: 1400rpx;
left: 47rpx;
z-index: 2;
}
}
</style>