添加预约团体茶艺师表单

src/bundle/package/detail.vue

@@ -75,7 +75,7 @@
                         <view class="text-[#909399] text-26rpx ml-26rpx">需预约</view>
                     </view>       
                     
-                    <view class="flex items-center mb-20rpx">
+                    <view class="flex items-center">
                         <view class="text-[#303133] text-26rpx font-bold">保障</view>
                         <view class="text-[#909399] text-26rpx ml-26rpx">随时退</view>
                     </view>

src/bundle/reserve-group/reserve-group.vue

@@ -0,0 +1,348 @@
+<route lang="jsonc" type="page">{
+    "needLogin": true,
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}</route>
+
+<template>
+    <view>
+        <view>
+            <navbar title="预定团体茶艺师" custom-class='!bg-[#F6F7F8]'></navbar>
+        </view>
+
+        <view class="mx-30rpx mt-38rpx">
+            <!-- 预约人数 -->
+            <view class="bg-white rounded-16rpx px-30rpx py-10rpx">
+                <view class="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">
+                        <wd-input no-border placeholder="请填写预约人数" custom-class="!px-28rpx !py-20rpx"></wd-input>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 其他要求 -->
+            <view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
+                <view class="flex items-center justify-between mb-32rpx">
+                    <view class="text-32rpx leading-44rpx text-#303133">其他要求</view>
+                    <view class="text-24rpx text-#909399">可以多选</view>
+                </view>
+                <wd-checkbox-group v-model="form.other_requirements" shape="square" checked-color="#4C9F44">
+                    <view class="flex flex-wrap">
+                        <view class="w-1/2 mb-30rpx"><wd-checkbox modelValue="需要金牌茶艺师">需要金牌茶艺师</wd-checkbox></view>
+                        <view class="w-1/2 mb-30rpx"><wd-checkbox modelValue="需要茶艺师导师">需要茶艺师导师</wd-checkbox></view>
+                        <view class="w-1/2"><wd-checkbox modelValue="需要茶技">需要茶技</wd-checkbox></view>
+                    </view>
+                </wd-checkbox-group>
+            </view>
+
+            <!-- 预定日期 -->
+            <view class="bg-white rounded-16rpx px-30rpx py-34rpx mt-20rpx">
+                <view class="flex items-center justify-between">
+                    <view class="text-32rpx leading-44rpx text-#303133">
+                        预定日期 <text class="text-[#FF3B30] ml-10rpx">*</text>
+                    </view>
+                    <wd-calendar v-model="form.reserve_date" type="date" :min-date="minDate" use-default-slot @confirm="TeaRoom.handleConfirmDate">
+                        <view class="flex items-center">
+                            <view class="text-30rpx mr-8rpx" :class="form.reserve_date ? 'text-#303133' : 'text-#C9C9C9'">
+                                {{ reserveDateStr || '请选择' }}
+                            </view>
+                            <wd-icon name="arrow-right" size="32rpx" color="#C9C9C9"></wd-icon>
+                        </view>
+                    </wd-calendar>
+                </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">
+                            <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 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>
+                                </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="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.suggest"
+                        custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]'
+                        custom-textarea-class='!bg-[#F8F9FA]' />
+                </view>
+            </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-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="TeaRoom.handleSubmit">提交预订单</view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { useColPickerData } from '@/hooks/useColPickerData'
+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 openCityList = ref<Array<any>>([])
+const city = ref<string>('')
+
+// 上传文件
+const fileList = 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<{
+    operation_type: number // 加盟类型
+    license_img: string // 营业执照
+    username: string // 联系人姓名
+    mobile: string // 联系电话
+    code: string // 验证码
+    city_id: number // 城市ID
+    address: string // 详细地址
+    suggest: string // 意见建议
+    other_requirements: string[] // 其他要求
+    reserve_date: number | string // 预定日期
+}>({
+    operation_type: 1,
+    license_img: '',
+    username: '',
+    mobile: '',
+    code: '',
+    city_id: 0,
+    address: '',
+    suggest: '',
+    other_requirements: [],
+    reserve_date: Date.now()
+})
+
+// 审核状态
+const status = ref<number>(-1) // 0待审核 1审核成功 2审核失败 3未提交数据
+
+// 预定日期格式化 M月D日
+const reserveDateStr = computed(() => {
+    if (!form.value.reserve_date) return ''
+    const d = new Date(form.value.reserve_date)
+    return `${d.getMonth() + 1}月${d.getDate()}日`
+})
+const minDate = ref<number>(new Date(new Date().setHours(0, 0, 0, 0)).getTime())
+
+onLoad(async () => {
+    const res = await getJoinCooperationStatus()
+    status.value = Number(res.status)
+
+    token.value = uni.getStorageSync('token')
+    TeaRoom.handleInit()
+})
+
+const TeaRoom = {
+    /**
+     * 初始化
+     */
+    handleInit: async () => {
+        const res = await getOpenCityList()
+        openCityList.value = res.list
+    },
+
+    /**
+     * 发送验证码
+     */
+    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
+    },
+
+    /**
+     * 确认选择预定日期
+     */
+    handleConfirmDate: (e: any) => {
+        form.value.reserve_date = e.value
+    },
+
+    /**
+     * 提交申请
+     */
+    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>
+
+<style lang="scss">
+page {
+    background: $cz-page-background;
+}
+
+.tea-room-address {
+    :deep() {
+        .wd-cell {
+            padding-left: 0 !important;
+        }
+
+        .wd-cell__wrapper {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+        }
+    }
+}
+</style>

src/pages.json

@@ -260,6 +260,15 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "reserve-group/reserve-group",
+          "type": "page",
+          "needLogin": true,
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "settle-in/parten",
           "type": "page",