Procházet zdrojové kódy

feat: enhance red packet item and wallet pages with new features

- Added a refund tip to the red packet item component to inform users about refund policies.
- Increased the height of the red packet item for better layout.
- Introduced withdrawal tips in the wallet page to guide users on the new confirmation process after system upgrades.
- Adjusted padding and margins for improved visual consistency across components.
ylong před 3 týdny
rodič
revize
1d67d62abf

+ 20 - 5
pages-car/components/red-packet-item.vue

@@ -20,6 +20,7 @@
                         <text class="sub-title" v-else>满{{ info.thresholdMoney || 0 }}减{{ info.faceMoney || 0 }}元</text>
                     </view>
                     <view class="date">{{ formatEndTime }}到期</view>
+                    <view class="refund-tip" :class="{ 'has-action': status === 0 }">订单发生退款时,红包不支持退回,敬请留意。</view>
                 </view>
 
                 <view class="action-box" v-if="status === 0">
@@ -80,7 +81,7 @@
     .red-packet-item {
         position: relative;
         width: 702rpx;
-        height: 180rpx;
+        height: 248rpx;
         margin: 20rpx auto;
         border-radius: 12rpx;
         padding: 6rpx;
@@ -152,7 +153,7 @@
 
         .right-part {
             flex: 1;
-            padding: 30rpx 30rpx 30rpx 20rpx;
+            padding: 24rpx 24rpx 20rpx 20rpx;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -162,7 +163,7 @@
                 .title-row {
                     display: flex;
                     align-items: center;
-                    margin-bottom: 20rpx;
+                    margin-bottom: 12rpx;
 
                     .type-name {
                         font-size: 28rpx;
@@ -181,12 +182,23 @@
                     font-size: 24rpx;
                     color: #999;
                 }
+
+                .refund-tip {
+                    margin-top: 10rpx;
+                    font-size: 22rpx;
+                    line-height: 32rpx;
+                    color: #666;
+
+                    &.has-action {
+                        padding-right: 160rpx;
+                    }
+                }
             }
 
             .action-box {
                 position: absolute;
-                right: 30rpx;
-                bottom: 30rpx;
+                right: 24rpx;
+                bottom: 28rpx;
 
                 .btn-use {
                     background: radial-gradient( 0% 0% at 0% 0%, #F3B26B 0%, #FFF1D8 100%);
@@ -245,6 +257,9 @@
                     .date {
                         color: #787878;
                     }
+                    .refund-tip {
+                        color: #999;
+                    }
                 }
             }
         }

+ 24 - 2
pages-mine/pages/wallet.vue

@@ -25,6 +25,11 @@
             </view>
         </view>
 
+        <view class="withdraw-tips">
+            <view class="tip-line">温馨提示:因腾讯系统升级,平台审核通过后需要再次点击“确认收款”,才会到账哦</view>
+            <view class="tip-line">快捷入口:商家审核后会在“我的”页面有“提现确认”浮窗,点击“确认立即到账”即可到账。</view>
+        </view>
+
         <!-- 余额明细列表 -->
         <view class="detail-section">
             <view class="section-header">
@@ -78,7 +83,7 @@ export default {
             otherParams: {
                 queryTypes: ''
             },
-            height: 'calc(100vh - 540rpx)'
+            height: 'calc(100vh - 760rpx)'
         }
     },
     // #ifdef MP-ALIPAY
@@ -240,12 +245,29 @@ export default {
         }
     }
 
+    .withdraw-tips {
+        margin-top: 20rpx;
+        padding: 16rpx 20rpx;
+        background: #fff;
+        border-radius: 16rpx;
+
+        .tip-line {
+            font-size: 24rpx;
+            line-height: 36rpx;
+            color: #E64545;
+
+            & + .tip-line {
+                margin-top: 8rpx;
+            }
+        }
+    }
+
     .detail-section {
         background: #FFFFFF;
         border-radius: 20rpx;
         margin-top: 20rpx;
         padding: 0 30rpx;
-        height: calc(100vh - 400rpx);
+        height: calc(100vh - 620rpx);
         overflow-y: auto;
 
         .section-header {