|
@@ -6,22 +6,25 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view v-if="data && data.enabled == 1 && data.goods && data.goods.length" class="home-activity">
|
|
<view v-if="data && data.enabled == 1 && data.goods && data.goods.length" class="home-activity">
|
|
|
<view class="activity-head">
|
|
<view class="activity-head">
|
|
|
- <view class="activity-title-row">
|
|
|
|
|
- <text class="activity-title">{{ data.title || (isGroupBuy ? '团购优惠' : '限时秒杀') }}</text>
|
|
|
|
|
- <view v-if="data.showCountdown == 1 && data.status == 1" class="countdown">
|
|
|
|
|
- <text class="countdown-unit">{{ countdown.h }}</text>
|
|
|
|
|
- <text class="countdown-colon">:</text>
|
|
|
|
|
- <text class="countdown-unit">{{ countdown.m }}</text>
|
|
|
|
|
- <text class="countdown-colon">:</text>
|
|
|
|
|
- <text class="countdown-unit">{{ countdown.s }}</text>
|
|
|
|
|
|
|
+ <view class="activity-head-row">
|
|
|
|
|
+ <view class="activity-title-row">
|
|
|
|
|
+ <text class="activity-title">{{ data.title || (isGroupBuy ? '团购优惠' : '限时秒杀') }}</text>
|
|
|
|
|
+ <view v-if="data.showCountdown == 1 && data.status == 1" class="countdown">
|
|
|
|
|
+ <text class="countdown-unit">{{ countdown.h }}</text>
|
|
|
|
|
+ <text class="countdown-colon">:</text>
|
|
|
|
|
+ <text class="countdown-unit">{{ countdown.m }}</text>
|
|
|
|
|
+ <text class="countdown-colon">:</text>
|
|
|
|
|
+ <text class="countdown-unit">{{ countdown.s }}</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <text v-if="showMore" class="section-more" @click="goMore">更多 ></text>
|
|
|
</view>
|
|
</view>
|
|
|
- <text class="activity-more">{{ data.subtitle || (isGroupBuy ? '多人拼团更实惠' : '每日精选 限时特惠') }}</text>
|
|
|
|
|
|
|
+ <text class="activity-subtitle">{{ data.subtitle || (isGroupBuy ? '多人拼团更实惠' : '每日精选 限时特惠') }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 1排1列:左图右文,底部价格与按钮同行 -->
|
|
<!-- 1排1列:左图右文,底部价格与按钮同行 -->
|
|
|
<view v-if="cols === 1" class="list-1">
|
|
<view v-if="cols === 1" class="list-1">
|
|
|
- <view v-for="g in data.goods" :key="g.goodsId" class="row-card" @click="goDetail(g)">
|
|
|
|
|
|
|
+ <view v-for="g in data.goods" :key="g.id" class="row-card" @click="goDetail(g)">
|
|
|
<image class="row-cover" :src="g.coverUrl" mode="aspectFill" />
|
|
<image class="row-cover" :src="g.coverUrl" mode="aspectFill" />
|
|
|
<view class="row-content">
|
|
<view class="row-content">
|
|
|
<text class="row-name">{{ g.name }}</text>
|
|
<text class="row-name">{{ g.name }}</text>
|
|
@@ -39,7 +42,7 @@
|
|
|
|
|
|
|
|
<!-- 1排2列 / 1排3列:网格 -->
|
|
<!-- 1排2列 / 1排3列:网格 -->
|
|
|
<view v-else class="goods-grid" :class="'cols-' + cols">
|
|
<view v-else class="goods-grid" :class="'cols-' + cols">
|
|
|
- <view v-for="g in data.goods" :key="g.goodsId" class="grid-card" @click="goDetail(g)">
|
|
|
|
|
|
|
+ <view v-for="g in data.goods" :key="g.id" class="grid-card" @click="goDetail(g)">
|
|
|
<view class="grid-cover-wrap">
|
|
<view class="grid-cover-wrap">
|
|
|
<image class="grid-cover" :src="g.coverUrl" mode="aspectFill" />
|
|
<image class="grid-cover" :src="g.coverUrl" mode="aspectFill" />
|
|
|
<view v-if="isGroupBuy" class="group-badge">{{ g.groupSize }}人团</view>
|
|
<view v-if="isGroupBuy" class="group-badge">{{ g.groupSize }}人团</view>
|
|
@@ -93,6 +96,10 @@ export default {
|
|
|
cols() {
|
|
cols() {
|
|
|
const c = parseInt(this.data && this.data.layoutCols, 10)
|
|
const c = parseInt(this.data && this.data.layoutCols, 10)
|
|
|
return [1, 2, 3].includes(c) ? c : 3
|
|
return [1, 2, 3].includes(c) ? c : 3
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 展示数量小于商品总数时显示「更多」 */
|
|
|
|
|
+ showMore() {
|
|
|
|
|
+ return Number(this.data && this.data.goodsTotal || 0) > ((this.data && this.data.goods) || []).length
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
@@ -113,7 +120,18 @@ export default {
|
|
|
return n % 1 === 0 ? String(n) : n.toFixed(2)
|
|
return n % 1 === 0 ? String(n) : n.toFixed(2)
|
|
|
},
|
|
},
|
|
|
goDetail(g) {
|
|
goDetail(g) {
|
|
|
- this.pageTo({ url: `/pages/goods/detail?id=${g.goodsId}&account=${this.account}&hdId=${this.hdId}` })
|
|
|
|
|
|
|
+ // 防御性判断:接口返回的活动商品统一带 id 字段(后端 filterActivityGoods 已用
|
|
|
|
|
+ // goodsId 补齐 id),仍保留 goodsId 兜底;g 为空时直接返回避免报错。
|
|
|
|
|
+ if (!g) return
|
|
|
|
|
+ const id = g.id || g.goodsId
|
|
|
|
|
+ if (!id) return
|
|
|
|
|
+ this.pageTo({ url: `/pages/goods/detail?id=${id}&account=${this.account}&hdId=${this.hdId}` })
|
|
|
|
|
+ },
|
|
|
|
|
+ goMore() {
|
|
|
|
|
+ const title = this.data.title || (this.isGroupBuy ? '团购优惠' : '限时秒杀')
|
|
|
|
|
+ this.pageTo({
|
|
|
|
|
+ url: `/pages/goods/section-list?moduleKey=${this.type}&title=${encodeURIComponent(title)}&account=${this.account}&hdId=${this.hdId}`
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
restartCountdown() {
|
|
restartCountdown() {
|
|
|
if (this._timer) clearInterval(this._timer)
|
|
if (this._timer) clearInterval(this._timer)
|
|
@@ -148,9 +166,16 @@ export default {
|
|
|
.activity-head {
|
|
.activity-head {
|
|
|
margin-bottom: 20upx;
|
|
margin-bottom: 20upx;
|
|
|
}
|
|
}
|
|
|
|
|
+.activity-head-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+}
|
|
|
.activity-title-row {
|
|
.activity-title-row {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ min-width: 0;
|
|
|
}
|
|
}
|
|
|
.activity-title {
|
|
.activity-title {
|
|
|
font-size: 32upx;
|
|
font-size: 32upx;
|
|
@@ -177,7 +202,13 @@ export default {
|
|
|
color: #FF4D6D;
|
|
color: #FF4D6D;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
|
-.activity-more {
|
|
|
|
|
|
|
+.section-more {
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ margin-left: 16upx;
|
|
|
|
|
+ font-size: 22upx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+.activity-subtitle {
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-top: 8upx;
|
|
margin-top: 8upx;
|
|
|
font-size: 22upx;
|
|
font-size: 22upx;
|