<template>
|
<view class="container">
|
<!-- 悦养豆余额 -->
|
<view class="points-section">
|
<view class="points-left">
|
<text class="label">我的悦养豆</text>
|
<view class="num">{{ !careBean&&careBean!=0?'-':toThousands(careBean) }}
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/carebean_0.png"></image>
|
</view>
|
</view>
|
<view class="points-right">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_jifen.png" class="lottery-btn" mode="widthFix"
|
@click="goLottery"></image>
|
</view>
|
<view class="detail-btn" @click="goDetail">
|
<text>消耗明细</text>
|
</view>
|
</view>
|
|
<!-- 优惠券兑换区 -->
|
<view class="coupon-area">
|
<view class="coupon-card" v-for="(item, index) in couponList" :key="index">
|
<image class="coupon-bg" src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_coupon_bg.png" mode="widthFix"></image>
|
<view class="coupon-tag">{{item.label||'-'}}</view>
|
<view class="coupon-title">{{ item.name||'-' }}</view>
|
<view class="coupon-desc">需消耗{{ item.careNumber || 0 }}悦养豆</view>
|
<button class="exchange-btn" @tap="exchangeCoupon(index)">立即兑换</button>
|
<view class="coupon-tip">可用<span>{{ item.usableCount||0 }}</span>张</view>
|
</view>
|
</view>
|
|
<view class="goods-section">
|
<!-- 兑换区选项卡-->
|
<view class="tab-bar">
|
<view class="tab-item" v-for="(item, index) in couponProductTabs" :class="{active:activeTab==index}" @tap="switchTab(item,index)">{{item.name}}</view>
|
<!-- <view class="tab-item" :class="{active:activeTab=='5'}" @tap="switchTab('5')">5折兑换区</view>
|
<view class="tab-item" :class="{active:activeTab=='85'}" @tap="switchTab('85')">85折兑换区</view> -->
|
</view>
|
|
<!-- 商品列表 -->
|
<scroll-view class="goods-list" scroll-y>
|
<view class="list" v-if="goodList.length > 0">
|
<view>
|
<block v-for="(gitem, gindex) in goodList" :key="gindex">
|
<GoodBlock v-if="gindex%2==0" :zone-id="zoneInfo.id" :share-switch="zoneInfo.shareSwitch" :zone-type="zoneInfo.zoneType" :pageName="'活动专区'"
|
:moduleName="'活动专区'" :goodsInfo="gitem" :careBeanRate="careBeanRate" :size="'big'"></GoodBlock>
|
</block>
|
</view>
|
<view>
|
<block v-for="(gitem, gindex) in goodList" :key="gindex">
|
<GoodBlock v-if="gindex%2==1" :zone-id="zoneInfo.id" :share-switch="zoneInfo.shareSwitch" :zone-type="zoneInfo.zoneType" :pageName="'活动专区'"
|
:moduleName="'活动专区'" :goodsInfo="gitem" :careBeanRate="careBeanRate" :size="'big'"></GoodBlock>
|
</block>
|
</view>
|
</view>
|
<!-- <view v-if="loading" class="loadingTips">加载中...</view>
|
<view v-else-if="goodList.length <= 0" class="loadingTips">暂无数据</view>
|
<view v-else-if="loadend" class="loadingTips">已全部加载</view>
|
<view v-else class="loadingTips">上拉加载更多</view> -->
|
<!-- </scroll-view> -->
|
<view style="height: 4vh;"></view>
|
</scroll-view>
|
</view>
|
|
<view class="mask" v-if="showConfirm||showSuccess" @click="handleHide"></view>
|
<view class="confirm-section" v-if="showConfirm">
|
<image class="confirm-bg" src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_confirm.png" mode="widthFix"></image>
|
<view class="confirm-bottom">
|
<button class="cancel-btn" @tap="handleCancel">取消</button>
|
<button class="submit-btn" @tap="handleSubmit" :disabled="isSubmitting">确定</button>
|
</view>
|
</view>
|
|
<view class="success-section" v-if="showSuccess">
|
<image class="confirm-bg" src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_success.png" mode="widthFix"></image>
|
<view class="confirm-bottom">
|
<button class="submit-btn" @tap="handleUse">去使用</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getProductslist,
|
couponExchange
|
} from '../../api/store.js'
|
import GoodBlock from "@/pages/goods_block/index.vue";
|
import {
|
mapGetters
|
} from "vuex";
|
export default {
|
props: ['zoneInfo', 'careBeanRate', 'relationKey'],
|
components: {
|
GoodBlock
|
},
|
computed: mapGetters(['userInfo']),
|
data() {
|
return {
|
careBean: null,
|
couponList: [{
|
name: "5折券",
|
cost: 8000,
|
available: 1
|
},
|
{
|
name: "85折券",
|
cost: 2000,
|
available: 1
|
},
|
// {
|
// name: "臻享会员券",
|
// cost: 4000,
|
// available: 1
|
// }
|
],
|
activeTab: "5",
|
homeBanner: {},
|
showConfirm: false,
|
showSuccess: false,
|
couponTab: '',
|
couponProductTabs: [],
|
goodList: [],
|
isSubmitting: false, // 新增：提交中锁
|
};
|
},
|
onLoad() {
|
// 动态设置页面标题
|
uni.setNavigationBarTitle({
|
title: "悦养豆兑换专区"
|
});
|
this.getUserBean();
|
},
|
onShow() {},
|
methods: {
|
goDetail() {
|
uni.navigateTo({
|
url: '/pages/consumption/index?zoneId=' + this.zoneInfo.id
|
})
|
},
|
goLottery() {
|
this.$emit('goLottery')
|
},
|
resetCareBean(bean) {
|
this.careBean = bean
|
},
|
resetCoupons(couponList) {
|
let that = this
|
this.couponList = couponList
|
try {
|
const couponProductTabs = JSON.parse(couponList[0].couponProductTabs)
|
that.$set(that, 'couponProductTabs', couponProductTabs)
|
const zoneTab = uni.getStorageSync('zoneTab')
|
let index = 0
|
if (that.relationKey) {
|
index = couponProductTabs.findIndex(item => item.relationKey == that.relationKey)
|
} else if (zoneTab) {
|
index = couponProductTabs.findIndex(item => item.relationKey == zoneTab)
|
if (index == -1) {
|
index = zoneTab
|
}
|
} else if(that.userInfo.level<3 && couponProductTabs[1]){
|
// 非臻享会员
|
index=1
|
}
|
if (index == -1) {
|
index = 0
|
}
|
that.switchTab(couponProductTabs[index], index)
|
} catch (e) {
|
that.couponProductTabs = []
|
}
|
|
},
|
exchangeCoupon(index) {
|
let that = this
|
if (that.careBean < that.couponList[index].careNumber) {
|
uni.showToast({
|
title: '悦养豆不足',
|
icon: 'none'
|
})
|
return
|
}
|
let tabIndex = 0
|
if (!that.couponList[index].relationKey) {
|
tabIndex = 0
|
} else {
|
tabIndex = this.couponProductTabs.findIndex(item => item.relationKey == that.couponList[index].relationKey)
|
}
|
if (tabIndex == -1) {
|
tabIndex = 0
|
}
|
this.couponTab = {
|
item: this.couponList[index],
|
tab: this.couponProductTabs[tabIndex],
|
index: index,
|
tabIndex
|
}
|
this.showConfirm = true
|
},
|
switchTab(tab, index) {
|
if (!tab) return
|
let that = this
|
this.activeTab = index;
|
uni.setStorageSync('zoneTab', tab.relationKey || index)
|
// 这里可以根据tab切换不同商品列表
|
const productIds = tab.productIds
|
getProductslist({
|
ids: productIds,page:1,limit:100,zoneId:that.zoneInfo.id
|
}).then(res => {
|
if (res.data) {
|
that.goodList = res.data.list
|
}
|
})
|
},
|
handleHide() {
|
this.showConfirm = false
|
this.showSuccess = false
|
},
|
handleCancel() {
|
this.showConfirm = false
|
},
|
handleSubmit() {
|
let that = this
|
if (this.isSubmitting) return;
|
this.isSubmitting = true;
|
couponExchange({
|
couponId: this.couponTab.item.id,
|
zoneId: that.zoneInfo.id
|
}).then(res => {
|
if (res.code == 200) {
|
that.showSuccess = true
|
that.showConfirm = false
|
that.couponList[this.couponTab.index].usableCount = that.couponList[this.couponTab.index].usableCount + 1
|
that.careBean -= that.couponList[this.couponTab.index].careNumber
|
} else {
|
uni.showToast({
|
title: res.message,
|
icon: "none"
|
});
|
}
|
}).finally(() => {
|
// ✅ 无论成功失败，都解锁
|
that.isSubmitting = false;
|
});
|
},
|
handleUse() {
|
this.showSuccess = false
|
this.switchTab(this.couponTab.tab, this.couponTab.tabIndex)
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
min-height: 100vh;
|
padding-bottom: 20rpx;
|
width: 100vw;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.nav-bar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20rpx 30rpx;
|
}
|
|
.back-btn,
|
.nav-right {
|
width: 100rpx;
|
}
|
|
.title {
|
font-size: 34rpx;
|
font-weight: bold;
|
text-align: center;
|
}
|
|
.circle-btn {
|
width: 80rpx;
|
height: 60rpx;
|
border-radius: 30rpx;
|
border: 1px solid #ccc;
|
margin-left: 10rpx;
|
}
|
|
.points-section {
|
display: flex;
|
justify-content: space-between;
|
padding: 30rpx 30rpx 10rpx 30rpx;
|
align-items: center;
|
}
|
|
.points-right {
|
flex: 1;
|
text-align: right;
|
padding-right: 30rpx;
|
}
|
|
.points-left .label {
|
font-size: 32rpx;
|
display: block;
|
}
|
|
.points-left .num {
|
font-size: 50rpx;
|
font-weight: bold;
|
margin-top: 10rpx;
|
position: relative;
|
|
image {
|
width: 41rpx;
|
height: 38rpx;
|
}
|
}
|
|
.lottery-btn {
|
width: 213rpx;
|
height: 57rpx;
|
}
|
|
.detail-btn {
|
border: 2rpx solid #fff;
|
/* border-radius: 10rpx; */
|
border-top-left-radius: 20rpx;
|
border-bottom-left-radius: 20rpx;
|
padding: 10rpx;
|
background-color: #daf2b2;
|
color: #1e984f;
|
width: 50rpx;
|
position: fixed;
|
top: 200rpx;
|
right: 0rpx;
|
line-height: 1rem;
|
}
|
|
.coupon-area {
|
display: flex;
|
justify-content: space-around;
|
margin: 0 20rpx 20rpx 20rpx;
|
border-radius: 20rpx;
|
padding: 30rpx 10rpx;
|
// background: linear-gradient(to bottom,#ffe949,#ffffff);
|
background: linear-gradient(to bottom, #ffe949 0%, rgba(255, 255, 255, 0) 150rpx);
|
}
|
|
.coupon-card {
|
width: 30%;
|
text-align: center;
|
position: relative;
|
padding: 10rpx 0 10rpx 0;
|
}
|
|
.coupon-bg {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
z-index: 0;
|
left: 0;
|
top: 0;
|
}
|
.coupon-tag{
|
position: relative;
|
z-index: 1;
|
font-size: 18rpx;
|
color: #004499;
|
height: 26rpx;
|
}
|
|
.coupon-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #004499;
|
position: relative;
|
z-index: 1;
|
}
|
|
.coupon-desc {
|
font-size: 20rpx;
|
color: #666;
|
// margin: 10rpx 20rpx;
|
position: relative;
|
z-index: 1;
|
}
|
|
.exchange-btn {
|
color: #fff;
|
border-radius: 26rpx;
|
border: none;
|
padding: 6rpx 20rpx;
|
margin: 30rpx 0 0;
|
position: relative;
|
z-index: 1;
|
background-color: #016dcc;
|
font-size: 24rpx;
|
display: inline-block;
|
}
|
|
.coupon-tip {
|
position: relative;
|
z-index: 1;
|
font-size: 24rpx;
|
|
span {
|
color: #016dcc;
|
}
|
}
|
|
.tab-bar {
|
display: flex;
|
margin: 20rpx;
|
border-radius: 52rpx;
|
background-color: #FFFFFF;
|
color: #8c8c8c;
|
}
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 20rpx;
|
font-size: 32rpx;
|
}
|
|
.tab-item.active {
|
color: #fff;
|
border-radius: 20rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_tab_active.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.goods-section {
|
margin: 10rpx 20rpx 20rpx 20rpx;
|
border-radius: 20rpx;
|
background: linear-gradient(to bottom, #ffe949 0%, rgba(255, 255, 255, 0) 150rpx);
|
box-sizing: border-box;
|
padding-top: 10rpx;
|
}
|
|
.goods-list {
|
|
// display: grid;
|
// grid-template-columns: 1fr 1fr;
|
// gap: 20rpx;
|
// padding: 20rpx;
|
.list {
|
width: 690rpx;
|
margin: 0 auto;
|
display: flex;
|
flex-wrap: wrap;
|
padding-top: 15rpx;
|
justify-content: space-between;
|
}
|
}
|
|
.mask {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(#000000, 0.7);
|
z-index: 1;
|
}
|
|
.confirm-section {
|
position: absolute;
|
width: 556rpx;
|
height: 429rpx;
|
top: 400rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 2;
|
|
.confirm-bg {
|
width: 100%;
|
height: 100%;
|
}
|
|
.confirm-bottom {
|
position: absolute;
|
bottom: 50rpx;
|
display: flex;
|
justify-content: space-evenly;
|
width: 100%;
|
}
|
}
|
|
.success-section {
|
position: absolute;
|
width: 570rpx;
|
height: 538rpx;
|
top: 300rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 2;
|
|
.confirm-bg {
|
width: 100%;
|
height: 100%;
|
}
|
|
.confirm-bottom {
|
position: absolute;
|
bottom: 50rpx;
|
display: flex;
|
justify-content: space-evenly;
|
width: 100%;
|
}
|
}
|
|
.cancel-btn {
|
background-color: #04c763;
|
color: #fff;
|
padding: 20rpx 50rpx;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
}
|
|
.submit-btn {
|
background-color: #016dcc;
|
color: #fff;
|
padding: 20rpx 50rpx;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
}
|
</style>
|
