新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
504
views/distribution/applyFor/index.vue
Normal file
504
views/distribution/applyFor/index.vue
Normal file
@ -0,0 +1,504 @@
|
||||
<!--
|
||||
@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>
|
||||
Reference in New Issue
Block a user