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

71
README.md
View File

@ -1,8 +1,73 @@
<h1 align="center">
茶址
茶址
</h1>
<div align="center">
使用Unibest开发，版本号3.8.2
</div>
使用Unibest开发，版本号3.8.2
</div>
<div>开发规范</div>
1. 页面或组件添加方法的时候前面加上<b>handle</b>关键字
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
},
2. 页面或组件传创建的方法需要以当前文件名称作为对象按照驼峰命名
const detail = {
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
}
}
3. 页面或组件传创建的内部方法需要放在函数最下面，这种方法前面不需要加上handle
const detail = {
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
},
// 格式化时间
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}`
}
}
4. 如果组件名称与定义的对象函数名冲突，则对象函数名后面加上s
import coupon from '@/components/coupon/coupon.vue'
const coupons = {
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
},
// 格式化时间
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}`
}
}

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>

0
src/pages-sub/demo/components/request.vue → src/bundle/demo/components/request.vue
View File

2
src/pages-sub/demo/index.vue → src/bundle/demo/index.vue
View File

@ -15,7 +15,7 @@ import RequestComp from './components/request.vue'
<template>
<view class="text-center">
<view class="m-8">
http://localhost:9000/#/pages-sub/demo/index
http://localhost:9000/#/bundle/demo/index
</view>
<view class="my-4 text-green-500">
分包页面demo

113
src/pages-sub/reserve-room/detail.vue → src/bundle/reserve-room/detail.vue
View File

