添加专属圈子

src/bundle/settle-in/tea-specialist.vue

@@ -11,7 +11,18 @@
 <template>
     <view class="">
         <view class="">
-            <navbar title="申请茶艺师" custom-class='!bg-[#F6F7F8]'></navbar>
+            <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>
 
         <!-- 待审核 -->
@@ -34,20 +45,12 @@
                 <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="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
@@ -64,7 +67,7 @@
                             </view>
                         </wd-upload>
                     </view>
-                </view>
+                </view> -->
 
                 <!-- 基本信息 -->
                 <view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
@@ -78,7 +81,7 @@
                         <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>
+                                <wd-input no-border placeholder="请填写真实姓名" v-model="form.username"></wd-input>
                             </view>
                         </view>
 
@@ -116,13 +119,33 @@
                     </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">
-                        兴趣爱好
+                        专属圈子 <text class="text-[#818CA9] ml-10rpx text-20rpx mt-4rpx">最多可选6个</text>
                     </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 class="flex items-center flex-wrap">
+                            <view
+                                v-for="(item, idx) in tagList"
+                                :key="item.id"
+                                class="tea-tag"
+                                :class="{ 'tea-tag--active': selectedTags.includes(item.id) }"
+                                :style="selectedTags.includes(item.id)
+                                    ? idx === 0
+                                        ? 'background:#FAF1F1;color:#CE295A;'
+                                        : idx === 1
+                                            ? 'background:#F1F3FA;color:#2934CE;'
+                                            : idx === 2
+                                                ? 'background:#F1FAF9;color:#29C9CE;'
+                                                : 'background:#4C9F44;color:#fff;'
+                                    : 'background:#F3F3F3;color:#818CA9;'
+                                "
+                                @click="handleTagClick(item.id)"
+                            >
+                                {{ item.title }}
+                            </view>
+                        </view>
                     </view>
                 </view>
 
@@ -205,7 +228,12 @@
                                     <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 class="flex items-center">
+                                            <wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
+                                        </view>
+                                    </view>
                                 </view>
                             </wd-upload>
                         </view>
@@ -263,7 +291,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { router, removeImageUrlPrefix } from '@/utils/tools'
+    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'
@@ -296,6 +324,34 @@
     const startCountDown = ref<boolean>(false) // 是否开始倒计时
     const countDown = ref<any>(null) // 倒计时组件
 
+    // 专属圈子tag颜色
+    const tagList = [
+        {title: '茶艺表演', id: 1},
+        {title: '茶艺培训', id: 2},
+        {title: '茶文化推广', id: 3},
+        {title: '茶艺比赛', id: 4},
+        {title: '茶艺研究', id: 5},
+        {title: '其他', id: 6},
+        {title: '关单', id: 7},
+    ]
+
+    // 选中的标签id数组
+    const selectedTags = ref<number[]>([])
+
+    // 标签点击事件
+    function 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个圈子')
+            }
+        }
+    }
+
     // 表单
 	const form = ref<{
 		license_img: string // 营业执照
@@ -310,6 +366,7 @@
 		certificate: string // 健康证、资格证书信息
 		mobile: string // 联系电话
 		code: string // 验证码
+        broker_id?: number // 经纪人ID（可选，扫码绑定经纪人时携带）
 	}>({
 		license_img: '',
 		username: '',
@@ -322,20 +379,34 @@
         avatar: '',
         certificate: '',
         mobile: '',
-        code: ''
+        code: '',
+        broker_id: 0 // 经纪人ID（可选，扫码绑定经纪人时携带）
 	})
     const both = ref<string>('1998-12-21')
 
     // 审核状态
-    const status = ref<number>(-1) // 0待审核 1审核成功 2审核失败 3未提交数据
+    const status = ref<number>(3) // 0待审核 1审核成功 2审核失败 3未提交数据
 
-    onLoad(async () => {
+    onLoad(async (args) => {
-        const res = await getTeaSpecialistStatus()
+        // 默认出生年月为1998年12月21日
-        status.value = res.status
-
-        token.value = uni.getStorageSync('token')
-        TeaSpecialist.handleInit()
         form.value.both = new Date(1998, 11, 21).getTime()
+
+        // 处理扫码携带的参数(茶艺师绑定经纪人)
+        const scene = args?.scene
+        if (scene) {
+            form.value.broker_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
+            status.value = 3
+        }
     })
 
     const TeaSpecialist = {
@@ -344,7 +415,6 @@
          */
         handleInit: async () => {
 			const res = await getOpenCityList()
-			console.log("🚀 ~ res:", res)
 			openCityList.value = res.list
         },
 
@@ -396,7 +466,6 @@
          * 提交申请
          */
         handleSubmit: async () => {
-
             if (!form.value.username) {
                 toast.show('请输入姓名')
                 return false
@@ -427,6 +496,11 @@
                 return false
             }
 
+            if (fileList4.value.length == 0) {
+                toast.show('请上传茶艺师资格证书')
+                return false
+            }
+
             if (!mobile(form.value.mobile)) {
                 toast.show('请检查手机号码')
                 return false
@@ -490,4 +564,16 @@
             }
         }
     }
+
+    .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>