Files
chazhi/src/bundle/settle-in/tea-specialist.vue
2026-04-28 17:27:50 +08:00

658 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view>
<view>
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #F6F7F8 !important;">
<template #left>
<view class="flex items-center" @click="router.switchTab('/pages/my/my')">
<view class="mt-4rpx">
<wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">申请茶艺师</view>
</view>
</template>
</wd-navbar>
<!-- <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>
<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="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 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 class="flex items-center">
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
</view>
<text class="text-[#818CA9] ml-10rpx text-20rpx mt-4rpx">最多可选6个</text>
</view>
<view>
<view class="flex items-center flex-wrap">
<view v-for="item in exclusiveCirclesLabel" :key="item.id" class="tea-tag" :style="selectedTags.includes(item.id) ? 'background:#4C9F44;color:#fff;' : 'background:#F3F3F3;color:#818CA9;'
" @click="TeaSpecialist.handleTagClick(item.id)">
{{ item.label_name }}
</view>
</view>
</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 flex items-center">
<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>
<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>
<view class="mt-32rpx flex items-center gap-16rpx">
<wd-upload
:header="{'token': token}"
v-model:file-list="frontCard"
: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>
<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>
<wd-upload
:header="{'token': token}"
v-model:file-list="backCard"
: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>
<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>
<view class="mt-32rpx">
<wd-upload :header="{ 'token': token }" v-model:file-list="fileList4" :limit="9" multiple
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="flex items-center">
<view class="font-400 text-26rpx leading-36rpx text-#303133">个人照片</view>
</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>
<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>
</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, strToParams } from '@/utils/tools'
import { getOpenCityList } from '@/api/tea-room'
import { useToast } from 'wot-design-uni'
import { getVerificationCode, addTeaSpecialist, getTeaSpecialistStatus } from '@/api/user'
import { getExclusiveCirclesLabel } from '@/api/tea-specialist'
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 genderColumns = ['女', '男']
// 上传文件
const fileList = ref<any[]>([]) // 资格证
const fileList2 = ref<any[]>([]) // 照片信息
const fileList3 = ref<any[]>([]) // 个人展示
const fileList4 = ref<any[]>([]) // 健康证
const frontCard = ref<any[]>([]) // 身份证正面
const backCard = 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 // 体重
city_id: number // 城市ID
avatar: string // 头像
mobile: string // 联系电话
code: string // 验证码
health_certificate?: string // 健康证
information?: string // 个人展示
image?: string // 个人展示
front_card?: string // 身份证正面
back_card?: string // 身份证反面
broker_user_id?: number // 经纪人ID可选扫码绑定经纪人时携带
label_id?: string // 专属圈子标签ID逗号分隔
}>({
license_img: '', // 营业执照
username: '', // 茶艺师名字
gender: 2, // 茶艺师性别(1男 2女)
both: '', // 出生年月
height: '', // 身高
weight: '', // 体重
city_id: 0, // 城市ID
avatar: '', // 头像
mobile: '', // 联系电话
code: '', // 验证码
health_certificate: '', // 健康证
information: '', // 个人展示(2026-04-07暂时废弃)
image: '', // 本人照片
front_card: '', // 身份证正面
back_card: '', // 身份证反面
broker_user_id: 0, // 经纪人ID可选扫码绑定经纪人时携带
label_id: '' // 专属圈子标签ID逗号分隔
})
const both = ref<string>('1998-12-21')
// 审核状态
const status = ref<number>(3) // 0待审核 1审核成功 2审核失败 3未提交数据
// 专属圈子标签
const selectedTags = ref<number[]>([])
const exclusiveCirclesLabel = ref<Array<any>>([])
onLoad(async (args) => {
// 默认出生年月为1998年12月21日
form.value.both = new Date(1998, 11, 21).getTime()
// 处理扫码携带的参数(茶艺师绑定经纪人)
const scene = args?.scene
if (scene) {
form.value.broker_user_id = strToParams(decodeURIComponent(args.scene))?.brokerid
}
TeaSpecialist.handleInit()
})
onShow(async () => {
token.value = uni.getStorageSync('token')
if (token.value) {
const res = await getTeaSpecialistStatus()
status.value = res.status
} else {
console.log("🚀 ~ token.value:", token.value)
router.navigateTo('/pages/login/login')
}
})
const TeaSpecialist = {
/**
* 初始化
*/
handleInit: async () => {
const res = await getOpenCityList()
openCityList.value = res.list
const label = await getExclusiveCirclesLabel()
exclusiveCirclesLabel.value = label
},
// 标签点击事件
handleTagClick(id: number) {
const idx = selectedTags.value.indexOf(id)
if (idx > -1) {
selectedTags.value.splice(idx, 1)
} else {
if (selectedTags.value.length < 6) {
selectedTags.value.push(id)
} else {
toast.show('最多只能选择6个圈子')
}
}
},
// 选择性别
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
},
/**
*
*/
handleConfirmBoth({ value }: any) {
const d = new Date(value)
const year = d.getFullYear()
const month = d.getMonth() + 1
const day = d.getDate()
const date = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
both.value = date
},
/**
* 提交申请
*/
handleSubmit: async () => {
if (fileList2.value.length == 0) {
toast.show('请上传本人头像')
return false
}
if (!form.value.username) {
toast.show('请输入姓名')
return false
}
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 (selectedTags.value.length === 0) {
toast.show('请至少选择一个专属圈子')
return false
}
if (selectedTags.value.length > 6) {
toast.show('最多只能选择6个专属圈子')
return false
}
if (!form.value.city_id) {
toast.show('请选择服务区域')
return false
}
// 身份证正面和反面校验
// if (frontCard.value.length === 0) {
// toast.show('请上传身份证正面照片')
// return false
// }
// if (backCard.value.length === 0) {
// toast.show('请上传身份证反面照片')
// return false
// }
if (fileList.value.length == 0) {
toast.show('请上传茶艺师资格证书')
return false
}
// if (fileList4.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.label_id = selectedTags.value.join(',') // 专属圈子标签ID逗号分隔
form.value.license_img = fileList.value.length > 0 ? removeImageUrlPrefix(fileList.value)[0] : '' // 茶艺师资格证书
form.value.avatar = fileList2.value.length > 0 ? removeImageUrlPrefix(fileList2.value)[0] : '' // 个人照片
form.value.health_certificate = fileList3.value.length > 0 ? removeImageUrlPrefix(fileList3.value)[0] : '' // 健康证
form.value.image = fileList4.value.length > 0 ? removeImageUrlPrefix(fileList4.value) : '' // 个人展示
form.value.image = Array.isArray(form.value.image) ? form.value.image.join(',') : form.value.image
form.value.front_card = frontCard.value.length > 0 ? removeImageUrlPrefix(frontCard.value)[0] : '' // 身份证正面
form.value.back_card = backCard.value.length > 0 ? removeImageUrlPrefix(backCard.value)[0] : '' // 身份证反面
let data = form.value
data.both = both.value
toast.loading({
loadingType: 'ring',
loadingColor: '#4C9F44',
msg: '提交中...'
})
try {
toast.close()
await addTeaSpecialist(data)
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;
}
}
}
.tea-tag {
padding: 0 8rpx;
border-radius: 4rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
font-size: 24rpx;
line-height: 44rpx;
cursor: pointer;
transition: all 0.2s;
display: inline-block;
}
</style>