326 lines
12 KiB
Vue
326 lines
12 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="pb-70rpx">
|
|
<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>
|
|
<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-input placeholder="请填写预约人数" no-border></wd-input>
|
|
</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>
|
|
<view class="flex justify-between items-center text-32rpx leading-44rpx text-#303133">
|
|
<view>其他要求</view>
|
|
<view class="text-26rpx leading-36rpx text-#909399">可以多选</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<wd-checkbox-group v-model="requirementValue" inline shape="square" checked-color="#4C9F44">
|
|
<wd-checkbox custom-class="!mr-40rpx" :modelValue="item.value" v-for="(item, index) in requirement" :key="index">{{ item.label }}</wd-checkbox>
|
|
</wd-checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预定日期 -->
|
|
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mt-20rpx">
|
|
<view class="flex justify-between 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 items-center wall-date">
|
|
<wd-datetime-picker type="date" v-model="timeValue" :filter="GroupTeaSpecialist.handleFilterDate" @confirm="GroupTeaSpecialist.handleConfirmDate" placeholder="请选择"/>
|
|
</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>
|
|
<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>
|
|
|
|
<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>
|
|
</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="GroupTeaSpecialist.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="GroupTeaSpecialist.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-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="GroupTeaSpecialist.handleConfirmAddress" placeholder="请选择省市区"></wd-col-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="请输入小区/写字楼"></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.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx mt-88rpx" @click="GroupTeaSpecialist.handleSubmitOrder">
|
|
提交预订单
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useColPickerData } from '@/hooks/useColPickerData'
|
|
import {toast} from '@/utils/toast'
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
// 审核提示
|
|
const tips = ref<boolean>(false)
|
|
const isSuccess = ref<boolean>(false)
|
|
|
|
// 其他要求
|
|
const requirement = ref<Array<any>>([
|
|
{id: 1, label: '需要金牌茶艺师', value: 1},
|
|
{id: 2, label: '需要茶艺师导师', value: 2},
|
|
{id: 3, label: '需要茶技', value: 3},
|
|
])
|
|
const requirementValue = ref<number[]>([])
|
|
|
|
// 预定日期
|
|
const timeValue = ref<number>(Date.now())
|
|
|
|
// 省市区数据
|
|
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 fileList = ref<any[]>([])
|
|
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
|
|
|
|
// 验证码倒计时
|
|
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
|
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
|
const countDown = ref<any>(null) // 倒计时组件
|
|
|
|
// 表单
|
|
const form = reactive<{
|
|
settleIn: number,
|
|
code: string,
|
|
message: string
|
|
}>({
|
|
settleIn: 1,
|
|
code: '',
|
|
message: ''
|
|
})
|
|
|
|
const GroupTeaSpecialist = {
|
|
// 图片选择/删除
|
|
handleUploadFile: (event: any) => {
|
|
fileList.value = event.fileList
|
|
},
|
|
|
|
// 发送验证码
|
|
handleCountDown: () => {
|
|
startCountDown.value = true
|
|
nextTick(() => {
|
|
countDown.value?.start()
|
|
|
|
// 发送验证码请求
|
|
})
|
|
},
|
|
|
|
// 验证码倒计时结束
|
|
handleFinishCountDown: () => {
|
|
startCountDown.value = false
|
|
},
|
|
|
|
// 确认选择地址
|
|
handleConfirmAddress: (selected) => {
|
|
console.log("🚀 ~ selected:", selected)
|
|
},
|
|
|
|
// 日期过滤
|
|
handleFilterDate: (type, values) => {
|
|
if (type === 'year') {
|
|
const currentYear = new Date().getFullYear()
|
|
return values.filter((year) => year == currentYear)
|
|
|
|
}
|
|
return values
|
|
},
|
|
|
|
// 确认选择日期
|
|
handleConfirmDate: (date: {value: number}) => {
|
|
if (GroupTeaSpecialist.checkedData(date.value)) {
|
|
const d = new Date(date.value)
|
|
const year = d.getFullYear()
|
|
const month = d.getMonth() + 1
|
|
}
|
|
},
|
|
|
|
// 提交订单
|
|
handleSubmitOrder: () => {
|
|
// 这里还需要多日期进行校验
|
|
uni.navigateTo({
|
|
url: '/pages/notice/reserve?type=groupTeaSpecialist'
|
|
})
|
|
},
|
|
|
|
checkedData: (date: number) => {
|
|
const d = new Date(date)
|
|
const today = new Date()
|
|
today.setHours(0, 0, 0, 0)
|
|
d.setHours(0, 0, 0, 0)
|
|
if (d < today) {
|
|
toast.info("请选择大于今天的日期")
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wall-date {
|
|
:deep() {
|
|
.wd-cell {
|
|
padding-left: 0 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.wd-cell__wrapper {
|
|
padding: 0 !important
|
|
}
|
|
|
|
.wd-datetime-picker__arrow {
|
|
display: none !important;
|
|
}
|
|
|
|
.wd-datetime-picker__action--cancel {
|
|
color: #606266 !important;
|
|
}
|
|
|
|
.wd-datetime-picker__action {
|
|
color: #4C9F44;
|
|
}
|
|
}
|
|
}
|
|
</style>
|