修改代码
This commit is contained in:
wangxiaowei
@ -9,7 +9,22 @@
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view>
|
||||
<view>
|
||||
<navbar title="加盟合作" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<!-- 待审核 -->
|
||||
<view class="mt-84rpx" v-if="status === 0">
|
||||
<view class="flex justify-center items-center">
|
||||
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`"/>
|
||||
</view>
|
||||
<view class="mt-60rpx text-center">
|
||||
<view class="text-36rpx leading-50rpx text-#303133">您的信息已成功提交</view>
|
||||
<view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-20rpx mx-102rpx">目前正在审核中，请您耐心等待</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 申请成功提示 -->
|
||||
<view class="mt-84rpx" v-if="tips">
|
||||
<view v-if="isSuccess">
|
||||
@ -22,7 +37,7 @@
|
||||
<view class="font-400 text-26rpx leading-42rpx text-#9CA3AF mt-28rpx mx-102rpx">如您遇到任何问题，可随时联系客服热线 400-6245-123，我们将竭诚为您服务！</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view v-else>
|
||||
<view class="flex justify-center items-center">
|
||||
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`"/>
|
||||
</view>
|
||||
@ -33,181 +48,168 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<navbar title="加盟合作" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx mt-38rpx">
|
||||
<!-- 加盟类型 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">加盟类型</view>
|
||||
<template v-if="status >= 2">
|
||||
<view class="mx-30rpx mt-38rpx">
|
||||
<!-- 加盟类型 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<wd-radio-group v-model="form.settleIn" size="large" shape="dot" checked-color="#4C9F44" inline>
|
||||
<wd-radio :value="1" border>
|
||||
<view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">加盟</view>
|
||||
</wd-radio>
|
||||
<wd-radio :value="2" border>
|
||||
<view class="leading-36rpx font-400 text-30rpx ml-12rpx">入驻</view>
|
||||
</wd-radio>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center mt-46rpx" v-if="form.settleIn === 2">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mr-66rpx">门店名称</view>
|
||||
<view class="flex-1">
|
||||
<wd-input no-border placeholder="请填写门店名称" custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 营业执照 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx">营业执照</view>
|
||||
<view class="">
|
||||
<wd-upload
|
||||
:file-list="fileList"
|
||||
:limit="1"
|
||||
image-mode="scaleToFill"
|
||||
:action="action"
|
||||
@change="TeaRoom.handleUploadFile">
|
||||
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
|
||||
<view class="">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">加盟类型</view>
|
||||
<view class="flex items-center">
|
||||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#303133">营业执照</view>
|
||||
</view>
|
||||
</wd-upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||||
<view class="mr-10rpx">联系方式</view>
|
||||
<view class="flex items-center">
|
||||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
|
||||
<view class="flex items-center">
|
||||
<wd-radio-group v-model="form.operation_type" size="large" shape="dot" checked-color="#4C9F44" inline>
|
||||
<wd-radio :value="1" border>
|
||||
<view class="leading-36rpx font-400 text-30rpx ml-12rpx mr-60rpx">加盟</view>
|
||||
</wd-radio>
|
||||
<wd-radio :value="2" border>
|
||||
<view class="leading-36rpx font-400 text-30rpx ml-12rpx">入驻</view>
|
||||
</wd-radio>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="flex items-center mt-46rpx" v-if="form.settleIn === 2">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mr-66rpx">门店名称</view>
|
||||
<view class="flex-1">
|
||||
<wd-input no-border placeholder="请填写门店名称" custom-class="!bg-[#F6F7F8] !rounded-16rpx !px-28rpx !py-20rpx"></wd-input>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 营业执照 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx">营业执照</view>
|
||||
<view class="">
|
||||
<wd-upload
|
||||
:header="{'token': token}"
|
||||
v-model:file-list="fileList"
|
||||
:limit="1"
|
||||
image-mode="scaleToFill"
|
||||
:action="action">
|
||||
<view class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
|
||||
<view class="">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#303133">营业执照</view>
|
||||
</view>
|
||||
</wd-upload>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||||
<view class="mr-10rpx">联系方式</view>
|
||||
<view class="flex items-center">
|
||||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`" ></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text-26rpx leading-32rpx text-#606266">联系人</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input no-border placeholder="请填写联系人" ></wd-input>
|
||||
<view>
|
||||
<view class="text-26rpx leading-32rpx text-#606266">联系人</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input no-border placeholder="请填写联系人" v-model="form.username"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input no-border placeholder="请填写手机号"></wd-input>
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input no-border placeholder="请填写手机号" v-model="form.mobile"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
|
||||
<template #suffix>
|
||||
<view class="flex items-center mr-34rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="TeaRoom.handleCountDown">发送验证码</view>
|
||||
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
|
||||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="TeaRoom.handleFinishCountDown"></wd-count-down>
|
||||
<view> S后重发</view>
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||||
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
|
||||
<template #suffix>
|
||||
<view class="flex items-center mr-34rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="TeaRoom.handleCountDown">发送验证码</view>
|
||||
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
|
||||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="TeaRoom.handleFinishCountDown"></wd-count-down>
|
||||
<view> S后重发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">选择地区</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-room-address">
|
||||
<wd-picker :columns="openCityList" label-key="name" value-key="id" v-model="form.city_id" use-default-slot @confirm="TeaRoom.handleConfirmAddress">
|
||||
<view class="flex items-center">
|
||||
<wd-input readonly v-model="city" placeholder="请选择地区" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;" custom-input-class="!p-0"></wd-input>
|
||||
<wd-icon name="chevron-down" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</wd-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">详细地址</view>
|
||||
<view class="mt-20rpx pb-20rpx">
|
||||
<wd-input no-border placeholder="请输入小区/写字楼" v-model="form.address" ></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">省市区</view>
|
||||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-room-address">
|
||||
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="TeaRoom.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
|
||||
</view>
|
||||
<!-- 留言建议 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||||
留言建议
|
||||
</view>
|
||||
|
||||
<view class="mt-22rpx">
|
||||
<view class="text-26rpx leading-32rpx text-#606266">详细地址</view>
|
||||
<view class="mt-20rpx pb-20rpx">
|
||||
<wd-input no-border placeholder="请输入小区/写字楼"></wd-input>
|
||||
</view>
|
||||
<view class="">
|
||||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="form.suggest" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 留言建议 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||||
留言建议
|
||||
</view>
|
||||
<view class="">
|
||||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="form.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||||
</view>
|
||||
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
|
||||
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
|
||||
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
|
||||
</view>
|
||||
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
|
||||
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx" @click="router.navigateTo('/bundle/contact/contact')">联系我们</view>
|
||||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
|
||||
</view>
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
|
||||
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx" @click="router.navigateTo('/bundle/contact/contact')">联系我们</view>
|
||||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="TeaRoom.handleSubmit">提交申请</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useColPickerData } from '@/hooks/useColPickerData'
|
||||
import { router } from '@/utils/tools'
|
||||
import { router, removeImageUrlPrefix } from '@/utils/tools'
|
||||
import { SMS_ENUM } from '@/enum/sms'
|
||||
import { mobile } from '@/utils/test'
|
||||
import { getVerificationCode, addJoinCooperation, getJoinCooperationStatus } from '@/api/user'
|
||||
import { getOpenCityList } from '@/api/tea-room'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const token = ref<string>('') // 用户token
|
||||
const toast = useToast()
|
||||
|
||||
// 审核提示
|
||||
const tips = ref<boolean>(false)
|
||||
const isSuccess = ref<boolean>(false)
|
||||
|
||||
// 省市区数据
|
||||
const { colPickerData, findChildrenByCode } = useColPickerData()
|
||||
const value = ref<string[]>([])
|
||||
const area = ref<any[]>([
|
||||
colPickerData.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
label: item.text
|
||||
}
|
||||
})
|
||||
])
|
||||
const columnChange = ({ selectedItem, resolve, finish }) => {
|
||||
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
|
||||
if (areaData && areaData.length) {
|
||||
resolve(
|
||||
areaData.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
label: item.text
|
||||
}
|
||||
})
|
||||
)
|
||||
} else {
|
||||
finish()
|
||||
}
|
||||
}
|
||||
// 已开通城市列表
|
||||
const openCityList = ref<Array<any>>([])
|
||||
const city = ref<string>('')
|
||||
|
||||
// 上传文件
|
||||
const fileList = ref<any[]>([])
|
||||
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
|
||||
const action = import.meta.env.VITE_UPLOAD_BASEURL // 仅做测试使用，实际请换成真实上传接口
|
||||
|
||||
// 验证码倒计时
|
||||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||||
@ -215,40 +217,126 @@
|
||||
const countDown = ref<any>(null) // 倒计时组件
|
||||
|
||||
// 表单
|
||||
const form = reactive<{
|
||||
settleIn: number,
|
||||
code: string,
|
||||
message: string
|
||||
const form = ref<{
|
||||
operation_type: number // 加盟类型
|
||||
license_img: string // 营业执照
|
||||
username: string // 联系人姓名
|
||||
mobile: string // 联系电话
|
||||
code: string // 验证码
|
||||
city_id: number // 城市ID
|
||||
address: string // 详细地址
|
||||
suggest: string // 意见建议
|
||||
}>({
|
||||
settleIn: 1,
|
||||
operation_type: 1,
|
||||
license_img: '',
|
||||
username: '',
|
||||
mobile: '',
|
||||
code: '',
|
||||
message: ''
|
||||
city_id: 0,
|
||||
address: '',
|
||||
suggest: ''
|
||||
})
|
||||
|
||||
// 审核状态
|
||||
const status = ref<number>(-1) // 0待审核 1审核成功 2审核失败 3未提交数据
|
||||
|
||||
onLoad(async () => {
|
||||
const res = await getJoinCooperationStatus()
|
||||
status.value = res.status
|
||||
|
||||
token.value = uni.getStorageSync('token')
|
||||
TeaRoom.handleInit()
|
||||
})
|
||||
|
||||
const TeaRoom = {
|
||||
// 图片选择/删除
|
||||
handleUploadFile: (event: any) => {
|
||||
fileList.value = event.fileList
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res = await getOpenCityList()
|
||||
openCityList.value = res.list
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
handleCountDown: () => {
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
handleCountDown: async () => {
|
||||
if (!mobile(form.value.mobile)) {
|
||||
toast.show('请检查手机号码')
|
||||
return false
|
||||
}
|
||||
|
||||
await getVerificationCode({ scene: SMS_ENUM.BANK, mobile: String(form.value.mobile) })
|
||||
|
||||
startCountDown.value = true
|
||||
nextTick(() => {
|
||||
countDown.value?.start()
|
||||
|
||||
// 发送验证码请求
|
||||
})
|
||||
setTimeout(() => {
|
||||
countDown.value.start()
|
||||
}, 100)
|
||||
},
|
||||
|
||||
// 验证码倒计时结束
|
||||
/**
|
||||
* 验证码倒计时结束
|
||||
*/
|
||||
handleFinishCountDown: () => {
|
||||
startCountDown.value = false
|
||||
},
|
||||
|
||||
// 确认选择地址
|
||||
handleConfirmAddress: (selected) => {
|
||||
console.log("🚀 ~ selected:", selected)
|
||||
/**
|
||||
* 确认选择地址
|
||||
*/
|
||||
handleConfirmAddress: (item) => {
|
||||
city.value = item.selectedItems.name
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交申请
|
||||
*/
|
||||
handleSubmit: async () => {
|
||||
if (!form.value.username) {
|
||||
toast.show('请输入联系人')
|
||||
return false
|
||||
}
|
||||
|
||||
if (!mobile(form.value.mobile)) {
|
||||
toast.show('请检查手机号码')
|
||||
return false
|
||||
}
|
||||
|
||||
if (!form.value.code) {
|
||||
toast.show('请输入验证码')
|
||||
return false
|
||||
}
|
||||
|
||||
if (!form.value.city_id) {
|
||||
toast.show('请选择地区')
|
||||
return false
|
||||
}
|
||||
|
||||
if (!form.value.address) {
|
||||
toast.show('请输入详细地址')
|
||||
return false
|
||||
}
|
||||
|
||||
form.value.license_img = fileList.value.length > 0 ? removeImageUrlPrefix(fileList.value)[0] : ''
|
||||
|
||||
toast.loading({
|
||||
loadingType: 'ring',
|
||||
loadingColor: '#4C9F44',
|
||||
msg: '提交中...'
|
||||
})
|
||||
try {
|
||||
toast.close()
|
||||
|
||||
await addJoinCooperation(form.value)
|
||||
status.value = 0 // 提交成功，变更状态为待审核
|
||||
|
||||
setTimeout(() => {
|
||||
toast.success('提交成功')
|
||||
}, 100)
|
||||
} catch(e) {
|
||||
toast.close()
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user