You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
7.9 KiB
320 lines
7.9 KiB
11 months ago
|
<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="请输入真实姓名" />
|
||
|
|
</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="请输入手机号" />
|
||
|
|
</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>
|
||
|
|
.input {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|