@ -11,11 +11,11 @@
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<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="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
@click="detail.handleClick" mode="aspectFit">
</wd-swiper>
</view>
@ -76,7 +76,7 @@
</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" @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>
@ -111,7 +111,7 @@
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center">
<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>
@ -198,8 +198,8 @@
:maxDate='maxTimestamp'
type="datetime"
v-model="startTimeValue"
:formatter="reserveRoom.formatStartTime"
@change="reserveRoom.startTimePickend"
:formatter="detail.handleFormatTime"
@change="detail.handleStartTimePicker"
/>
</view>
<view class="" v-if="currentTimePicker == 'end'">
@ -208,15 +208,15 @@
:maxDate='maxTimestamp'
type="datetime"
v-model="endTimeValue"
:formatter="reserveRoom.formatStartTime"
@change="reserveRoom.endTimePickend"
: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="reserveRoom.resetTime">重置</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="reserveRoom.confirmHour">确定（{{ totalHour }}小时）</view>
<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>
@ -291,17 +291,16 @@
</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="reserveRoom.handlePay">确定付款</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, inject } from 'vue'
import { ref } from 'vue'
import {toast} from '@/utils/toast'
const navbarHeight = inject('navbarHeight')
const OSS = inject('OSS')
const swiperList = ref<string[]>([
@ -358,23 +357,23 @@
})
const reserveRoom = {
const detail = {
startTimeTimestamp: 0, // 记录开始时间戳
endTimeTimestamp: 0, // 记录结束时间戳
startTimePickend: (e: {value: number}) => {
reserveRoom.startTimeTimestamp = e.value
startTimeLayout.value = reserveRoom.formatDate(e.value)
reserveRoom.totalTimestamp()
handleStartTimePicker: (e: {value: number}) => {
detail.startTimeTimestamp = e.value
startTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
endTimePickend: (e: {value: number}) => {
reserveRoom.endTimeTimestamp = e.value
endTimeLayout.value = reserveRoom.formatDate(e.value)
reserveRoom.totalTimestamp()
handleEndTimePicker: (e: {value: number}) => {
detail.endTimeTimestamp = e.value
endTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
formatStartTime: (type: string, values: string) => {
handleFormatTime: (type: string, values: string) => {
if (type === 'year') {
return `${values}年`
}
@ -398,15 +397,36 @@
console.log('Clicked item:', item)
},
onChange: (e: any) => {
// 设置 current.value 为当前轮播索引
current.value = e.current
},
// 重置预定时间
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
},
back: () => {
uni.navigateBack({
delta: 1,
})
// 跳转优惠券页面
handleToCoupon(type) {
// 1：优惠券 2：团购券
uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
},
handlePay: () => {
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
},
// 格式化时间
@ -423,8 +443,8 @@
// 计算起订时间时长
totalTimestamp: () => {
if (reserveRoom.startTimeTimestamp && reserveRoom.endTimeTimestamp) {
const diffMs = reserveRoom.endTimeTimestamp - reserveRoom.startTimeTimestamp
if (detail.startTimeTimestamp && detail.endTimeTimestamp) {
const diffMs = detail.endTimeTimestamp - detail.startTimeTimestamp
// 计算小时，保留一位小数
const hours = (diffMs / 1000 / 60 / 60)
const result = Math.round(hours * 10) / 10 // 保留一位小数
@ -436,32 +456,7 @@
totalHour.value = 0
return 0
},
// 重置预定时间
resetTime: () => {
startTimeValue.value = ''
endTimeValue.value = ''
startTimeLayout.value = ''
endTimeLayout.value = ''
reserveRoom.startTimeTimestamp = 0
reserveRoom.endTimeTimestamp = 0
totalHour.value = 0
currentTimePicker.value = 'start'
},
// 确定时间
confirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
},
handlePay: () => {
// uni.navigateTo({ url: '/pages-sub/reserve-room/result' })
}
}
}
</script>
<style lang="scss">

5
src/pages-sub/reserve-room/result.vue → src/bundle/reserve-room/result.vue
View File

@ -25,13 +25,12 @@
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
let OSS = inject('OSS')
const OSS = inject('OSS')
const result = {
handleSeeOrder: () => {
uni.navigateTo({
url: '/pages-sub/reserve-room/order'
url: '/bundle/reserve-room/order'
})
},

41
src/pages-sub/reserve-room/room.vue → src/bundle/reserve-room/room.vue
View File

@ -8,14 +8,14 @@
<template>
<view>
<view>
<navbar title="预约茶室">
<navbar title="预约茶室" fixed>
<template #right>
<view class="flex items-center ml-114rpx right-slot">
<view class="mr-16rpx flex items-center" @click="reserveRoom.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_s.png`"></wd-img> -->
</view>
<view @click="reserveRoom.handleService" class="flex items-center">
<view @click="room.handleService" class="flex items-center">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
</view>
</view>
@ -23,11 +23,11 @@
</navbar>
</view>
<view class="mt-20rpx mx-30rpx swiper" :style="{ paddingTop: navbarHeight + 'px' }">
<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="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
@click="room.handleClick" @change="room.onChange" mode="aspectFit">
</wd-swiper>
</view>
<view class="mt-38rpx flex justify-between">
@ -42,7 +42,7 @@
<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="reserveRoom.handleToRecharge">
<view @click="room.handleToRecharge">
<rechargeBtn name="充值" />
</view>
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
@ -62,11 +62,11 @@
<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="reserveRoom.handleLocation">
<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="reserveRoom.handleCallPhone">
<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>
@ -77,17 +77,17 @@
<wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
</view>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="reserveRoom.tabIndex" :lazy="false">
<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="reserveRoom.upCallback">
<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="reserveRoom.upCallback">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
<roomList :is-group-buying="true" :is-reserve="false"></roomList>
</mescroll-body>
</view>
@ -97,26 +97,25 @@
<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="reserveRoom.handleOpenServiceSheet">
<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="reserveRoom.handleSelectMenu" />
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="room.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
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 navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
const OSS = inject('OSS')
@ -139,7 +138,7 @@
onLoad(() => {
})
const reserveRoom = {
const room = {
sheetMenuType: '', // 记录菜单类型
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
@ -196,7 +195,7 @@
// 打开客服二维码弹窗
handleOpenServiceSheet: () => {
reserveRoom.sheetMenuType = 'service'
room.sheetMenuType = 'service'
showAction.value = true
sheetMenu.value = [
{
@ -213,7 +212,7 @@
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (reserveRoom.sheetMenuType == 'service') {
if (room.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
@ -222,7 +221,7 @@
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (reserveRoom.sheetMenuType == 'call' && item.index == 1) {
} else if (room.sheetMenuType == 'call' && item.index == 1) {
uni.makePhoneCall({
phoneNumber: item.value // 替换为实际电话号码
})
@ -242,7 +241,7 @@
// 处理拨打电话逻辑
handleCallPhone: () => {
reserveRoom.sheetMenuType = 'call'
room.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
@ -275,7 +274,7 @@
handleToRecharge: () => {
uni.navigateTo({
url: '/pages-sub/store-recharge/store-recharge'
url: '/bundle/store-recharge/store-recharge'
})
},

2
src/pages-sub/store-recharge/store-recharge.vue → src/bundle/store-recharge/store-recharge.vue
View File

@ -48,7 +48,7 @@
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ref } from 'vue'
import { getNavBarHeight } from '@/utils/index'
let navbarHeight = ref<number>(0)

72
src/components/coupon/coupon.vue
View File

@ -0,0 +1,72 @@
<template>
<view class="mb-20rpx" @click="onCheck(coupon.id)">
<view class="coupon h-210rpx flex items-center">
<view class="w-260rpx h-[100%] rounded-l-16rpx rounded-tr-0 rounded-br-0 flex flex-col items-center justify-center" :class="canUse ? 'bg-[#4C9F44]' : 'bg-[#F2F2F2]'">
<view class="flex" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">
<view class="text-72rpx leading-100rpx">{{ coupon.amount }}</view>
<view class="text-32rpx leading-44rpx mt-40rpx ml-10rpx">元</view>
</view>
<view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满120元可用</view>
</view>
<view class="bg-[#fff] w-490rpx h-[100%] rounded-r-16rpx rounded-tl-0 rounded-bl-0 flex justify-between items-center">
<view class="ml-30rpx line-1">
<view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">茶室优惠</view>
<view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 2022-08-12</view>
</view>
<view class="h-100% mr-70rpx mt-58rpx">
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="groupCoupon">
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
checked: boolean
onCheck: (id: number) => void
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
</style>

44
src/components/coupon/group-coupon.vue
View File

@ -0,0 +1,44 @@
<template>
<view class="p-30rpx rounded-16rpx mb-20rpx bg-white" @click="onCheck(coupon.id)">
<view class="flex justify-between items-start relative ">
<view class="w-180rpx h-180rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home_image5.png`"></wd-img>
</view>
<view class="flex-1 ml-32rpx line-1" :class="canUse ? '' : 'opacity-40'">
<view class="text-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">这是团购券套餐名称这是团购券套餐名称</view>
<view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
<view class="line-1">这是商家名称这是商家名称这是商家名称这是商家名称这是商家名称</view>
<view class="mx-14rpx">|</view>
<view>{{ coupon.limit }}小时</view>
</view>
<view class="text-24rpx leading-34rpx text-[#909399] mt-16rpx">有效期：2025-01-01至2025-05-05</view>
</view>
<view>
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="groupCoupon">
const OSS = inject('OSS')
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
checked: boolean
onCheck: (id: number) => void
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

17
src/components/navbar.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="w-[100%] fixed top-0 left-0 z-8">
<wd-navbar safeAreaInsetTop :bordered="false" :custom-class="customClass">
<!-- <view class="w-[100%] fixed top-0 left-0 z-8"> -->
<wd-navbar safeAreaInsetTop :bordered="false" :custom-class="customClass" :fixed="fixed" :placeholder="fixed" :zIndex="zIndex">
<template #left>
<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>
@ -20,7 +20,7 @@
<slot name="right"></slot>
</template>
</wd-navbar>
</view>
<!-- </view> -->
</template>
<script lang="ts" setup>
@ -39,9 +39,20 @@
type: String,
default: ''
},
customClass: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1
}
})

2
src/components/reserve/room-list.vue
View File

@ -94,7 +94,7 @@
toPage: (type: string, id: number) => {
if (type === 'detail') {
uni.navigateTo({
url: `/pages-sub/reserve-room/detail?id=${id}`
url: `/bundle/reserve-room/detail?id=${id}`
})
}
}

49
src/pages-sub/coupon/coupon.vue
View File

@ -1,49 +0,0 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view>
<view>
<navbar title="优惠券" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="mt-30rpx">
<view class="mx-30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用团购券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ">2张</text>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const couponType = ref<number>(1) // couponType 1:优惠券 2:团购券
onLoad((args) => {
if (args.type) {
couponType.value = args.type
}
})
const coupon = {
back() {
uni.navigateBack({
delta: 1
})
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

2
src/pages.json
View File

@ -116,7 +116,7 @@
],
"subPackages": [
{
"root": "pages-sub",
"root": "bundle",
"pages": [
{
"path": "coupon/coupon",

2
src/pages/about/about.vue
View File

@ -29,7 +29,7 @@ function gotoVueQuery() {
}
function gotoSubPage() {
uni.navigateTo({
url: '/pages-sub/demo/index',
url: '/bundle/demo/index',
})
}
// uniLayout里面的变量通过 expose 暴露出来后可以在 onReady 钩子获取到（onLoad 钩子不行）

8
src/pages/index/index.vue
View File

@ -107,13 +107,13 @@
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ref } from 'vue'
import { getNavBarHeight } from '@/utils/index'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
let navbarHeight = ref<number>(0)
let OSS = inject('OSS')
const navbarHeight = ref<number>(0)
const OSS = inject('OSS')
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
@ -179,7 +179,7 @@
handleToReserveRoom: (id: number = 1) => {
// 跳转到预约茶室页面
uni.navigateTo({
url: `/pages-sub/reserve-room/room?id=${id}`
url: `/bundle/reserve-room/room?id=${id}`
})
}
}

2
vite.config.ts
View File

@ -62,7 +62,7 @@ export default ({ command, mode }) => {
exclude: ['**/components/**/**.*'],
// homePage 通过 vue 文件的 route-block 的type="home"来设定
// pages 目录为 src/pages，分包目录不能配置在pages目录下
subPackages: ['src/pages-sub'], // 是个数组，可以配置多个，但是不能为pages里面的目录
subPackages: ['src/bundle'], // 是个数组，可以配置多个，但是不能为pages里面的目录
dts: 'src/types/uni-pages.d.ts',
}),
UniLayouts(),