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

添加立即预约页面

Browse Source
This commit is contained in:
wangxiaowei
2026-03-23 18:33:20 +08:00
parent 7215f9dac0
commit 3f1879c720
7 changed files with 637 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,7 @@
</wd-overlay>
<view class="w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #F9FAFB !important;">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #fff !important;">
<template #left>
<view class="flex items-center line-1 w-130rpx" @click="Index.handleToCity">
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ city || LOCATION_DEFAULT_CITY }}</view>
@ -49,7 +49,7 @@
</wd-navbar>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="bg-white rounded-b-20rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<view class="mt-32rpx mx-30rpx">
<wd-swiper
height="320rpx"
@ -61,35 +61,65 @@
></wd-swiper>
</view>
<view class="mt-32rpx flex items-center h-36rpx mx-30rpx">
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home/home_image1.png`" mode="aspectFit" />
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">甄选茗师</text>
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">·</text>
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">商务雅趣</text>
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">·</text>
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-10rpx">尊享奉茶</text>
<!-- 专属定制 -->
<view class="flex justify-center mt-30rpx mb-26rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
<wd-img :src="`${OSS}images/home/home_image_15.png`" width="690rpx" height="148rpx" mode="scaleToFill" />
</view>
<view class="mt-24rpx relative w-690rpx h-224rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
<view class="mx-30rpx pb-30rpx flex justify-between">
<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #EAFFF9 0%, #F6F7F9 100%);">
<view class="px-10rpx pt-10rpx flex justify-center">
<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_16.png`" radius="16rpx" mode="aspectFill" />
</view>
<view class="px-12rpx mt-8rpx">
<view class="text-28rpx font-bold text-[#303133] line-1">清风套餐</view>
<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
<text class="text-28rpx">￥</text>
<text class="text-30rpx">298</text>
<text class="text-24rpx">/2小时</text>
</view>
</view>
</view>
<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #FFF3FB 0%, #F6F7F9 100%);">
<view class="px-10rpx pt-10rpx flex justify-center">
<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_17.png`" radius="16rpx" mode="aspectFill" />
</view>
<view class="px-12rpx mt-8rpx">
<view class="text-28rpx font-bold text-[#303133] line-1">明月套餐</view>
<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
<text class="text-28rpx">￥</text>
<text class="text-30rpx">598</text>
<text class="text-24rpx">/2小时</text>
</view>
</view>
</view>
<view class="w-216rpx rounded-20rpx pb-20rpx box-border" style="background: linear-gradient( 180deg, #FFF9EA 0%, #F6F7F9 100%);">
<view class="px-10rpx pt-10rpx flex justify-center">
<wd-img width="204rpx" height="124rpx" :src="`${OSS}images/home/home_image_18.png`" radius="16rpx" mode="aspectFill" />
</view>
<view class="px-12rpx mt-8rpx">
<view class="text-28rpx font-bold text-[#303133] line-1">鹤鸣套餐</view>
<view class="text-[#FF5951] mt-6rpx flex items-baseline font-400">
<text class="text-28rpx">￥</text>
<text class="text-30rpx">998</text>
<text class="text-24rpx">/2小时</text>
</view>
</view>
</view>
</view>
<!-- <view class="mt-24rpx relative w-690rpx h-224rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
<wd-img width="690rpx" height="224rpx" :src="`${OSS}images/home/home_image14.png`" mode="scaleToFill" />
</view>
<!-- <view class="relative mt-40rpx h-44rpx mx-30rpx">
<view class="absolute ele-center" >
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
</view>
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image2.png`" mode="scaleToFill" />
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
<text class="mr-8rpx">一键约</text>
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
</view>
</view> -->
</view>
<view>
<view class="mx-30rpx mt-36rpx mb-10rpx">
<scroll-view class="w-[100%] whitespace-nowrap " :scroll-x="true" :show-scrollbar="false" :enhanced="true">
<!-- <view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="distance === 1 ? 'active' : ''" @click="Index.handleSort('distance')">距离优先</view> -->
<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.smart === 1 ? 'active' : ''" @click="Index.handleSort('smart')">智能排序</view>
<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.sales === 1 ? 'active' : ''" @click="Index.handleSort('sales')">销量优先</view>
<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.open === 1 ? 'active' : ''" @click="Index.handleSort('open')">24小时营业</view>
<view class="scroll-item text-26rpx text-#333 mr-16rpx" :class="sort.use === 1 ? 'active' : ''" @click="Index.handleSort('use')">常去</view>
@ -193,6 +223,7 @@
const city_id = ref<number>(0)
const distance = ref<number>(0)
const sort = ref({
smart: 0, // 智能排序
sales: 0, // 销量优先
open: 0, // 24小时
use: 0, // 常去
@ -426,7 +457,7 @@
// const index = e.currentTarget.dataset.index
},
handleSort(type: 'distance' | 'sales' | 'open' | 'use') {
handleSort(type: 'smart' | 'distance' | 'sales' | 'open' | 'use') {
const userStore = useUserStore()
const userId = userStore.userInfo?.id
console.log("🚀 ~ userId:", userId)