wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改分包页面

Browse Source
This commit is contained in:
wangxiaowei
2025-08-27 16:32:11 +08:00
parent c963ad1ca2
commit 03745bb676
17 changed files with 442 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/bundle/coupon/coupon.vue Normal file
View File

@ -0,0 +1,158 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-180rpx">
<view>
<navbar :title="couponType == 1 ? '优惠券' : '团购券'" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
<view class="mt-30rpx">
<view v-if="couponType == 1">
<!-- 优惠券 -->
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<coupon
v-for="(item, index) in couponList"
:key="item.id"
:coupon="item"
canUse
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
/>
</wd-radio-group>
</view>
</view>
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<coupon
v-for="(item, index) in unCouponList"
:key="item.id"
:coupon="item"
:canUse="false"
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
/>
</wd-radio-group>
</view>
</view>
</view>
<!-- 团购券 -->
<view v-if="couponType == 2">
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用团购券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<group-coupon
v-for="(item, index) in couponList"
:key="item.id"
:coupon="item"
canUse
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
/>
</wd-radio-group>
</view>
</view>
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用团购券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<group-coupon
v-for="(item, index) in unCouponList"
:key="item.id"
:coupon="item"
:canUse="false"
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
/>
</wd-radio-group>
</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="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
<view class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import coupon from '@/components/coupon/coupon.vue'
import groupCoupon from '@/components/coupon/group-coupon.vue'
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
const OSS = inject('OSS')
const couponList = ref([
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
])
const checkedId = ref<number>(0)
const unCouponList = ref([
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
])
onLoad((args) => {
if (args.type) {
couponType.value = args.type
}
})
const coupons = {
handleCheck: (id: number) => {
checkedId.value = id
console.log("🚀 ~ checkedId.value :", checkedId.value )
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.radio {
:deep() {
.wd-radio-group {
background-color: transparent !important;
}
}
}
</style>

48
src/bundle/demo/components/request.vue Normal file
View File

@ -0,0 +1,48 @@
<script lang="ts" setup>
import type { IFooItem } from '@/api/foo'
import { getFooAPI } from '@/api/foo'
const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
// const initialData = {
// name: 'initialData',
// id: '1234',
// }
const initialData = undefined
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
immediate: true,
initialData,
})
function reset() {
data.value = initialData
}
</script>
<template>
<view class="p-6 text-center">
<view class="my-2 text-center">
<button type="primary" size="mini" class="w-160px" @click="run">
发送请求
</button>
</view>
<view class="h-16">
<view v-if="loading">
loading...
</view>
<block v-else>
<view class="text-xl">
请求数据如下
</view>
<view class="text-green leading-8">
{{ JSON.stringify(data) }}
</view>
</block>
</view>
<view class="my-6 text-center">
<button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
重置数据
</button>
</view>
</view>
</template>

34
src/bundle/demo/index.vue Normal file
View File

@ -0,0 +1,34 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "分包页面"
}
}
</route>
<script lang="ts" setup>
// code here
import RequestComp from './components/request.vue'
</script>
<template>
<view class="text-center">
<view class="m-8">
http://localhost:9000/#/bundle/demo/index
</view>
<view class="my-4 text-green-500">
分包页面demo
</view>
<view class="text-blue-500">
分包页面里面的components示例
</view>
<view>
<RequestComp />
</view>
</view>
</template>
<style lang="scss" scoped>
//
</style>

488
src/bundle/reserve-room/detail.vue Normal file
View File

