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-11-12 17:40:35 +08:00
parent 29bf4dae74
commit 0cad65c295
32 changed files with 1522 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,13 +13,13 @@
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #left>
<view class="flex items-center line-1 w-130rpx" @click="Index.toCity">
<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">上海市</view>
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
</view>
</template>
<template #title>
<view class="search-box flex items-center ml-26rpx" @click="Index.toSearch">
<view class="search-box flex items-center ml-26rpx" @click="Index.handleToSearch">
<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>
@ -30,9 +30,9 @@
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="mt-32rpx mx-30rpx">
<wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
<wd-swiper height="240rpx" indicatorPosition="bottom-left"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@click="Index.handleClick" @change="Index.onChange" mode="aspectFit"></wd-swiper>
@click="Index.handleClick" mode="aspectFit"></wd-swiper>
</view>
<view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
@ -56,28 +56,29 @@
</view>
<view>
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Index.upCallback" top="28rpx"
<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 100" :key="index" @click="Index.handleToReserveRoom(item)">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in list" :key="index" @click="Index.handleToReserveRoom(item.id)">
<view class="absolute top--28rpx left-0 z-1">
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/home_image4.png`"/>
</view>
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`" radius="10rpx" />
<wd-img width="200rpx" height="200rpx" :src="item.image" radius="10rpx" />
<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">
凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业</view>
{{ item.name }}
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约300+</view>
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约{{ item.half_year_nums > 10 ? 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">
营业时间:00:00-23:59
营业时间:{{ item.start_time }}-{{ item.end_time }}
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]" v-if="item.shop_status == 0">
打烊了
</view>
</view>
@ -85,7 +86,7 @@
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
mode="aspectFit" />
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
青浦区仓路478号
{{ item.address }}
</view>
</view>
</view>
@ -95,7 +96,7 @@
<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">距您14km</view>
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您{{ item.distance }}km</view>
</view>
</view>
</view>
@ -107,69 +108,105 @@
</template>
<script lang="ts" setup>
import { router } from '@/utils/tools'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { handleEnsureLocationAuthHooks } from '@/hooks/useLocation'
import { LOCATION_DENY_TIME_KEY, handleEnsureLocationAuthHooks } from '@/hooks/useLocation'
import { getHomeBannerList } from '@/api/home'
import { getHomeTeaRoomList } from '@/api/tea-room'
import { useUserStore } from '@/store'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
/** 轮播图 **/
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`
])
const swiperList = ref<string[]>([])
const current = ref<number>(0)
// 分页
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const latitude = ref<number>(0)
const longitude = ref<number>(0)
const keywords = ref<string>('')
const list = ref<Array<any>>([])
onShow(async() => {
// 等到onLoad执行完毕且获取到授权KEY后，才执行定位授权检查
if (uni.getStorageSync(LOCATION_DENY_TIME_KEY)) {
const location = await checkLocationAuthWithModal()
if (location) {
latitude.value = location.lat
longitude.value = location.lng
Index.handleResetSearch()
}
}
})
onLoad(async() => {
// 初始化页面数据
Index.handleInit()
// 获取用户经纬度（带缓存和授权逻辑）
const { lat, lng } = await handleEnsureLocationAuthHooks()
// 你可以在这里根据经纬度做后续处理，比如请求附近门店等
console.log('当前定位：', lat, lng)
latitude.value = lat
longitude.value = lng
Index.handleResetSearch()
})
const Index = {
toCity: () => {
uni.navigateTo({
url: '/pages/city/city'
})
},
toSearch: () => {
uni.navigateTo({
url: '/pages/search/search'
})
},
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
const userStore = useUserStore()
const userId = userStore.userInfo?.id || 0
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
const filter = {
page: mescroll.num,
size: mescroll.size,
latitude: latitude.value,
longitude: longitude.value,
search: keywords.value,
user_id: userId
}
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
getHomeTeaRoomList(filter).then( res => {
console.log("🚀 ~ res:", res)
const curPageData = res.list || [] // 当前页数据
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
list.value = list.value.concat(curPageData) //追加新数据
mescroll.endSuccess(curPageData.length, Boolean(res.more))
}).catch(() => {
mescroll.endErr() // 请求失败, 结束加载
})
},
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
handleInit: () => {
// 初始化操作
getHomeBannerList().then(res => {
swiperList.value = res.list.map(item => item.address)
})
},
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
handleToCity: () => {
router.navigateTo(`/pages/city/city?lat=${latitude.value}&lng=${longitude.value}`)
},
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
// 跳转茶室搜索
handleToSearch: () => {
uni.$on('refreshTeaRoomList', params => {
keywords.value = params.keywords
Index.handleResetSearch()
uni.$off('refreshTeaRoomList')
})
router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
},
handleClick: (item: any) => {
@ -177,16 +214,16 @@
console.log('Clicked item:', item)
},
onChange: (e: any) => {
// 设置 current.value 为当前轮播索引
current.value = e.current
},
handleToReserveRoom: (id: number = 1) => {
handleToReserveRoom: (id: number = 0) => {
// 跳转到预约茶室页面
uni.navigateTo({
url: `/bundle/tea-room/room?id=${id}`
})
},
handleResetSearch: () => {
list.value = []
getMescroll().resetUpScroll()
}
}
</script>