<template>
|
<view class="groupbuy-active-detail" :data-theme='theme()'>
|
<view class="banner">
|
<image :src="detail.cover_images[0]" mode="widthFix" style="width: 100%;"></image>
|
</view>
|
|
<view class="content">
|
<view class="active-info">
|
<view class="active-title">{{ detail.active_name }}</view>
|
<view class="active-subtitle">{{ detail.description }}</view>
|
|
<view class="active-stats">
|
<view class="stat-item">
|
<text class="stat-num">{{ detail.join_num }}</text>
|
<text class="stat-label">已团</text>
|
</view>
|
<view class="stat-item">
|
<text class="stat-num">{{ detail.group_num }}</text>
|
<text class="stat-label">成团人数</text>
|
</view>
|
<view class="stat-item">
|
<text class="stat-num">{{ detail.time_left }}</text>
|
<text class="stat-label">剩余时间</text>
|
</view>
|
</view>
|
|
<view class="time-info">
|
<text class="time-label">活动时间：</text>
|
<text class="time-value">{{ detail.start_time }} 至 {{ detail.end_time }}</text>
|
</view>
|
</view>
|
|
<view class="product-section">
|
<view class="section-header">
|
<text class="section-title">团购商品</text>
|
</view>
|
|
<view class="product-list">
|
<view class="product-item" v-for="(product, index) in productList" :key="index" @click="goToProduct(product.product_id)">
|
<image :src="product.product_image" class="product-image" mode="aspectFill"></image>
|
<view class="product-info">
|
<view class="product-name">{{ product.product_name }}</view>
|
<view class="product-price">
|
<text class="now-price">¥{{ product.groupbuy_price }}</text>
|
<text class="origin-price">¥{{ product.origin_price }}</text>
|
</view>
|
<view class="product-stats">
|
<text class="sold-count">已售{{ product.sales }}件</text>
|
<text class="group-status">{{ product.group_status }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="footer">
|
<button class="btn-join" @click="joinGroupbuy">立即参团</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
activeId: null,
|
detail: {},
|
productList: []
|
};
|
},
|
onLoad(options) {
|
this.activeId = options.id;
|
this.loadData();
|
},
|
methods: {
|
loadData() {
|
// 加载团购活动详情
|
this._get('plus.groupbuy.active/detail', {
|
groupbuy_active_id: this.activeId
|
}, (res) => {
|
this.detail = res.data.detail;
|
});
|
|
// 加载团购商品列表
|
this._get('plus.groupbuy.product/lists', {
|
groupbuy_active_id: this.activeId
|
}, (res) => {
|
this.productList = res.data.list.data;
|
});
|
},
|
goToProduct(productId) {
|
this.gotoPage(`/pages/product/detail/detail?product_id=${productId}`);
|
},
|
joinGroupbuy() {
|
if (this.productList.length > 0) {
|
// 跳转到第一个商品的团购详情
|
this.goToProduct(this.productList[0].product_id);
|
} else {
|
uni.showToast({
|
title: '暂无可团商品',
|
icon: 'none'
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.groupbuy-active-detail {
|
background: #f5f5f5;
|
min-height: 100vh;
|
|
.banner {
|
width: 100%;
|
}
|
|
.content {
|
padding: 20rpx;
|
|
.active-info {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.active-title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 10rpx;
|
}
|
|
.active-subtitle {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 30rpx;
|
}
|
|
.active-stats {
|
display: flex;
|
justify-content: space-around;
|
margin-bottom: 30rpx;
|
|
.stat-item {
|
text-align: center;
|
|
.stat-num {
|
display: block;
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #e74748;
|
}
|
|
.stat-label {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.time-info {
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
background: #f9f9f9;
|
border-radius: 10rpx;
|
|
.time-label {
|
font-size: 26rpx;
|
color: #666;
|
margin-right: 10rpx;
|
}
|
|
.time-value {
|
font-size: 26rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.product-section {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
|
.section-header {
|
margin-bottom: 30rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
}
|
|
.product-list {
|
.product-item {
|
display: flex;
|
margin-bottom: 30rpx;
|
|
.product-image {
|
width: 180rpx;
|
height: 180rpx;
|
border-radius: 10rpx;
|
margin-right: 20rpx;
|
}
|
|
.product-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.product-name {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 10rpx;
|
}
|
|
.product-price {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10rpx;
|
|
.now-price {
|
font-size: 32rpx;
|
color: #e74748;
|
font-weight: bold;
|
margin-right: 20rpx;
|
}
|
|
.origin-price {
|
font-size: 24rpx;
|
color: #999;
|
text-decoration: line-through;
|
}
|
}
|
|
.product-stats {
|
display: flex;
|
justify-content: space-between;
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.footer {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 20rpx;
|
background: #fff;
|
border-top: 1rpx solid #eee;
|
|
.btn-join {
|
width: 100%;
|
height: 80rpx;
|
background: linear-gradient(to right, #e74748, #f17a5f);
|
color: #fff;
|
border-radius: 40rpx;
|
border: none;
|
font-size: 32rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
