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>
|