@ -0,0 +1,488 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-180rpx">
<view>
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
<view class="mt-20rpx mx-30rpx swiper">
<wd-swiper value-key="image" height="320rpx"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@click="detail.handleClick" mode="aspectFit">
</wd-swiper>
</view>
<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="mt-14rpx flex" v-if="!isGroupBuying">
<view class="mr-20rpx flex items-start">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</view>
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
<view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
</view>
<view v-if="isGroupBuying">
<view class="mt-20rpx mb-24rpx" >
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="text-[#303133] text-28rpx leading-48rpx">
<view>
<text class="font-bold mr-26rpx">须知</text>
<text class="font-500">需预约</text>
</view>
<view class="mt-22rpx">
<text class="font-bold mr-26rpx">保障</text>
<text class="font-500">随时退</text>
</view>
</view>
</view>
</view>
<view v-if="!isGroupBuying">
<!-- 使用说明 -->
<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="showReservePopup = true">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
<view class="flex items-center justify-between">
<view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx">
{{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="detail.handleToCoupon(1)">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
<view class="flex items-center justify-between">
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<!-- 支付方式 -->
<view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
<view>
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
<view class="flex items-center">
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>
<view class="flex items-center">
<wd-radio :value="item.value">
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
</wd-radio>
</view>
</view>
</wd-radio-group>
</view>
<view class="mb-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center" @click="detail.handleToCoupon(2)">
<view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
<view class="flex items-center">
<view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
</view>
<view v-if="isGroupBuying">
<!-- 套餐详情 -->
<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">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
<view class="">
<rich-text :nodes="html"></rich-text>
</view>
</view>
</view>
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
:style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
</view>
<view class="mt-22rpx flex justify-between items-center">
<view class="flex items-center ml-60rpx">
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
<view class="ml-20rpx" v-if="isGroupBuying">
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
</view>
</view>
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="showCostPopup = true">
<view class="text-24rpx mr-10rpx">费用明细</view>
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
</view>
</view>
<view class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='showPayPopup = true'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
</view>
</view>
</view>
</view>
<!-- 预定时间 -->
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative">
<view class="absolute top-18rpx right-30rpx" @click="showReservePopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
<view class="w-[100%] h-100rpx flex justify-between items-center">
<view
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
@click="currentTimePicker = 'start'">
<view class="text-28rpx leading-40rpx">开始时间</view>
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
</view>
<view
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
@click="currentTimePicker = 'end'">
<view class="text-28rpx leading-40rpx">结束时间</view>
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
</view>
</view>
<view class="date-picker">
<view class="" v-if="currentTimePicker == 'start'">
<wd-datetime-picker-view
:minDate='minTimestamp'
:maxDate='maxTimestamp'
type="datetime"
v-model="startTimeValue"
:formatter="detail.handleFormatTime"
@change="detail.handleStartTimePicker"
/>
</view>
<view class="" v-if="currentTimePicker == 'end'">
<wd-datetime-picker-view
:minDate='minTimestamp'
:maxDate='maxTimestamp'
type="datetime"
v-model="endTimeValue"
:formatter="detail.handleFormatTime"
@change="detail.handleEndTimePicker"
/>
</view>
</view>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="detail.handleResetTime">重置</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="detail.handleConfirmHour">确定（{{ totalHour }}小时）</view>
</view>
</view>
</wd-popup>
<!-- 费用明细 -->
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
<view class='bg-[#FBFBFB] py-40rpx realtive'>
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>茶室费</view>
<view>￥640.00</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>茶室费（￥160元/小时）</view>
<view>x4</view>
</view>
<view class="mt-52rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>茶室费</view>
<view class="text-[#4C9F44]">-￥640.00</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥20</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥20</view>
</view>
</view>
<view class="my-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>实付金额</view>
<view>￥640.00</view>
</view>
</view>
</view>
</wd-popup>
<!-- 支付 -->
<wd-popup v-model="showPayPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showPayPopup = false" position="bottom">
<view class='bg-[#FBFBFB] py-40rpx realtive'>
<view class="absolute top-18rpx right-30rpx" @click="showPayPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<view class="text-36rpx text-[#121212] leading-50rpx text-center">支付</view>
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
<view class="pay" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
<view class="flex justify-between items-center" v-if="pay == item.value" >
<view class="flex items-center">
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>
<view class="flex items-center">
<wd-radio :value="item.value">
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
</wd-radio>
</view>
</view>
</view>
</wd-radio-group>
</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="detail.handlePay">确定付款</view>
</view>
</wd-popup>
</view>
</template>
<script lang="ts" setup>
import { ref } from '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 html: string = '<p>这里是富文本内容，需要后台传递</p>'
const isGroupBuying: boolean = false // 是否是团购套餐
const pay = ref<number>(1) // 支付方式
const payList = ref<Array<any>>([
{
id: 1,
name: '平台余额',
icon: `${OSS}icon/icon_platform_balance.png`,
balance: 0,
value: 1
},
{
id: 2,
name: '门店余额',
icon: `${OSS}icon/icon_store_balance.png`,
balance: 0,
value: 2
},
{
id: 3,
name: '微信支付',
icon: `${OSS}icon/icon_weichat.png`,
balance: 0,
value: 3
}
])
// 预定时间相关
const showReservePopup = ref<boolean>(false) // 预定时间popup
const currentTimePicker = ref<string>('start') // 当前选择的时间类型
const startTimeValue = ref<string>('') // 开始时间
const endTimeValue = ref<string>('') // 结束时间
const now = new Date()
const minTimestamp = Date.now()
// 允许选择未来两个月的日期
const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
const startTimeLayout = ref<string>('')
const endTimeLayout = ref<string>('')
const totalHour = ref<number>(0)
// 费用明细相关
const showCostPopup = ref<boolean>(false) // 费用明细popup
const showPayPopup = ref<boolean>(false) // 支付popup
onLoad(() => {
})
const detail = {
startTimeTimestamp: 0, // 记录开始时间戳
endTimeTimestamp: 0, // 记录结束时间戳
handleStartTimePicker: (e: {value: number}) => {
detail.startTimeTimestamp = e.value
startTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
handleEndTimePicker: (e: {value: number}) => {
detail.endTimeTimestamp = e.value
endTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
handleFormatTime: (type: string, values: string) => {
if (type === 'year') {
return `${values}年`
}
if (type === 'month') {
return `${values}月`
}
if (type === 'date') {
return `${values}日`
}
if (type === 'hour') {
return `${values}时`
}
if (type === 'minute') {
return `${values}分`
}
return values
},
handleClick: (item: any) => {
// 处理点击事件
console.log('Clicked item:', item)
},
// 重置预定时间
handleResetTime: () => {
startTimeValue.value = ''
endTimeValue.value = ''
startTimeLayout.value = ''
endTimeLayout.value = ''
detail.startTimeTimestamp = 0
detail.endTimeTimestamp = 0
totalHour.value = 0
currentTimePicker.value = 'start'
},
// 确定时间
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
},
// 跳转优惠券页面
handleToCoupon(type) {
// 1：优惠券 2：团购券
uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
},
handlePay: () => {
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
},
// 格式化时间
formatDate: (timestamp: number) => {
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hour}:${minute}`
},
// 计算起订时间时长
totalTimestamp: () => {
if (detail.startTimeTimestamp && detail.endTimeTimestamp) {
const diffMs = detail.endTimeTimestamp - detail.startTimeTimestamp
// 计算小时，保留一位小数
const hours = (diffMs / 1000 / 60 / 60)
const result = Math.round(hours * 10) / 10 // 保留一位小数
if (result >= 0) {
totalHour.value = result
}
return result
}
totalHour.value = 0
return 0
},
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.swiper {
:deep() {
.wd-swiper-nav__item--dots-bar {
width: 56rpx !important;
height: 6rpx !important;
border-radius: 3rpx !important;
}
.is-active {
background-color: #2B9F93 !important;
}
}
}
.pay {
:deep() {
.wd-radio {
margin-top: 0 !important;
}
}
}
</style>

49
src/bundle/reserve-room/result.vue Normal file
View File

@ -0,0 +1,49 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "结果通知",
"navigationBarBackgroundColor": "#FFF"
}
}
</route>
<template>
<view class="mx-62rpx">
<view class="w-300rpx h-278rpx mt-84rpx mx-auto">
<wd-img width="300rpx" height='278rpx' :src="`${OSS}images/reserve_room_image4.png`"></wd-img>
</view>
<view class="mt-60rpx text-center">
<view class="text-[#303133] text-36rpx leading-50rpx">茶室预约成功</view>
<view class="text-[#9CA3AF] text-28rpx leading-40rpx font-400 mt-20rpx">可以点击下方查看预约单具体信息</view>
</view>
<view class="mt-76rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#fff] text-[#303133] rounded-24rpx h-90rpx leading-90rpx w-300rpx mr-28rpx' @click="result.handleSeeOrder">查看订单</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-24rpx h-90rpx leading-90rpx w-300rpx' @click="result.handleDone">完成</view>
</view>
</view>
</template>
<script lang="ts" setup>
const OSS = inject('OSS')
const result = {
handleSeeOrder: () => {
uni.navigateTo({
url: '/bundle/reserve-room/order'
})
},
handleDone: () => {
uni.navigateBack({
delta: 1
})
},
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

335
src/bundle/reserve-room/room.vue Normal file
View File

@ -0,0 +1,335 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view>
<view>
<navbar title="预约茶室" fixed>
<template #right>
<view class="flex items-center ml-114rpx right-slot">
<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_s.png`"></wd-img> -->
</view>
<view @click="room.handleService" class="flex items-center">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
</view>
</view>
</template>
</navbar>
</view>
<view class="mt-20rpx mx-30rpx swiper" >
<view>
<wd-swiper value-key="image" height="320rpx"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@click="room.handleClick" @change="room.onChange" mode="aspectFit">
</wd-swiper>
</view>
<view class="mt-38rpx flex justify-between">
<view class="line-1">
<view class="text-34rpx text-[#303133] leading-48rpx font-bold line-1">凝香茶业</view>
<view class="relative mt-18rpx h-34rpx">
<view class="absolute top-0 flex items-center">
<wd-rate v-model="rate" readonly active-color="#FF5951" color="#FF5951" active-icon="star-filled" icon="star" space="4rpx"></wd-rate>
<view class="text-26rpx text-[#606266] leading-34rpx ml-8rpx">4.0 推荐</view>
</view>
</view>
<view class="text-26rpx mt-18rpx leading-48rpx text-[#606266]">营业时间：周一至周日 08:00-20:00</view>
</view>
<view class="flex flex-col items-end">
<view @click="room.handleToRecharge">
<rechargeBtn name="充值" />
</view>
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
</view>
</view>
<view class="mt-26rpx">
<wd-gap bg-color="#F6F7F9" height="2rpx"></wd-gap>
</view>
<view class="mt-22rpx flex items-center justify-between">
<view class="">
<view class="flex items-center">
<view class="w-36rpx h-36rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_location2.png`"/>
</view>
<view class="ml-2rpx text-26rpx text-[#606266] line-2">青浦区仓路478号</view>
</view>
<view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您14km</view>
</view>
<view class="flex items-center mr-32rpx">
<view class="text-center mr-20rpx" @click="room.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
<view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">导航</view>
</view>
<view class="text-center" @click="room.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
<view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">电话</view>
</view>
</view>
</view>
</view>
<view class="mt-26rpx">
<wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
</view>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="room.tabIndex" :lazy="false">
<wd-tab title="茶室预定">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
<roomList :is-reserve="true"></roomList>
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="团购套餐">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
<roomList :is-group-buying="true" :is-reserve="false"></roomList>
</mescroll-body>
</view>
</wd-tab>
</wd-tabs>
</view>
<wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = false">
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
<view class="w-240rpx h-240rpx" @click="room.handleOpenServiceSheet">
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
</view>
</wd-popup>
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="room.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import rechargeBtn from '@/components/recharge-btn.vue'
import roomList from '@/components/reserve/room-list.vue'
import {toast} from '@/utils/toast'
const rightPadding = inject('capsuleOffset')
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 rate = ref<number>(4)
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
const showServicePopup = ref<boolean>(false)
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
})
const room = {
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
},
// 打开客服二维码弹窗
handleOpenServiceSheet: () => {
room.sheetMenuType = 'service'
showAction.value = true
sheetMenu.value = [
{
name: '保存图片',
value: 'saveImage'
},
{
name: '添加门店微信',
value: 'addWeChat'
}
]
},
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (room.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
toast.success('图片已保存')
} else if (item.value === 'addWeChat') {
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (room.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: () => {
room.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
name: 15005837859,
value: ''
},
{
name: '呼叫',
value: 15005837859
}
]
},
// tab切换获取index
tabIndex: (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'
})
},
back: () => {
uni.navigateBack({
delta: 1,
})
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.right-slot {
padding-right: v-bind(rightPadding);
}
.swiper {
:deep() {
.wd-swiper-nav__item--dots-bar {
width: 56rpx !important;
height: 6rpx !important;
border-radius: 3rpx !important;
}
.is-active {
background-color: #2B9F93 !important;
}
}
}
.tabs {
:deep() {
.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_image1.png) !important;
background-size: cover !important;
}
}
}
</style>

