修改代码

This commit is contained in:
wangxiaowei
2026-02-02 02:36:40 +08:00
parent 6edd1b24d3
commit 079a66f287
14 changed files with 460 additions and 248 deletions

View File

@ -9,14 +9,14 @@
}</route>
<template>
<view class="home-bg">
<view class="">
<!-- 领取优惠券 -->
<wd-overlay :show="showCoupon" @click="showCoupon = false">
<view class="flex flex-col justify-center items-center h-100%">
<view class="w-652rpx h-590rpx relative" >
<wd-img :src="`${OSS}images/home/home_image10.png`" width="100%" height="100%"></wd-img>
<view class="absolute top-200rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center">
<view class="mt-220rpx " @click.stop="showCoupon = false">
<view class="mt-220rpx" @click.stop="showCoupon = false">
<view class="h-90rpx relative">
<wd-img :src="`${OSS}images/home/home_image9.png`" width="342rpx" height="90rpx"></wd-img>
<view class="absolute top-20rpx left-1/2 transform -translate-x-1/2 flex flex-col items-center" @click.stop="Index.handleToGetCoupon">立即领取</view>
@ -31,8 +31,8 @@
</view>
</wd-overlay>
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<view class="w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #F9FAFB !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>
@ -41,7 +41,7 @@
</template>
<template #title>
<view class="search-box flex items-center ml-26rpx" @click="Index.handleToSearch">
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
<wd-search placeholder="搜索高端茶室" hide-cancel disabled :placeholder-left="true"
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
</wd-search>
</view>
@ -52,22 +52,27 @@
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="mt-32rpx mx-30rpx">
<wd-swiper
height="240rpx"
height="320rpx"
indicatorPosition="bottom-left"
:indicator="{ type: 'dots-bar' }"
:list="swiperList"
v-model:current="current"
mode="aspectFit"
@click="Index.handleBanner"></wd-swiper>
@click="Index.handlePreviewImage"
></wd-swiper>
</view>
<view class="mt-40rpx 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-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>
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx" @click="router.navigateTo(`/bundle_b/pages/tea-specialist/list`)">
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image7.png`" mode="scaleToFill" />
<view class="mt-16rpx 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">
@ -83,50 +88,67 @@
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
</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.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>
</scroll-view>
</view>
<view>
<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="Index.upCallback" top="28rpx"
:fixed="true">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in list" :key="index" @click="Index.handleToReserveRoom(item.id, item.operation_type)">
<view class="absolute top--28rpx left-0 z-1" v-if="item.operation_type == 1">
<!-- <view class="absolute top--28rpx left-0 z-1" v-if="item.operation_type == 1">
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/home_image6.png`"/>
</view>
</view> -->
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
<wd-img width="200rpx" height="200rpx" :src="item.image" radius="10rpx" />
<view class="relative">
<wd-img width="200rpx" height="200rpx" :src="item.image" radius="10rpx" />
<view class="bg-#34C759 text-#fff text-center w-200rpx font-700 text-20rpx absolute bottom-0 left-0 right-0 hour" v-if="item.operation_type == 1">24小时营业</view>
</view>
<view class="flex-1 ml-28rpx flex justify-between line-1 items-start relative">
<view class="line-1">
<view class="font-bold text-30rpx leading-42rpx line-1">
{{ item.name }}
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx" v-if="item.operation_type == 1">半年预约{{ item.half_year_nums > 300 ? item.half_year_nums + '+' : item.half_year_nums }}</view>
<view class="font-400 bg-[#F3F3F3] text-[#818CA9] text-22rpx px-8rpx rounded-4rpx">刚有人预约了</view>
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间:{{ item.start_time }}-{{ item.end_time }}
<view class="flex items-center justify-between">
<view class="font-bold text-30rpx leading-42rpx line-1 w-400rpx">
{{ item.name }}
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]" v-if="item.shop_status == 0">
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx ml-20rpx">距您{{ item.distance }}</view>
</view>
<view class="flex items-center mt-20rpx leading-34rpx">
<view class="font-400 bg-#FFF3E0 text-[#F29747] text-24rpx mr-18rpx px-20rpx py-10rpx rounded-8rpx" v-if="item.operation_type == 1">半年预约{{ item.half_year_nums > 300 ? '300+' : item.half_year_nums }}</view>
<view class="font-400 bg-[#E8F5E9] text-[#2E7D32] text-22rpx px-8rpx py-10rpx rounded-8rpx">刚有人预约</view>
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx flex items-center">
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_time3.png`" mode="aspectFit" />
<view class="ml-10rpx">
{{ item.start_time }}-{{ item.end_time }}
</view>
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-8rpx border-[#F2E2E1]" v-if="item.shop_status == 0">
打烊了
</view>
</view>
<view class="flex items-center mt-20rpx">
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location5.png`"
mode="aspectFit" />
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx w-175rpx">
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx w-300rpx">
{{ item.address }}
</view>
</view>
</view>
<view class="absolute bottom-0 right-0">
<view class="flex justify-end">
<view class="bg-[#4C9F44] w-72rpx h-40rpx rounded-18rpx flex items-center justify-center">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_add.png`"
mode="aspectFit" />
<!-- <view class="flex justify-end">
<view class="bg-[#34C759] w-64rpx h-64rpx rounded-64rpx flex items-center justify-center add-box-shadow">
<wd-icon name="add" color="#fff" size="20rpx" custom-style="font-weight: bold;" />
</view>
</view>
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您{{ item.distance }}</view>
</view> -->
</view>
</view>
</view>
@ -138,7 +160,7 @@
</template>
<script lang="ts" setup>
import { router } from '@/utils/tools'
import { router, previewImage } from '@/utils/tools'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { LOCATION_DENY_TIME_KEY, handleEnsureLocationAuthHooks, LOCATION_DEFAULT_CITY, handleGetLocationCity, LOCATION_CITY_KEY, handleForceGetLocation } from '@/hooks/useLocation'
@ -170,6 +192,12 @@
const keywords = ref<string>('')
const list = ref<Array<any>>([])
const city_id = ref<number>(0)
const distance = ref<number>(0)
const sort = ref({
sales: 0, // 销量优先
open: 0, // 24小时
use: 0, // 常去
})
let lastLocation = { lat: 0, lng: 0 }
const canLocation = ref<boolean>(false)
@ -266,7 +294,9 @@
longitude: longitude.value,
search: keywords.value,
user_id: userId,
city_area_id: city_id.value || 0
city_area_id: city_id.value || 0,
// 合并排序条件
...sort.value
}
uni.showLoading({ title: '加载中...' })
@ -395,17 +425,47 @@
console.log("🚀 ~ e:", e)
// const index = e.currentTarget.dataset.index
}
},
handleSort(type: 'distance' | 'sales' | 'open' | 'use') {
const userStore = useUserStore()
const userId = userStore.userInfo?.id
console.log("🚀 ~ userId:", userId)
if (type === 'use' && !userId) {
toast.info('请先登录账号')
router.navigateTo('/pages/login/login', 100)
return
}
if (type === 'distance') {
distance.value = distance.value === 1 ? 0 : 1
} else {
if (sort.value[type] === 1) {
sort.value[type] = 0
} else {
sort.value[type] = 1
}
console.log("🚀 ~ sort.value:", sort.value)
Index.handleResetSearch()
}
},
/**
* 预览图片
*/
handlePreviewImage: (e: {index: number, item: any}) => {
previewImage(swiperList.value[e.index], swiperList.value)
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
background-color: #F9FAFB;
}
.home-bg {
background-color: $cz-page-background;
background-color: #F9FAFB;
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
@ -425,7 +485,7 @@ page {
}
.wd-search__block {
background-color: #fff !important;
background-color: #F3F4F6 !important;
}
.wd-search__input {
@ -449,4 +509,24 @@ page {
left: 50%;
transform: translateX(-50%);
}
.scroll-item {
display: inline-block;
text-align: center;
background-color: #fff;
border: 2rpx solid #E5E7EB;
border-radius: 20rpx;
padding: 16rpx 32rpx;
}
.active {
border: 2rpx solid #34C759;
color: #34C759;
}
.hour {
height: 44rpx;
line-height: 44rpx;
border-radius: 0 0 16rpx 16rpx;
}
</style>

View File

@ -53,8 +53,7 @@
<!-- 余额显示 -->
<view class="mt-16rpx mx-30rpx flex justify-between">
<view class="flex items-center">
<!-- <view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/coupon/my-coupon')"> -->
<view class="w-160rpx text-[#303133] text-center">
<view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/coupon/my-coupon')">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.coupon_count : '- -' }}</view>
<view class="text-24rpx leading-34rpx">优惠券</view>
</view>
@ -347,6 +346,7 @@
if (isLogin.value) {
// 获取用户详情信息接口
getUserInfo().then(res => {
//@ts-ignore
user.value = res
if (res.member === 1) {
isVip.value = true