|
@@ -1,60 +1,130 @@
|
|
|
<template>
|
|
|
- <ax-body title="">
|
|
|
- <view class="tabs-body">
|
|
|
- <view class="tabs-box">
|
|
|
- <view class="item-tabs" :class="{active:currentIndex===item.id}" v-for="item in tabsList" :key="item.id" @click="handleTabClick(item)">{{item.text}}({{item.id}})</view>
|
|
|
- </view>
|
|
|
- <view style="height: 100rpx;"></view>
|
|
|
- <view class="list-body">
|
|
|
- <view class="coupons-list-box" :style="{opacity:`${currentIndex===3?'0.5':''}`}" v-for="item in 3">
|
|
|
- <image class="coupons-bg-img" src="../../static/img/coupons-new.png" mode=""></image>
|
|
|
- <view class="coupons-content-box">
|
|
|
- <view class="coupons-left">
|
|
|
- <view class="left-price">10<text>元</text></view>
|
|
|
- <view class="left-rules">满100元可用</view>
|
|
|
- </view>
|
|
|
- <view class="coupons-center">
|
|
|
- <view class="coupons-title">优惠券名称优惠券名称</view>
|
|
|
- <view class="coupons-valid">有效期:领取后60天</view>
|
|
|
- <view class="coupons-range">平台所有充电桩可用</view>
|
|
|
- </view>
|
|
|
- <view class="coupons-right">
|
|
|
- <view class="coupons-dayrules" v-if="currentIndex===0">每日限领一次</view>
|
|
|
- <view class="coupons-getbtn" v-if="currentIndex===0">立即领取</view>
|
|
|
- <view class="coupons-getbtn" v-if="currentIndex===2">查看订单</view>
|
|
|
- </view>
|
|
|
+ <view class="tabs-body">
|
|
|
+ <view class="tabs-box">
|
|
|
+ <view class="item-tabs" :class="{active:currentIndex===item.id}" v-for="item in tabsList" :key="item.id"
|
|
|
+ @click="handleTabClick(item)">{{item.text}}({{item.count||0}})</view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 100rpx;"></view>
|
|
|
+ <view class="list-body">
|
|
|
+ <view class="coupons-list-box" :style="{opacity:`${currentIndex===3?'0.5':''}`}"
|
|
|
+ v-for="item in toBeclaimedCoupons" :key="item.id">
|
|
|
+ <image class="coupons-bg-img" :src="coupons_card" mode=""></image>
|
|
|
+ <view class="coupons-content-box">
|
|
|
+ <view class="coupons-left">
|
|
|
+ <view class="left-price">{{item.discountPrice}}<text>元</text></view>
|
|
|
+ <view class="left-rules">满{{item.usePrice}}元可用</view>
|
|
|
+ </view>
|
|
|
+ <view class="coupons-center">
|
|
|
+ <view class="coupons-title">{{item.name}}</view>
|
|
|
+ <view class="coupons-valid" v-if="currentIndex==0">有效期:领取后{{item.failureTime}}天</view>
|
|
|
+ <view class="coupons-valid" v-else>{{item.validEndTime}}到期</view>
|
|
|
+ <view class="coupons-range">平台所有充电桩可用</view>
|
|
|
</view>
|
|
|
- <view class="ribbon" :style="{backgroundColor:`${currentIndex===3?'#e8e8e8':''}`,color:`${currentIndex===3?'#8c8c8c':''}`}">{{tabsList[currentIndex].text}}</view>
|
|
|
+ <view class="coupons-right">
|
|
|
+ <view class="coupons-dayrules" v-if="currentIndex===0">{{item.description}}</view>
|
|
|
+ <view class="coupons-getbtn" v-if="currentIndex===0" @click="get_coupons(item)">立即领取</view>
|
|
|
+ <view class="coupons-getbtn" v-if="currentIndex===2">查看订单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ribbon"
|
|
|
+ :style="{backgroundColor:`${currentIndex===3?'#e8e8e8':''}`,color:`${currentIndex===3?'#8c8c8c':''}`}">
|
|
|
+ {{tabsList[currentIndex].text}}
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view style="height: 30rpx;"></view>
|
|
|
+ <view v-if="toBeclaimedCoupons.length<1" class="not-data">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </ax-body>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- currentIndex: 0 ,// 默认选中第一个选项卡
|
|
|
- tabsList:[{
|
|
|
- text:'待领取',
|
|
|
- id:0
|
|
|
- },{
|
|
|
- text:'待使用',
|
|
|
- id:1
|
|
|
- },{
|
|
|
- text:'已使用',
|
|
|
- id:2
|
|
|
- },{
|
|
|
- text:'已过期',
|
|
|
- id:3
|
|
|
- },]
|
|
|
+ coupons_card: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/bNfT8BQFvtcead404bdf22856fe1306af8fbb672a74c.png/1.png',
|
|
|
+ currentIndex: 0, // 默认选中第一个选项卡
|
|
|
+ tabsList: [{
|
|
|
+ text: '待领取',
|
|
|
+ id: 0
|
|
|
+ }, {
|
|
|
+ text: '待使用',
|
|
|
+ id: 1
|
|
|
+ }, {
|
|
|
+ text: '已使用',
|
|
|
+ id: 2
|
|
|
+ }, {
|
|
|
+ text: '已过期',
|
|
|
+ id: 3
|
|
|
+ }],
|
|
|
+ toBeclaimedCoupons: [],
|
|
|
+ totalStatistics:{},
|
|
|
+ form_submit: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status:1,
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ this.get_statistical()
|
|
|
+ },
|
|
|
+ onReachBottom(e) {
|
|
|
+ this.form_submit.pageNum++
|
|
|
+ this.get_TobeclaimedCoupons()
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.get_TobeclaimedCoupons()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- // 处理选项卡点击
|
|
|
+ //选项卡点击
|
|
|
handleTabClick(e) {
|
|
|
this.currentIndex = e.id;
|
|
|
+ this.form_submit.status=e.id
|
|
|
+ this.get_TobeclaimedCoupons()
|
|
|
+ },
|
|
|
+ get_TobeclaimedCoupons() {
|
|
|
+ if (this.currentIndex == 0) {
|
|
|
+ this.$api.base("post", "/couponApi/list-pending", {}, {}).then(res => {
|
|
|
+ this.toBeclaimedCoupons = res.list
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$api.base("post", "/couponApi/list-user",this.form_submit, {}).then(res => {
|
|
|
+ if(this.form_submit.pageNum==1){
|
|
|
+ this.toBeclaimedCoupons = res.rows
|
|
|
+ }else{
|
|
|
+ this.toBeclaimedCoupons=[...this.toBeclaimedCoupons,...res.rows]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ get_statistical(){
|
|
|
+ // 数据映射
|
|
|
+ const idToKeyMap = {
|
|
|
+ 0: 'list-pending',
|
|
|
+ 1: 'list-unused',
|
|
|
+ 2: 'list-used',
|
|
|
+ 3: 'list-overdue'
|
|
|
+ };
|
|
|
+ this.$api.base("post", "/couponApi/statistical", {}, {}).then(res => {
|
|
|
+ this.tabsList.forEach(tab => {
|
|
|
+ const key = idToKeyMap[tab.id];
|
|
|
+ tab.count = res.data[key] || 0;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ get_coupons(e){
|
|
|
+ this.$api.base("post", "/couponApi/receive", {templateId:e.id}, {}).then(res => {
|
|
|
+ if(res.code==0){
|
|
|
+ this.get_statistical()
|
|
|
+ this.get_TobeclaimedCoupons()
|
|
|
+ this.$app.popup.toast('领取成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
};
|