514 lines
11 KiB
Vue
514 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="shop-list">
|
|||
|
|
<!-- 店铺列表 -->
|
|||
|
|
<scroll-view >
|
|||
|
|
<view
|
|||
|
|
class="shop-item"
|
|||
|
|
v-for="(shop, index) in shopList"
|
|||
|
|
@click.stop="goToArtisan($event, shop.id)"
|
|||
|
|
:key="shop.id"
|
|||
|
|
>
|
|||
|
|
<!-- 店铺信息 -->
|
|||
|
|
<view class="shop-header">
|
|||
|
|
<view class="shop-title">
|
|||
|
|
<view class="shop-title__left" style="width: 100%">
|
|||
|
|
<image
|
|||
|
|
:src="shop.head_photo"
|
|||
|
|
class="head-photo"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
<view class="title-info">
|
|||
|
|
<view class="name">
|
|||
|
|
<view class="name_text text-overflow-1">{{ shop.name }}</view>
|
|||
|
|
<view class="shop-distance" v-if="shop.distance >= 0">
|
|||
|
|
<image
|
|||
|
|
class="position"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e37b3bd7-841f-4d57-a11a-2365c81f740e"
|
|||
|
|
/>
|
|||
|
|
<text class="shop-distance__right"
|
|||
|
|
>{{ shop.distance.toFixed(2) }}km</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="time"
|
|||
|
|
>营业时间：<text class="num_medium_text">{{
|
|||
|
|
shop.business_time
|
|||
|
|
}}</text></view
|
|||
|
|
>
|
|||
|
|
<scroll-view scroll-x="true" class="shop-info-left">
|
|||
|
|
<view class="shop-info-left-list">
|
|||
|
|
<text class="shop-tags" v-for="(tag, i) in shop.servers_kill_arr">
|
|||
|
|
{{ tag }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 服务列表 -->
|
|||
|
|
<view class="service-list">
|
|||
|
|
<view
|
|||
|
|
class="service-item"
|
|||
|
|
v-for="(item, index) in shop.servers_list"
|
|||
|
|
:key="index"
|
|||
|
|
@click.stop="onServiceClick($event, item)"
|
|||
|
|
>
|
|||
|
|
<view class="service-price">
|
|||
|
|
<view
|
|||
|
|
:class="{
|
|||
|
|
discount: getPriceNum(item) !== '惠',
|
|||
|
|
discounts: getPriceNum(item) == '惠',
|
|||
|
|
}"
|
|||
|
|
v-if="getPriceNum(item)"
|
|||
|
|
>{{ getPriceNum(item) }}</view
|
|||
|
|
>
|
|||
|
|
<!-- 价格区域：根据 hasCoupon 显示券后价或原价 -->
|
|||
|
|
<view v-if="item.hasCoupon" class="price coupon-wrapper">
|
|||
|
|
<text class="coupon-label">券后</text>
|
|||
|
|
<text class="price-symbol">¥</text>
|
|||
|
|
<text class="price-value coupon-price">{{ item.coupon_price }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="price">
|
|||
|
|
<text class="price-symbol">¥</text>
|
|||
|
|
<text class="price-value">{{ (item.team_buy && item.team_buy.price) || item.server_price }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="service-info">
|
|||
|
|
<view class="service-title">
|
|||
|
|
<image
|
|||
|
|
v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
|
|||
|
|
class="service-title-type"
|
|||
|
|
mode="widthFix"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c0744cbd-6386-4391-89fc-09223377431b"
|
|||
|
|
></image>
|
|||
|
|
<view class="title">
|
|||
|
|
<text class="service-title-text">
|
|||
|
|
{{ item.title }}
|
|||
|
|
</text>
|
|||
|
|
<view class="num"
|
|||
|
|
>销量<text style="font-family: DINPro, DINPro">{{
|
|||
|
|
item.sales_num
|
|||
|
|
}}</text></view
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "shop-list",
|
|||
|
|
props: {
|
|||
|
|
// 服务列表数据
|
|||
|
|
shopList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
// 是否显示多图布局
|
|||
|
|
isRefreshing: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
getPriceNum(item) {
|
|||
|
|
if (item.team_buy && item.team_buy.price) {
|
|||
|
|
const discount =
|
|||
|
|
(item.team_buy.price* 10 / item.server_price).toFixed(1) ;
|
|||
|
|
if (discount < 0.1 || item.team_buy.price > 9999) {
|
|||
|
|
return "惠";
|
|||
|
|
} else {
|
|||
|
|
return `${discount}折`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onServiceClick(e, service) {
|
|||
|
|
console.log("service", service);
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
// #endif
|
|||
|
|
this.$emit("service-click", service);
|
|||
|
|
},
|
|||
|
|
goToArtisan(e, id) {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
// #endif
|
|||
|
|
this.$emit("go-artisan", id);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.shop-list{
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
.title-info {
|
|||
|
|
width: 100%;
|
|||
|
|
.name {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
.name_text {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.position {
|
|||
|
|
width: 19rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.time {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-top: 13rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
.num_medium_text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 31rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-item {
|
|||
|
|
width: 710rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
padding: 16rpx 24rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-header {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-title {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
&__left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head-photo {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 176rpx;
|
|||
|
|
height: 174rpx;
|
|||
|
|
background: #d8d8d8;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 1;
|
|||
|
|
/* 显示的行数 */
|
|||
|
|
lines: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verified-icon {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-info-left {
|
|||
|
|
width: 480rpx;
|
|||
|
|
.shop-info-left-list{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
gap: 14rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
.shop-tags {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 2rpx 14rpx;
|
|||
|
|
background-color: #f3f3f3;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-score {
|
|||
|
|
color: #ff94b4;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-stars {
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: row nowrap;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.star-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-right: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
color: #eeeeee;
|
|||
|
|
margin: 0 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shop-distance {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
font-family: DINPro, DINPro;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
&__left {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__right {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 券后价包装器 */
|
|||
|
|
.coupon-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 券后标签 */
|
|||
|
|
.coupon-label {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #e8101e;
|
|||
|
|
// background: #ffe9e9;
|
|||
|
|
// padding: 2rpx 8rpx;
|
|||
|
|
// border-radius: 20rpx;
|
|||
|
|
// margin-right: 4rpx;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 券后价格 */
|
|||
|
|
.coupon-price {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-item {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
.service-price {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 176rpx;
|
|||
|
|
.price {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
color: #e8101e;
|
|||
|
|
.price-symbol {
|
|||
|
|
font-family: DINPro, DINPro;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-value {
|
|||
|
|
font-family: DINPro, DINPro;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-info {
|
|||
|
|
flex: 1;
|
|||
|
|
padding-top: 12rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
flex-flow: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-title {
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
|
|||
|
|
/* 关键：使用flex布局让子元素同行显示 */
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.service-title-type {
|
|||
|
|
width: 77rpx;
|
|||
|
|
/* 图片与文字之间的间距 */
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-title-text {
|
|||
|
|
/* 关键：移除固定宽度，使用flex自动分配剩余空间 */
|
|||
|
|
flex: 1;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.discount {
|
|||
|
|
font-family: DINPro, DINPro;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
color: #e8101e;
|
|||
|
|
padding: 0 4rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
border: 1rpx solid rgba(216, 185, 191, 0.6);
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.discounts {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #e8101e;
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
background: #ffecf0;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.num {
|
|||
|
|
margin-left: 21rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-text {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #E8101E;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* H5适配 */
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
.nearby-page {
|
|||
|
|
/* padding-top: 88rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* APP适配 */
|
|||
|
|
/* #ifdef APP-PLUS */
|
|||
|
|
.shop-item {
|
|||
|
|
transform: translateZ(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* 小程序适配 */
|
|||
|
|
/* #ifdef MP-WEIXIN */
|
|||
|
|
/* .nearby-page {
|
|||
|
|
padding-top: calc(88rpx + constant(safe-area-inset-top));
|
|||
|
|
padding-top: calc(88rpx + env(safe-area-inset-top));
|
|||
|
|
} */
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|