2026-03-24 11:45:13 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<!-- 店铺列表 -->
|
|
|
|
|
|
<!-- @scrolltolower="loadMore"
|
|
|
|
|
|
refresher-enabled
|
|
|
|
|
|
:refresher-triggered="isRefreshing"
|
|
|
|
|
|
@refresherrefresh="onRefresh" -->
|
|
|
|
|
|
<scroll-view scroll-y class="shop-list">
|
|
|
|
|
|
<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">
|
|
|
|
|
|
<image :src="shop.head_photo" class="head-photo" mode="aspectFill"></image>
|
|
|
|
|
|
<text class="title-text">{{shop.name}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="shop-distance" v-if="shop.distance>=0">
|
|
|
|
|
|
<text class="shop-distance__left">距您</text>
|
|
|
|
|
|
<text class="shop-distance__right">{{shop.distance.toFixed(2)}}km</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- <image v-if="shop.verified" src="/static/images/verified.png" class="verified-icon" mode="aspectFit"></image> -->
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="shop-info">
|
|
|
|
|
|
<view class="shop-info-left">
|
|
|
|
|
|
<!-- <view class="rating">
|
|
|
|
|
|
<view class="rating-stars">
|
|
|
|
|
|
<image v-for="i in 5" :key="i" src="/static/images/star_y.png" class="star-icon" mode="aspectFit"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<text class="rating-score">{{shop.rating}}</text>
|
|
|
|
|
|
</view> -->
|
|
|
|
|
|
<!-- <text class="divider">|</text> -->
|
|
|
|
|
|
<text class="shop-tags" v-for="(tag,i) in shop.servers_kill_arr">
|
|
|
|
|
|
{{tag}}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 服务列表 -->
|
|
|
|
|
|
<scroll-view scroll-x="true">
|
|
|
|
|
|
<view class="service-list">
|
|
|
|
|
|
<view class="service-item" v-for="(item, index) in shop.servers_list" :key="index"
|
|
|
|
|
|
@click.stop="onServiceClick($event,item)">
|
|
|
|
|
|
<image :src="item.photo[0]" mode="aspectFill" class="service-image" lazy-load></image>
|
|
|
|
|
|
<view class="service-info">
|
|
|
|
|
|
<view class="service-title">
|
|
|
|
|
|
<image
|
|
|
|
|
|
class="service-title-type"
|
|
|
|
|
|
mode="widthFix"
|
|
|
|
|
|
src="@/static/images/shop/pintuan/group.png"
|
|
|
|
|
|
v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
|
|
|
|
|
|
></image>
|
|
|
|
|
|
<text class="service-title-text">
|
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
|
</text>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="service-price" v-if=" item.team_buy && Object.keys(item.team_buy).length != 0">
|
|
|
|
|
|
<text class="price-text">拼团价:</text>
|
|
|
|
|
|
<text class="price-symbol">¥</text>
|
|
|
|
|
|
<text class="price-value" :style="{
|
|
|
|
|
|
'font-size': `${formatPriceSize(item.server_price, 30, 5)}rpx`,
|
|
|
|
|
|
}">{{ item.team_buy.price }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="service-price" v-else>
|
|
|
|
|
|
<text class="price-symbol">¥</text>
|
|
|
|
|
|
<text class="price-value">{{ item.server_price }}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</scroll-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: {
|
|
|
|
|
|
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-item {
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
padding: 16rpx 24rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.shop-header {
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.shop-title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: row nowrap;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&__left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: row nowrap;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.head-photo {
|
|
|
|
|
|
width: 56rpx;
|
|
|
|
|
|
height: 56rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
border-radius: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: row nowrap;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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-tags {
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
padding-left: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.shop-distance {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
|
|
|
|
|
|
|
&__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-flow: row nowrap;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
gap: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-item {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 180rpx;
|
|
|
|
|
|
/* height: 304rpx; */
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-image {
|
|
|
|
|
|
width: 180rpx;
|
|
|
|
|
|
height: 180rpx;
|
|
|
|
|
|
background-color: #000000;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* .service-tag {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0rpx;
|
|
|
|
|
|
left: 0rpx;
|
|
|
|
|
|
background-color: #FF94B4;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
padding: 6rpx 14rpx;
|
|
|
|
|
|
border-radius: 20rpx 0 20rpx 0;
|
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
|
|
.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: 50rpx;
|
|
|
|
|
|
/* 图片与文字之间的间距 */
|
|
|
|
|
|
margin-right: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-title-text {
|
|
|
|
|
|
/* 关键：移除固定宽度，使用flex自动分配剩余空间 */
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.service-price {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: row nowrap;
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price-text{
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 24rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
line-height: 33rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price-symbol {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 20rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
line-height: 33rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price-value {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 30rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
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>
|
