|
@@ -1,73 +1,104 @@
|
|
|
<template>
|
|
|
<view class="collect">
|
|
|
- <view class="text">以下是您收藏的店铺</view>
|
|
|
+ <view class="text">以下是您收藏的商品服务</view>
|
|
|
|
|
|
- <!-- 收藏列表 -->
|
|
|
- <view class="collect-item">
|
|
|
+ <!-- 收藏的服务 -->
|
|
|
+ <view class="list" @click="$Router.push('/pages/business/service/index')">
|
|
|
<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
|
|
|
<view>
|
|
|
- <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
|
|
|
+ <view class="item-text"
|
|
|
+ >【养车】标题标题标题标题标题标题标题标题……</view
|
|
|
+ >
|
|
|
<view class="item-flex">
|
|
|
<view class="star">
|
|
|
- <u-rate :count="count" v-model="value" />
|
|
|
+ <u-rate :count="count" v-model="value" :size="14" />
|
|
|
<text class="line">|</text>
|
|
|
+ <text class="points">4.93分</text>
|
|
|
</view>
|
|
|
<view>989单</view>
|
|
|
</view>
|
|
|
- <view class="address-flex">
|
|
|
- <view>宝安中心区美容洗车</view>
|
|
|
- <view>2.7km</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="collect-item">
|
|
|
- <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
|
|
|
- <view>
|
|
|
- <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
|
|
|
- <view class="item-flex">
|
|
|
- <view class="star">
|
|
|
- <u-rate :count="count" v-model="value" />
|
|
|
- <text class="line">|</text>
|
|
|
+ <view class="list-item">
|
|
|
+ <view>
|
|
|
+ <view class="price"
|
|
|
+ >券后价
|
|
|
+ <text class="price-item">¥</text>
|
|
|
+ <text class="price-count">19</text>
|
|
|
+ </view>
|
|
|
+ <view class="gate-rate">
|
|
|
+ <text>门市价</text>
|
|
|
+ <text class="gate-rate-item">¥30</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="appoint">
|
|
|
+ <text class="appoint-item">预约</text>
|
|
|
+ <text class="Buy">购买</text>
|
|
|
</view>
|
|
|
- <view>989单</view>
|
|
|
- </view>
|
|
|
- <view class="address-flex">
|
|
|
- <view>宝安中心区美容洗车</view>
|
|
|
- <view>2.7km</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="collect-item">
|
|
|
+ <view class="list" @click="$Router.push('/pages/business/service/index')">
|
|
|
<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
|
|
|
<view>
|
|
|
- <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
|
|
|
+ <view class="item-text"
|
|
|
+ >【养车】标题标题标题标题标题标题标题标题……</view
|
|
|
+ >
|
|
|
<view class="item-flex">
|
|
|
<view class="star">
|
|
|
- <u-rate :count="count" v-model="value" />
|
|
|
+ <u-rate :count="count" v-model="value" :size="14" />
|
|
|
<text class="line">|</text>
|
|
|
+ <text class="points">4.93分</text>
|
|
|
</view>
|
|
|
<view>989单</view>
|
|
|
</view>
|
|
|
- <view class="address-flex">
|
|
|
- <view>宝安中心区美容洗车</view>
|
|
|
- <view>2.7km</view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view>
|
|
|
+ <view class="price"
|
|
|
+ >券后价
|
|
|
+ <text class="price-item">¥</text>
|
|
|
+ <text class="price-count">19</text>
|
|
|
+ </view>
|
|
|
+ <view class="gate-rate">
|
|
|
+ <text>门市价</text>
|
|
|
+ <text class="gate-rate-item">¥30</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="appoint">
|
|
|
+ <text class="appoint-item">预约</text>
|
|
|
+ <text class="Buy">购买</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="collect-item">
|
|
|
+ <view class="list" @click="$Router.push('/pages/business/service/index')">
|
|
|
<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
|
|
|
<view>
|
|
|
- <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
|
|
|
+ <view class="item-text"
|
|
|
+ >【养车】标题标题标题标题标题标题标题标题……</view
|
|
|
+ >
|
|
|
<view class="item-flex">
|
|
|
<view class="star">
|
|
|
- <u-rate :count="count" v-model="value" />
|
|
|
+ <u-rate :count="count" v-model="value" :size="14" />
|
|
|
<text class="line">|</text>
|
|
|
+ <text class="points">4.93分</text>
|
|
|
</view>
|
|
|
<view>989单</view>
|
|
|
</view>
|
|
|
- <view class="address-flex">
|
|
|
- <view>宝安中心区美容洗车</view>
|
|
|
- <view>2.7km</view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view>
|
|
|
+ <view class="price"
|
|
|
+ >券后价
|
|
|
+ <text class="price-item">¥</text>
|
|
|
+ <text class="price-count">19</text>
|
|
|
+ </view>
|
|
|
+ <view class="gate-rate">
|
|
|
+ <text>门市价</text>
|
|
|
+ <text class="gate-rate-item">¥30</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="appoint">
|
|
|
+ <text class="appoint-item">预约</text>
|
|
|
+ <text class="Buy">购买</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -82,9 +113,9 @@ export default {
|
|
|
value: 4,
|
|
|
};
|
|
|
},
|
|
|
- onLoad() { },
|
|
|
+ onLoad() {},
|
|
|
methods: {},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -98,15 +129,15 @@ export default {
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
- .collect-item {
|
|
|
- height: 220rpx;
|
|
|
+ .list {
|
|
|
+ height: 250rpx;
|
|
|
background-color: #fff;
|
|
|
padding: 0 20rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
|
|
|
Image {
|
|
|
- width: 120px;
|
|
|
+ width: 180px;
|
|
|
height: calc(100% - 20rpx);
|
|
|
margin: 10rpx 20rpx 10rpx 0;
|
|
|
}
|
|
@@ -120,28 +151,78 @@ export default {
|
|
|
.item-flex {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 20rpx 30rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 0 20rpx 10rpx 0;
|
|
|
color: #0d0d0d66;
|
|
|
|
|
|
.star {
|
|
|
display: flex;
|
|
|
|
|
|
.line {
|
|
|
- margin-left: 18rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
margin-top: 5rpx;
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .points {
|
|
|
+ color: #ff4b04;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .address-flex {
|
|
|
+ .list-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- margin-right: 20rpx;
|
|
|
+ .price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fa3534;
|
|
|
+ .price-item {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .price-count {
|
|
|
+ font-size: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gate-rate {
|
|
|
+ color: #c9c9c9;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 16rpx 0 0 40rpx;
|
|
|
+ .gate-rate-item {
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .appoint {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ .appoint-item {
|
|
|
+ width: 40px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 16px 0 0 16px;
|
|
|
+ border: 1px solid #ec5729;
|
|
|
+ }
|
|
|
+ .Buy {
|
|
|
+ width: 40px;
|
|
|
+ height: 32px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 0 16px 16px 0;
|
|
|
+ background-color: #ec5729;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|