完善页面
This commit is contained in:
wangxiaowei
175
src/bundle/collect/collect.vue
Normal file
175
src/bundle/collect/collect.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user