|  | @@ -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('领取成功')
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				})
 | 
	
		
			
				|  |  |  			}
 | 
	
		
			
				|  |  |  		}
 | 
	
		
			
				|  |  |  	};
 |