优惠券
This commit is contained in:
parent
6451394764
commit
c55fc2954f
@ -2,17 +2,36 @@
|
||||
<view class="page">
|
||||
<scroll-view class="content" scroll-y>
|
||||
<view v-if="loading" class="loading-wrap"><view class="spinner"></view></view>
|
||||
<view v-else-if="filteredActivities.length > 0" class="activity-grid">
|
||||
<view class="activity-item" v-for="a in filteredActivities" :key="a.id" @tap="onActivityTap(a)">
|
||||
<view class="thumb-box">
|
||||
<image class="thumb" :src="a.image" mode="aspectFill" />
|
||||
<view class="tag-hot">HOT</view>
|
||||
<view v-else-if="filteredActivities.length > 0" class="waterfall-box">
|
||||
<!-- 左列 -->
|
||||
<view class="waterfall-col">
|
||||
<view class="activity-item" v-for="a in leftList" :key="a.id" @tap="onActivityTap(a)">
|
||||
<view class="thumb-box">
|
||||
<image class="thumb" :src="a.image" mode="widthFix" />
|
||||
<view class="tag-hot">HOT</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">{{ a.title }}</view>
|
||||
<view class="bottom-row">
|
||||
<text class="price-text">{{ a.category_name }} · {{ a.subtitle }}</text>
|
||||
<view class="btn-go">GO</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">{{ a.title }}</view>
|
||||
<view class="bottom-row">
|
||||
<text class="price-text">{{ a.category_name }} · {{ a.subtitle }}</text>
|
||||
<view class="btn-go">GO</view>
|
||||
</view>
|
||||
<!-- 右列 -->
|
||||
<view class="waterfall-col">
|
||||
<view class="activity-item" v-for="a in rightList" :key="a.id" @tap="onActivityTap(a)">
|
||||
<view class="thumb-box">
|
||||
<image class="thumb" :src="a.image" mode="widthFix" />
|
||||
<view class="tag-hot">HOT</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">{{ a.title }}</view>
|
||||
<view class="bottom-row">
|
||||
<text class="price-text">{{ a.category_name }} · {{ a.subtitle }}</text>
|
||||
<view class="btn-go">GO</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -44,6 +63,9 @@ const filteredActivities = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const leftList = computed(() => filteredActivities.value.filter((_, i) => i % 2 === 0))
|
||||
const rightList = computed(() => filteredActivities.value.filter((_, i) => i % 2 !== 0))
|
||||
|
||||
function apiGet(url) {
|
||||
const token = uni.getStorageSync('token')
|
||||
const fn = token ? authRequest : request
|
||||
@ -160,11 +182,19 @@ onShareTimeline(() => {
|
||||
flex: 1;
|
||||
padding: $spacing-lg;
|
||||
}
|
||||
.activity-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* 瀑布流容器 */
|
||||
.waterfall-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.waterfall-col {
|
||||
width: 48%; /* 给间距留出空间 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
background: #fff;
|
||||
border-radius: $radius-lg;
|
||||
@ -184,20 +214,14 @@ onShareTimeline(() => {
|
||||
.thumb-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 100%; /* 1:1 Aspect Ratio */
|
||||
height: 0;
|
||||
background: $bg-secondary;
|
||||
/* 移除固定宽高比，让 mode="widthFix" 撑开高度 */
|
||||
font-size: 0; /* 消除图片底部间隙 */
|
||||
}
|
||||
.thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: linear-gradient(90deg, $bg-secondary 25%, #e8e8e8 50%, $bg-secondary 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
/* height 由 widthFix 自动决定 */
|
||||
background: #f0f0f0;
|
||||
display: block;
|
||||
}
|
||||
.tag-hot {
|
||||
position: absolute;
|
||||
@ -217,25 +241,20 @@ onShareTimeline(() => {
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
margin-bottom: 16rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.4;
|
||||
height: 80rpx;
|
||||
/* 移除固定高度限制，适应不同文字量 */
|
||||
}
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.price-text {
|
||||
font-size: 22rpx;
|
||||
@ -290,15 +309,7 @@ onShareTimeline(() => {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
动画增强
|
||||
============================================ */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* 卡片交错入场 */
|
||||
/* 动画增强 */
|
||||
@for $i from 1 through 10 {
|
||||
.activity-item:nth-child(#{$i}) {
|
||||
animation: fadeInUp 0.4s ease-out #{$i * 0.05}s both;
|
||||
|
||||
@ -82,11 +82,11 @@
|
||||
<text class="coupon-rules">{{ formatRules(item.rules) }}</text>
|
||||
|
||||
<!-- 使用进度条 -->
|
||||
<view class="coupon-progress" v-if="item.amount && item.remaining !== undefined && item.remaining < item.amount">
|
||||
<view class="coupon-progress" v-if="item.used_amount > 0 || (item.amount && item.remaining !== undefined && item.remaining < item.amount)">
|
||||
<view class="progress-bar">
|
||||
<view class="progress-fill" :style="{ width: getUsedPercent(item) + '%' }"></view>
|
||||
</view>
|
||||
<text class="progress-text">已用 {{ formatValue(item.amount - item.remaining) }} ({{ getUsedPercent(item) }}%)</text>
|
||||
<text class="progress-text">已用 ¥{{ formatValue(item.used_amount || (item.amount - item.remaining)) }} ({{ getUsedPercent(item) }}%)</text>
|
||||
</view>
|
||||
|
||||
<view class="coupon-footer">
|
||||
@ -205,9 +205,19 @@ function formatDateTime(t) {
|
||||
|
||||
// 计算使用百分比
|
||||
function getUsedPercent(item) {
|
||||
if (!item.amount || !item.remaining) return 0
|
||||
const used = item.amount - item.remaining
|
||||
return Math.floor((used / item.amount) * 100)
|
||||
const amount = item.amount || 0
|
||||
if (!amount) return 0
|
||||
|
||||
let used = 0
|
||||
if (item.used_amount !== undefined) {
|
||||
used = item.used_amount
|
||||
} else if (item.remaining !== undefined) {
|
||||
used = amount - item.remaining
|
||||
}
|
||||
|
||||
if (used <= 0) return 0
|
||||
// use Math.min to cap at 100% just in case
|
||||
return Math.min(100, Math.floor((used / amount) * 100))
|
||||
}
|
||||
|
||||
// 获取空状态文本
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const BASE_URL = 'https://kdy.1024tool.vip'
|
||||
const BASE_URL = 'http://127.0.0.1:9991'
|
||||
|
||||
let authModalShown = false
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user