完善H5的页面
This commit is contained in:
wangxiaowei
@ -151,7 +151,6 @@
|
||||
// 评分
|
||||
const rate = ref(4.5)
|
||||
|
||||
|
||||
const Profile = {
|
||||
handleToProfile: () => {
|
||||
uni.navigateTo({
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推广方式 -->
|
||||
<!-- 选择门店 -->
|
||||
<wd-popup v-model="showStorePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showStorePopup = false">
|
||||
|
||||
98
src/components/Pay.vue
Normal file
98
src/components/Pay.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="pay-radio">
|
||||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44" @change="Pay.handleChangePay">
|
||||
<block v-for="(item, index) in PayList" :key="index">
|
||||
<wd-radio :value="item.value">
|
||||
<view
|
||||
class="flex justify-between items-center"
|
||||
v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
|
||||
>
|
||||
<view class="flex items-center">
|
||||
<wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type !== PayCategory.WeChatPay">可用202.22</view>
|
||||
</wd-radio>
|
||||
</block>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="RechargeBtn">
|
||||
/**
|
||||
* Pay 支付组件
|
||||
* @description 用于展示支付
|
||||
*/
|
||||
|
||||
import { PayList as OriginPayList, PayCategory, PayValue } from '@/utils/pay'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const pay = ref<number>() // 支付方式
|
||||
|
||||
const props = defineProps({
|
||||
// 是否隐藏平台余额支付
|
||||
hidePlatformBalance: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否隐藏门店余额支付
|
||||
hideStoreBalance: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否隐藏微信支付
|
||||
hideWechat: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits(['pay'])
|
||||
const Pay = {
|
||||
// 支付方式改变
|
||||
handleChangePay(e: {value: number}) {
|
||||
emit('pay', e.value)
|
||||
}
|
||||
}
|
||||
|
||||
const PayList = computed(() => {
|
||||
return OriginPayList.filter(item => {
|
||||
if (props.hidePlatformBalance && item.type === PayCategory.PlatformBalance) return false
|
||||
if (props.hideStoreBalance && item.type === PayCategory.StoreBalance) return false
|
||||
if (props.hideWechat && item.type === PayCategory.WeChatPay) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
watch(PayList, (list) => {
|
||||
if (list.length > 0) {
|
||||
pay.value = list[0].value
|
||||
} else {
|
||||
pay.value = undefined
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pay-radio {
|
||||
:deep() {
|
||||
.wd-radio {
|
||||
position: relative;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.wd-radio:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<text :style="{color, 'font-weight': weight}" :class="(lineThrough ? 'line-through' : '') + ' price-format'">
|
||||
<text v-if="showSubscript" :style="{'font-size': subscriptSize + 'rpx', 'margin-right': '2rpx'}">¥</text>
|
||||
<text :style="{'font-size': firstSize + 'rpx', 'margin-right': '1rpx'}">{{priceSlice.first}}</text>
|
||||
<text v-if="priceSlice.second" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
|
||||
<text v-if="priceSlice.second && showDecimal" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
@ -31,6 +31,10 @@
|
||||
type: [String, Number],
|
||||
default: 24
|
||||
},
|
||||
showDecimal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#E54444'
|
||||
|
||||
54
src/components/TeaSpecialistLevel.vue
Normal file
54
src/components/TeaSpecialistLevel.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="w-168rpx h-40rpx relative mr-44rpx">
|
||||
<view class="absolute left-0 top-0 h-36rpx flex items-start">
|
||||
<!-- 金牌茶艺师 -->
|
||||
<wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="TeaSpecialistLevel">
|
||||
/**
|
||||
* TeaSpecialistLevel 茶艺师等级
|
||||
* @description 用于展示茶艺师等级
|
||||
*/
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
|
||||
defineProps({
|
||||
level: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 茶艺师等级对应的icon和文字
|
||||
const levelMap = {
|
||||
gold: {
|
||||
icon: `${OSS}icon/icon_gold_medal.png`,
|
||||
text: '金牌茶艺师'
|
||||
},
|
||||
senior: {
|
||||
icon: `${OSS}icon/icon_senior_medal.png`,
|
||||
text: '高级茶艺师'
|
||||
},
|
||||
intermediate: {
|
||||
icon: `${OSS}icon/icon_intermediate_medal.png`,
|
||||
text: '中级茶艺师'
|
||||
},
|
||||
junior: {
|
||||
icon: `${OSS}icon/icon_junior_medal.png`,
|
||||
text: '初级茶艺师'
|
||||
},
|
||||
enthusiast: {
|
||||
icon: `${OSS}icon/icon_enthusiast_medal.png`,
|
||||
text: '茶艺爱好者'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {}
|
||||
</script>
|
||||
@ -31,12 +31,6 @@
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabbar/reserve.png",
|
||||
"selectedIconPath": "static/tabbar/reserve_s.png",
|
||||
"pagePath": "pages/reserve/reserve",
|
||||
"text": "预约"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabbar/my.png",
|
||||
"selectedIconPath": "static/tabbar/my_s.png",
|
||||
@ -79,6 +73,30 @@
|
||||
"navigationBarTitleText": "Vue Query 请求演示"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/address/add",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/address/list",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/cashier/cashier",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/city/city",
|
||||
"type": "page",
|
||||
@ -88,6 +106,14 @@
|
||||
"navigationBarTitleText": "选择城市"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"type": "page",
|
||||
@ -114,24 +140,6 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/notice/bill",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/notice/pay",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/notice/reserve",
|
||||
"type": "page",
|
||||
@ -142,12 +150,19 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/reserve",
|
||||
"path": "pages/reserve/group-tea-specialist",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/tea-room",
|
||||
"type": "page",
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
165
src/pages/address/add.vue
Normal file
165
src/pages/address/add.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<navbar :title="title" custom-class='!bg-[#fff]'></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view>
|
||||
<view class="flex items-center mx-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">联系人</view>
|
||||
<view>
|
||||
<wd-input v-model="form.name" size="large" placeholder="请填写联系人" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-2rpx bg-#F2F2F2"></view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="flex items-center mx-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">电话</view>
|
||||
<view>
|
||||
<wd-input v-model="form.name" size="large" placeholder="请填写联系电话" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-2rpx bg-#F2F2F2"></view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="flex items-center mx-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">省市区</view>
|
||||
<view class="add-address">
|
||||
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="Add.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-2rpx bg-#F2F2F2"></view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="flex items-center mx-36rpx">
|
||||
<view class="text-30rpx leading-42rpx text-#303133 mr-60rpx w-100rpx">地址</view>
|
||||
<view>
|
||||
<wd-input v-model="form.name" size="large" placeholder="请填写具体地址" no-border placeholderStyle="font-size: 30rpx; line-height: 42rpx; color: #c9c9c9;"></wd-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-12rpx bg-#F7F7F7"></view>
|
||||
|
||||
<view class="flex justify-between items-center mx-36rpx mt-32rpx">
|
||||
<view class="text-30rpx leading-42rpx text-#303133">设为默认地址</view>
|
||||
<view class="">
|
||||
<wd-switch v-model="isDefaultAddress" active-color="#4C9F44"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed bottom-70rpx left-0 right-0">
|
||||
<view
|
||||
v-if="addressId === 0"
|
||||
class="bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
|
||||
@click="Add.handleAddAddress">
|
||||
确定
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mx-30rpx" v-if="addressId > 0">
|
||||
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#F6F7F8] text-#303133 rounded-8rpx mr-30rpx">删除地址</view>
|
||||
<view class="w-330rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] text-#FFFFFF rounded-8rpx">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 页面标题
|
||||
const title = ref<string>('新增地址')
|
||||
|
||||
// 地址id
|
||||
const addressId = ref<number>(0)
|
||||
|
||||
// 表单信息
|
||||
const form = reactive<{
|
||||
name: string,
|
||||
}>({
|
||||
name: '',
|
||||
})
|
||||
|
||||
// 省市区数据
|
||||
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 isDefaultAddress = ref<boolean>(false)
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.id) {
|
||||
// 编辑地址
|
||||
title.value = '修改地址'
|
||||
addressId.value = Number(args.id)
|
||||
}
|
||||
})
|
||||
|
||||
const Add = {
|
||||
// 确认省市区
|
||||
handleConfirmAddress: (e) => {
|
||||
console.log('e', e)
|
||||
},
|
||||
|
||||
// 添加地址
|
||||
handleAddAddress: () => {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.add-address {
|
||||
:deep() {
|
||||
.wd-cell {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
73
src/pages/address/list.vue
Normal file
73
src/pages/address/list.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view>
|
||||
<navbar title="地址簿" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<!-- 地址为空显示 -->
|
||||
<view class="text-center">
|
||||
<view class="mt-318rpx">
|
||||
<wd-img width="290rpx" height='200rpx' :src="`${OSS}images/h5/address/address_image1.png`"></wd-img>
|
||||
</view>
|
||||
<view class="font-500 text-32rpx leading-44rpx text-#909399 mt-50rpx">未填写收货地址</view>
|
||||
</view>
|
||||
|
||||
<!-- 地址列表 -->
|
||||
<view class="mx-30rpx mt-20rpx">
|
||||
<view class="bg-#fff rounded-16rpx px-30rpx py-36rpx flex items-center mb-20rpx" @click="Address.handleEditAddress">
|
||||
<view>
|
||||
<view class="flex items-center">
|
||||
<view class="mr-10rpx">
|
||||
<wd-tag color="#4C9F44" bg-color="#F3F3F3" custom-class="!rounded-4rpx !px-10rpx">默认</wd-tag>
|
||||
</view>
|
||||
<view class="text-30rpx leading-42rpx text-#303133">
|
||||
<text class="mr-16rpx">金金</text>
|
||||
<text>15800000000</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="w-562rpx line-1 text-26rpx leading-34rpx text-#909399 mt-10rpx">北京市海淀区恒大新宏福苑西区20号楼2单元301</view>
|
||||
</view>
|
||||
<view class="flex-1 ml-30rpx">
|
||||
<wd-icon name="edit-outline" size="32rpx" color="#666666"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx" @click="Address.handleToAddressList">新增地址</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const Address = {
|
||||
// 跳转地址列表
|
||||
handleToAddressList: () => {
|
||||
uni.navigateTo({ url: '/pages/address/add' })
|
||||
},
|
||||
|
||||
// 编辑地址
|
||||
handleEditAddress: () => {
|
||||
uni.navigateTo({ url: '/pages/address/add?id=1' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
61
src/pages/cashier/cashier.vue
Normal file
61
src/pages/cashier/cashier.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
|
||||
<template>
|
||||
<view class="">
|
||||
<view>
|
||||
<navbar title="收银台" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<!-- 支付信息 -->
|
||||
<view class="mt-56rpx text-center">
|
||||
<view class="text-28rpx leading-40rpx text-#606266">顾客打赏-茶艺师名字</view>
|
||||
<view class="mt-24rpx">
|
||||
<price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="100"></price-format>
|
||||
</view>
|
||||
<view class="mt-12rpx flex items-center justify-center">
|
||||
<view class="text-24rpx leading-34rpx text-#606266">
|
||||
支付剩余时间
|
||||
</view>
|
||||
<wd-count-down :time="time" custom-class="!text-[#606266] !text-24rpx !leading-34rpx" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-84rpx">
|
||||
<view class="font-400 text-32rpx leading-44rpx text-#303133 border-b border-b-solid border-b-#F6F7F8 pb-16rpx mb-32rpx">支付方式</view>
|
||||
<!-- pay 组件 -->
|
||||
<pay hide-store-balance @pay="Cashier.handleGetPayValue"></pay>
|
||||
</view>
|
||||
|
||||
<view class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx">立即支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Pay from '@/components/Pay.vue'
|
||||
|
||||
// 支付倒计时取消
|
||||
const time = ref<number>(30 * 60 * 60 * 1000)
|
||||
|
||||
const Cashier = {
|
||||
// 获取支付方式
|
||||
handleGetPayValue(value: number) {
|
||||
console.log('支付方式', value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
354
src/pages/index/detail.vue
Normal file
354
src/pages/index/detail.vue
Normal file
@ -0,0 +1,354 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view :class="isReserve ? 'pb-28rpx' : ''">
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
|
||||
<!-- 打赏茶艺师 -->
|
||||
<wd-popup v-model="showTipTeaSpecialistPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showTipTeaSpecialistPopup = false" position="bottom">
|
||||
<view class='bg-[#fff] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showTipTeaSpecialistPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center" v-if="!isOtherTip">打赏一下</view>
|
||||
<view class="flex items-center mx-16rpx" v-if="isOtherTip">
|
||||
<view class="flex items-center" @click="isOtherTip = false">
|
||||
<wd-icon name="thin-arrow-left" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
<view class="flex-1 text-36rpx text-[#121212] leading-50rpx text-center">其它打赏金额</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-48rpx font-400 text-30rpx leading-42rpx text-#303133 text-center">很喜欢这个茶艺师，快打个赏吧</view>
|
||||
<!-- 打赏金额 -->
|
||||
<view class="mt-62rpx flex justify-between items-center mx-30rpx" v-if="!isOtherTip">
|
||||
<view class="bg-#F0F6EF flex flex-col items-center justify-center h-240rpx px-20rpx py-24rpx w-[22%] rounded-4rpx text-center"
|
||||
v-for="(item, index) in tipList" :key="index" @click="Detail.handleTipTeaSpecialist(item)">
|
||||
<wd-img width="64rpx" height='64rpx' :src="item.image"></wd-img>
|
||||
<view class="font-bold text-#006C2D text-40rpx leading-30rpx mt-20rpx">
|
||||
<price-format color="#006C2D" :first-size="40" :subscript-size="22" :show-decimal="false" :price="item.amount" v-if="item.amount > 0"></price-format>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.amount == 0">其他金额</view>
|
||||
</view>
|
||||
<view class="bg-#4C9F44 rounded-8rpx w-120rpx h-48rpx leading-48rpx text-#fff text-28rpx mt-16rpx">打赏</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自定义打赏金额 -->
|
||||
<view class="mx-30rpx mt-46rpx" v-if="isOtherTip">
|
||||
<wd-input
|
||||
clearable
|
||||
type="text"
|
||||
placeholder="请输入1~50元的金额"
|
||||
:v-model="tipMoney"
|
||||
no-border
|
||||
custom-class="!bg-[#F6F7F8] !rounded-16rpx !text-30rpx !leading-48rpx"
|
||||
custom-input-class="!h-104rpx !pl-60rpx">
|
||||
<template #prefix>
|
||||
<view class="ml-30rpx font-bold text-30rpx leading-48rpx text-[#303133]">
|
||||
￥
|
||||
</view>
|
||||
</template>
|
||||
</wd-input>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#909399 mt-34rpx mx-30rpx">打赏金额将给到茶艺师，是您自愿对于茶艺师的赠与</view>
|
||||
|
||||
<view class="text-32rpx leading-44rpx text-center flex items-center justify-center mt-136rpx" v-if="isOtherTip">
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#F6F7F8 text-#303133 rounded-8rpx mr-30rpx">在想想</view>
|
||||
<view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx">打赏</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<view>
|
||||
<navbar :title="isReserve ? '预约茶艺师' : '茶艺师详情'" fixed>
|
||||
<template #right>
|
||||
<view class="flex items-center ml-114rpx">
|
||||
<view class="mr-16rpx flex items-center" @click="Detail.handleCollect">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
|
||||
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
|
||||
</view>
|
||||
<view @click="Detail.handleShare" class="flex items-center">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_share.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</navbar>
|
||||
</view>
|
||||
|
||||
<view class="pb-30rpx bg-white">
|
||||
<!-- 轮播图 -->
|
||||
<view class="mx-30rpx">
|
||||
<wd-swiper value-key="image" height="400rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 昵称显示 -->
|
||||
<view class="bg-white rounded-t-16rpx px-30rpx">
|
||||
<view class="font-bold text-34rpx leading-48rpx text-#303133 pt-36rpx">茶艺师的名字</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="flex items-center">
|
||||
<wd-rate v-model="rate" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star" space="4rpx"/>
|
||||
<view class="font-400 text-26rpx text-#606266 ml-8rpx">4.5 推荐</view>
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 10+</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mt-24rpx">
|
||||
<view class="flex items-center">
|
||||
<view class=" mr-20rpx">
|
||||
<wd-tag color="#FF5951" bg-color="#FEF1F0" custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx">90后茶艺师</wd-tag>
|
||||
</view>
|
||||
<view class="w-160rpx h-40rpx relative mr-44rpx top-6rpx">
|
||||
<view class="absolute left-0 top-0 h-36rpx flex items-start">
|
||||
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view>
|
||||
<tea-specialist-level :level="'junior'"></tea-specialist-level>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx leading-34rpx text-#818CA9">距离您10.3km 预计30分钟</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-2rpx bg-#F6F7F9 mx-30rpx mt-28rpx"></view>
|
||||
|
||||
<!-- 个人信息 -->
|
||||
<view class="flex justify-between items-center mx-88rpx text-center mt-30rpx">
|
||||
<view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-#606266">性别</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">女</view>
|
||||
</view>
|
||||
<view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
|
||||
<view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-#606266">年龄</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">21岁</view>
|
||||
</view>
|
||||
<view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
|
||||
<view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-#606266">身高</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">165cm</view>
|
||||
</view>
|
||||
<view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
|
||||
<view>
|
||||
<view class="font-400 text-28rpx leading-40rpx text-#606266">体重</view>
|
||||
<view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">53kg</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兴趣爱好 -->
|
||||
<view class="mx-30rpx mt-44rpx">
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
兴趣爱好
|
||||
</view>
|
||||
|
||||
<view class="bg-#FBFBFB rounded-8rpx px-28rpx py-20rpx mt-22rpx">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-12rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_tea2.png`" width="32rpx" height="32rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#606266">兴趣爱好</view>
|
||||
</view>
|
||||
<view class="mt-20rpx font-400 text-28rpx leading-40rpx text-#303133">
|
||||
“爱好茶艺，喜欢旅游，把爱好当工作”
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-20rpx bg-#F6F7F9 mt-42rpx mb-40rpx"></view>
|
||||
|
||||
<!-- 费用说明 -->
|
||||
<view class="mx-30rpx mt-44rpx">
|
||||
<view >
|
||||
<view class="font-bold text-32rpx leading-44rpx text-#303133">
|
||||
费用说明
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="flex items-center mt-24rpx">
|
||||
<view class="mr-12rpx flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_billing.png`" width="32rpx" height="32rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#606266">计费标准</view>
|
||||
</view>
|
||||
|
||||
<view class=" mt-22rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
|
||||
<view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view>服务费</view>
|
||||
<view>￥160/小时</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center justify-between mt-20rpx">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
|
||||
<view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
|
||||
<view>车马费</view>
|
||||
<view>￥3.00/公里</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="flex items-center mt-24rpx">
|
||||
<view class="mr-12rpx flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_info.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-26rpx leading-36rpx text-#606266">其它说明</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-50rpx flex items-center justify-around">
|
||||
<view class="flex items-center">
|
||||
<view class="mr-20rpx flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_safe3.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-bold text-30rpx leading-48rpx text-#303133">
|
||||
爽约包退
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="flex items-center mr-20rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_card.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<view class="font-bold text-30rpx leading-48rpx text-#303133">
|
||||
实名认证
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-4rpx bg-#F6F7F9 mt-40rpx mb-26rpx"></view>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<view>
|
||||
<view class="flex items-center">
|
||||
<view class="mr-14rpx">
|
||||
<wd-icon name="info-circle" size="36rpx" color="#707070"></wd-icon>
|
||||
</view>
|
||||
<view class="font-bold text-28rpx leading-48rpx text-#303133">温馨提示</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center mt-24rpx">
|
||||
<view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-12rpx"></view>
|
||||
<view class="font-500 text-26rpx leading-48rpx text-#F29747">茶艺师需提前一小时预约，两小时起订</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="">
|
||||
<!-- 邀约状态下的按钮 -->
|
||||
<view v-if="isReserve" class="mx-60rpx rounded-8rpx h-90rpx leading-90rpx text-center mt-52rpx bg-#4C9F44 text-#fff text-30rpx leading-42rpx font-bold"
|
||||
@click="Detail.handleReserve">
|
||||
立即邀约
|
||||
</view>
|
||||
|
||||
<view v-if="!isReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] bg-white mt-24rpx pt-36rpx pb-28rpx">
|
||||
<view class="w-330rpx h-90rpx bg-[#F0F6EF] rounded-8rpx mr-30rpx text-#4C9F44 flex items-center justify-center" @click="showTipTeaSpecialistPopup = true">
|
||||
<view class="flex items-center mr-16rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_flower.png`" width="40rpx" height="40rpx"></wd-img>
|
||||
</view>
|
||||
打赏
|
||||
</view>
|
||||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="Detail.handleReserveTeaRoom">立即预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 是否是预约茶艺师页面
|
||||
const isReserve = ref<boolean>(false)
|
||||
|
||||
// 弹窗
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 轮播图
|
||||
const swiperList = ref<string[]>([
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`
|
||||
])
|
||||
const current = ref<number>(0)
|
||||
|
||||
// 评分
|
||||
const rate = ref(4.5)
|
||||
|
||||
// 打赏主茶艺师
|
||||
const showTipTeaSpecialistPopup = ref<boolean>(false)
|
||||
const tipList = ref<Array<any>>([
|
||||
{id: 1, image: `${OSS}images/h5/tip/tip_image1.png`, amount: 5},
|
||||
{id: 2, image: `${OSS}images/h5/tip/tip_image2.png`, amount: 10},
|
||||
{id: 3, image: `${OSS}images/h5/tip/tip_image3.png`, amount: 20},
|
||||
{id: 4, image: `${OSS}images/h5/tip/tip_image4.png`, amount: 0},
|
||||
])
|
||||
const isOtherTip = ref<boolean>(false) // 是否是其他打赏金额
|
||||
const tipMoney = ref<Number>(0) // 其他打赏金额
|
||||
|
||||
const Detail = {
|
||||
// 处理收藏
|
||||
handleCollect: () => {
|
||||
console.log('收藏')
|
||||
},
|
||||
|
||||
// 处理分享
|
||||
handleShare: () => {
|
||||
console.log('处理分享')
|
||||
},
|
||||
|
||||
// 预约茶室
|
||||
handleReserveTeaRoom: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/reserve/tea-room'
|
||||
})
|
||||
},
|
||||
|
||||
// 立即邀约
|
||||
handleReserve: () => {
|
||||
message.alert({
|
||||
title: '邀约茶艺师',
|
||||
msg: '尊敬的客户我们即将向[茶艺师姓名]发出服务邀约，请过十分钟后刷新页面，谢谢您的支持！',
|
||||
confirmButtonText: '好的',
|
||||
confirmButtonProps: {
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
}).then((res) => {
|
||||
// 点击确认按钮回调事件
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
},
|
||||
|
||||
// 打赏茶艺师
|
||||
handleTipTeaSpecialist: (item: any) => {
|
||||
if (item.amount == 0) {
|
||||
isOtherTip.value = true
|
||||
} else {
|
||||
showTipTeaSpecialistPopup.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
@ -10,94 +10,131 @@
|
||||
|
||||
<template>
|
||||
<view class="home-bg">
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<view class="home-bg sticky top-0 left-0 z-50 pb-16rpx">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="flex items-center line-1 w-130rpx" @click="home.toCity">
|
||||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">上海市</view>
|
||||
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
||||
</view>
|
||||
</template>
|
||||
<template #title>
|
||||
<view class="search-box flex items-center ml-26rpx" @click="home.toSearch">
|
||||
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
|
||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||
</wd-search>
|
||||
<view class="flex items-center">
|
||||
<view class="text-36rpx leading-50rpx text-#303133 mr-38rpx">
|
||||
预约茶艺师
|
||||
</view>
|
||||
<view class="flex items-center line-1" @click="Home.toCity">
|
||||
<view class="">
|
||||
<wd-icon name="location" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">上海市</view>
|
||||
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<view class="search-box relative">
|
||||
<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx">
|
||||
</wd-search>
|
||||
<view class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx flex items-center">
|
||||
<view class="flex items-center mr-14rpx">
|
||||
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/h5/home/home_image1.png`" />
|
||||
</view>
|
||||
<view class="flex items-center mr-14rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">专业资质</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#818CA9">定制方案</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<view class="mt-32rpx mx-30rpx">
|
||||
<wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="home.handleClick" @change="home.onChange" mode="aspectFit"></wd-swiper>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
|
||||
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home/home_image1.png`" mode="aspectFit" />
|
||||
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
|
||||
</view>
|
||||
|
||||
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
|
||||
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image2.png`" mode="scaleToFill" />
|
||||
<view>
|
||||
<view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx">
|
||||
<wd-img width="690rpx" height="260rpx" :src="`${OSS}images/h5/home/home_image2.png`" mode="scaleToFill" />
|
||||
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
|
||||
<text class="mr-8rpx">一键约</text>
|
||||
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="relative mt-40rpx h-44rpx mx-30rpx">
|
||||
<view class="relative mt-44rpx h-44rpx mx-30rpx">
|
||||
<view class="absolute ele-center" >
|
||||
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
|
||||
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">茶艺师</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" top="28rpx"
|
||||
:fixed="true">
|
||||
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="home.handleToReserveRoom(item)">
|
||||
<view class="absolute top--28rpx left-0 z-1">
|
||||
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/home_image4.png`"/>
|
||||
</view>
|
||||
<!-- 茶艺师等级筛选 -->
|
||||
<view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx my-30rpx tea-level-scrollbar">
|
||||
<view
|
||||
class="h-64rpx rounded-12rpx px-24rpx py-12rpx flex items-center justify-center font-400 text-28rpx mr-20rpx"
|
||||
:class="selectedLevel.includes(item.value) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#FFF] text-[#606266]'"
|
||||
v-for="(item, index) in TeaSpecialistLevels" :key="index"
|
||||
@click="Home.handleToggleTeaSpecialistLevel(item.value)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`" radius="10rpx" />
|
||||
<view class="flex-1 ml-28rpx flex justify-between line-1 items-start relative">
|
||||
<view class="line-1">
|
||||
<view class="font-bold text-30rpx leading-42rpx line-1">
|
||||
凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业</view>
|
||||
<view class="flex items-center mt-12rpx leading-34rpx">
|
||||
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约300+</view>
|
||||
<view class="font-400 bg-[#F3F3F3] text-[#818CA9] text-22rpx px-8rpx rounded-4rpx">刚有人预约了</view>
|
||||
</view>
|
||||
<view class="flex items-center mt-12rpx leading-34rpx">
|
||||
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
|
||||
营业时间:00:00-23:59
|
||||
</view>
|
||||
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
|
||||
打烊了
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center mt-20rpx">
|
||||
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
|
||||
mode="aspectFit" />
|
||||
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
|
||||
青浦区仓路478号
|
||||
</view>
|
||||
</view>
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Home.upCallback"
|
||||
:fixed="true">
|
||||
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in 100" :key="index" @click="Home.handleToReserveTeaSpecialist(item)">
|
||||
<view class="mr-28rpx relative">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
|
||||
可约9:00
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
|
||||
茶艺师昵称
|
||||
</view>
|
||||
<view class="absolute bottom-0 right-0">
|
||||
<view class="flex justify-end">
|
||||
<view class="bg-[#4C9F44] w-72rpx h-40rpx rounded-18rpx flex items-center justify-center">
|
||||
<wd-icon name="add" color="#fff" size="20rpx" custom-style="font-weight: bold;" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您14km</view>
|
||||
<view>
|
||||
<tea-specialist-level :level="'junior'"></tea-specialist-level>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
|
||||
</view>
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
|
||||
</view>
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-center mt-8rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
|
||||
<!-- <wd-img :src="`${OSS}icon/icon_man.png`" width="28rpx" height="28rpx"></wd-img> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mt-18rpx">
|
||||
<view class="flex items-center mr-20rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您14km</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx">
|
||||
<view class="">
|
||||
<text class="text-32rpx">￥180</text>
|
||||
<text class="text-24rpx">/小时</text>
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#92928C">最快30分钟到达</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
@ -108,26 +145,23 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import {TeaSpecialistLevels} from '@/utils/teaSpecialist'
|
||||
import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
|
||||
/** 轮播图 **/
|
||||
const swiperList = ref<string[]>([
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`
|
||||
])
|
||||
const current = ref<number>(0)
|
||||
/** 结束 **/
|
||||
// 茶艺师等级
|
||||
const selectedLevel = ref<Array<any>>([]) // 选择茶艺师的点击等级
|
||||
|
||||
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const home = {
|
||||
const Home = {
|
||||
toCity: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/city/city'
|
||||
@ -172,68 +206,70 @@
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
onChange: (e: any) => {
|
||||
// 设置 current.value 为当前轮播索引
|
||||
current.value = e.current
|
||||
// 跳转到预约茶艺师页面
|
||||
handleToReserveTeaSpecialist: (id: number = 1) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/detail`
|
||||
})
|
||||
},
|
||||
|
||||
handleToReserveRoom: (id: number = 1) => {
|
||||
// 跳转到预约茶室页面
|
||||
uni.navigateTo({
|
||||
url: `/bundle/tea-room/room?id=${id}`
|
||||
})
|
||||
// 选择茶艺师等级
|
||||
handleToggleTeaSpecialistLevel: (value: any) => {
|
||||
// 切换茶艺师等级
|
||||
const index = selectedLevel.value.indexOf(value);
|
||||
if (index > -1) {
|
||||
// 如果已经选择了该等级，则取消选择
|
||||
selectedLevel.value.splice(index, 1);
|
||||
} else {
|
||||
// 如果未选择该等级，则添加选择
|
||||
selectedLevel.value.push(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-color: $cz-page-background;
|
||||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-right: 40px;
|
||||
--wot-search-padding: 0;
|
||||
--wot-search-side-padding: 0;
|
||||
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
// 隐藏横向滚动条
|
||||
.tea-level-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.wd-search__block {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.home-bg {
|
||||
background-color: $cz-page-background;
|
||||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
.search-box {
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||||
}
|
||||
|
||||
.ele-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.ele-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tea-specialist-time {
|
||||
width: 106rpx;
|
||||
height: 38rpx;
|
||||
background-image: url(#{$OSS}images/collect/collect_image1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -132,48 +132,6 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 团购 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
|
||||
<view class="flex items-center" @click="My.handleToDouYinGroupBuying">
|
||||
<view class="w-40rpx h-40rpx ">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
|
||||
</view>
|
||||
<view class="ml-20rpx">
|
||||
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">抖音团购</text>
|
||||
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<wd-divider vertical />
|
||||
</view>
|
||||
<view class="flex items-center" @click="My.handleToPlatformGroupBuying">
|
||||
<view class="w-40rpx h-40rpx ">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_platform.png`"></wd-img>
|
||||
</view>
|
||||
<view class="ml-20rpx">
|
||||
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">平台团购</text>
|
||||
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶室订单 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
|
||||
<view class="flex relative px-30rpx">
|
||||
<view v-for="(item, index) in roomMenuList" :key="index">
|
||||
<navigator :url="`/bundle/order/tea-room/order-list?orderStatus=${item.status}`" hover-class="none">
|
||||
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
|
||||
<view class="w-36rpx h-36rpx flex items-center justify-center">
|
||||
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶艺师订单 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">茶艺师订单</view>
|
||||
@ -190,26 +148,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多服务 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
|
||||
<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
|
||||
<view class="flex px-30rpx">
|
||||
<view v-for="(item, index) in serviceMenuList" :key="index">
|
||||
<navigator :url="item.url" hover-class="none">
|
||||
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
|
||||
<view class="w-60rpx h-60rpx flex items-center justify-center">
|
||||
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
|
||||
</view>
|
||||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
|
||||
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
|
||||
{{item.badge}}
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推广码 -->
|
||||
@ -252,15 +190,6 @@
|
||||
const isLogin = ref<boolean>(true)
|
||||
const isVip = ref<boolean>(true)
|
||||
|
||||
|
||||
// 茶室订单
|
||||
const roomMenuList = reactive([
|
||||
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', status: 'all' },
|
||||
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
|
||||
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
|
||||
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', status: OrderStatus.Finished },
|
||||
])
|
||||
|
||||
// 茶艺师订单
|
||||
const teaReserveMenuList = reactive([
|
||||
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', status: 'all' },
|
||||
@ -270,13 +199,6 @@
|
||||
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', status: OrderStatus.Finished },
|
||||
])
|
||||
|
||||
// 更多服务
|
||||
const serviceMenuList = reactive([
|
||||
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '/bundle/settle-in/tea-room' },
|
||||
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '/bundle/settle-in/tea-specialist' },
|
||||
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '/bundle/settle-in/parten' },
|
||||
])
|
||||
|
||||
// 推广码弹窗
|
||||
const showPompoCodePopup = ref<boolean>(false)
|
||||
|
||||
@ -292,28 +214,13 @@
|
||||
})
|
||||
|
||||
const My = {
|
||||
// 跳转抖音团购
|
||||
handleToDouYinGroupBuying: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/order/douyin/order-list'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到个人信息
|
||||
handleToProfile: () => {
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/bundle/profile/profile'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转平台团购
|
||||
handleToPlatformGroupBuying: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/order/platform/order-list'
|
||||
})
|
||||
},
|
||||
|
||||
// 点击显示客服电话
|
||||
handleShowService: () => {
|
||||
showServiceMobile.value = true
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-26rpx mx-30rpx">
|
||||
<bill-notice :type="type" :money="10.00" :time="'2025-04-25 04:43'" :order="'42000028122025082279'"></bill-notice>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BillNotice from '@/components/notice/Bill.vue'
|
||||
const type = ref<string>('') // 购买类型 recharge: 充值; refund: 退款; cashback: 返现
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,87 +0,0 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view class="mt-94rpx">
|
||||
<view class="flex justify-center items-center" v-if="type === 'room'">
|
||||
<pay-notice title="购买成功" desc="可以点击下方查看订单详情">
|
||||
<template #layout>
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="pay.handleRoomSeeOrder">查看订单</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="pay.handleRoomDone">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
</pay-notice>
|
||||
</view>
|
||||
|
||||
<!-- 充值vip -->
|
||||
<view v-if="type === 'vip'">
|
||||
<pay-notice title="购买成功" desc="感谢您的信任，马上开启会员之旅！">
|
||||
<template #layout>
|
||||
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleVipDone">
|
||||
完成
|
||||
</view>
|
||||
</template>
|
||||
</pay-notice>
|
||||
</view>
|
||||
|
||||
<!-- recharge -->
|
||||
<view v-if="type === 'recharge'">
|
||||
<pay-notice title="充值成功" desc="感谢您的信任，我们一定会做的更好！">
|
||||
<template #layout>
|
||||
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleRechargeDone">
|
||||
完成
|
||||
</view>
|
||||
</template>
|
||||
</pay-notice>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PayNotice from '@/components/notice/Pay.vue'
|
||||
const type = ref<string>('') // 购买类型 room: 预约茶室
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
})
|
||||
|
||||
const pay = {
|
||||
// 预约茶室 - 查看订单
|
||||
handleRoomSeeOrder: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/tea-room/order'
|
||||
})
|
||||
},
|
||||
|
||||
// 预约茶室 - 完成
|
||||
handleRoomDone: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 购买会员 - 完成
|
||||
handleVipDone: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
// 我的钱包-充值
|
||||
handleRechargeDone: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -8,12 +8,22 @@
|
||||
|
||||
<template>
|
||||
<view class="mt-84rpx flex justify-center items-center">
|
||||
<view v-if="type == 'room'">
|
||||
<reserve-notice title="茶室预约成功" desc="可以点击下方查看预约单具体信息">
|
||||
<view v-if="type == 'groupTeaSpecialist'">
|
||||
<reserve-notice title="团体茶艺师预约成功" desc="我们会尽快联系您，请保持手机长畅通">
|
||||
<template #layout>
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="reserve.handleRoomSeeOrder">查看订单</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="reserve.handleRoomDone">完成</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-24rpx h-90rpx leading-90rpx w-632rpx' @click="reserve.handleRoomDone">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
</reserve-notice>
|
||||
</view>
|
||||
|
||||
<view v-if="type == 'teaSpecialist'">
|
||||
<reserve-notice title="茶艺师预约成功" desc="可以点击下方查看预约单具体信息">
|
||||
<template #layout>
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-24rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="reserve.handleRoomSeeOrder">查看订单</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-24rpx h-90rpx leading-90rpx w-300rpx' @click="reserve.handleRoomDone">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
</reserve-notice>
|
||||
@ -24,7 +34,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ReserveNotice from '@/components/notice/Reserve.vue'
|
||||
const type = ref<string>('') // 购买类型 room: 预约茶室
|
||||
const type = ref<string>('') // 购买类型 groupTeaSpecialist: 团体茶艺师预约; teaSpecialist: 茶艺师预约
|
||||
|
||||
onLoad((args) => {
|
||||
type.value = args.type || ''
|
||||
|
||||
325
src/pages/reserve/group-tea-specialist.vue
Normal file
325
src/pages/reserve/group-tea-specialist.vue
Normal file
@ -0,0 +1,325 @@
|
||||
<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>
|
||||
@ -1,233 +0,0 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}</route>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="search-box flex items-center ml-26rpx" @click="reserve.toSearch">
|
||||
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
|
||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||
</wd-search>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<view class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @change="reserve.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="茶室预约"></wd-tab>
|
||||
<wd-tab title="茶艺师预约"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<!-- 茶室预约 -->
|
||||
<view v-if="tab === 0">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
|
||||
<view v-for="(item, index) in 5" :key="index" >
|
||||
<view class="mb-20rpx" @click="reserve.handleToReserveRoomOrder">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Consuming"></combo-card>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
|
||||
<!-- 茶艺师预约 -->
|
||||
<view v-if="tab === 1">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
|
||||
<view v-for="(item, index) in 5" :key="index" >
|
||||
<view class="mb-20rpx" @click="reserve.handleToTeaSpecialistOrder">
|
||||
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Consuming"></combo-card>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ComboCard from '@/components/order/ComboCard.vue'
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
|
||||
|
||||
/** tab **/
|
||||
const tab = ref<number>(0)
|
||||
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
|
||||
/** 结束 **/
|
||||
|
||||
|
||||
/** mescroll **/
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const upOption = reactive({
|
||||
empty: {
|
||||
icon : OSS + 'icon/icon_reserver_empty.png',
|
||||
}
|
||||
})
|
||||
/** 结束 **/
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const reserve = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
// list({
|
||||
// page: mescroll.num,
|
||||
// size: mescroll.size
|
||||
// }).then((res: { list: Array<any>, totalPages: Number }) => {
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
|
||||
// console.log("🚀 ~ goods:", goods)
|
||||
|
||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// }).catch(() => {
|
||||
// mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
// apiGoods(mescroll.num, mescroll.size).then(res=>{
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
||||
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
||||
|
||||
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
||||
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
||||
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
||||
|
||||
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
||||
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
||||
|
||||
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
||||
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
||||
// }).catch(()=>{
|
||||
mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 搜索
|
||||
toSearch: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
},
|
||||
|
||||
// 茶室预约-跳转到对应的订单页
|
||||
handleToReserveRoomOrder: () => {
|
||||
uni.navigateTo({
|
||||
url: `/bundle/order/tea-room/order-detail?orderStatus=${OrderStatus.Consuming}`
|
||||
})
|
||||
},
|
||||
|
||||
// 茶艺师预约-跳转到对应的订单页
|
||||
handleToTeaSpecialistOrder: () => {
|
||||
uni.navigateTo({
|
||||
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${OrderStatus.Serving}`
|
||||
})
|
||||
},
|
||||
|
||||
// tab切换获取index
|
||||
handleChangeTab: (item: { index: number }) => {
|
||||
// tabIndexs.value = item.index
|
||||
// scrollToLastY()
|
||||
},
|
||||
|
||||
// 处理点击事件
|
||||
handleClick: (item: any) => {
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background-color: $cz-page-background;
|
||||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||
// background-size: 100% 300rpx;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 20rpx;
|
||||
// background-position: top center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-right: 40px;
|
||||
--wot-search-padding: 0;
|
||||
--wot-search-side-padding: 0;
|
||||
|
||||
:deep() {
|
||||
.wd-search {
|
||||
background: transparent !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wd-search__block {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.wd-search__input {
|
||||
// #ifdef MP
|
||||
padding-left: 32px !important;
|
||||
padding-right: 32px !important;
|
||||
// #endif
|
||||
|
||||
// #ifndef MP
|
||||
padding-right: 0 !important;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
:deep() {
|
||||
.wd-tabs,
|
||||
.wd-tabs__nav {
|
||||
background: transparent !important;
|
||||
}
|
||||
.wd-tabs__nav-item {
|
||||
font-size: 32rpx !important;
|
||||
color: #303133 !important;
|
||||
line-height: 42rpx !important;
|
||||
padding: 0 30rpx !important;
|
||||
}
|
||||
|
||||
.wd-tabs__nav-item.is-active {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.wd-tabs__line {
|
||||
bottom: 0 !important;
|
||||
width: 60rpx !important;
|
||||
height: 16rpx !important;
|
||||
background-color: transparent !important;
|
||||
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
641
src/pages/reserve/tea-room.vue
Normal file
641
src/pages/reserve/tea-room.vue
Normal file
@ -0,0 +1,641 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
<template>
|
||||
<view class="pb-180rpx">
|
||||
<!-- 预定时间 -->
|
||||
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showReservePopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||||
<view class="w-[100%] h-100rpx flex justify-between items-center">
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
||||
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'start'">
|
||||
<view class="text-28rpx leading-40rpx">开始时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
||||
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'end'">
|
||||
<view class="text-28rpx leading-40rpx">结束时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="date-picker">
|
||||
<view class="" v-if="currentTimePicker == 'start'">
|
||||
<wd-datetime-picker-view
|
||||
:minDate='minTimestamp'
|
||||
:maxDate='maxTimestamp'
|
||||
type="datetime"
|
||||
v-model="startTimeValue"
|
||||
:formatter="TeaRoom.handleFormatTime"
|
||||
@change="TeaRoom.handleStartTimePicker"
|
||||
/>
|
||||
</view>
|
||||
<view class="" v-if="currentTimePicker == 'end'">
|
||||
<wd-datetime-picker-view
|
||||
:minDate='minTimestamp'
|
||||
:maxDate='maxTimestamp'
|
||||
type="datetime"
|
||||
v-model="endTimeValue"
|
||||
:formatter="TeaRoom.handleFormatTime"
|
||||
@change="TeaRoom.handleEndTimePicker"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="TeaRoom.handleResetTime">重置</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="TeaRoom.handleConfirmHour">确定（{{ totalHour }}小时）</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 费用明细 -->
|
||||
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
|
||||
<view class='bg-[#FBFBFB] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view>￥640.00</view>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>茶室费（￥160元/小时）</view>
|
||||
<view>x4</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-52rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view class="text-[#4C9F44]">-￥640.00</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥20</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥20</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my-30rpx">
|
||||
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>实付金额</view>
|
||||
<view>￥640.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 支付 -->
|
||||
<wd-popup v-model="showPayPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showPayPopup = false" position="bottom">
|
||||
<view class='bg-[#FBFBFB] py-40rpx realtive'>
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showPayPopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">支付</view>
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||||
<view class="pay" v-for="(item, index) in PayList" :key="index" @click="pay = item.id">
|
||||
<view class="flex justify-between items-center" v-if="pay == item.value" >
|
||||
<view class="flex items-center">
|
||||
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<wd-radio :value="item.value">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="TeaRoom.handlePay">确定付款</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 选择门店 -->
|
||||
<wd-popup v-model="showTeaHousePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showTeaHousePopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择门店</view>
|
||||
<scroll-view scroll-y class="h-500rpx pb-20rpx">
|
||||
<view class="mx-56rpx" v-for="(item, index) in 5" :key="index">
|
||||
<view class="flex items-center justify-between mb-66rpx" @click="TeaRoom.handleChooseTeaHouse(item)">
|
||||
<view class="mr-32rpx">
|
||||
<wd-img width="80rpx" height='80rpx' :src="`${OSS}icon/icon_location3.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view>这是茶馆名字</view>
|
||||
<view class="text-28rpx leading-40rpx text-[#909399] flex items-center mt-10rpx">
|
||||
<view>距您5.3km</view>
|
||||
<view>
|
||||
<wd-divider vertical />
|
||||
</view>
|
||||
<view class="w-350rpx line-1">北京市海淀区宏福苑西区20号楼2单元30</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 茶艺服务 -->
|
||||
<wd-popup v-model="showTeaServicePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showTeaServicePopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">茶艺服务</view>
|
||||
<scroll-view scroll-y class="h-800rpx">
|
||||
<view class="">
|
||||
<!-- 服务人数 -->
|
||||
<view class="mx-60rpx mb-56rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133">服务人数</view>
|
||||
<view class="flex items-center justify-between mt-28rpx">
|
||||
<view class="text-28rpx leading-40rpx text-#303133">服务人数</view>
|
||||
<view class="">
|
||||
<wd-input-number v-model="servicePeople"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定茶叶 -->
|
||||
<view class="mx-60rpx mb-50rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133">
|
||||
<text class="mr-20rpx">服务人数</text>
|
||||
<text class="text-26rpx leading-36rpx text-#909399">支持多选</text>
|
||||
</view>
|
||||
<view class="mt-28rpx">
|
||||
<view class="grid grid-cols-3 gap-x-16rpx gap-y-16rpx">
|
||||
<view class="text-28rpx leading-40rpx rounded-8rpx text-center py-14rpx"
|
||||
:class="selectedTea.includes(item.id) ? 'bg-#4C9F44 text-#fff' : 'bg-#F7F7F7 text-#606266'"
|
||||
v-for="(item, index) in teaList" :key="index"
|
||||
@click="TeaRoom.handleToggleTea(item.id)">
|
||||
<view>{{item.name}}</view>
|
||||
<view>￥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶具使用 -->
|
||||
<view class="mx-60rpx mb-70rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133">茶具使用</view>
|
||||
<view class="mt-28rpx flex items-center justify-between w-full">
|
||||
<view class="flex items-center justify-between w-full">
|
||||
<view class="text-28rpx leading-40rpx text-#303133">茶具需求</view>
|
||||
<view>
|
||||
<wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline>
|
||||
<block v-for="(item, index) in teaUsageList" :key="index">
|
||||
<wd-radio :value="item.type">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx">{{item.name}}</view>
|
||||
</wd-radio>
|
||||
</block>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="h-2rpx bg-#EFF0F2"></view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view class="mx-60rpx flex items-center justify-between py-40rpx">
|
||||
<view class="">
|
||||
<view class="text-24rpx leading-34rpx text-#303133">已选 {{selectedTea.length}} 项</view>
|
||||
<view class="">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<view class="w-178rpx h-70rpx leading-70rpx text-center bg-#F6F7F8 text-#303133 rounded-8rpx mr-20rpx">重置</view>
|
||||
<view class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx">重置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<view>
|
||||
<navbar title="预约茶室"></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<!-- 茶艺师信息 -->
|
||||
<view class="flex items-center bg-white p-20rpx rounded-10rpx mb-20rpx mt-20rpx">
|
||||
<view class="mr-28rpx relative">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
|
||||
茶艺师昵称
|
||||
</view>
|
||||
<view class="flex items-center mt-18rpx">
|
||||
<view class="mr-12rpx">
|
||||
<view class="bg-#FEF1F0 text-#FF5951 w-144rpx h-40rpx rounded-6rpx text-center text-22rpx leading-40rpx">90后茶艺师</view>
|
||||
</view>
|
||||
<tea-specialist-level :level="'junior'"></tea-specialist-level>
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#6A6363 mt-30rpx">已预约 10+</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务方式 -->
|
||||
<view class="mt-20rpx bg-white px-30rpx py-34rpx">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="font-bold text-32rpx leading-44rpx">服务方式</view>
|
||||
<view>
|
||||
<wd-radio-group v-model="serviceTypeValue" shape="dot" checked-color="#4C9F44" inline>
|
||||
<block v-for="(item, index) in serviceType" :key="index">
|
||||
<wd-radio :value="item.type">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx">{{item.name}}</view>
|
||||
</wd-radio>
|
||||
</block>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定门店 -->
|
||||
<view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 1" @click="showTeaHousePopup = true">
|
||||
<view class="text-28rpx leading-40rpx">预定店</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-28rpx leading-40rpx text-#303133">{{ teaHouse.name || '请选择茶馆' }}</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上门服务地址 -->
|
||||
<view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 2" @click="TeaRoom.handleToAddress">
|
||||
<view class="text-28rpx leading-40rpx">地址</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-28rpx leading-40rpx text-#303133">{{ teaHouse.name || '请选择地址' }}</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="showReservePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
{{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 茶艺服务 -->
|
||||
<view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="showTeaServicePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">茶艺服务</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">茶艺服务</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
{{ teaService.name || '请选择' }}
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单备注 -->
|
||||
<view class="bg-white py-26rpx px-30rpx mt-20rpx">
|
||||
<view class="text-32rpx leading-44rpx text-#303133 mb-28rpx">
|
||||
<text class="mr-20rpx">订单备注 </text>
|
||||
<text class="text-26rpx leading-36rpx text-#909399">(选填)</text>
|
||||
</view>
|
||||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="orderRemarks" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||||
</view>
|
||||
|
||||
<!-- 优惠券 -->
|
||||
<view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="TeaRoom.handleToCoupon(1)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="bg-white py-26rpx px-30rpx mt-20rpx">
|
||||
<pay hide-store-balance></pay>
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||
:style="{ height: '140rpx' }">
|
||||
<view class="mt-22rpx flex justify-between items-center">
|
||||
<view class="flex items-center ml-60rpx">
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
|
||||
<view class="flex items-center h-56rpx mr-16rpx">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
|
||||
<view class="ml-20rpx" v-if="isGroupBuying">
|
||||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-[#4C9F44]" @click="showCostPopup = true">
|
||||
<view class="text-24rpx mr-10rpx">费用明细</view>
|
||||
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mr-30rpx">
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="TeaRoom.handleSubmitOrder">立即预定</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {toast} from '@/utils/toast'
|
||||
import PriceFormat from '@/components/PriceFormat.vue'
|
||||
import {ReserveServiceCategory} from '@/utils/order'
|
||||
import { PayList, PayCategory, PayValue } from '@/utils/pay'
|
||||
import Pay from '@/components/Pay.vue'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 服务方式
|
||||
const serviceType = ref<Array<any>>([
|
||||
{type: 1, name: '到店服务'},
|
||||
{type: 2, name: '上门服务'},
|
||||
])
|
||||
const serviceTypeValue = ref<number>(1)
|
||||
|
||||
// 选择茶馆
|
||||
const teaHouse = ref<{id: number, name: string}>({id: 0, name: ''})
|
||||
const showTeaHousePopup = ref<boolean>(false) // 显示门店列表弹窗
|
||||
|
||||
// 茶艺服务
|
||||
const teaService = ref<{id: number, name: string}>({id: 0, name: ''})
|
||||
const showTeaServicePopup = ref<boolean>(false) // 显示门店列表弹窗
|
||||
const servicePeople = ref<number>(1) // 服务人数
|
||||
const teaList = ref<Array<any>>([
|
||||
{
|
||||
id: 1,
|
||||
name: '红茶(3泡)',
|
||||
price: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '绿茶(3泡)',
|
||||
price: 2
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '乌龙茶(3泡)',
|
||||
price: 13
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '普洱茶(3泡)',
|
||||
price: 4
|
||||
}
|
||||
])
|
||||
const selectedTea = ref<Array<any>>([]) // 选择的茶叶
|
||||
|
||||
// 茶具使用
|
||||
const teaUsageList = ref<Array<any>>([
|
||||
{type: 1, name: '到店服务'},
|
||||
{type: 2, name: '上门服务'},
|
||||
])
|
||||
const teaUsageValue = ref<number>(1)
|
||||
|
||||
// 订单备注
|
||||
const orderRemarks = ref<string>('')
|
||||
|
||||
// 支付方式
|
||||
const pay = ref<number>(1)
|
||||
|
||||
|
||||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||||
const isGroupBuying: boolean = false // 是否是团购套餐
|
||||
|
||||
|
||||
// 预定时间相关
|
||||
const showReservePopup = ref<boolean>(false) // 预定时间popup
|
||||
const currentTimePicker = ref<string>('start') // 当前选择的时间类型
|
||||
const startTimeValue = ref<string>('') // 开始时间
|
||||
const endTimeValue = ref<string>('') // 结束时间
|
||||
const now = new Date()
|
||||
const minTimestamp = Date.now()
|
||||
|
||||
// 允许选择未来两个月的日期
|
||||
const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
|
||||
const startTimeLayout = ref<string>('')
|
||||
const endTimeLayout = ref<string>('')
|
||||
const totalHour = ref<number>(0)
|
||||
|
||||
// 费用明细相关
|
||||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||||
const showPayPopup = ref<boolean>(false) // 支付popup
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||||
// TODO 如果是团购套餐则直接微信支付？
|
||||
pay.value = 3
|
||||
console.log("🚀 ~ pay.value:", pay.value)
|
||||
}
|
||||
})
|
||||
|
||||
const TeaRoom = {
|
||||
startTimeTimestamp: 0, // 记录开始时间戳
|
||||
endTimeTimestamp: 0, // 记录结束时间戳
|
||||
|
||||
// 选择茶馆
|
||||
handleChooseTeaHouse: (item: any) => {
|
||||
|
||||
},
|
||||
|
||||
handleStartTimePicker: (e: {value: number}) => {
|
||||
TeaRoom.startTimeTimestamp = e.value
|
||||
startTimeLayout.value = TeaRoom.formatDate(e.value)
|
||||
TeaRoom.totalTimestamp()
|
||||
},
|
||||
|
||||
handleEndTimePicker: (e: {value: number}) => {
|
||||
TeaRoom.endTimeTimestamp = e.value
|
||||
endTimeLayout.value = TeaRoom.formatDate(e.value)
|
||||
TeaRoom.totalTimestamp()
|
||||
},
|
||||
|
||||
handleFormatTime: (type: string, values: string) => {
|
||||
if (type === 'year') {
|
||||
return `${values}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${values}月`
|
||||
}
|
||||
if (type === 'date') {
|
||||
return `${values}日`
|
||||
}
|
||||
if (type === 'hour') {
|
||||
return `${values}时`
|
||||
}
|
||||
if (type === 'minute') {
|
||||
return `${values}分`
|
||||
}
|
||||
return values
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
|
||||
// 重置预定时间
|
||||
handleResetTime: () => {
|
||||
startTimeValue.value = ''
|
||||
endTimeValue.value = ''
|
||||
startTimeLayout.value = ''
|
||||
endTimeLayout.value = ''
|
||||
TeaRoom.startTimeTimestamp = 0
|
||||
TeaRoom.endTimeTimestamp = 0
|
||||
totalHour.value = 0
|
||||
currentTimePicker.value = 'start'
|
||||
},
|
||||
|
||||
// 确定时间
|
||||
handleConfirmHour: () => {
|
||||
if (totalHour.value <= 0) {
|
||||
toast.info('至少起订N小时')
|
||||
return
|
||||
}
|
||||
showReservePopup.value = false
|
||||
},
|
||||
|
||||
// 跳转优惠券页面
|
||||
handleToCoupon(type) {
|
||||
// 1：优惠券 2：团购券
|
||||
uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
|
||||
},
|
||||
|
||||
handlePay: () => {
|
||||
// 这里需要判断下如果是预约的话，跳转结果通知是reserve的，团购是pay的
|
||||
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
|
||||
},
|
||||
|
||||
handleToggleTea: (id: number) => {
|
||||
const index = selectedTea.value.indexOf(id)
|
||||
if (index > -1) {
|
||||
// 已选择，取消选择
|
||||
selectedTea.value.splice(index, 1)
|
||||
} else {
|
||||
// 未选择，添加选择
|
||||
selectedTea.value.push(id)
|
||||
}
|
||||
},
|
||||
|
||||
// 选择地址
|
||||
handleToAddress: () => {
|
||||
uni.navigateTo({ url: '/pages/address/list' })
|
||||
},
|
||||
|
||||
handleSubmitOrder: () => {
|
||||
// 提交订单
|
||||
showPayPopup.value = true
|
||||
uni.navigateTo({ url: '/pages/notice/reserve?type=teaSpecialist' })
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatDate: (timestamp: number) => {
|
||||
const date = new Date(timestamp)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hour = String(date.getHours()).padStart(2, '0')
|
||||
const minute = String(date.getMinutes()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||||
},
|
||||
|
||||
// 计算起订时间时长
|
||||
totalTimestamp: () => {
|
||||
if (TeaRoom.startTimeTimestamp && TeaRoom.endTimeTimestamp) {
|
||||
const diffMs = TeaRoom.endTimeTimestamp - TeaRoom.startTimeTimestamp
|
||||
// 计算小时，保留一位小数
|
||||
const hours = (diffMs / 1000 / 60 / 60)
|
||||
const result = Math.round(hours * 10) / 10 // 保留一位小数
|
||||
if (result >= 0) {
|
||||
totalHour.value = result
|
||||
}
|
||||
return result
|
||||
}
|
||||
totalHour.value = 0
|
||||
return 0
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
:deep() {
|
||||
.wd-swiper-nav__item--dots-bar {
|
||||
width: 56rpx !important;
|
||||
height: 6rpx !important;
|
||||
border-radius: 3rpx !important;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
background-color: #2B9F93 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay {
|
||||
:deep() {
|
||||
.wd-radio {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -41,12 +41,6 @@ export const nativeTabbarList: NativeTabBarItem[] = [
|
||||
pagePath: 'pages/index/index',
|
||||
text: '首页',
|
||||
},
|
||||
{
|
||||
iconPath: 'static/tabbar/reserve.png',
|
||||
selectedIconPath: 'static/tabbar/reserve_s.png',
|
||||
pagePath: 'pages/reserve/reserve',
|
||||
text: '预约',
|
||||
},
|
||||
{
|
||||
iconPath: 'static/tabbar/my.png',
|
||||
selectedIconPath: 'static/tabbar/my_s.png',
|
||||
|
||||
17
src/utils/teaSpecialist.ts
Normal file
17
src/utils/teaSpecialist.ts
Normal file
@ -0,0 +1,17 @@
|
||||
// 茶艺师等级枚举
|
||||
export enum TeaSpecialistLevel {
|
||||
Gold = '金牌茶艺师',
|
||||
Senior = '高级茶艺师',
|
||||
Intermediate = '中级茶艺师',
|
||||
Junior = '初级茶艺师',
|
||||
Enthusiast = '茶艺爱好者'
|
||||
}
|
||||
|
||||
// 茶艺师对象结构
|
||||
export const TeaSpecialistLevels = [
|
||||
{ value: 'gold', label: TeaSpecialistLevel.Gold},
|
||||
{ value: 'senior', label: TeaSpecialistLevel.Senior },
|
||||
{ value: 'intermediate', label: TeaSpecialistLevel.Intermediate },
|
||||
{ value: 'junior', label: TeaSpecialistLevel.Junior },
|
||||
{ value: 'enthusiast', label: TeaSpecialistLevel.Enthusiast }
|
||||
];
|
||||
Reference in New Issue
Block a user