完善页面
This commit is contained in:
wangxiaowei
@ -100,10 +100,10 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
|
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
|
||||||
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
|
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
|
||||||
<view class="mr-30rpx">
|
<view class="mr-30rpx">
|
||||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
|
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -147,7 +147,7 @@
|
|||||||
page {
|
page {
|
||||||
background-color: $cz-page-background;
|
background-color: $cz-page-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio {
|
.radio {
|
||||||
:deep() {
|
:deep() {
|
||||||
.wd-radio-group {
|
.wd-radio-group {
|
||||||
|
|||||||
248
src/bundle/group-buying/after-sales/after-sales.vue
Normal file
248
src/bundle/group-buying/after-sales/after-sales.vue
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
<route lang="jsonc" type="page">
|
||||||
|
{
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="pb-254rpx">
|
||||||
|
<!-- 平台团购直营店 -->
|
||||||
|
<view>
|
||||||
|
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
|
||||||
|
<view v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleApply || orderType === GroupBuyingCategoryOrderStatus.AfterSaleProcessing">请耐心等待，我们会尽快处理您的请求</view>
|
||||||
|
<view v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded" class="text-center mt-14rpx">
|
||||||
|
<view class="text-40rpx text-[#303133] leading-56rpx">退款成功￥128.00</view>
|
||||||
|
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
|
||||||
|
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单 -->
|
||||||
|
<view class="mx-30rpx">
|
||||||
|
<view class="bg-white rounded-16rpx p-30rpx">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-30rpx">
|
||||||
|
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex-1">
|
||||||
|
<view class="flex justify-between items-center" @click="afterSales.handleToCombo">
|
||||||
|
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">这是团购套餐的可以点击进 </view>
|
||||||
|
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||||
|
</view>
|
||||||
|
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||||||
|
<view>3小时</view>
|
||||||
|
<view>x1</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-[#606266] text-right mt-26rpx">
|
||||||
|
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||||||
|
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
|
||||||
|
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 售后原因 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" @click="showResonPopup = true" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between">
|
||||||
|
<view class="text-32rpx leading-44rpx text-[#303133]">售后原因</view>
|
||||||
|
<view>
|
||||||
|
<text class='text-[#909399] mr-10rpx'>{{ formData.reason ? reasonText : '请至少选择一项' }}</text>
|
||||||
|
<wd-icon name="arrow-right" size="24rpx" color="#666666" custom-class="!bg-[#F8F9FA]"></wd-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单信息(选填) -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||||||
|
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">
|
||||||
|
<text>订单信息</text>
|
||||||
|
<text class="text-26rpx text-[#909399] leading-36rpx ml-20rpx">(选填)</text>
|
||||||
|
</view>
|
||||||
|
<view class="mt-28rpx">
|
||||||
|
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="formData.info" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 售后已完成 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">
|
||||||
|
<view class="text-[#303133] text-32rpx leading-44rpx">售后订单</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>售后原因</view>
|
||||||
|
<view>买多了/买错了</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>退款金额</view>
|
||||||
|
<view>￥159.22</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>申请时间</view>
|
||||||
|
<view>2019-05-16 13:20:26</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>退款编号</view>
|
||||||
|
<view>
|
||||||
|
<text>7327328627526903</text>
|
||||||
|
<wd-divider vertical />
|
||||||
|
<text class="text-[#4C9F44]">复制</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 售后订单 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderType !== GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||||||
|
<view class="text-[#303133] text-32rpx leading-44rpx">售后订单</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>售后原因</view>
|
||||||
|
<view>买多了/买错了</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>退款金额</view>
|
||||||
|
<view>￥159.22</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>申请时间</view>
|
||||||
|
<view>2019-05-16 13:20:26</view>
|
||||||
|
</view>
|
||||||
|
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||||||
|
<view>退款编号</view>
|
||||||
|
<view>
|
||||||
|
<text>7327328627526903</text>
|
||||||
|
<wd-divider vertical />
|
||||||
|
<text class="text-[#4C9F44]">复制</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="w-full fixed bottom-0 left-0 right-0 h-152rpx" :class="orderType === GroupBuyingCategoryOrderStatus.AfterSaleApply ? '' : 'bg-white'">
|
||||||
|
<view class="mt-34rpx">
|
||||||
|
<!-- 待使用 -->
|
||||||
|
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133]" v-if="orderType !== GroupBuyingCategoryOrderStatus.AfterSaleApply">
|
||||||
|
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx mr-30rpx">联系商家</view>
|
||||||
|
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx">联系平台</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 申请售后 -->
|
||||||
|
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleApply" @click="afterSales.handleSubmitRefund">
|
||||||
|
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">提交</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 售后原因弹出框 -->
|
||||||
|
<wd-popup v-model="showResonPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||||
|
<view class="relative pb-78rpx">
|
||||||
|
<view class="absolute top-18rpx right-30rpx" @click="showResonPopup = 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>
|
||||||
|
<wd-radio-group v-model="reasonModelValue">
|
||||||
|
<view v-for="(item, index) in reasonGroups" :key="index">
|
||||||
|
<view class="text-32rpx text-[#303133] leading-44rpx ml-60rpx mb-28rpx">{{ item.title }}</view>
|
||||||
|
<view v-for="option in item.options" :key="option.value" class="flex items-center justify-between mb-20rpx">
|
||||||
|
<view class="text-28rpx text-[#303133] ml-60rpx">{{ option.label }}</view>
|
||||||
|
<view class="mr-28rpx">
|
||||||
|
<wd-radio :value="option.value" checked-color="#4C9F44" size='large' shape="dot"></wd-radio>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<view class="ml-30rpx" v-if="index === 0" >
|
||||||
|
<wd-divider color="#F6F7F9"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-radio-group>
|
||||||
|
</view>
|
||||||
|
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mx-auto mt-160rpx" @click="afterSales.handleSelectReason">确定</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/groupBuying'
|
||||||
|
import { PersonalReasonMap, MerchantReasonMap, ReasonMap } from '@/utils/platformService'
|
||||||
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
|
/** 表单相关 **/
|
||||||
|
const reasonText = ref<string>('') // 显示售后原因文本
|
||||||
|
const reasonModelValue = ref<number>(0) // 售后原因
|
||||||
|
const showResonPopup = ref<boolean>(false) // 是否显示售后原因弹出框
|
||||||
|
const reasonGroups = [
|
||||||
|
{ title: '个人原因', options: PersonalReasonMap },
|
||||||
|
{ title: '商家原因', options: MerchantReasonMap }
|
||||||
|
]
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
info: string,
|
||||||
|
reason: number
|
||||||
|
}
|
||||||
|
const formData = reactive<FormData>({
|
||||||
|
info: '', // 订单信息（字符串）
|
||||||
|
reason: 0 // 售后原因（整数类型，建议和选项value对应）
|
||||||
|
})
|
||||||
|
/** 结束 **/
|
||||||
|
|
||||||
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
const title = ref<string>('')
|
||||||
|
const type = ref<string>('') // 订单类型：团购、抖音等
|
||||||
|
const orderType = ref<string>('') // 订单状态：待使用、退款等
|
||||||
|
|
||||||
|
onLoad((args) => {
|
||||||
|
// 这里暂时使用 GroupBuyingCategory.Direct 这个，因为平台团购类型下面都是有共同的售后
|
||||||
|
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderType] || '订单详情'
|
||||||
|
|
||||||
|
type.value = args.type
|
||||||
|
orderType.value = args.orderType
|
||||||
|
})
|
||||||
|
|
||||||
|
const afterSales = {
|
||||||
|
handleToCombo: () => {
|
||||||
|
toast.info('跳转到套餐详情')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交申请退款
|
||||||
|
handleSubmitRefund: () => {
|
||||||
|
if (formData.reason === 0) {
|
||||||
|
toast.info('请选择售后原因')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择原因
|
||||||
|
handleSelectReason: () => {
|
||||||
|
if (reasonModelValue.value === 0) {
|
||||||
|
toast.info('请选择售后原因')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
reasonText.value = ReasonMap[reasonModelValue.value]
|
||||||
|
formData.reason = reasonModelValue.value
|
||||||
|
showResonPopup.value = false
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $cz-page-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-bg {
|
||||||
|
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -100,7 +100,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/order'
|
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/groupBuying'
|
||||||
console.log("🚀 ~ GroupBuyingStatusTitle:", GroupBuyingStatusTitle)
|
console.log("🚀 ~ GroupBuyingStatusTitle:", GroupBuyingStatusTitle)
|
||||||
import {toast} from '@/utils/toast'
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
@ -112,7 +112,7 @@
|
|||||||
|
|
||||||
onLoad((args) => {
|
onLoad((args) => {
|
||||||
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.DouYin][args.orderType] || '订单详情'
|
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.DouYin][args.orderType] || '订单详情'
|
||||||
|
|
||||||
type.value = args.type
|
type.value = args.type
|
||||||
orderType.value = args.orderType
|
orderType.value = args.orderType
|
||||||
})
|
})
|
||||||
@ -139,7 +139,7 @@
|
|||||||
|
|
||||||
// 处理拨打电话逻辑
|
// 处理拨打电话逻辑
|
||||||
handleCallPhone: () => {
|
handleCallPhone: () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
<view class="content mx-30rpx mt-34rpx">
|
<view class="content mx-30rpx mt-34rpx">
|
||||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="orderList.upCallback">
|
||||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||||
<combo-card type="DouYin"></combo-card>
|
<combo-card :type="GroupBuyingCategory.DouYin"></combo-card>
|
||||||
</view>
|
</view>
|
||||||
</mescroll-body>
|
</mescroll-body>
|
||||||
</view>
|
</view>
|
||||||
@ -38,7 +38,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</wd-tab>
|
</wd-tab>
|
||||||
</wd-tabs>
|
</wd-tabs>
|
||||||
<view class="absolute right-0 top-10rpx excharge w-178rpx h-80rpx leading-80rpx text-[#fff] text-center font-bold text-24rpx leading-34rpx">
|
<view class="absolute right-0 top-10rpx excharge w-178rpx h-80rpx leading-80rpx text-[#fff] text-center font-bold text-24rpx leading-34rpx" @click="orderList.handleToExcharge">
|
||||||
去兑换
|
去兑换
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -50,6 +50,8 @@
|
|||||||
import ComboCard from '@/components/order/ComboCard.vue'
|
import ComboCard from '@/components/order/ComboCard.vue'
|
||||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
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 { GroupBuyingCategory } from '@/utils/groupBuying'
|
||||||
|
|
||||||
|
|
||||||
/* mescroll */
|
/* mescroll */
|
||||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||||
@ -90,7 +92,7 @@
|
|||||||
// console.log("🚀 ~ goods:", goods)
|
// console.log("🚀 ~ goods:", goods)
|
||||||
|
|
||||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||||
|
|
||||||
// }).catch(() => {
|
// }).catch(() => {
|
||||||
// mescroll.endErr(); // 请求失败, 结束加载
|
// mescroll.endErr(); // 请求失败, 结束加载
|
||||||
// })
|
// })
|
||||||
@ -117,6 +119,13 @@
|
|||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 去兑换
|
||||||
|
handleToExcharge: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/bundle/group-buying/douyin/excharge'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
// 切换菜单
|
// 切换菜单
|
||||||
handleChangeMenu: (type: number) => {
|
handleChangeMenu: (type: number) => {
|
||||||
currentType.value = type
|
currentType.value = type
|
||||||
@ -160,7 +169,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.excharge {
|
.excharge {
|
||||||
background: url(#{$OSS}images/douyin/douyin_image1.png) 0 0 no-repeat;
|
background: url(#{$OSS}images/douyin/douyin_image1.png) 0 0 no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -142,38 +142,13 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 售后订单 -->
|
|
||||||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">
|
|
||||||
<view class="text-[#303133] text-32rpx leading-44rpx">售后订单</view>
|
|
||||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
|
||||||
<view>售后原因</view>
|
|
||||||
<view>买多了/买错了</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
|
||||||
<view>退款金额</view>
|
|
||||||
<view>￥159.22</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
|
||||||
<view>申请时间</view>
|
|
||||||
<view>2019-05-16 13:20:26</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
|
||||||
<view>退款编号</view>
|
|
||||||
<view>
|
|
||||||
<text>7327328627526903</text>
|
|
||||||
<wd-divider vertical />
|
|
||||||
<text class="text-[#4C9F44]">复制</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
|
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
|
||||||
<view class="mt-34rpx">
|
<view class="mt-34rpx">
|
||||||
<!-- 待使用 -->
|
<!-- 待使用 -->
|
||||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx">申请退款</view>
|
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="directOrderDetail.handleToRefund">申请退款</view>
|
||||||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">立即预定</view>
|
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="directOrderDetail.handleToChooseTeaRoom">立即预定</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 已使用 -->
|
<!-- 已使用 -->
|
||||||
@ -186,7 +161,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/order'
|
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/groupBuying'
|
||||||
|
|
||||||
import {toast} from '@/utils/toast'
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
@ -198,7 +173,7 @@
|
|||||||
|
|
||||||
onLoad((args) => {
|
onLoad((args) => {
|
||||||
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderType] || '订单详情'
|
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Direct][args.orderType] || '订单详情'
|
||||||
|
|
||||||
type.value = args.type
|
type.value = args.type
|
||||||
orderType.value = args.orderType
|
orderType.value = args.orderType
|
||||||
})
|
})
|
||||||
@ -225,13 +200,28 @@
|
|||||||
|
|
||||||
// 处理拨打电话逻辑
|
// 处理拨打电话逻辑
|
||||||
handleCallPhone: () => {
|
handleCallPhone: () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 跳转到申请退款页面
|
||||||
|
handleToRefund: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/bundle/group-buying/after-sales/after-sales?type=direct&orderType=${GroupBuyingCategoryOrderStatus.AfterSaleApply}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转到立即预定页面(选择茶室)
|
||||||
|
handleToChooseTeaRoom: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/bundle/reserve-room/choose-room`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: $cz-page-background;
|
background-color: $cz-page-background;
|
||||||
}
|
}
|
||||||
@ -240,5 +230,5 @@
|
|||||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -17,15 +17,10 @@
|
|||||||
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
|
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
|
||||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">请在2025.12.31(含)前使用</text>
|
<text v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">请在2025.12.31(含)前使用</text>
|
||||||
<text v-if="orderType === GroupBuyingCategoryOrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
|
<text v-if="orderType === GroupBuyingCategoryOrderStatus.Used">品一口香茗，让生活慢下来，从一杯好茶开始</text>
|
||||||
<view v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded" class="text-center mt-14rpx">
|
|
||||||
<view class="text-40rpx text-[#303133] leading-56rpx">退款成功￥128.00</view>
|
|
||||||
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
|
|
||||||
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">2025年4月13日 18:22</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 待使用下显示 -->
|
<!-- 待使用下显示 -->
|
||||||
<view class="coupon-bg2 p-30rpx mx-30rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
<view class="coupon-bg2 p-30rpx mx-30rpx" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<view class="mr-30rpx">
|
<view class="mr-30rpx">
|
||||||
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||||||
@ -183,7 +178,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/order'
|
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/groupBuying'
|
||||||
import {toast} from '@/utils/toast'
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
@ -194,7 +189,7 @@
|
|||||||
|
|
||||||
onLoad((args) => {
|
onLoad((args) => {
|
||||||
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Franchise][args.orderType] || '订单详情'
|
title.value = GroupBuyingStatusTitle[GroupBuyingCategory.Franchise][args.orderType] || '订单详情'
|
||||||
|
|
||||||
type.value = args.type
|
type.value = args.type
|
||||||
orderType.value = args.orderType
|
orderType.value = args.orderType
|
||||||
})
|
})
|
||||||
@ -221,13 +216,13 @@
|
|||||||
|
|
||||||
// 处理拨打电话逻辑
|
// 处理拨打电话逻辑
|
||||||
handleCallPhone: () => {
|
handleCallPhone: () => {
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: $cz-page-background;
|
background-color: $cz-page-background;
|
||||||
}
|
}
|
||||||
|
|||||||
275
src/bundle/reserve-room/choose-room-reserve.vue
Normal file
275
src/bundle/reserve-room/choose-room-reserve.vue
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||||
|
<route lang="jsonc" type="page">{
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}</route>
|
||||||
|
<template>
|
||||||
|
<view class="pb-200rpx">
|
||||||
|
<view>
|
||||||
|
<navbar layoutLeft>
|
||||||
|
<template #left>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||||
|
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
|
||||||
|
<view>选择茶室</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center mx-10rpx">
|
||||||
|
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left2.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||||
|
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">2</view>
|
||||||
|
<view>预定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</navbar>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<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="chooseRoomReserve.handleClick" @change="chooseRoomReserve.onChange" mode="aspectFit"></wd-swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 使用说明 -->
|
||||||
|
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||||
|
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||||||
|
<view class="">
|
||||||
|
<rich-text :nodes="html"></rich-text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 预定时间 -->
|
||||||
|
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = 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">
|
||||||
|
3小时起订
|
||||||
|
</view>
|
||||||
|
<view class="mt-4rpx">
|
||||||
|
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 适用门店 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||||
|
<view class="mt-26rpx flex items-center">
|
||||||
|
<view class="mr-24rpx">
|
||||||
|
<wd-img width="170rpx" height="170rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex-1 flex justify-between items-center relative">
|
||||||
|
<view class="">
|
||||||
|
<view class="text-[#303133] text-30rpx leading-40rpx line-2">这是商家的名称这是</view>
|
||||||
|
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</view>
|
||||||
|
<view class="flex items-center mt-14rpx">
|
||||||
|
<view class="mr-8rpx">
|
||||||
|
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||||
|
</view>
|
||||||
|
<view class="ml-2rpx text-26rpx text-[#606266] line-2 w-300rpx">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||||
|
<view class="text-center mr-20rpx" @click="chooseRoomReserve.handleLocation">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||||
|
</view>
|
||||||
|
<view class="text-center" @click="chooseRoomReserve.handleCallPhone">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选择茶室包间 -->
|
||||||
|
<view class="bg-white mx-30rpx rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="text-32rpx text-[#303133] leading-44rpx pt-32rpx">选择茶室包间</view>
|
||||||
|
<view class="mt-26rpx">
|
||||||
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="chooseRoomReserve.upCallback">
|
||||||
|
<room-list :is-reserve="true" :store-type="storeType"></room-list>
|
||||||
|
</mescroll-body>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex items-center justify-center">
|
||||||
|
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||||||
|
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<booking-time v-model="showBookTimePopup"></booking-time>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||||
|
import RoomList from '@/components/reserve/RoomList.vue'
|
||||||
|
import BookingTime from '@/components/BookingTime.vue'
|
||||||
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
/** 轮播图 **/
|
||||||
|
const swiperList = ref<string[]>([
|
||||||
|
`${OSS}images/banner1.png`,
|
||||||
|
`${OSS}images/banner1.png`,
|
||||||
|
`${OSS}images/banner1.png`
|
||||||
|
])
|
||||||
|
const current = ref<number>(0)
|
||||||
|
/** 结束 **/
|
||||||
|
|
||||||
|
/** 轮播图 **/
|
||||||
|
const showBookTimePopup = ref<boolean>(false)
|
||||||
|
/** 结束 **/
|
||||||
|
|
||||||
|
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||||||
|
|
||||||
|
const showAction = ref<boolean>(false)
|
||||||
|
const sheetMenu = ref([])
|
||||||
|
const showServicePopup = ref<boolean>(false)
|
||||||
|
|
||||||
|
const storeType = ref<number>(1) // 1：直营 2：加盟
|
||||||
|
|
||||||
|
/* mescroll */
|
||||||
|
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
})
|
||||||
|
|
||||||
|
const chooseRoomReserve = {
|
||||||
|
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(); // 请求失败, 结束加载
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 收藏和取消收藏
|
||||||
|
handleCollect: () => {
|
||||||
|
// 处理收藏逻辑
|
||||||
|
toast.info('收藏成功')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开客服弹窗
|
||||||
|
handleService: () => {
|
||||||
|
showServicePopup.value = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理菜单选择
|
||||||
|
handleSelectMenu: (item: any) => {
|
||||||
|
console.log("🚀 ~ item:", item)
|
||||||
|
if (chooseRoomReserve.sheetMenuType == 'service') {
|
||||||
|
// 处理客服相关的菜单项
|
||||||
|
if (item.value === 'saveImage') {
|
||||||
|
// 处理保存图片逻辑
|
||||||
|
toast.success('图片已保存')
|
||||||
|
} else if (item.value === 'addWeChat') {
|
||||||
|
// 处理添加微信逻辑
|
||||||
|
toast.success('已添加门店微信')
|
||||||
|
}
|
||||||
|
} else if (chooseRoom.sheetMenuType == 'call' && item.index == 1) {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: item.value // 替换为实际电话号码
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
showAction.value = false // 关闭菜单
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理导航逻辑
|
||||||
|
handleLocation: () => {
|
||||||
|
toast.info('正在导航...')
|
||||||
|
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/map/map' // 假设有一个地图页面
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理拨打电话逻辑
|
||||||
|
handleCallPhone: () => {
|
||||||
|
chooseRoom.sheetMenuType = 'call'
|
||||||
|
showAction.value = true
|
||||||
|
sheetMenu.value = [
|
||||||
|
{
|
||||||
|
name: 15005837859,
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '呼叫',
|
||||||
|
value: 15005837859
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// tab切换获取index
|
||||||
|
handleChangeTab: (item: { index: number }) => {
|
||||||
|
// tabIndexs.value = item.index
|
||||||
|
// scrollToLastY()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClick: (item: any) => {
|
||||||
|
// 处理点击事件
|
||||||
|
console.log('Clicked item:', item)
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange: (e: any) => {
|
||||||
|
// 设置 current.value 为当前轮播索引
|
||||||
|
current.value = e.current
|
||||||
|
},
|
||||||
|
|
||||||
|
handleToRecharge: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/bundle/store-recharge/store-recharge'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $cz-page-background;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
227
src/bundle/reserve-room/choose-room.vue
Normal file
227
src/bundle/reserve-room/choose-room.vue
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||||
|
<route lang="jsonc" type="page">{
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}</route>
|
||||||
|
<template>
|
||||||
|
<view class="pb-200rpx">
|
||||||
|
<view>
|
||||||
|
<navbar layoutLeft>
|
||||||
|
<template #left>
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||||
|
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
|
||||||
|
<view>选择茶室</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center mx-10rpx">
|
||||||
|
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="text-32rpx leading-44rpx flex items-center">
|
||||||
|
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#BFC2CC] text-[#fff] mr-10rpx">2</view>
|
||||||
|
<view class="text-[#606266]">预定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</navbar>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 适用门店 -->
|
||||||
|
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||||
|
<view class="mt-26rpx flex items-center">
|
||||||
|
<view class="mr-24rpx">
|
||||||
|
<wd-img width="170rpx" height="170rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex-1 flex justify-between items-center relative">
|
||||||
|
<view class="">
|
||||||
|
<view class="text-[#303133] text-30rpx leading-40rpx line-2">这是商家的名称这是</view>
|
||||||
|
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</view>
|
||||||
|
<view class="flex items-center mt-14rpx">
|
||||||
|
<view class="mr-8rpx">
|
||||||
|
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||||
|
</view>
|
||||||
|
<view class="ml-2rpx text-26rpx text-[#606266] line-2 w-300rpx">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||||
|
<view class="text-center mr-20rpx" @click="chooseRoom.handleLocation">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||||
|
</view>
|
||||||
|
<view class="text-center" @click="chooseRoom.handleCallPhone">
|
||||||
|
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 选择茶室包间 -->
|
||||||
|
<view class="bg-white mx-30rpx rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||||
|
<view class="text-32rpx text-[#303133] leading-44rpx pt-32rpx">选择茶室包间</view>
|
||||||
|
<view class="mt-26rpx">
|
||||||
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="chooseRoom.upCallback">
|
||||||
|
<room-list :is-reserve="true" :store-type="storeType"></room-list>
|
||||||
|
</mescroll-body>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex items-center justify-center">
|
||||||
|
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||||||
|
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||||
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||||
|
import RoomList from '@/components/reserve/RoomList.vue'
|
||||||
|
import {toast} from '@/utils/toast'
|
||||||
|
|
||||||
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
// tab
|
||||||
|
const tab = ref<number>(0)
|
||||||
|
|
||||||
|
const goods = ref<Array<any>[]>([])
|
||||||
|
const showAction = ref<boolean>(false)
|
||||||
|
const sheetMenu = ref([])
|
||||||
|
const showServicePopup = ref<boolean>(false)
|
||||||
|
|
||||||
|
const storeType = ref<number>(1) // 1：直营 2：加盟
|
||||||
|
|
||||||
|
/* mescroll */
|
||||||
|
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
})
|
||||||
|
|
||||||
|
const chooseRoom = {
|
||||||
|
sheetMenuType: '', // 记录菜单类型
|
||||||
|
|
||||||
|
// 上拉加载的回调: 其中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(); // 请求失败, 结束加载
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 收藏和取消收藏
|
||||||
|
handleCollect: () => {
|
||||||
|
// 处理收藏逻辑
|
||||||
|
toast.info('收藏成功')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开客服弹窗
|
||||||
|
handleService: () => {
|
||||||
|
showServicePopup.value = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理菜单选择
|
||||||
|
handleSelectMenu: (item: any) => {
|
||||||
|
console.log("🚀 ~ item:", item)
|
||||||
|
if (chooseRoom.sheetMenuType == 'service') {
|
||||||
|
// 处理客服相关的菜单项
|
||||||
|
if (item.value === 'saveImage') {
|
||||||
|
// 处理保存图片逻辑
|
||||||
|
toast.success('图片已保存')
|
||||||
|
} else if (item.value === 'addWeChat') {
|
||||||
|
// 处理添加微信逻辑
|
||||||
|
toast.success('已添加门店微信')
|
||||||
|
}
|
||||||
|
} else if (chooseRoom.sheetMenuType == 'call' && item.index == 1) {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: item.value // 替换为实际电话号码
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
showAction.value = false // 关闭菜单
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理导航逻辑
|
||||||
|
handleLocation: () => {
|
||||||
|
toast.info('正在导航...')
|
||||||
|
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/map/map' // 假设有一个地图页面
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理拨打电话逻辑
|
||||||
|
handleCallPhone: () => {
|
||||||
|
chooseRoom.sheetMenuType = 'call'
|
||||||
|
showAction.value = true
|
||||||
|
sheetMenu.value = [
|
||||||
|
{
|
||||||
|
name: 15005837859,
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '呼叫',
|
||||||
|
value: 15005837859
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// tab切换获取index
|
||||||
|
handleChangeTab: (item: { index: number }) => {
|
||||||
|
// tabIndexs.value = item.index
|
||||||
|
// scrollToLastY()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClick: (item: any) => {
|
||||||
|
// 处理点击事件
|
||||||
|
console.log('Clicked item:', item)
|
||||||
|
},
|
||||||
|
|
||||||
|
handleToRecharge: () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/bundle/store-recharge/store-recharge'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $cz-page-background;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -13,12 +13,12 @@
|
|||||||
|
|
||||||
<view>
|
<view>
|
||||||
<view class="mt-20rpx mx-30rpx swiper">
|
<view class="mt-20rpx mx-30rpx swiper">
|
||||||
<wd-swiper value-key="image" height="320rpx"
|
<wd-swiper value-key="image" height="320rpx"
|
||||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||||
@click="detail.handleClick" mode="aspectFit">
|
@click="detail.handleClick" mode="aspectFit">
|
||||||
</wd-swiper>
|
</wd-swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
|
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
|
||||||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||||||
@ -141,8 +141,8 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||||
:style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
|
:style="{ height: '140rpx' }">
|
||||||
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
||||||
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
||||||
</view>
|
</view>
|
||||||
@ -166,7 +166,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 预定时间 -->
|
<!-- 预定时间 -->
|
||||||
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||||
<view class="relative">
|
<view class="relative">
|
||||||
@ -175,16 +175,16 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</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-[100%] h-100rpx flex justify-between items-center">
|
||||||
<view
|
<view
|
||||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
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]'}`"
|
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||||
@click="currentTimePicker = 'start'">
|
@click="currentTimePicker = 'start'">
|
||||||
<view class="text-28rpx leading-40rpx">开始时间</view>
|
<view class="text-28rpx leading-40rpx">开始时间</view>
|
||||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view
|
||||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
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]'}`"
|
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||||
@click="currentTimePicker = 'end'">
|
@click="currentTimePicker = 'end'">
|
||||||
<view class="text-28rpx leading-40rpx">结束时间</view>
|
<view class="text-28rpx leading-40rpx">结束时间</view>
|
||||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
||||||
@ -230,10 +230,10 @@
|
|||||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</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="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 class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||||
<view>茶室费</view>
|
<view>茶室费</view>
|
||||||
<view>￥640.00</view>
|
<view>￥640.00</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||||
<view>茶室费（￥160元/小时）</view>
|
<view>茶室费（￥160元/小时）</view>
|
||||||
<view>x4</view>
|
<view>x4</view>
|
||||||
@ -259,7 +259,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||||
<view>实付金额</view>
|
<view>实付金额</view>
|
||||||
<view>￥640.00</view>
|
<view>￥640.00</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -300,6 +300,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {toast} from '@/utils/toast'
|
import {toast} from '@/utils/toast'
|
||||||
import PriceFormat from '@/components/PriceFormat.vue'
|
import PriceFormat from '@/components/PriceFormat.vue'
|
||||||
|
import {ReserveServiceCategory} from '@/utils/platformService'
|
||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
@ -354,13 +355,12 @@
|
|||||||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||||||
const showPayPopup = ref<boolean>(false) // 支付popup
|
const showPayPopup = ref<boolean>(false) // 支付popup
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad((args) => {
|
||||||
if (isGroupBuying) {
|
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||||||
// TODO 如果是团购套餐则直接微信支付？
|
// TODO 如果是团购套餐则直接微信支付？
|
||||||
pay.value = 3
|
pay.value = 3
|
||||||
console.log("🚀 ~ pay.value:", pay.value)
|
console.log("🚀 ~ pay.value:", pay.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const detail = {
|
const detail = {
|
||||||
@ -397,13 +397,13 @@
|
|||||||
}
|
}
|
||||||
return values
|
return values
|
||||||
},
|
},
|
||||||
|
|
||||||
handleClick: (item: any) => {
|
handleClick: (item: any) => {
|
||||||
// 处理点击事件
|
// 处理点击事件
|
||||||
console.log('Clicked item:', item)
|
console.log('Clicked item:', item)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// 重置预定时间
|
// 重置预定时间
|
||||||
handleResetTime: () => {
|
handleResetTime: () => {
|
||||||
startTimeValue.value = ''
|
startTimeValue.value = ''
|
||||||
@ -414,8 +414,8 @@
|
|||||||
detail.endTimeTimestamp = 0
|
detail.endTimeTimestamp = 0
|
||||||
totalHour.value = 0
|
totalHour.value = 0
|
||||||
currentTimePicker.value = 'start'
|
currentTimePicker.value = 'start'
|
||||||
},
|
},
|
||||||
|
|
||||||
// 确定时间
|
// 确定时间
|
||||||
handleConfirmHour: () => {
|
handleConfirmHour: () => {
|
||||||
if (totalHour.value <= 0) {
|
if (totalHour.value <= 0) {
|
||||||
@ -433,7 +433,7 @@
|
|||||||
|
|
||||||
handlePay: () => {
|
handlePay: () => {
|
||||||
// 这里需要判断下如果是预约的话，跳转结果通知是reserve的，团购是pay的
|
// 这里需要判断下如果是预约的话，跳转结果通知是reserve的，团购是pay的
|
||||||
|
|
||||||
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
|
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -462,7 +462,7 @@
|
|||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
totalHour.value = 0
|
totalHour.value = 0
|
||||||
return 0
|
return 0
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
<navbar title="预约茶室" fixed>
|
<navbar title="预约茶室" fixed>
|
||||||
<template #right>
|
<template #right>
|
||||||
<view class="flex items-center ml-114rpx right-slot">
|
<view class="flex items-center ml-114rpx right-slot">
|
||||||
<view class="mr-16rpx flex items-center" @click="room.handleCollect">
|
<view class="mr-16rpx flex items-center" @click="room.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.png`"></wd-img>
|
||||||
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
|
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
|
||||||
</view>
|
</view>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
<view class="mt-20rpx mx-30rpx swiper" >
|
<view class="mt-20rpx mx-30rpx swiper" >
|
||||||
<view>
|
<view>
|
||||||
<wd-swiper value-key="image" height="320rpx"
|
<wd-swiper value-key="image" height="320rpx"
|
||||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||||
@click="room.handleClick" mode="aspectFit">
|
@click="room.handleClick" mode="aspectFit">
|
||||||
</wd-swiper>
|
</wd-swiper>
|
||||||
@ -88,7 +88,7 @@
|
|||||||
<wd-tab title="团购套餐">
|
<wd-tab title="团购套餐">
|
||||||
<view class="content mx-30rpx mt-34rpx">
|
<view class="content mx-30rpx mt-34rpx">
|
||||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
|
||||||
<room-list :is-group-buying="true" :is-reserve="false" :store-type="storeType"></room-list>
|
<room-list :is-group-buying="true" :store-type="storeType"></room-list>
|
||||||
</mescroll-body>
|
</mescroll-body>
|
||||||
</view>
|
</view>
|
||||||
</wd-tab>
|
</wd-tab>
|
||||||
@ -158,7 +158,7 @@
|
|||||||
// console.log("🚀 ~ goods:", goods)
|
// console.log("🚀 ~ goods:", goods)
|
||||||
|
|
||||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||||
|
|
||||||
// }).catch(() => {
|
// }).catch(() => {
|
||||||
// mescroll.endErr(); // 请求失败, 结束加载
|
// mescroll.endErr(); // 请求失败, 结束加载
|
||||||
// })
|
// })
|
||||||
@ -207,7 +207,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '添加门店微信',
|
name: '添加门店微信',
|
||||||
value: 'addWeChat'
|
value: 'addWeChat'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -253,7 +253,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '呼叫',
|
name: '呼叫',
|
||||||
value: 15005837859
|
value: 15005837859
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -274,7 +274,7 @@
|
|||||||
url: '/bundle/store-recharge/store-recharge'
|
url: '/bundle/store-recharge/store-recharge'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
156
src/components/BookingTime.vue
Normal file
156
src/components/BookingTime.vue
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<wd-popup v-model="showPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||||
|
<view class="relative pb-78rpx">
|
||||||
|
<view class="absolute top-18rpx right-30rpx" @click="showPopup = 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="">
|
||||||
|
<view class="booking-time ">
|
||||||
|
<wd-tabs v-model="selectedDay" color="#4C9F44">
|
||||||
|
<block v-for="item in days" :key="item">
|
||||||
|
<scroll-view scroll-y>
|
||||||
|
<wd-tab :title="`${item}`" :name="item">
|
||||||
|
<view class="">
|
||||||
|
<view class="!h-500rpx mt-30rpx">
|
||||||
|
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
|
||||||
|
<view v-for="item in timeList" :key="item.time"
|
||||||
|
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
|
||||||
|
:class="[
|
||||||
|
item.disabled
|
||||||
|
? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
|
||||||
|
: selectedTime.includes(item.time)
|
||||||
|
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
|
||||||
|
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
|
||||||
|
]" @click="!item.disabled && bookingTime.handleSelectTime(item.time)">
|
||||||
|
{{ item.time }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="">
|
||||||
|
<view>
|
||||||
|
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||||||
|
</view>
|
||||||
|
<view class="">
|
||||||
|
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||||||
|
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="bookingTime.resetSelectedTime">重置</view>
|
||||||
|
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="bookingTime.handleConfirmSelectedTime">
|
||||||
|
<text>确定</text>
|
||||||
|
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-tab>
|
||||||
|
</scroll-view>
|
||||||
|
</block>
|
||||||
|
</wd-tabs>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="BookingTime">
|
||||||
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
|
/**
|
||||||
|
* BookingTime 预约时间
|
||||||
|
* @description 茶室预约时间选择组件
|
||||||
|
*/
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// ...其它props
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 初始化时间
|
||||||
|
onMounted(() => {
|
||||||
|
bookingTime.handleInitTime()
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 日期相关 **/
|
||||||
|
const timeList = [
|
||||||
|
{ time: '09:00', disabled: true },
|
||||||
|
{ time: '09:30', disabled: false },
|
||||||
|
{ time: '10:00', disabled: false },
|
||||||
|
{ time: '10:30', disabled: false },
|
||||||
|
{ time: '11:00', disabled: false },
|
||||||
|
{ time: '11:30', disabled: false },
|
||||||
|
]
|
||||||
|
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||||
|
const days = ref<string[]>([])
|
||||||
|
const selectedDay = ref<number>(0)
|
||||||
|
const selectedTime = ref<string[]>([])
|
||||||
|
const countSelectedTime = ref<number>(0)
|
||||||
|
|
||||||
|
const bookingTime = {
|
||||||
|
// 初始化时间逻辑
|
||||||
|
handleInitTime: () => {
|
||||||
|
const today = new Date()
|
||||||
|
const result: string[] = []
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
const d = new Date(today)
|
||||||
|
d.setDate(today.getDate() + i)
|
||||||
|
const month = d.getMonth() + 1
|
||||||
|
const date = d.getDate()
|
||||||
|
const week = weekMap[d.getDay()]
|
||||||
|
result.push(`${month}/${date}${week}`)
|
||||||
|
}
|
||||||
|
days.value = result
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择的时间高亮显示
|
||||||
|
handleSelectTime: (time: string) => {
|
||||||
|
const idx = selectedTime.value.indexOf(time)
|
||||||
|
if (idx > -1) {
|
||||||
|
selectedTime.value.splice(idx, 1) // 取消选中
|
||||||
|
} else {
|
||||||
|
selectedTime.value.push(time) // 选中
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算时长
|
||||||
|
countSelectedTime.value = selectedTime.value.length * 0.5
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认选择的时间
|
||||||
|
handleConfirmSelectedTime: () => {
|
||||||
|
console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
|
||||||
|
showPopup.value = false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置选择的时间
|
||||||
|
resetSelectedTime: () => {
|
||||||
|
selectedTime.value = []
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const showPopup = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val: boolean) => emit('update:modelValue', val)
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.booking-time {
|
||||||
|
:deep() {
|
||||||
|
.wd-tabs__line {
|
||||||
|
background-color: #4C9F44;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<view class="h-48rpx flex items-center" @click="navbar.back">
|
<view class="h-48rpx flex items-center" @click="navbar.back">
|
||||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
|
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
|
||||||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx" v-if="!layoutLeft">{{ title }}</view>
|
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx" v-if="!layoutLeft">{{ title }}</view>
|
||||||
|
|
||||||
<!-- 开启左侧自定义布局 -->
|
<!-- 开启左侧自定义布局 -->
|
||||||
<slot name="left" v-if="layoutLeft"></slot>
|
<slot name="left" v-if="layoutLeft"></slot>
|
||||||
</view>
|
</view>
|
||||||
@ -27,7 +27,6 @@
|
|||||||
* @description 对wd-navbar进行二次封装，满足不同页面的需求
|
* @description 对wd-navbar进行二次封装，满足不同页面的需求
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { ref, inject } from 'vue'
|
|
||||||
import { getNavBarHeight } from '@/utils/index'
|
import { getNavBarHeight } from '@/utils/index'
|
||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
|
|||||||
@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view class="">
|
||||||
<!-- 平台团购直营店 -->
|
<!-- 平台团购直营店 -->
|
||||||
<view v-if="type === 'Direct'" class="bg-white rounded-10rpx p-30rpx">
|
<view v-if="type === GroupBuyingCategory.Direct" class="bg-white rounded-10rpx p-30rpx">
|
||||||
<view class="flex justify-between items-center">
|
<view class="flex justify-between items-center">
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<view class="w-40rpx h-40rpx mr-10rpx">
|
<view class="mr-10rpx flex items-center">
|
||||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
|
<view class="font-400 text-28rpx leading-40rpx">
|
||||||
<text class="text-[#4C9F44]" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
<text class="text-[#4C9F44]" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
||||||
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
||||||
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleFinished">已退款</text>
|
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="mt-22rpx">
|
<view class="mt-22rpx">
|
||||||
@ -34,7 +34,7 @@
|
|||||||
<view class="mt-10rpx">有效期至2025-03-23</view>
|
<view class="mt-10rpx">有效期至2025-03-23</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-start">
|
<view class="text-center flex items-center text-28rpx mt-28rpx justify-start">
|
||||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
|
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
|
||||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
|
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
|
||||||
@ -45,11 +45,11 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 平台团购加盟店和抖音团购 -->
|
<!-- 平台团购加盟店和抖音团购 -->
|
||||||
<view v-if="type === 'Franchise' || type === 'DouYin'" class="bg-white rounded-10rpx p-30rpx">
|
<view v-if="type === GroupBuyingCategory.Franchise || type === GroupBuyingCategory.DouYin" class="bg-white rounded-10rpx p-30rpx">
|
||||||
<view class="flex justify-between items-center">
|
<view class="flex justify-between items-center">
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<view class="w-40rpx h-40rpx mr-10rpx">
|
<view class="mr-10rpx flex items-center">
|
||||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||||
@ -74,10 +74,46 @@
|
|||||||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Franchise'">申请退款</view>
|
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === GroupBuyingCategory.Franchise">申请退款</view>
|
||||||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'DouYin'">立即预定</view>
|
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === GroupBuyingCategory.DouYin">立即预定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 茶室预约 -->
|
||||||
|
<view v-if="type === ReserveCategory.TeaRoom" class="bg-white rounded-10rpx p-30rpx">
|
||||||
|
<view class="flex justify-between items-center">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="mr-10rpx flex items-center">
|
||||||
|
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||||
|
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||||
|
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
|
||||||
|
<text class="text-[#4C9F44]" v-if="orderType === ReserveCategoryOrderStatus.Consuming">消费中</text>
|
||||||
|
<text class="text-[#606266]" v-if="orderType === ReserveCategoryOrderStatus.Reserved">已预约</text>
|
||||||
|
<text class="text-[#C9C9C9]" v-if="orderType === ReserveCategoryOrderStatus.Serving">服务中</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="mt-22rpx">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="w-200rpx h-200rpx mr-28rpx">
|
||||||
|
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="flex-1">
|
||||||
|
<view @click="comboCard.handleToOrderDetail">
|
||||||
|
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是茶室包间的名称</view>
|
||||||
|
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
|
||||||
|
<view>预约时间：03/18 08:00-12:00</view>
|
||||||
|
<view class="mt-18rpx">预约时长：2小时</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -87,7 +123,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="ComboCard">
|
<script lang="ts" setup name="ComboCard">
|
||||||
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
|
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus } from '@/utils/groupBuying'
|
||||||
|
import { ReserveCategory, ReserveCategoryOrderStatus } from '@/utils/platformService'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ComboCard 套餐卡片组件
|
* ComboCard 套餐卡片组件
|
||||||
@ -98,11 +135,11 @@
|
|||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
/**
|
/**
|
||||||
* 类型: 直营(Direct)、加盟(Franchise)、抖音(DouYin) 等
|
* 类型: 直营(direct)、加盟(franchise)、抖音(douyin) 等
|
||||||
*/
|
*/
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'Direct'
|
default: GroupBuyingCategory.Direct
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 订单类型: 待使用、退款等
|
* 订单类型: 待使用、退款等
|
||||||
@ -110,7 +147,7 @@
|
|||||||
*/
|
*/
|
||||||
orderType: {
|
orderType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'toUse'
|
default: GroupBuyingCategoryOrderStatus.ToUse
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -150,4 +187,4 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {}
|
export default {}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 平台团购加盟-待使用 -->
|
<!-- 平台团购加盟-待使用 -->
|
||||||
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === GroupBuyingCategoryOrderStatus.ToUse">
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<view class="mr-30rpx">
|
<view class="mr-30rpx">
|
||||||
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||||||
@ -126,12 +126,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="ComboCoupon">
|
<script lang="ts" setup name="ComboCoupon">
|
||||||
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
|
import { GroupBuyingCategoryOrderStatus } from '@/utils/groupBuying'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Combo 套餐券组件
|
* Combo 套餐券组件
|
||||||
@ -177,8 +177,8 @@
|
|||||||
background-image: url(#{$OSS}images/order/order_image2.png);
|
background-image: url(#{$OSS}images/order/order_image2.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coupon-bg2 {
|
.coupon-bg2 {
|
||||||
background-image: url(#{$OSS}images/order/order_image1.png);
|
background-image: url(#{$OSS}images/order/order_image1.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|||||||
@ -72,6 +72,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import PriceFormat from '@/components/PriceFormat.vue'
|
import PriceFormat from '@/components/PriceFormat.vue'
|
||||||
|
import {ReserveServiceCategory} from '@/utils/platformService'
|
||||||
|
|
||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
|
|
||||||
@ -85,7 +86,7 @@
|
|||||||
// 是否开启预定
|
// 是否开启预定
|
||||||
isReserve: {
|
isReserve: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: false
|
||||||
},
|
},
|
||||||
// 是否是团购
|
// 是否是团购
|
||||||
isGroupBuying: {
|
isGroupBuying: {
|
||||||
@ -102,8 +103,9 @@
|
|||||||
const roomList = {
|
const roomList = {
|
||||||
toPage: (type: string, id: number) => {
|
toPage: (type: string, id: number) => {
|
||||||
if (type === 'detail') {
|
if (type === 'detail') {
|
||||||
|
let type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/bundle/reserve-room/detail?id=${id}`
|
url: `/bundle/reserve-room/detail?id=${id}&type=${type}`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -113,4 +115,4 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {}
|
export default {}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -146,7 +146,8 @@
|
|||||||
"type": "page",
|
"type": "page",
|
||||||
"layout": "tabbar",
|
"layout": "tabbar",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -178,6 +179,22 @@
|
|||||||
"navigationBarTitleText": "分包页面"
|
"navigationBarTitleText": "分包页面"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "reserve-room/choose-room-reserve",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "reserve-room/choose-room",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "reserve-room/detail",
|
"path": "reserve-room/detail",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
@ -202,6 +219,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "group-buying/after-sales/after-sales",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "group-buying/douyin/douyin-order-detail",
|
"path": "group-buying/douyin/douyin-order-detail",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
@ -253,4 +278,4 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,7 +11,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view class="">
|
||||||
<view class="search-box mx-30rpx mt-30rpx">
|
<view class="search-box mx-30rpx mt-30rpx">
|
||||||
<wd-search placeholder="请输入城市名称" :placeholder-left="true" placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
<wd-search
|
||||||
|
placeholder="请输入城市名称"
|
||||||
|
placeholder-left></wd-search>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="mt-52rpx mx-30rpx">
|
<view class="mt-52rpx mx-30rpx">
|
||||||
@ -51,7 +53,7 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -78,15 +80,10 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wd-search__input {
|
.wd-search__input {
|
||||||
// #ifdef MP
|
|
||||||
padding-left: 32px !important;
|
|
||||||
padding-right: 32px !important;
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef MP
|
// #ifndef MP
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -113,13 +113,15 @@
|
|||||||
const OSS = inject('OSS')
|
const OSS = inject('OSS')
|
||||||
const navbarHeight = inject('navbarHeight')
|
const navbarHeight = inject('navbarHeight')
|
||||||
|
|
||||||
|
/** 轮播图 **/
|
||||||
const swiperList = ref<string[]>([
|
const swiperList = ref<string[]>([
|
||||||
`${OSS}images/banner1.png`,
|
`${OSS}images/banner1.png`,
|
||||||
`${OSS}images/banner1.png`,
|
`${OSS}images/banner1.png`,
|
||||||
`${OSS}images/banner1.png`
|
`${OSS}images/banner1.png`
|
||||||
])
|
])
|
||||||
|
|
||||||
const current = ref<number>(0)
|
const current = ref<number>(0)
|
||||||
|
/** 结束 **/
|
||||||
|
|
||||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
@ -234,4 +236,4 @@ page {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -6,11 +6,11 @@
|
|||||||
}</route>
|
}</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view>
|
||||||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||||
<template #right>
|
<template #right>
|
||||||
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
|
<view class="mr-16rpx flex items-center right-slot" @click="my.handleToService">
|
||||||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
|
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -128,7 +128,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 团购 -->
|
<!-- 团购 -->
|
||||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
|
<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="flex items-center" @click="my.handleToDouYinGroupBuying">
|
||||||
@ -241,7 +241,7 @@
|
|||||||
])
|
])
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const my = {
|
const my = {
|
||||||
@ -269,7 +269,7 @@
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page, home-bg{
|
page, home-bg{
|
||||||
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
|
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -286,7 +286,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vip-level {
|
.vip-level {
|
||||||
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
|
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,54 +2,203 @@
|
|||||||
<route lang="jsonc" type="page">{
|
<route lang="jsonc" type="page">{
|
||||||
"layout": "tabbar",
|
"layout": "tabbar",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
}
|
}
|
||||||
}</route>
|
}</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="">
|
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||||||
<wd-navbar safeAreaInsetTop :bordered="false">
|
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||||
<template #left>
|
<template #left>
|
||||||
<view class="h-88rpx flex items-center">
|
<view class="search-box flex items-center ml-26rpx" @click="reserve.toSearch">
|
||||||
<view class="text-[#303133] text-36rpx ml-24rpx">预约茶室</view>
|
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
|
||||||
</view>
|
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
|
||||||
</template>
|
</wd-search>
|
||||||
<template #right>
|
|
||||||
<view class="flex items-center ml-114rpx right-slot">
|
|
||||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`" class="mr-16rpx"></wd-img>
|
|
||||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</wd-navbar>
|
</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>
|
||||||
|
|
||||||
|
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||||
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
|
||||||
|
<view v-for="(item, index) in 5" :key="index" >
|
||||||
|
<view class="mb-20rpx" v-if="tab === 0">
|
||||||
|
<combo-card :type="ReserveCategory.TeaRoom" :order-type="ReserveCategoryOrderStatus.Consuming"></combo-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</mescroll-body>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, inject } from 'vue'
|
import ComboCard from '@/components/order/ComboCard.vue'
|
||||||
import { getNavBarHeight } from '@/utils/index'
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||||
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||||
|
import { ReserveCategory, ReserveCategoryOrderStatus } from '@/utils/platformService'
|
||||||
|
|
||||||
let navbarHeight = ref<number>(0)
|
const OSS = inject('OSS')
|
||||||
let OSS = inject('OSS')
|
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
|
||||||
const rightPadding = ref<string>('24rpx')
|
|
||||||
|
/** 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(() => {
|
onLoad(() => {
|
||||||
navbarHeight.value = getNavBarHeight()
|
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
||||||
rightPadding.value = menuButtonInfo.width + 16 + 'px'
|
|
||||||
// #endif
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// tab切换获取index
|
||||||
|
handleChangeTab: (item: { index: number }) => {
|
||||||
|
// tabIndexs.value = item.index
|
||||||
|
// scrollToLastY()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理点击事件
|
||||||
|
handleClick: (item: any) => {
|
||||||
|
console.log('Clicked item:', item)
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: #fff;
|
background-color: $cz-page-background;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-slot {
|
.home-bg {
|
||||||
padding-right: v-bind(rightPadding);
|
background-color: $cz-page-background;
|
||||||
|
background-image: url(#{$OSS}images/home/home_bg.png);
|
||||||
|
background-size: 100% 280rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
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>
|
</style>
|
||||||
|
|||||||
@ -19,8 +19,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #title>
|
<template #title>
|
||||||
<view class="search-box flex items-center ml-26rpx">
|
<view class="search-box flex items-center ml-26rpx">
|
||||||
<wd-search placeholder="搜索茶址名称" hide-cancel :placeholder-left="true"
|
<wd-search v-model="keywords" placeholder="搜索茶址名称" hide-cancel placeholder-left
|
||||||
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
placeholderStyle="text-align:left;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</wd-navbar>
|
</wd-navbar>
|
||||||
@ -40,7 +40,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@ -50,6 +50,8 @@
|
|||||||
let navbarHeight = ref(0)
|
let navbarHeight = ref(0)
|
||||||
let OSS = inject('OSS')
|
let OSS = inject('OSS')
|
||||||
|
|
||||||
|
const keywords = ref<string>('')
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
navbarHeight.value = getNavBarHeight()
|
navbarHeight.value = getNavBarHeight()
|
||||||
})
|
})
|
||||||
@ -61,7 +63,7 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@ -91,15 +93,10 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wd-search__input {
|
.wd-search__input {
|
||||||
// #ifdef MP
|
|
||||||
padding-left: 32px !important;
|
|
||||||
padding-right: 32px !important;
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef MP
|
// #ifndef MP
|
||||||
padding-right: 0 !important;
|
padding-right: 0 !important;
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -78,4 +78,5 @@ $uni-font-size-paragraph: 15px;
|
|||||||
|
|
||||||
/* chazhi 自定义 */
|
/* chazhi 自定义 */
|
||||||
$cz-page-background: #F6F7F9; // 页面背景色
|
$cz-page-background: #F6F7F9; // 页面背景色
|
||||||
|
$cz-theme-color: #4C9F44; // 页面背景色
|
||||||
$OSS: 'https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/';
|
$OSS: 'https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/';
|
||||||
|
|||||||
73
src/utils/platformService.ts
Normal file
73
src/utils/platformService.ts
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
// 预约服务分类
|
||||||
|
export enum ReserveServiceCategory {
|
||||||
|
ReserveRoom = 'ReserveRoom', // 预约茶室
|
||||||
|
GroupBuying = 'GroupBuying', // 团购
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/** 售后服务分类 **/
|
||||||
|
// 个人原因
|
||||||
|
enum PersonalReasonEnum {
|
||||||
|
OverBought = 1, // 买多了/买错了
|
||||||
|
NoLongerNeeded = 2 // 计划有变，暂时不需要的
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商家原因
|
||||||
|
enum MerchantReasonEnum {
|
||||||
|
CannotContact = 3, // 电话联系不上商家
|
||||||
|
NotServing = 4, // 商家营业但不接待
|
||||||
|
Renovating = 5 // 商家停止装修
|
||||||
|
}
|
||||||
|
|
||||||
|
// 个人原因映射
|
||||||
|
export const PersonalReasonMap: { label: string, value: PersonalReasonEnum }[] = [
|
||||||
|
{ label: '买多了/买错了', value: PersonalReasonEnum.OverBought },
|
||||||
|
{ label: '计划有变，暂时不需要的', value: PersonalReasonEnum.NoLongerNeeded }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 商家原因映射
|
||||||
|
export const MerchantReasonMap: { label: string, value: MerchantReasonEnum }[] = [
|
||||||
|
{ label: '电话联系不上商家', value: MerchantReasonEnum.CannotContact },
|
||||||
|
{ label: '商家营业但不接待', value: MerchantReasonEnum.NotServing },
|
||||||
|
{ label: '商家停止装修', value: MerchantReasonEnum.Renovating }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 售后原因映射（用于提交时的参数转换）
|
||||||
|
export const ReasonMap: Record<number, string> = {
|
||||||
|
[PersonalReasonEnum.OverBought]: '买多了/买错了',
|
||||||
|
[PersonalReasonEnum.NoLongerNeeded]: '计划有变，暂时不需要的',
|
||||||
|
[MerchantReasonEnum.CannotContact]: '已退款',
|
||||||
|
[MerchantReasonEnum.NotServing]: '申请售后',
|
||||||
|
[MerchantReasonEnum.Renovating]: '申请售后中'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 结束 **/
|
||||||
|
|
||||||
|
/** 预约（茶室、茶艺师预约） **/
|
||||||
|
// 预约类型
|
||||||
|
export enum ReserveCategory {
|
||||||
|
TeaRoom = 'teaRoom', // 直营店
|
||||||
|
TeaSpecialist = 'teaSpecialist' // 茶艺师
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预约类型对应名称
|
||||||
|
export const ReserveCategoryText: Record<ReserveCategory, string> = {
|
||||||
|
[ReserveCategory.TeaRoom]: '茶室预约',
|
||||||
|
[ReserveCategory.TeaSpecialist]: '茶艺师预约',
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用订单状态
|
||||||
|
export enum ReserveCategoryOrderStatus {
|
||||||
|
Consuming = 'consuming', // 消费中
|
||||||
|
Reserved = 'reserved', // 已预约
|
||||||
|
Serving = 'serving' // 服务中(茶艺师订单独有的)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对应名称
|
||||||
|
export const ReserveCategoryOrderStatusText: Record<ReserveCategoryOrderStatus, string> = {
|
||||||
|
[ReserveCategoryOrderStatus.Consuming]: '消费中',
|
||||||
|
[ReserveCategoryOrderStatus.Reserved]: '已预约',
|
||||||
|
[ReserveCategoryOrderStatus.Serving]: '服务中'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 结束 **/
|
||||||
Reference in New Issue
Block a user