387 lines
7.8 KiB
Vue
387 lines
7.8 KiB
Vue
<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;
|
||
color: #E8101E;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.price-symbol {
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #E8101E;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.price-value {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
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> |