317 lines
7.9 KiB
Vue
317 lines
7.9 KiB
Vue
<template>
|
||
<view v-if="!isLoading" class="container b-f">
|
||
|
||
<!-- 头部背景图 -->
|
||
<view class="dealer-bg">
|
||
<image class="image" mode="widthFix" :src="background"></image>
|
||
</view>
|
||
|
||
<!-- 等待审核 -->
|
||
<view v-if="isApplying" class="dealer-boot dis-flex flex-dir-column flex-y-center">
|
||
<view class="boot__msg f-30 dis-flex flex-dir-column flex-y-center">
|
||
<text class="msg__icon iconfont icon-shenhezhong"></text>
|
||
<text class="msg__content m-top20 f-29 col-80">{{ words.wait_audit.value }}</text>
|
||
</view>
|
||
<!-- 去商城逛逛 -->
|
||
<view class="boot__submit form-submit dis-flex flex-x-center">
|
||
<button class="button" @click="$navTo('pages/index/index')">{{ words.goto_mall.value }}</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 填写申请信息 -->
|
||
<view v-else class="dis-flex flex-dir-column flex-y-center">
|
||
<view class="widget-form b-f m-top20 dis-flex flex-dir-column">
|
||
<view class="form-title f-30">{{ words.title.value }}</view>
|
||
<view class="form-box dis-flex flex-dir-column">
|
||
<form @submit="handleSubmit">
|
||
<view class="form-field dis-flex flex-y-center">
|
||
<view class="field-label">邀请人</view>
|
||
<view class="field-input">
|
||
<text>{{ refereeName }}（请核对）</text>
|
||
</view>
|
||
</view>
|
||
<view class="form-field dis-flex flex-y-center">
|
||
<view class="field-label">姓名</view>
|
||
<view class="field-input flex-box">
|
||
<input class="input" name="name" placeholder="请输入真实姓名"></input>
|
||
</view>
|
||
</view>
|
||
<view class="form-field dis-flex flex-y-center">
|
||
<view class="field-label">手机号</view>
|
||
<view class="field-input flex-box">
|
||
<input class="input" name="mobile" placeholder="请输入手机号"></input>
|
||
</view>
|
||
</view>
|
||
<!-- 申请协议 -->
|
||
<view class="form-license dis-flex flex-x-center flex-y-center">
|
||
<view class="license-radio dis-flex flex-y-center" @click="isRead = !isRead">
|
||
<text class="license-icon f-38 iconfont icon-radio" :class="[isRead ? 'c-violet' : 'col-bb']"></text>
|
||
<text class="f-28 col-80">我已阅读并了解</text>
|
||
</view>
|
||
<text @click="handleShowLicense()" class="f-28 c-violet">【{{ words.license.value }}】</text>
|
||
</view>
|
||
<!-- 立即申请 -->
|
||
<view class="form-submit dis-flex flex-x-center">
|
||
<button formType="submit" :disabled="disabled">{{ words.submit.value }}</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 入驻协议弹窗 -->
|
||
<u-modal v-model="showLicense" title="申请协议">
|
||
<scroll-view class="pops-content" :scroll-y="true">
|
||
<text>{{ license }}</text>
|
||
</scroll-view>
|
||
</u-modal>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as ApplyApi from '@/api/dealer/apply'
|
||
import SettingModel from '@/common/model/dealer/Setting'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 正在加载
|
||
isLoading: true,
|
||
// 当前是否为分销商
|
||
isDealer: undefined,
|
||
// 当前是否在申请中
|
||
isApplying: undefined,
|
||
// 推荐人昵称
|
||
refereeName: undefined,
|
||
// 文字设置
|
||
words: undefined,
|
||
// 背景图
|
||
background: undefined,
|
||
// 入驻协议
|
||
license: undefined,
|
||
// 入驻协议阅读状态
|
||
isRead: false,
|
||
// 显示入驻协议弹窗
|
||
showLicense: false,
|
||
// 按钮禁用
|
||
disabled: false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
this.getSetting()
|
||
this.getApplyStatus()
|
||
},
|
||
|
||
methods: {
|
||
|
||
// 获取分销设置
|
||
getSetting() {
|
||
const app = this
|
||
SettingModel.data()
|
||
.then(setting => {
|
||
// 赋值属性
|
||
app.words = setting.words.apply.words
|
||
app.background = setting.background.apply
|
||
app.license = setting.license.license
|
||
// 设置当前页面标题
|
||
app.setPageTitle(setting.words.apply.title)
|
||
})
|
||
},
|
||
|
||
// 分销商申请状态
|
||
getApplyStatus() {
|
||
const app = this
|
||
app.isLoading = true
|
||
ApplyApi.status()
|
||
.then(result => {
|
||
const data = result.data
|
||
app.isDealer = data.isDealer
|
||
app.isApplying = data.isApplying
|
||
app.refereeName = data.refereeName
|
||
})
|
||
.finally(() => app.isLoading = false)
|
||
},
|
||
|
||
// 设置当前页面标题
|
||
setPageTitle(title) {
|
||
uni.setNavigationBarTitle({ title: title.value })
|
||
},
|
||
|
||
// 切换支付选项
|
||
handleChecked(value) {
|
||
this.payment = value
|
||
},
|
||
|
||
// 显示入驻协议弹窗
|
||
handleShowLicense() {
|
||
this.showLicense = true
|
||
},
|
||
|
||
// 表单提交
|
||
handleSubmit({ detail }) {
|
||
const app = this
|
||
// 表单验证
|
||
if (!app.onValidation(detail.value)) {
|
||
return false
|
||
}
|
||
// 确认提交
|
||
app.disabled = true
|
||
ApplyApi.submit({ form: detail.value })
|
||
.then(result => {
|
||
app.$toast(result.message)
|
||
setTimeout(() => uni.navigateBack(), 1200)
|
||
})
|
||
.finally(() => app.disabled = false)
|
||
},
|
||
|
||
// 表单验证
|
||
onValidation(data) {
|
||
const app = this
|
||
// 验证可提现佣金
|
||
if (!data.name) {
|
||
app.$error('请填写姓名')
|
||
return false
|
||
}
|
||
// 验证手机号
|
||
if (!/^\+?\d[\d -]{8,12}\d/.test(data.mobile)) {
|
||
app.$error('手机号格式不正确')
|
||
return false
|
||
}
|
||
// 验证是否阅读协议
|
||
if (!app.isRead) {
|
||
app.$error('请先阅读分销商申请协议')
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.c-violet {
|
||
color: #786cff;
|
||
}
|
||
|
||
.col-80 {
|
||
color: #808080;
|
||
}
|
||
|
||
.col-bb {
|
||
color: #bbb;
|
||
}
|
||
|
||
.f-38 {
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.dealer-bg {
|
||
.image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.widget-form {
|
||
position: relative;
|
||
width: 700rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 1rpx 20rpx rgba(0, 0, 0, 0.21);
|
||
border-radius: 12rpx;
|
||
margin-top: -80rpx;
|
||
|
||
.form-title {
|
||
padding: 0 40rpx;
|
||
height: 90rpx;
|
||
border-bottom: 1rpx solid #e7e7e7;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-box {
|
||
padding: 40rpx 35rpx;
|
||
|
||
.form-field {
|
||
height: 80rpx;
|
||
margin-bottom: 24rpx;
|
||
padding: 10rpx 28rpx;
|
||
background-color: #f9f9f9;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
|
||
.field-label {
|
||
width: 130rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
.input {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-license {
|
||
.license-icon {
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
.form-submit {
|
||
margin-top: 40rpx;
|
||
|
||
button {
|
||
font-size: 30rpx;
|
||
background: #786cff;
|
||
border: 1rpx solid #786cff;
|
||
color: white;
|
||
border-radius: 50rpx;
|
||
padding: 0 120rpx;
|
||
|
||
&[disabled] {
|
||
background: #8e84fc;
|
||
border-color: #8e84fc;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 申请协议
|
||
.pops-content {
|
||
padding: 30rpx 48rpx;
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
color: #606266;
|
||
min-height: 320rpx;
|
||
max-height: 640rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 等待审核
|
||
.dealer-boot {
|
||
padding: 10rpx 30rpx;
|
||
margin-top: 80rpx;
|
||
|
||
.msg__icon {
|
||
font-size: 120rpx;
|
||
color: #8e84fc;
|
||
}
|
||
|
||
.boot__submit {
|
||
margin-top: 60rpx;
|
||
}
|
||
}
|
||
</style>
|