176 lines
8.1 KiB
Vue
176 lines
8.1 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="茶室">
|
|
<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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue'
|
|
import {toast} from '@/utils/toast'
|
|
|
|
const tab = ref<number>(0)
|
|
const OSS = inject('OSS')
|
|
|
|
|
|
onLoad((args) => {
|
|
|
|
})
|
|
|
|
const collect = {
|
|
// 切换tab
|
|
handleChangeTab: (item: any) => {
|
|
tab.value = item.index
|
|
},
|
|
|
|
// 去茶室的详情
|
|
handleToTeaRoom: (item: any) => {
|
|
uni.navigateTo({
|
|
url: '/bundle/tea-room/room?id=1'
|
|
})
|
|
},
|
|
|
|
// 取消收藏
|
|
handleCancelTeaRoom: (item: any) => {
|
|
toast.info('取消收藏成功')
|
|
},
|
|
|
|
// 取消收藏茶艺师
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tea-specialist-time {
|
|
width: 106rpx;
|
|
height: 38rpx;
|
|
background-image: url(#{$OSS}images/collect/collect_image1.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|