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-16 18:11:19 +08:00
parent ca54202b06
commit 7164c6e9a1
4 changed files with 292 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages-sub/reserve-room/reserve-room.vue
View File

@ -24,28 +24,157 @@
</template>
</wd-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="reserveRoom.handleClick" @change="reserveRoom.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">
<rechargeBtn name="充值" />
<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">
<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">
<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="reserveRoom.tabIndex" :lazy="false">
<wd-tab title="茶室预定">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback" top="28rpx"
:fixed="true">
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="团购套餐">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback" top="28rpx"
:fixed="true">
</mescroll-body>
</view>
</wd-tab>
</wd-tabs>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ref, watch, inject } from 'vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
import rechargeBtn from '@/components/recharge-btn.vue'
let navbarHeight = ref<number>(0)
let OSS = inject('OSS')
const rightPadding = ref<string>('')
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)
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
navbarHeight.value = getNavBarHeight()
rightPadding.value = getCapsuleOffset()
})
const reserveRoom = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
console.log("🚀 ~ 123:", 123)
// 需要留一下数据为空的时候显示的空数据图标内容
// 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(); // 请求失败, 结束加载
// })
},
// 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
},
back: () => {
uni.navigateBack({
delta: 1,
})
}
}
}
</script>
@ -57,4 +186,43 @@
.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>