229 lines
10 KiB
Vue
229 lines
10 KiB
Vue
<route lang="jsonc" type="page">
|
|
{
|
|
"needLogin": true,
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="pb-180rpx">
|
|
<view>
|
|
<navbar title="收藏" custom-class='!bg-[#F6F7F8]'></navbar>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="coupon-tab">
|
|
<wd-tabs v-model="tab" swipeable slidable="always" @click="Collect.handleChangeTab" :lazy="false">
|
|
<wd-tab title="茶室"></wd-tab>
|
|
<!-- TODO 茶艺师内容先隐藏 -->
|
|
<!-- <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>
|
|
</template>
|
|
|
|
<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 = {
|
|
// 上拉加载的回调: 其中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 = Number(item.index)
|
|
},
|
|
|
|
// 去茶室的详情
|
|
handleToTeaRoom: (id: number) => {
|
|
uni.navigateTo({
|
|
url: `/bundle/tea-room/room?id=${id}`
|
|
})
|
|
},
|
|
|
|
// 取消收藏
|
|
handleCancelTeaRoom: async (id: number) => {
|
|
await collectTeaRoom({
|
|
id,
|
|
status: 0
|
|
})
|
|
toast.info('取消收藏成功')
|
|
list.value = []
|
|
getMescroll().resetUpScroll()
|
|
},
|
|
|
|
// 取消收藏茶艺师
|
|
handleCancelTeaSpecialist: (item: any) => {
|
|
toast.info('取消收藏成功')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $cz-page-background;
|
|
}
|
|
|
|
.coupon-tab {
|
|
:deep() {
|
|
.wd-tabs,
|
|
.wd-tabs__nav,
|
|
.wd-tabs__line {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.wd-tabs__line {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tea-specialist-time {
|
|
width: 106rpx;
|
|
height: 38rpx;
|
|
background-image: url(#{$OSS}images/collect/collect_image1.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|