<template>
|
<view class="diy-groupbuy" :style="{ background: itemData.style.background }">
|
<view class="groupbuy-item" v-for="(supplier, index) in itemData.data" :key="index">
|
<view class="supplier-data" @click="gotoSupplier(supplier.supplier_id)">
|
<!-- 商户名称 -->
|
<view class="supplier-name">
|
{{ supplier.supplier_name || '商户名称' }}
|
</view>
|
|
<!-- 商户详情 -->
|
<view class="supplier-detail" >
|
<view class="supplier-detail-left">
|
<image v-if="itemData.style.server_score_image" :src="itemData.style.server_score_image" class="supplier-detail-img" mode="aspectFill"></image>
|
<view class="supplier-detail-score">{{ supplier.server_score }} {{ supplier.server_score_text }}</view>
|
<view class="supplier-detail-comment" v-if="supplier.comment > 0">{{ supplier.comment }}条评论</view>
|
<view class="supplier-detail-price" v-if="supplier.average_price > 0">¥{{ supplier.average_price }}/人</view>
|
</view>
|
<view class="supplier-detail-right">
|
<view class="supplier-detail-distance">{{ supplier.distance }}</view>
|
</view>
|
</view>
|
|
<!-- 优惠信息 -->
|
<view class="supplier-detail-discount">
|
<view class="discount-left" v-if="supplier.max_reduce_price && supplier.max_reduce_price > 0">
|
<view class="discount-left-text">超值券</view>
|
<view class="discount-left-price">最高减{{ supplier.max_reduce_price }}元</view>
|
</view>
|
<view class="discount-right" v-if="supplier.ranking && supplier.ranking <= 10 && supplier.ranking < 999">
|
好评榜第{{ supplier.ranking }}名
|
</view>
|
</view>
|
</view>
|
|
<!-- 商品列表 -->
|
<scroll-view class="supplier-product" scroll-x="true" show-scrollbar="false">
|
<view class="product-item" v-for="(product, productKey) in supplier.productList" :key="productKey"
|
@click="gotoDetail(product.product_id)">
|
<!-- 商品图片 -->
|
<view class="product-img">
|
<image :src="product.product_image" mode="aspectFill"></image>
|
<!-- 优惠券标签 -->
|
<view class="product-discount" v-if="product.reduce_price > 0">
|
<view class="discount-type">超值券</view>
|
<view class="discount-price">减{{ product.reduce_price }}元</view>
|
</view>
|
</view>
|
|
<!-- 商品名称 -->
|
<view class="product-name">
|
{{ product.product_name }}
|
</view>
|
|
<!-- 商品价格和购买按钮 -->
|
<view class="product-price">
|
<view class="price">¥{{ product.product_price }}</view>
|
<view class="buy-btn">抢购</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {};
|
},
|
props: ['itemData'],
|
created() {
|
console.log('团购组件数据：', this.itemData);
|
},
|
methods: {
|
/**
|
* 跳转商品详情
|
*/
|
gotoDetail(productId) {
|
let url = '/pages/product/detail/detail?product_id=' + productId;
|
this.gotoPage(url);
|
},
|
gotoSupplier(productId) {
|
let url = '/pages/shop/shop?supplier_id=' + productId;
|
this.gotoPage(url);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.diy-groupbuy {
|
padding: 24rpx;
|
}
|
|
.groupbuy-item {
|
background: #ffffff;
|
margin-bottom: 20rpx;
|
padding: 20rpx;
|
border-radius: 16rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
}
|
|
.supplier-data {
|
padding: 10rpx;
|
}
|
|
.supplier-name {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333333;
|
margin-bottom: 20rpx;
|
}
|
|
.supplier-detail {
|
padding: 20rpx 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.supplier-detail-left {
|
display: flex;
|
align-items: center;
|
gap: 10rpx;
|
}
|
|
.supplier-detail-img {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
}
|
|
.supplier-detail-score {
|
font-size: 28rpx;
|
color: #c73a4e;
|
font-weight: bold;
|
}
|
|
.supplier-detail-comment {
|
font-size: 28rpx;
|
color: #7b7b7b;
|
}
|
|
.supplier-detail-price {
|
font-size: 28rpx;
|
color: #7b7b7b;
|
}
|
|
.supplier-detail-right {
|
color: #7b7b7b;
|
font-size: 26rpx;
|
}
|
|
.supplier-detail-discount {
|
display: flex;
|
align-items: center;
|
gap: 20rpx;
|
margin-top: 10rpx;
|
}
|
|
.discount-left {
|
display: flex;
|
align-items: center;
|
background: #da5e66;
|
border-radius: 10rpx;
|
overflow: hidden;
|
}
|
|
.discount-left-text {
|
font-size: 24rpx;
|
color: #ffffff;
|
padding: 10rpx 20rpx;
|
line-height: 1;
|
background: #da5e66;
|
}
|
|
.discount-left-price {
|
font-size: 24rpx;
|
color: #c04960;
|
background: #fae7ec;
|
padding: 10rpx 20rpx;
|
line-height: 1;
|
}
|
|
.discount-right {
|
font-size: 28rpx;
|
background: #f9eee2;
|
color: #806849;
|
padding: 10rpx 20rpx;
|
border-radius: 10rpx;
|
}
|
|
.supplier-product {
|
display: flex;
|
white-space: nowrap;
|
padding: 10rpx 0;
|
margin-top: 20rpx;
|
}
|
|
.product-item {
|
display: inline-block;
|
margin-right: 20rpx;
|
width: 220rpx;
|
}
|
|
.product-item:last-child {
|
margin-right: 0;
|
}
|
|
.product-img {
|
width: 220rpx;
|
height: 220rpx;
|
border-radius: 10rpx;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.product-img image {
|
width: 100%;
|
height: 100%;
|
border-radius: 10rpx;
|
}
|
|
.product-discount {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
font-size: 24rpx;
|
color: #ffffff;
|
background: #e74748;
|
border-bottom-left-radius: 10rpx;
|
border-top-right-radius: 10rpx;
|
height: 40rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.discount-type {
|
padding: 0 10rpx;
|
line-height: 40rpx;
|
background: linear-gradient(to bottom, #e75f4e, #dd8961);
|
border-bottom-left-radius: 10rpx;
|
border-top-right-radius: 10rpx;
|
}
|
|
.discount-price {
|
background: #e74748;
|
padding: 0 10rpx;
|
line-height: 40rpx;
|
}
|
|
.product-name {
|
font-size: 28rpx;
|
color: #000000;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 220rpx;
|
margin: 10rpx 0;
|
}
|
|
.product-price {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background: #fbf1ef;
|
border-radius: 10rpx;
|
height: 60rpx;
|
overflow: hidden;
|
}
|
|
.price {
|
font-size: 24rpx;
|
color: #c73a4e;
|
font-weight: bold;
|
width: 60%;
|
text-align: center;
|
line-height: 60rpx;
|
}
|
|
.buy-btn {
|
width: 50%;
|
height: 60rpx;
|
background: linear-gradient(to right, #c73a4e 20%, #e74c3c 80%);
|
text-align: center;
|
color: #ffffff;
|
font-size: 24rpx;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-top-right-radius: 10rpx;
|
border-bottom-right-radius: 10rpx;
|
clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 100%);
|
transition: opacity 0.3s ease;
|
}
|
|
.buy-btn:active {
|
opacity: 0.8;
|
}
|
</style>
|
