505 lines
12 KiB
Vue
505 lines
12 KiB
Vue
|
<!--
|
|||
|
|
@name: index
|
|||
|
|
@author: kahu4
|
|||
|
|
@date: 2024-01-17 11:12
|
|||
|
|
@description：申请分销商
|
|||
|
|
@update: 2024-01-17 11:12
|
|||
|
|
-->
|
|||
|
|
<script setup>
|
|||
|
|
import Header from '@/components/Header/index.vue'
|
|||
|
|
import AddressSelect from '@/components/AddressSelect/index.vue'
|
|||
|
|
import { useScroll } from "@/hooks/useScroll";
|
|||
|
|
import { onLoad, onPageScroll, onShow } from "@dcloudio/uni-app";
|
|||
|
|
import { useMainStore } from "@/store/store";
|
|||
|
|
import { storeToRefs } from "pinia";
|
|||
|
|
import { nextTick, ref } from "vue";
|
|||
|
|
import { distributionAudit, distributionError } from "@/utils/images";
|
|||
|
|
import { useJump } from "@/hooks/useJump";
|
|||
|
|
import { useInterface } from "@/hooks/useInterface";
|
|||
|
|
import { applyDistribution, checkIsDistribution, updateApply } from "@/api/distribution";
|
|||
|
|
import { useRouter } from "@/hooks/useRouter";
|
|||
|
|
import { getDictByType } from "@/api/global";
|
|||
|
|
import { distributionAgreementUrl } from "@/api/auth";
|
|||
|
|
|
|||
|
|
const {scrollTop} = useScroll()
|
|||
|
|
onPageScroll(() => {
|
|||
|
|
})
|
|||
|
|
const {goDistribution} = useJump()
|
|||
|
|
const {getParams} = useRouter()
|
|||
|
|
const mainStore = useMainStore();
|
|||
|
|
const {user, areaList} = storeToRefs(mainStore);
|
|||
|
|
const {goWebview, goHome} = useJump();
|
|||
|
|
const {push} = useRouter();
|
|||
|
|
const {toast} = useInterface()
|
|||
|
|
// ======================== 表单 ===================================
|
|||
|
|
const showPrivacy = ref(true)
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置隐私协议模块是否可见
|
|||
|
|
* 解决键盘弹起fixed内容上顶问题
|
|||
|
|
* @param flag
|
|||
|
|
*/
|
|||
|
|
function setShowPrivacy(flag) {
|
|||
|
|
nextTick(() => {
|
|||
|
|
showPrivacy.value = flag
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const userCheckData = ref({
|
|||
|
|
status: null,
|
|||
|
|
refuse: '',
|
|||
|
|
realName: '',
|
|||
|
|
levelName: '',
|
|||
|
|
superiorName: '',
|
|||
|
|
addUpWages: 0,
|
|||
|
|
refuseAmount: 0,
|
|||
|
|
amount: 0
|
|||
|
|
})
|
|||
|
|
const subLoading = ref(false)
|
|||
|
|
const form = ref({
|
|||
|
|
realName: '',
|
|||
|
|
address: '',
|
|||
|
|
reason: '',
|
|||
|
|
superiorIdP1: undefined
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function verify() {
|
|||
|
|
// 校验表单
|
|||
|
|
if (agreementFlag.value.length <= 0) {
|
|||
|
|
toast({title: '请先阅读并勾选协议'})
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if (!form.value.realName) {
|
|||
|
|
toast({title: '请输入真实姓名'})
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if (!form.value.address) {
|
|||
|
|
toast({title: '请选择真实地址'})
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return true
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleSubmit() {
|
|||
|
|
if (subLoading.value) return
|
|||
|
|
if (!verify()) return
|
|||
|
|
try {
|
|||
|
|
subLoading.value = true
|
|||
|
|
if (!isUpdate.value) {
|
|||
|
|
await applyDistribution(form.value)
|
|||
|
|
} else {
|
|||
|
|
await updateApply(form.value)
|
|||
|
|
isUpdate.value = false
|
|||
|
|
}
|
|||
|
|
await doCheckIsDistribution()
|
|||
|
|
} finally {
|
|||
|
|
subLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 检查当前用户是否是分销商
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
async function doCheckIsDistribution() {
|
|||
|
|
userCheckData.value = await checkIsDistribution();
|
|||
|
|
if (userCheckData.value.status === 1 && !isUpdate.value) {
|
|||
|
|
goDistribution({}, true)
|
|||
|
|
}
|
|||
|
|
return userCheckData.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 再次申请
|
|||
|
|
*/
|
|||
|
|
function applyForAgain() {
|
|||
|
|
form.value = {
|
|||
|
|
...form.value,
|
|||
|
|
...{
|
|||
|
|
realName: '',
|
|||
|
|
address: '',
|
|||
|
|
reason: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
userCheckData.value = {
|
|||
|
|
status: null,
|
|||
|
|
refuse: '',
|
|||
|
|
realName: '',
|
|||
|
|
levelName: '',
|
|||
|
|
superiorName: '',
|
|||
|
|
addUpWages: 0,
|
|||
|
|
refuseAmount: 0,
|
|||
|
|
amount: 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ======================== 地址相关 ================================
|
|||
|
|
const addressPickerRef = ref()
|
|||
|
|
const defaultSelect = ref([0, 0, 0])
|
|||
|
|
|
|||
|
|
function handleChooseAddress() {
|
|||
|
|
addressPickerRef.value.open(isUpdate.value ? form.value.address : '')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleConfirmAddress(values) {
|
|||
|
|
form.value.address = values.reduce((pre, now, index) => {
|
|||
|
|
if (index === 0) {
|
|||
|
|
pre = now.name
|
|||
|
|
} else {
|
|||
|
|
pre = pre + '-' + now.name
|
|||
|
|
}
|
|||
|
|
return pre
|
|||
|
|
}, '');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const agreementFlag = ref([]) // length > 0就是勾选了
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 阅读分销协议
|
|||
|
|
*/
|
|||
|
|
async function readAgreement() {
|
|||
|
|
push({url: '/pages/webview/index'}, {data: {src: distributionAgreementUrl}})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showFlag = ref(false)
|
|||
|
|
|
|||
|
|
onShow(async () => {
|
|||
|
|
showFlag.value = false
|
|||
|
|
if (isUpdate.value) {
|
|||
|
|
const data = await doCheckIsDistribution()
|
|||
|
|
form.value.realName = data.realName
|
|||
|
|
form.value.address = data.address
|
|||
|
|
// form.value.address =
|
|||
|
|
form.value.reason = data.reason
|
|||
|
|
} else {
|
|||
|
|
await doCheckIsDistribution()
|
|||
|
|
}
|
|||
|
|
showFlag.value = true
|
|||
|
|
})
|
|||
|
|
const isUpdate = ref(false)
|
|||
|
|
|
|||
|
|
onLoad(async (options) => {
|
|||
|
|
const params = getParams(options);
|
|||
|
|
// 是否是更新
|
|||
|
|
isUpdate.value = (params && params.update) || false
|
|||
|
|
// 有上级ID处理上级ID
|
|||
|
|
form.value.superiorIdP1 = (params && params.id) || undefined;
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="apply-for"
|
|||
|
|
v-if="user">
|
|||
|
|
<Header
|
|||
|
|
:scroll-top="scrollTop"
|
|||
|
|
system-bar-area-bg="#fff"
|
|||
|
|
header-area-bg="#fff">申请分销商
|
|||
|
|
</Header>
|
|||
|
|
<view class="inner">
|
|||
|
|
<view class="bg"></view>
|
|||
|
|
<!-- userinfo -->
|
|||
|
|
<view class="userinfo flex flex-column flex-ai__center flex-jc__center">
|
|||
|
|
<image :src="user.avatar" />
|
|||
|
|
<text class="username">{{ userCheckData.realName || user.nickname }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- card -->
|
|||
|
|
<view
|
|||
|
|
class="apply-card"
|
|||
|
|
v-if="showFlag">
|
|||
|
|
<!-- form -->
|
|||
|
|
<view
|
|||
|
|
v-if="userCheckData.status === null || isUpdate"
|
|||
|
|
class="form">
|
|||
|
|
<view class="row">
|
|||
|
|
<text class="label">
|
|||
|
|
真实姓名
|
|||
|
|
</text>
|
|||
|
|
<div class="right">
|
|||
|
|
<input
|
|||
|
|
:adjust-position="false"
|
|||
|
|
v-model="form.realName"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="请输入真实姓名"
|
|||
|
|
@focus="setShowPrivacy(false)"
|
|||
|
|
@blur="setShowPrivacy(true)" />
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
<view class="row">
|
|||
|
|
<text class="label">
|
|||
|
|
现居城市
|
|||
|
|
</text>
|
|||
|
|
<div
|
|||
|
|
class="right flex flex-jc__sb flex-ai__center"
|
|||
|
|
@click="handleChooseAddress">
|
|||
|
|
<text
|
|||
|
|
class="placeholder"
|
|||
|
|
v-if="!form.address">
|
|||
|
|
请选择省、市、区
|
|||
|
|
</text>
|
|||
|
|
<text
|
|||
|
|
class="placeholder"
|
|||
|
|
v-else>
|
|||
|
|
{{ form.address }}
|
|||
|
|
</text>
|
|||
|
|
<u-icon name="arrow-right" />
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
<view class="row">
|
|||
|
|
<text class="label">
|
|||
|
|
申请原因
|
|||
|
|
</text>
|
|||
|
|
<div class="right">
|
|||
|
|
<input
|
|||
|
|
:adjust-position="false"
|
|||
|
|
@focus="setShowPrivacy(false)"
|
|||
|
|
@blur="setShowPrivacy(true)"
|
|||
|
|
v-model="form.reason"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="请输入申请原因" />
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="submit"
|
|||
|
|
:class="{'hide-box':!showPrivacy}">
|
|||
|
|
<view class="tips">提交成功后，我们将会在1-3个工作日内给您回复</view>
|
|||
|
|
<view
|
|||
|
|
class="button animation-button"
|
|||
|
|
@click="handleSubmit">提交审核
|
|||
|
|
</view>
|
|||
|
|
<view class="agreement tips flex flex-ai__center">
|
|||
|
|
<u-checkbox-group
|
|||
|
|
activeColor="#ed6d47"
|
|||
|
|
shape="circle"
|
|||
|
|
v-model="agreementFlag"
|
|||
|
|
>
|
|||
|
|
<u-checkbox
|
|||
|
|
name=""
|
|||
|
|
/>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
勾选代表同意
|
|||
|
|
<text
|
|||
|
|
class="primary-color"
|
|||
|
|
@click="readAgreement">《分销协议》
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- state success -->
|
|||
|
|
<view
|
|||
|
|
class="state"
|
|||
|
|
v-if="userCheckData.status === 0 && !isUpdate">
|
|||
|
|
<image :src="distributionAudit" />
|
|||
|
|
<view class="title">申请提交成功，请耐心等待...</view>
|
|||
|
|
<view
|
|||
|
|
class="btn"
|
|||
|
|
@click="goHome">继续逛逛
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- state error -->
|
|||
|
|
<view
|
|||
|
|
class="state"
|
|||
|
|
v-if="userCheckData.status === 2 && !isUpdate">
|
|||
|
|
<image :src="distributionError" />
|
|||
|
|
<view class="title">不好意思，商家拒绝了您的申请...</view>
|
|||
|
|
<view class="sub-title">拒绝理由：{{ userCheckData.refuse }}</view>
|
|||
|
|
<view class="flex flex-jc__center flex-ai__center">
|
|||
|
|
<view
|
|||
|
|
class="btn line-btn"
|
|||
|
|
@click="applyForAgain">
|
|||
|
|
再次申请
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="btn"
|
|||
|
|
@click="goHome">
|
|||
|
|
继续逛逛
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- state 清退 -->
|
|||
|
|
<view
|
|||
|
|
class="state"
|
|||
|
|
v-if="userCheckData.status === -1 && !isUpdate">
|
|||
|
|
<image :src="distributionError" />
|
|||
|
|
<view class="title">您已被清退，请重新申请</view>
|
|||
|
|
<view class="sub-title">{{ userCheckData.refuse }}</view>
|
|||
|
|
<view class="flex flex-jc__center flex-ai__center">
|
|||
|
|
<view
|
|||
|
|
class="btn line-btn"
|
|||
|
|
@click="applyForAgain">
|
|||
|
|
再次申请
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="btn"
|
|||
|
|
@click="goHome">
|
|||
|
|
继续逛逛
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<AddressSelect
|
|||
|
|
ref="addressPickerRef"
|
|||
|
|
v-model:default-value="defaultSelect"
|
|||
|
|
@confirm="handleConfirmAddress" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style
|
|||
|
|
scoped
|
|||
|
|
lang="scss">
|
|||
|
|
.apply-for {
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inner {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.bg {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 750/460;
|
|||
|
|
background: #333333;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.userinfo {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
@include usePadding(0, 72);
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 4rpx solid #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.username {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apply-card {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
background: #f6f6f6;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
@include usePadding(34, 34);
|
|||
|
|
|
|||
|
|
.form {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
@include usePadding(32, 0);
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
|
|||
|
|
.row {
|
|||
|
|
@include useFlex(flex-start, center);
|
|||
|
|
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
@include usePadding(0, 32);
|
|||
|
|
border-bottom: 1rpx solid #f6f6f6;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
|
|||
|
|
.placeholder {
|
|||
|
|
color: #808080;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit {
|
|||
|
|
width: 80%;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 50rpx;
|
|||
|
|
@include useFlex(center, center, column);
|
|||
|
|
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
color: $tips-color;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
@include useFlex(center, center);
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.state {
|
|||
|
|
width: 100%;
|
|||
|
|
@include useFlex(center, center, column);
|
|||
|
|
@include usePadding(0, 50);
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 170rpx;
|
|||
|
|
height: 170rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub-title {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
|
|||
|
|
color: $tips-color
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 230rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #333333;
|
|||
|
|
color: #fff;
|
|||
|
|
@include useFlex(center, center, column);
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
margin: 30rpx 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line-btn {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1rpx solid #333333;
|
|||
|
|
color: #333;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hide-box {
|
|||
|
|
bottom: -500rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|