359 lines
7.7 KiB
Vue
359 lines
7.7 KiB
Vue
<template>
|
|
<view
|
|
class="shop-item"
|
|
@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="headPhoto"
|
|
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>
|
|
<!-- 服务列表 -->
|
|
<scroll-view scroll-x="true">
|
|
<view class="shop-list">
|
|
<view
|
|
class="shop-list-item"
|
|
v-for="(item, index) in shop.servers_list"
|
|
:key="index"
|
|
@click.stop="goToService($event, item)"
|
|
>
|
|
<image
|
|
:src="item.photo[0]"
|
|
class="shop-list-item__photo"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="shop-list-item__title text-overflow-1">
|
|
<text
|
|
class="shop-list-item__title__tip"
|
|
v-if="item.team_buy.length > 0"
|
|
>拼团</text
|
|
>
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="shop-list-item__price"
|
|
><text style="font-size: 20rpx">¥</text
|
|
>{{
|
|
item.team_buy.length > 0 ? item.team_buy.price : item.server_price
|
|
}}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 服务列表数据
|
|
shop: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed:{
|
|
headPhoto(){
|
|
if(this.shop.head_photo == "-" || !this.shop.head_photo){
|
|
return `https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40`
|
|
}else{
|
|
return this.shop.head_photo
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转到手艺人详情
|
|
goToArtisan(e, id) {
|
|
// #ifdef APP-PLUS
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// #endif
|
|
// this.$emit("go-artisan", id);
|
|
uni.navigateTo({
|
|
url: `/pages/user/store-detail?id=${id}`,
|
|
});
|
|
},
|
|
// 跳转到服务详情
|
|
goToService(e, item) {
|
|
console.log(item);
|
|
// #ifdef APP-PLUS
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// #endif
|
|
if (item.team_buy && Object.keys(item.team_buy).length != 0) {
|
|
uni.navigateTo({
|
|
url: `/pages/groupBuy/detail?id=${item.id}`,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/service/detail?id=${item.id}`,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.shop-item {
|
|
width: 710rpx;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
margin-bottom: 20rpx;
|
|
padding: 16rpx 24rpx;
|
|
box-sizing: border-box;
|
|
.shop-list {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 12rpx;
|
|
height: 260rpx;
|
|
.shop-list-item {
|
|
height: auto;
|
|
&__photo {
|
|
width: 166rpx;
|
|
height: 166rpx;
|
|
background: #d8d8d8;
|
|
border-radius: 20rpx;
|
|
}
|
|
&__title {
|
|
flex: 1;
|
|
max-width: 166rpx;
|
|
margin-top: 8rpx;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #333333;
|
|
line-height: 30rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
&__tip {
|
|
padding: 0 8rpx;
|
|
background: linear-gradient(160deg, #fc5e72 0%, #e8101e 100%);
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
color: #ffffff;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
&__price {
|
|
font-family: DINPro, DINPro;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #e8101e;
|
|
line-height: 33rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title-info {
|
|
width: 100%;
|
|
.name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
.name_text {
|
|
flex: 1;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.shop-distance {
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
font-family: DINPro, DINPro;
|
|
font-weight: 500;
|
|
&__right {
|
|
font-family: DINPro, DINPro;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 31rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.position {
|
|
width: 19rpx;
|
|
height: 21rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
.time {
|
|
font-family: DINPro, DINPro;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 31rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-top: 8rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.shop-header {
|
|
margin-bottom: 20rpx;
|
|
width: 100%;
|
|
.shop-title {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
width: 100%;
|
|
|
|
&__left {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-photo {
|
|
flex-shrink: 0;
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
background: #d8d8d8;
|
|
border-radius: 20rpx;
|
|
margin-right: 38rpx;
|
|
}
|
|
|
|
.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: 502rpx;
|
|
.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;
|
|
}
|
|
</style>
|