171 lines
4.1 KiB
Vue
171 lines
4.1 KiB
Vue
<template>
|
|
<view class="mine-distribution-index">
|
|
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
|
|
:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销申请" leftIcon="icon-left">
|
|
</uni-nav-bar>
|
|
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
|
<view class="space-user-info rel"></view>
|
|
<view class="apply-info ml-lg mr-lg fill-base f-title radius-24">
|
|
<view class="flex-center f-md-title text-bold c-black">申请成为分销商</view>
|
|
<view class="space-lg"></view>
|
|
<view class="pt-lg pb-md b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="text-bold">姓名</view>
|
|
</view>
|
|
<input v-model="subForm.user_name" type="text" class="pt-md" maxlength="20"
|
|
placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
|
|
</view>
|
|
<view class="mt-lg pb-md b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="text-bold">手机号</view>
|
|
</view>
|
|
<input v-model="subForm.mobile" type="number" class="pt-md" maxlength="20"
|
|
placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
|
|
</view>
|
|
<view @tap="submit" class="apply-btn flex-center f-sm-title c-base text-bold radius-16"
|
|
:style="{background:primaryColor}">立即申请</view>
|
|
</view>
|
|
|
|
<view class="space-footer"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
} from "vuex"
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
color: '#ffffff',
|
|
subForm: {
|
|
user_name: '',
|
|
mobile: ''
|
|
},
|
|
rule: [{
|
|
name: "user_name",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入您的真实姓名",
|
|
regType: 2
|
|
}, {
|
|
name: "mobile",
|
|
checkType: "isAllPhone",
|
|
errorMsg: "请输入手机号",
|
|
regText: "手机号"
|
|
}],
|
|
lockTap: false
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
userInfo: state => state.user.userInfo,
|
|
mineInfo: state => state.user.mineInfo,
|
|
}),
|
|
onLoad(options) {
|
|
this.options = options
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh()
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onPageScroll(e) {
|
|
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
|
if (this.color == color) return
|
|
this.color = color
|
|
this.$util.setNavigationBarColor({
|
|
color,
|
|
bg: 'none'
|
|
});
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
|
async initIndex() {},
|
|
initRefresh() {
|
|
this.initIndex()
|
|
},
|
|
//表单验证
|
|
validate(param) {
|
|
let validate = new this.$util.Validate();
|
|
this.rule.map(item => {
|
|
let {
|
|
name,
|
|
} = item
|
|
validate.add(param[name], item);
|
|
})
|
|
let message = validate.start();
|
|
console.log(message, "message");
|
|
return message;
|
|
},
|
|
async submit() {
|
|
let param = this.$util.deepCopy(this.subForm)
|
|
let msg = this.validate(param);
|
|
if (msg) {
|
|
this.$util.showToast({
|
|
title: msg
|
|
})
|
|
return
|
|
}
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
try {
|
|
await this.$api.mine.applyReseller(param)
|
|
this.$util.hideAll()
|
|
this.$util.showToast({
|
|
title: `提交成功`
|
|
});
|
|
this.lockTap = false
|
|
this.$util.goUrl({
|
|
url: `/mine/pages/apply-result?type=2`,
|
|
openType: `redirectTo`
|
|
})
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mine-distribution-index {
|
|
.space-user-info {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 219rpx;
|
|
}
|
|
.mine-index-bg {
|
|
background: rgb(57, 181, 74);
|
|
height: 14.625rem;
|
|
width: 140%;
|
|
left: -20%;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
.apply-info {
|
|
padding: 50rpx;
|
|
|
|
.apply-btn {
|
|
width: 590rpx;
|
|
height: 96rpx;
|
|
margin-top: 70rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|