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

250
src/bundle/collect/collect.vue
View File

@ -16,99 +16,109 @@
<view>
<view class="coupon-tab">
<wd-tabs v-model="tab" swipeable slidable="always" @click="collect.handleChangeTab" :lazy="false">
<wd-tab title="茶室">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="collect.handleToTeaRoom(item)">
<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" />
<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 flex justify-between items-center w-400rpx">
<view class="w-300rpx line-1">
凝香茶业
</view>
<view @click.stop="collect.handleCancelTeaRoom(item)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-10rpx">
100+收藏
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间:00:00-23:59
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
打烊了
</view>
</view>
<view class="flex items-center mt-20rpx">
<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号
</view>
</view>
</view>
</view>
</view>
</view>
</wd-tab>
<wd-tab title="茶艺师">
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx">
<view class="mr-28rpx relative">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
可约9:00
</view>
</view>
<view class="flex-1">
<view class="flex items-center justify-between">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
凝香茶业
</view>
<view class="w-168rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
<view @click.stop="collect.handleCancelTeaRoom(1)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="flex items-center">
<view class="mr-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
</view>
<view class="flex items-center mt-8rpx">
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
</view>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-20rpx">
100+收藏
</view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx">
<text class="text-32rpx">￥180</text>
<text class="text-24rpx">/小时</text>
</view>
</view>
</view>
</wd-tab>
<wd-tabs v-model="tab" swipeable slidable="always" @click="Collect.handleChangeTab" :lazy="false">
<wd-tab title="茶室"></wd-tab>
<wd-tab title="茶艺师"></wd-tab>
</wd-tabs>
<view class="">
<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="Collect.upCallback" top="28rpx">
<!-- 茶室列表 -->
<template v-if="tab === 0">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in list" :key="index" @click="Collect.handleToTeaRoom(item.tea_store_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" />
<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 flex justify-between items-center w-400rpx">
<view class="w-300rpx line-1">
{{ item.teaStore[0].name }}
</view>
<view @click.stop="Collect.handleCancelTeaRoom(item.tea_store_id)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-10rpx">
{{ item.count > 100 ? `${item.count}+` : item.count }}收藏
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间: {{ item.teaStore[0].start_time }}-{{ item.teaStore[0].end_time }}
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx 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`"
mode="aspectFit" />
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
{{ item.teaStore[0].address }}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<!-- 茶艺师列表 -->
<template v-if="tab === 1">
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx">
<view class="mr-28rpx relative">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
可约9:00
</view>
</view>
<view class="flex-1">
<view class="flex items-center justify-between">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
凝香茶业
</view>
<view class="w-168rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
<view @click.stop="Collect.handleCancelTeaRoom(1)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="flex items-center">
<view class="mr-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
</view>
<view class="flex items-center mt-8rpx">
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
</view>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-20rpx">
100+收藏
</view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx">
<text class="text-32rpx">￥180</text>
<text class="text-24rpx">/小时</text>
</view>
</view>
</view>
</template>
</mescroll-body>
</view>
</view>
</view>
</view>
@ -117,31 +127,69 @@
<script lang="ts" setup>
import {ref} from 'vue'
import {toast} from '@/utils/toast'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { getCollectTeaRoomList, collectTeaRoom } from '@/api/tea-room'
const tab = ref<number>(0)
const OSS = inject('OSS')
// 分页
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const list = ref<Array<any>>([])
onLoad((args) => {
})
const collect = {
const Collect = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
}
getCollectTeaRoomList(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() // 请求失败, 结束加载
})
},
// 切换tab
handleChangeTab: (item: any) => {
tab.value = item.index
tab.value = Number(item.index)
},
// 去茶室的详情
handleToTeaRoom: (item: any) => {
handleToTeaRoom: (id: number) => {
uni.navigateTo({
url: '/bundle/tea-room/room?id=1'
url: `/bundle/tea-room/room?id=${id}`
})
},
// 取消收藏
handleCancelTeaRoom: (item: any) => {
handleCancelTeaRoom: async (id: number) => {
await collectTeaRoom({
id,
status: 0
})
toast.info('取消收藏成功')
list.value = []
getMescroll().resetUpScroll()
},
// 取消收藏茶艺师
@ -161,7 +209,11 @@
.wd-tabs,
.wd-tabs__nav,
.wd-tabs__line {
background-color: transparent;
background-color: transparent !important;
}
.wd-tabs__line {
display: none !important;
}
}
}