wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
mrr.sj.front/pages/search/components/shopCard.vue

335 lines
6.8 KiB
Vue
Raw Normal View History

初始化商家app代码
2026-03-24 11:45:13 +08:00
<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="
shop.head_photo && shop.head_photo != '-'
? shop.head_photo
: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/81618273-8239-40c9-bed8-3c36e276e440'
" 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>
初始化商家app代码
2026-03-25 13:29:04 +08:00
<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>
初始化商家app代码
2026-03-24 11:45:13 +08:00
</view>
初始化商家app代码
2026-03-25 13:29:04 +08:00
</view>
初始化商家app代码
2026-03-24 11:45:13 +08:00
</scroll-view>
</view>
</template>
<script>
export default {
props: {
// 服务列表数据
shop: {
type: Object,
default: {},
},
},
data() {
return {};
},
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: 670rpx;
background: #ffffff;
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 {
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>