|
@@ -78,13 +78,9 @@
|
|
|
<text class="card-condition">{{ getConditionText(coupon.minSpend) }}</text>
|
|
<text class="card-condition">{{ getConditionText(coupon.minSpend) }}</text>
|
|
|
<text class="card-scope">{{ getScopeText(coupon.applicableTo, isMember) }}</text>
|
|
<text class="card-scope">{{ getScopeText(coupon.applicableTo, isMember) }}</text>
|
|
|
<text class="card-expiry">有效期至 {{ formatDate(coupon.validUntil) }}</text>
|
|
<text class="card-expiry">有效期至 {{ formatDate(coupon.validUntil) }}</text>
|
|
|
- <button
|
|
|
|
|
- v-if="canClaim(coupon)"
|
|
|
|
|
- class="claim-btn"
|
|
|
|
|
- @click="handleClaim(coupon)"
|
|
|
|
|
- >立即领取</button>
|
|
|
|
|
- <view v-else-if="coupon.applicableTo === 'MEMBERSHIP' && !isMember && !coupon.isGift && (!coupon.status || coupon.status === 'AVAILABLE')" class="member-guide-btn" @click="goToMembership">
|
|
|
|
|
- <text>去开通会员</text>
|
|
|
|
|
|
|
+ <view v-if="tabIndex === 0 && (!coupon.status || coupon.status === 'AVAILABLE')" class="coupon-actions">
|
|
|
|
|
+ <button class="use-btn" @click="useCoupon(coupon)">使用</button>
|
|
|
|
|
+ <button class="gift-btn" @click="giftCoupon(coupon)">转赠</button>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -94,7 +90,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { getMyCoupons, claimCoupon, getExchangeableCoupons, exchangeCouponByCf, getMyMembership } from '../../utils/api.js'
|
|
|
|
|
|
|
+import { getMyCoupons, getExchangeableCoupons, exchangeCouponByCf, getMyMembership, productDetail } from '../../utils/api.js'
|
|
|
import { parseDate } from '../../utils/format.js'
|
|
import { parseDate } from '../../utils/format.js'
|
|
|
import fontScaleMixin from '@/mixins/font-scale.js'
|
|
import fontScaleMixin from '@/mixins/font-scale.js'
|
|
|
|
|
|
|
@@ -232,25 +228,54 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- canClaim(coupon) {
|
|
|
|
|
- // 非会员也可领取会员券,但使用时需开通会员
|
|
|
|
|
- return this.tabIndex === 0 && (!coupon.status || coupon.status === 'AVAILABLE')
|
|
|
|
|
- },
|
|
|
|
|
goGiftCoupon() {
|
|
goGiftCoupon() {
|
|
|
uni.navigateTo({ url: '/pages/membership/gift-coupon' })
|
|
uni.navigateTo({ url: '/pages/membership/gift-coupon' })
|
|
|
},
|
|
},
|
|
|
goToCouponCenter() {
|
|
goToCouponCenter() {
|
|
|
uni.navigateTo({ url: '/pages/profile-extra/coupon-center' })
|
|
uni.navigateTo({ url: '/pages/profile-extra/coupon-center' })
|
|
|
},
|
|
},
|
|
|
- async handleClaim(coupon) {
|
|
|
|
|
- try {
|
|
|
|
|
- var res = await claimCoupon(coupon.id)
|
|
|
|
|
- uni.showToast({ title: res.message || '领取成功', icon: 'success' })
|
|
|
|
|
- this.loadCoupons()
|
|
|
|
|
- } catch (e) {
|
|
|
|
|
- uni.showToast({ title: e.message || '领取失败', icon: 'none' })
|
|
|
|
|
|
|
+ async useCoupon(coupon) {
|
|
|
|
|
+ var userId = uni.getStorageSync('userId')
|
|
|
|
|
+ if (!userId) {
|
|
|
|
|
+ this.openLoginSheet()
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (coupon.applicableTo === 'PRODUCT') {
|
|
|
|
|
+ if (!coupon.productId) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ try {
|
|
|
|
|
+ var res = await productDetail({ id: coupon.productId })
|
|
|
|
|
+ var d = res && res.data
|
|
|
|
|
+ if (!d) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ uni.setStorageSync('checkoutItems', [{
|
|
|
|
|
+ productId: d.id,
|
|
|
|
|
+ productName: d.name || '商品',
|
|
|
|
|
+ coverImage: d.coverImage || '',
|
|
|
|
|
+ unitPrice: d.salePrice != null ? d.salePrice : d.price,
|
|
|
|
|
+ quantity: 1
|
|
|
|
|
+ }])
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/shop/checkout/checkout?from=coupon&id=' + d.id + '&couponId=' + coupon.id
|
|
|
|
|
+ })
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
|
|
+ }
|
|
|
|
|
+ } else if (coupon.applicableTo === 'ALL') {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
|
|
+ } else if (coupon.applicableTo === 'MEMBERSHIP') {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/membership/upgrade' })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ giftCoupon(coupon) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/membership/gift-coupon' })
|
|
|
|
|
+ },
|
|
|
getConditionText(minSpend) {
|
|
getConditionText(minSpend) {
|
|
|
if (!minSpend || minSpend <= 0) return '无门槛'
|
|
if (!minSpend || minSpend <= 0) return '无门槛'
|
|
|
return '满' + (minSpend / 100).toFixed(2) + '元可用'
|
|
return '满' + (minSpend / 100).toFixed(2) + '元可用'
|
|
@@ -544,6 +569,54 @@ export default {
|
|
|
opacity: 0.85;
|
|
opacity: 0.85;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 已领取券操作区:使用 + 转赠 */
|
|
|
|
|
+.coupon-actions {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 24rpx;
|
|
|
|
|
+ bottom: 20rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.use-btn {
|
|
|
|
|
+ background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
|
|
|
|
|
+ color: $app-surface;
|
|
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.use-btn::after {
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.use-btn:active {
|
|
|
|
|
+ opacity: 0.85;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.gift-btn {
|
|
|
|
|
+ background: $facade-fill;
|
|
|
|
|
+ color: $facade-text-strong;
|
|
|
|
|
+ font-size: calc(24rpx * var(--font-scale, 1));
|
|
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.gift-btn::after {
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.gift-btn:active {
|
|
|
|
|
+ opacity: 0.85;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.gift-entry {
|
|
.gift-entry {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|