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>
|