92
src/bundle/store-recharge/store-recharge.vue Normal file
View File

@ -0,0 +1,92 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view>
<view>
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent;" :height="navbarHeight">
<template #left>
<view class="h-48rpx flex items-center" @click="storeRecharge.back">
<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">充值</view>
</view>
</template>
</wd-navbar>
</view>
<view class="mt-34rpx mx-70rpx flex items-center">
<view class="font-400 text-30rpx text-[#303133] leading-42rpx">转入方式</view>
<view class="flex-1 ml-72rpx flex items-center">
<wd-img width="52rpx" height="52rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
<view class="ml-18rpx text-[#303133] text-32rpx leading-44rpx fon-bold">微信</view>
</view>
</view>
<view class="bg-white mt-26rpx rounded-16rpx px-38rpx py-28rpx mx-32rpx">
<view class="text-28rpx font-400 text-[#303133] leading-40rpx">转入金额</view>
<view class="mt-44rpx flex items-center">
<view class="text-[#303133] text-36rpx font-400 leading-50rpx">￥</view>
<wd-input v-model="rechargeMoney" inputmode="decimal" size="large" placeholder="请输入金额" required no-border placeholderStyle="font-size: 48rpx; color: #c9c9c9;"></wd-input>
</view>
</view>
<view class="text-28rpx font-400 text-[#303133] leading-40rpx mx-70rpx mt-38rpx">推广方式</view>
<view class="bg-white mt-28rpx rounded-16rpx px-38rpx mx-32rpx h-150rpx flex items-center">
<view class="text-[#303133] text-30rpx font-bold leading-42rpx">门店推广</view>
<view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">上海浦东新区茶室店铺</view>
</view>
<view @click="storeRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', opacity: canRecharge ? 1 : 0.5 }">
确定转入
</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { getNavBarHeight } from '@/utils/index'
let navbarHeight = ref<number>(0)
let OSS = inject('OSS')
let rechargeMoney = ref<string>('')
let canRecharge = ref<boolean>(false)
onLoad(() => {
navbarHeight.value = getNavBarHeight()
})
const storeRecharge = {
back: () => {
uni.navigateBack({
delta: 1,
})
},
handleRecharge: () => {
if (rechargeMoney.value) {
// 这里可以添加充值逻辑
uni.showToast({
title: '充值成功',
icon: 'success'
})
storeRecharge.back()
} else {
uni.showToast({
title: '请输入充值金额',
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #F6F7F8;
}
</style>