From 60e4aedc23d54a8f7e661f07a1757da4a44ec726 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 12 九月 2025 18:24:37 +0800
Subject: [PATCH] 礼品卡领取页面调整
---
pages/order/cardPack.vue | 120 ++++++++++++++++++++++++----------------
pages/order/claim-coupon/claim-coupon.vue | 2
2 files changed, 73 insertions(+), 49 deletions(-)
diff --git a/pages/order/cardPack.vue b/pages/order/cardPack.vue
index 6b00db7..d83bbca 100644
--- a/pages/order/cardPack.vue
+++ b/pages/order/cardPack.vue
@@ -24,6 +24,7 @@
'coupon-used': item.claimStatus === 'CLAIMED',
'coupon-expired': item.status === 'EXPIRED'
}"
+ :data-item="JSON.stringify(item)"
>
<!-- 宸︿晶浼樻儬鍒镐富浣� -->
<view class="left">
@@ -51,7 +52,7 @@
<view class="status-tag"
:class="{
'unclaimed': item.claimStatus === 'NOT_CLAIM',
- 'claimed': item.claimStatus === 'CLAIMED'
+ 'claimed': item.claimStatus === 'CLAIM'
}">
{{ item.claimStatus === 'NOT_CLAIM' ? '鏈鍙�' : '宸查鍙�' }}
</view>
@@ -63,29 +64,27 @@
}">
{{ item.shareStatus === 'NOT_SHARE' ? '鏈垎浜�' : '宸插垎浜�' }}
</view>
-
-
- <view v-if="item.claimStatus === 'CLAIMED'">
- <button class="action-btn shared" open-type="share" :data-item="JSON.stringify(item)">
- 鍒嗕韩濂藉弸
- </button>
- </view>
-
-
</view>
</view>
+
+ <!-- 鍒嗕韩鎸夐挳 -->
+ <view v-if="item.claimStatus !== 'CLAIM'" class="share-btn-container">
+ <button class="action-btn shared" open-type="share" :data-item="JSON.stringify(item)">
+ <uni-icons class="share-icon" type="redo" size="20" color="#FFFFFF"></uni-icons>
+ </button>
+ </view>
</view>
+ </view>
+
+ <!-- 鍔犺浇鏇村鎻愮ず -->
+ <view class="load-more" v-if="couponList.length > 0">
+ <text v-if="loadStatus === 'more'">涓婃媺鍔犺浇鏇村</text>
+ <text v-else-if="loadStatus === 'loading'">鍔犺浇涓�...</text>
+ <text v-else>娌℃湁鏇村浜�</text>
</view>
</div>
</div>
</div>
-
- <!-- 鍔犺浇鏇村鎻愮ず -->
- <view class="load-more" v-if="couponList.length > 0">
- <text v-if="loadStatus === 'more'">涓婃媺鍔犺浇鏇村</text>
- <text v-else-if="loadStatus === 'loading'">鍔犺浇涓�...</text>
- <text v-else>娌℃湁鏇村浜�</text>
- </view>
</view>
</template>
@@ -93,7 +92,13 @@
import configs from '@/config/config'
import {getPage} from '@/api/couponVirtual.js'
import storage from "@/utils/storage.js";
+ // 寮曞叆uni-icons缁勪欢
+ import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
export default {
+ // 娉ㄥ唽缁勪欢
+ components: {
+ uniIcons
+ },
data() {
return {
loadStatus: "more", //涓嬫媺鐘舵��
@@ -114,11 +119,12 @@
console.log("鏈櫥褰曚笉鑳藉垎浜�");
return
}
+ console.log('------------------------->',e)
const shareItem = e.target?.dataset?.item ? JSON.parse(e.target.dataset.item) : this.item;
return {
- title: '鍒嗕韩浼樻儬鍗�',
+ title: shareItem.name,
path: `/pages/order/claim-coupon/claim-coupon?id=${shareItem.id}`,
- imageUrl: ''
+ imageUrl:shareItem.original
}
},
onLoad(options) {
@@ -226,7 +232,7 @@
.swiper-item {
.scroll-v {
height: calc(100vh - 100rpx);
- padding: 30rpx 24rpx 100rpx;
+ padding: 30rpx 24rpx 30rpx;
}
}
}
@@ -380,6 +386,11 @@
opacity: 0.9;
}
+ .order-id {
+ word-break: break-all;
+ white-space: normal;
+ }
+
.valid-date {
margin-top: 16rpx;
font-size: 22rpx;
@@ -458,29 +469,47 @@
color: $gray;
border: 1rpx solid rgba(158, 158, 158, 0.3);
}
-
- // 鎿嶄綔鎸夐挳
- .action-btn {
- background: linear-gradient(135deg, $primary, $primary-light);
- color: $white;
- padding: 14rpx 28rpx;
- border-radius: 40rpx;
- font-size: 26rpx;
- text-align: center;
- margin-top: 10rpx;
- font-weight: 500;
- box-shadow: 0 4rpx 12rpx rgba(255, 107, 59, 0.3);
-
- &.shared {
- background: linear-gradient(135deg, $info, #42A5F5);
- box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
- }
-
- &.disabled {
- background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
- box-shadow: 0 4rpx 12rpx rgba(158, 158, 158, 0.3);
- }
- }
+ }
+ }
+
+ // 鍒嗕韩鎸夐挳瀹瑰櫒
+ .share-btn-container {
+ position: absolute;
+ top: 0rpx;
+ right: 0rpx;
+ z-index: 10;
+ }
+
+ // 鎿嶄綔鎸夐挳
+ .action-btn {
+ background: linear-gradient(135deg, $primary, $primary-light);
+ width: 50rpx;
+ height: 50rpx;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4rpx 12rpx rgba(255, 107, 59, 0.3);
+ border: none;
+ padding: 0;
+ margin: 0;
+
+ &.shared {
+ background: linear-gradient(135deg, $info, #42A5F5);
+ box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
+ }
+
+ &.disabled {
+ background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
+ box-shadow: 0 4rpx 12rpx rgba(158, 158, 158, 0.3);
+ }
+
+ .share-icon {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
}
@@ -491,11 +520,6 @@
color: $gray;
font-size: 26rpx;
background-color: $bg-color;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 10;
}
}
</style>
\ No newline at end of file
diff --git a/pages/order/claim-coupon/claim-coupon.vue b/pages/order/claim-coupon/claim-coupon.vue
index 905d2dc..c7de317 100644
--- a/pages/order/claim-coupon/claim-coupon.vue
+++ b/pages/order/claim-coupon/claim-coupon.vue
@@ -147,7 +147,7 @@
uni.showLoading({
title: '棰嗗彇涓�...'
});
-
+ console.log(this.couponInfo)
// 璋冪敤棰嗗彇浼樻儬鍒告帴鍙�
const res = await claimVirtualCoupon(this.couponInfo.id);
--
Gitblit v1.8.0