优惠券

pages-activity/activity/list/index.vue

@@ -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 v-else-if="filteredActivities.length > 0" class="waterfall-box">
-        <view class="activity-item" v-for="a in filteredActivities" :key="a.id" @tap="onActivityTap(a)">
+        <!-- 左列 -->
-          <view class="thumb-box">
+        <view class="waterfall-col">
-            <image class="thumb" :src="a.image" mode="aspectFill" />
+          <view class="activity-item" v-for="a in leftList" :key="a.id" @tap="onActivityTap(a)">
-            <view class="tag-hot">HOT</view>
+            <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>
-            <view class="name">{{ a.title }}</view>
+        <!-- 右列 -->
-            <view class="bottom-row">
+        <view class="waterfall-col">
-              <text class="price-text">{{ a.category_name }} · {{ a.subtitle }}</text>
+          <view class="activity-item" v-for="a in rightList" :key="a.id" @tap="onActivityTap(a)">
-              <view class="btn-go">GO</view>
+            <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;
+.waterfall-box {
-  grid-template-columns: repeat(2, 1fr);
+  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 */
+  /* 移除固定宽高比，让 mode="widthFix" 撑开高度 */
-  height: 0;
+  font-size: 0; /* 消除图片底部间隙 */
-  background: $bg-secondary;
 }
 .thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
+  /* height 由 widthFix 自动决定 */
-  object-fit: cover;
+  background: #f0f0f0;
-  background: linear-gradient(90deg, $bg-secondary 25%, #e8e8e8 50%, $bg-secondary 75%);
+  display: block;
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
 }
 .tag-hot {
   position: absolute;
@@ -217,25 +241,20 @@ onShareTimeline(() => {
   padding: 20rpx 20rpx;
   display: flex;
   flex-direction: column;
-  flex: 1;
+  gap: 12rpx;
-  justify-content: space-between;
 }
 .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;

pages-user/coupons/index.vue

@@ -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 amount = item.amount || 0
-  const used = item.amount - item.remaining
+  if (!amount) return 0
-  return Math.floor((used / item.amount) * 100)
+  
+  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))
 }
 
 // 获取空状态文本

utils/request.js

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