477 lines
22 KiB
Vue
477 lines
22 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="">
|
||
<view class="">
|
||
<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="status === 1">
|
||
<view class="flex justify-center items-center">
|
||
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image1.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-28rpx mx-102rpx">请登录【茶址茶艺师】小程序查看信息进行操作，如有疑问请联系平台</view>
|
||
</view>
|
||
<!-- <view class="bg-white rounded-16rpx px-34rpx py-28rpx mx-78rpx mt-24rpx">
|
||
<view class="font-bold text-28rpx leading-40rpx text-#303133">操作步骤</view>
|
||
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx">
|
||
<view>1.关注【茶址茶艺师】小程序</view>
|
||
<view>2.在左下角【茶址】 → 选择【茶艺师端】</view>
|
||
<view>3.用注册手机号+密码 登录</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<template v-if="status >= 2">
|
||
<view class="mx-30rpx mt-38rpx">
|
||
<!-- 营业执照 -->
|
||
<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 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>
|
||
<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 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-specialist-cell">
|
||
<wd-picker placeholder="请选择性别" :columns="genderColumns" v-model="form.gender" @confirm="TeaSpecialist.handleConfirmGender" />
|
||
</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-specialist-cell">
|
||
<wd-datetime-picker placeholder="请选择出生年月" v-model="form.both" :minDate="new Date(1970, 0, 1).getTime()" :maxDate="new Date().getTime()" type="date" @confirm="TeaSpecialist.handleConfirmBoth"></wd-datetime-picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-22rpx flex items-center justify-between border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||
<view class="mr-166rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">身高</view>
|
||
<view class="mt-20rpx flex items-center">
|
||
<wd-input no-border placeholder="请填写身高" v-model="form.height"></wd-input>
|
||
<view class="text-30rpx leading-32rpx text-#606266">cm</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<view class="text-26rpx leading-32rpx text-#606266">体重</view>
|
||
<view class="mt-20rpx flex items-center">
|
||
<wd-input no-border placeholder="请填写体重" v-model="form.weight"></wd-input>
|
||
<view class="text-30rpx leading-32rpx text-#606266">kg</view>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
<wd-textarea placeholder="你的茶艺兴趣爱好是什么？比如茶艺研究、品鉴、茶道美学……快来分享一下吧！" v-model="form.hobby_introduce" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务区域 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx flex items-center">
|
||
<view class="flex items-center">
|
||
<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>
|
||
<view class="flex-1 ml-80rpx">
|
||
<wd-picker :columns="openCityList" label-key="name" value-key="id" v-model="form.city_id" use-default-slot @confirm="TeaSpecialist.handleConfirmAddress">
|
||
<view class="flex items-center">
|
||
<wd-input readonly v-model="city" size="large" placeholder="请选择地区" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||
</view>
|
||
</wd-picker>
|
||
<!-- <wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="TeaSpecialist.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 照片信息 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
|
||
<view class="flex items-center">
|
||
<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>
|
||
<view class="mt-32rpx">
|
||
<wd-upload
|
||
:header="{'token': token}"
|
||
v-model:file-list="fileList2"
|
||
: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 class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
|
||
<view class="flex items-center">
|
||
<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>
|
||
<view class="mt-32rpx flex items-center">
|
||
<view class="mr-16rpx">
|
||
<wd-upload
|
||
:header="{'token': token}"
|
||
v-model:file-list="fileList3"
|
||
: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>
|
||
<wd-upload
|
||
:header="{'token': token}"
|
||
v-model:file-list="fileList4"
|
||
: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 py-32rpx mt-20rpx">
|
||
<view class="flex items-center">
|
||
<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>
|
||
|
||
<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 class="mt-22rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
|
||
<view class="mt-20rpx 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="TeaSpecialist.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="TeaSpecialist.handleFinishCountDown"></wd-count-down>
|
||
<view> S后重发</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</wd-input>
|
||
</view>
|
||
</view>
|
||
</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" @click="TeaSpecialist.handleSubmit">提交申请</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { router, removeImageUrlPrefix } from '@/utils/tools'
|
||
import { getOpenCityList } from '@/api/tea-room'
|
||
import { useToast } from 'wot-design-uni'
|
||
import { getVerificationCode, addTeaSpecialist, getTeaSpecialistStatus } from '@/api/user'
|
||
import { SMS_ENUM } from '@/enum/sms'
|
||
import { mobile } from '@/utils/test'
|
||
|
||
const OSS = inject('OSS')
|
||
const token = ref<string>('') // 用户token
|
||
const toast = useToast()
|
||
|
||
// 已开通城市列表
|
||
const openCityList = ref<Array<any>>([])
|
||
const city = ref<string>('')
|
||
|
||
// 审核提示
|
||
const tips = ref<boolean>(false)
|
||
|
||
// 性别
|
||
const genderColumns = ['女', '男']
|
||
|
||
// 上传文件
|
||
const fileList = ref<any[]>([]) // 营业执照
|
||
const fileList2 = ref<any[]>([]) // 照片信息
|
||
const fileList3 = ref<any[]>([]) // 健康证
|
||
const fileList4 = ref<any[]>([]) // 资格证
|
||
const action = import.meta.env.VITE_UPLOAD_BASEURL
|
||
|
||
// 验证码倒计时
|
||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||
const countDown = ref<any>(null) // 倒计时组件
|
||
|
||
// 表单
|
||
const form = ref<{
|
||
license_img: string // 营业执照
|
||
username: string // 茶艺师名字
|
||
gender: number // 茶艺师性别(1男 2女)
|
||
both: number | string // 出生年月
|
||
height: string // 身高
|
||
weight: string // 体重
|
||
hobby_introduce: string // 兴趣爱好介绍
|
||
city_id: number // 城市ID
|
||
avatar: string // 头像
|
||
certificate: string // 健康证、资格证书信息
|
||
mobile: string // 联系电话
|
||
code: string // 验证码
|
||
}>({
|
||
license_img: '',
|
||
username: '',
|
||
gender: 2,
|
||
both: '',
|
||
height: '',
|
||
weight: '',
|
||
hobby_introduce: '',
|
||
city_id: 0,
|
||
avatar: '',
|
||
certificate: '',
|
||
mobile: '',
|
||
code: ''
|
||
})
|
||
|
||
// 审核状态
|
||
const status = ref<number>(-1) // 0待审核 1审核成功 2审核失败 3未提交数据
|
||
|
||
onLoad(async () => {
|
||
const res = await getTeaSpecialistStatus()
|
||
status.value = res.status
|
||
|
||
token.value = uni.getStorageSync('token')
|
||
TeaSpecialist.handleInit()
|
||
form.value.both = new Date(1998, 11, 21).getTime()
|
||
})
|
||
|
||
const TeaSpecialist = {
|
||
/**
|
||
* 初始化
|
||
*/
|
||
handleInit: async () => {
|
||
const res = await getOpenCityList()
|
||
console.log("🚀 ~ res:", res)
|
||
openCityList.value = res.list
|
||
},
|
||
|
||
// 选择性别
|
||
handleConfirmGender: (gender: string) => {
|
||
console.log("🚀 ~ gender:", gender)
|
||
},
|
||
|
||
// 发送验证码
|
||
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
|
||
setTimeout(() => {
|
||
countDown.value.start()
|
||
}, 100)
|
||
},
|
||
|
||
// 验证码倒计时结束
|
||
handleFinishCountDown: () => {
|
||
startCountDown.value = false
|
||
},
|
||
|
||
/**
|
||
* 确认选择地址
|
||
*/
|
||
handleConfirmAddress: (item) => {
|
||
city.value = item.selectedItems.name
|
||
},
|
||
|
||
/**
|
||
* 提交申请
|
||
*/
|
||
handleSubmit: async () => {
|
||
if (!form.value.username) {
|
||
toast.show('请输入姓名')
|
||
return false
|
||
}
|
||
|
||
if (!form.value.both) {
|
||
toast.show('请选择出生年月')
|
||
return false
|
||
}
|
||
|
||
if (!form.value.height) {
|
||
toast.show('请输入身高')
|
||
return false
|
||
}
|
||
|
||
if (!form.value.weight) {
|
||
toast.show('请输入体重')
|
||
return false
|
||
}
|
||
|
||
if (!form.value.city_id) {
|
||
toast.show('请选择服务区域')
|
||
return false
|
||
}
|
||
|
||
if (fileList2.value.length == 0) {
|
||
toast.show('请上传本人照片')
|
||
return false
|
||
}
|
||
|
||
if (!mobile(form.value.mobile)) {
|
||
toast.show('请检查手机号码')
|
||
return false
|
||
}
|
||
|
||
if (!form.value.code) {
|
||
toast.show('请输入验证码')
|
||
return false
|
||
}
|
||
|
||
form.value.license_img = fileList.value.length > 0 ? removeImageUrlPrefix(fileList.value)[0] : ''
|
||
form.value.avatar = fileList2.value.length > 0 ? removeImageUrlPrefix(fileList2.value)[0] : ''
|
||
|
||
if (fileList3.value.length > 0 && fileList4.value.length > 0) {
|
||
form.value.certificate = removeImageUrlPrefix(fileList3.value)[0] + ',' + removeImageUrlPrefix(fileList4.value)[0]
|
||
} else if (fileList3.value.length > 0) {
|
||
form.value.certificate = removeImageUrlPrefix(fileList3.value)[0] + "," + ""
|
||
} else if (fileList4.value.length > 0) {
|
||
form.value.certificate = "" + "," +removeImageUrlPrefix(fileList4.value)[0]
|
||
}
|
||
|
||
toast.loading({
|
||
loadingType: 'ring',
|
||
loadingColor: '#4C9F44',
|
||
msg: '提交中...'
|
||
})
|
||
try {
|
||
toast.close()
|
||
|
||
await addTeaSpecialist(form.value)
|
||
status.value = 0 // 提交成功，变更状态为待审核
|
||
|
||
setTimeout(() => {
|
||
toast.success('提交成功')
|
||
}, 100)
|
||
} catch(e) {
|
||
toast.close()
|
||
return
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: $cz-page-background;
|
||
}
|
||
|
||
.tea-specialist-cell {
|
||
:deep() {
|
||
.wd-cell {
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.wd-cell__wrapper {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|