|
|
@@ -158,6 +158,32 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 赠会员累计进度 -->
|
|
|
+ <view v-if="giftProgress && !giftIsGranted && giftProgress.threshold > 0" class="section gift-progress-section">
|
|
|
+ <view class="gift-progress-header">
|
|
|
+ <text class="gift-progress-icon">🎁</text>
|
|
|
+ <text class="gift-progress-title">购会员商品累计进度</text>
|
|
|
+ <text class="gift-progress-percent">{{ giftProgressPercent }}%</text>
|
|
|
+ </view>
|
|
|
+ <view class="gift-progress-bar-bg">
|
|
|
+ <view class="gift-progress-bar-fill" :style="{ width: giftProgressPercent + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ <view class="gift-progress-info">
|
|
|
+ <text class="gift-progress-accumulated">已累 {{ giftAccumulatedYuan }} 元</text>
|
|
|
+ <text class="gift-progress-remaining">还差 {{ giftRemainingYuan }} 元送会员</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="giftProgress.grantedLevel" class="gift-progress-level">
|
|
|
+ <text>达标将赠送 {{ giftProgress.grantedLevel === 'FAMILY' ? '家庭会员' : giftProgress.grantedLevel }} 权益</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-else-if="giftIsGranted" class="section gift-granted-section">
|
|
|
+ <view class="gift-granted-row">
|
|
|
+ <text class="gift-granted-icon">✅</text>
|
|
|
+ <text class="gift-granted-text">本家庭已赠送会员,可前往会员中心查看</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- Freight Section -->
|
|
|
<view class="section">
|
|
|
<view class="info-row">
|
|
|
@@ -430,7 +456,7 @@
|
|
|
|
|
|
<script>
|
|
|
import config from '@/config.js'
|
|
|
-import { getCouponList, getCouponCheckoutList, addressList, getProductRequiredFields, getMyMembership, productDetail, getFamilyPlatformBalance, exchangeCouponByCf, shopDiscountCalculate } from '../../../utils/api.js'
|
|
|
+import { getCouponList, getCouponCheckoutList, addressList, getProductRequiredFields, getMyMembership, getGiftMembershipProgress, productDetail, getFamilyPlatformBalance, exchangeCouponByCf, shopDiscountCalculate } from '../../../utils/api.js'
|
|
|
import { parseDate } from '@/utils/format.js'
|
|
|
import CountdownTag from '@/components/countdown-tag.vue'
|
|
|
|
|
|
@@ -473,11 +499,33 @@ export default {
|
|
|
showTimeSlotModal: false,
|
|
|
showServicePersonModal: false,
|
|
|
showOnlineSlotModal: false,
|
|
|
- giftItemIds: [],
|
|
|
- discountInfo: null
|
|
|
+ giftItemIds: [],
|
|
|
+ giftProgress: null, // 赠会员累计进度
|
|
|
+ discountInfo: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+ giftAccumulatedYuan() {
|
|
|
+ if (!this.giftProgress || !this.giftProgress.accumulatedAmount) return 0
|
|
|
+ return this.giftProgress.accumulatedAmount / 100
|
|
|
+ },
|
|
|
+ giftThresholdYuan() {
|
|
|
+ if (!this.giftProgress || !this.giftProgress.threshold) return 0
|
|
|
+ return this.giftProgress.threshold / 100
|
|
|
+ },
|
|
|
+ giftRemainingYuan() {
|
|
|
+ if (!this.giftProgress || !this.giftProgress.threshold || !this.giftProgress.accumulatedAmount) return 0
|
|
|
+ var remaining = this.giftProgress.threshold - this.giftProgress.accumulatedAmount
|
|
|
+ return remaining > 0 ? remaining / 100 : 0
|
|
|
+ },
|
|
|
+ giftProgressPercent() {
|
|
|
+ if (!this.giftProgress || !this.giftProgress.threshold || this.giftProgress.threshold <= 0) return 0
|
|
|
+ if (!this.giftProgress.accumulatedAmount) return 0
|
|
|
+ return Math.min(100, Math.round(this.giftProgress.accumulatedAmount / this.giftProgress.threshold * 100))
|
|
|
+ },
|
|
|
+ giftIsGranted() {
|
|
|
+ return this.giftProgress && this.giftProgress.granted === 1
|
|
|
+ },
|
|
|
giftLevelNames() {
|
|
|
var names = []
|
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
|
@@ -584,6 +632,7 @@ export default {
|
|
|
this.loadUserPoints()
|
|
|
this.loadDeliveryConfig()
|
|
|
this.loadDiscount()
|
|
|
+ this.loadGiftProgress()
|
|
|
this._onLoadFired = true
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -785,6 +834,14 @@ export default {
|
|
|
}
|
|
|
}).catch(function() {})
|
|
|
},
|
|
|
+ loadGiftProgress() {
|
|
|
+ var that = this
|
|
|
+ getGiftMembershipProgress().then(function(res) {
|
|
|
+ if (res.data && res.data.code === 200) {
|
|
|
+ that.giftProgress = res.data.data || null
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
goUpgrade() {
|
|
|
uni.navigateTo({ url: '/pages/membership/upgrade' })
|
|
|
},
|
|
|
@@ -1679,4 +1736,78 @@ showOnlineSlotPicker: function() {
|
|
|
color: #F97316;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
+/* Gift membership progress */
|
|
|
+.gift-progress-section {
|
|
|
+ background: #FFF7ED;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border: 2rpx solid #FED7AA;
|
|
|
+}
|
|
|
+.gift-progress-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.gift-progress-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+.gift-progress-title {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #C2410C;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.gift-progress-percent {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #F97316;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.gift-progress-bar-bg {
|
|
|
+ height: 20rpx;
|
|
|
+ background: #FED7AA;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+.gift-progress-bar-fill {
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #F97316, #FB923C);
|
|
|
+ border-radius: 10rpx;
|
|
|
+}
|
|
|
+.gift-progress-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.gift-progress-accumulated {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9A3412;
|
|
|
+}
|
|
|
+.gift-progress-remaining {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #C2410C;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.gift-progress-level {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #F97316;
|
|
|
+}
|
|
|
+.gift-granted-section {
|
|
|
+ background: #F0FDF4;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border: 2rpx solid #BBF7D0;
|
|
|
+}
|
|
|
+.gift-granted-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.gift-granted-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+}
|
|
|
+.gift-granted-text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #15803D;
|
|
|
+}
|
|
|
</style>
|