zfc/bindbox-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优惠券

Browse Source
This commit is contained in:
邹方成 2026-01-27 01:33:59 +08:00
parent 6451394764
commit c55fc2954f
3 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
pages-activity/activity/list/index.vue
View File

@ -2,10 +2,12 @@
<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 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="aspectFill" />
<image class="thumb" :src="a.image" mode="widthFix" />
<view class="tag-hot">HOT</view>
</view>
<view class="info">
@ -17,6 +19,23 @@
</view>
</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>
</view>
<view v-else class="empty">
<image class="empty-img" src="/static/empty.png" mode="widthFix" />
<text class="empty-text">暂无{{ title }}活动</text>
@ -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;

20
pages-user/coupons/index.vue
View File

@ -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))
}
// 获取空状态文本

2
utils/request.js
View File

@ -1,4 +1,4 @@
const BASE_URL = 'https://kdy.1024tool.vip'
const BASE_URL = 'http://127.0.0.1:9991'
let authModalShown = false