cunzaicourseMall_user_app/pages_shopping/shopping/myCoupon.vue

<template>
  <view ref="container">
	  <view>
		   <u-tabs :list="listCoupon" @click="selcoupon" lineColor='#ff0000'></u-tabs>
	  </view>
    <view class="coupon-list" v-if="couponsList.length > 0">
      <view class="item acea-row row-center-wrapper"  v-for="(item, index) in couponsList" :key="index">
        <view class="money" >
          <image v-if="item.status==0" class="img" src="https://bjczwh.oss-cn-beijing.aliyuncs.com/app/shop/images/coupon1.png" mode="widthFix"></image>
		  <image v-if="item.status!=0" class="img" src="https://bjczwh.oss-cn-beijing.aliyuncs.com/app/shop/images/coupon2.png" mode="widthFix"></image>
		  <view style="z-index: 999;">
            ￥<text class="num">{{ item.couponPrice }}</text>
          </view>
          <view class="pic-num"  >满{{ item.useMinPrice }}元可用</view>
        </view>
        <view class="text">
          <view class="condition line1 justify-between align-center">
			  <view>{{ item.couponTitle }}</view>
			  <view class="base-color-red bor-red h50 lh50 plr20 radius40 fs24"
			   v-if="tabsact==3&&item.status==0"  @click="refund(item,index)">可退款</view>
			 <view class="base-color-red bor-red h50 lh50 plr20 radius40 fs24"
			   v-if="tabsact==3&&item.status==4">退款中</view>
          </view>
          <view class="data acea-row row-between-wrapper">
            <view v-if="item.limitTime!=null">{{ item.limitTime }}到期</view>
			<view v-else>永久使用期限</view>
			<view class="bnt gray" v-if="item.status==1" >已使用</view>
			<view class="bnt gray" v-if="item.status==-1" >已过期</view>
			<view class="bnt bg-color-red" v-if="item.status==0">可使用</view>
			
          </view>
        </view>
		
      </view>
    </view>
	<view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
		<image src="https://bjczwh.oss-cn-beijing.aliyuncs.com/app/shop/images/no_data.png" mode="aspectFit"></image>
		<view class="empty-title">暂无数据</view>
	</view>
     <view>
     	<u-modal :show="showRefund" title="退款" content='确认是否退款立减金' 
		:showCancelButton='true' @cancel='showRefund=false' @confirm='confirmRefund()'></u-modal>
     </view>
  </view>
</template>
<script>
import { getMyCouponList,refundCashCoupon } from '@/api/coupon'
 
export default {
  name: 'UserCoupon',
 
  props: {},
  data: function() {
    return {
      couponsList: [],
	  listCoupon:[
		  {
			  name:'优惠卷',
			  value:0
		  },
		  {
			  name:'立减金',
			  value:3
		  }
	  ],
	  tabsact:0,
	  showRefund:false,
	  refundId:null,
	  delIndex:null
    }
  },
  watch: {
    
  },
  onLoad(option) {
	  if(option.tabsact){
		  this.tabsact=option.tabsact
	  }
	this.getUseCoupons()
  },
  mounted() {
  },
  methods: {
	  refund(item,index){
		  this.refundId=item
		  this.showRefund=true
		  this.delIndex=index
	  },
	  confirmRefund(){
		  const user=JSON.parse(uni.getStorageSync('userInfo'))
		  const data={
			  couponId:this.refundId.couponId,
			  id:this.refundId.id,
			  userId:user.userId,
			  couponType:this.tabsact
		  }
		  refundCashCoupon(data).then(res=>{
			  if(res.code==200){
				  uni.showToast({
				  	icon:'success',
				  	title: res.msg,
				  });
				  this.showRefund=false
				  this.couponsList.splice(this.delIndex,1);
				  console.log(this.couponsList)
			  }else{
				  uni.showToast({
				  	icon:'none',
				  	title: res.msg,
				  });
			  }
		  })
	  },
	  selcoupon(e){
		  this.tabsact=e.value
		  this.getUseCoupons()
		  console.log(e)
	  },
    getUseCoupons(){
	  var data={
		  couponType:this.tabsact,
	  }
      getMyCouponList(data).then(res => {
		  if(res.code==200){
			  this.couponsList = res.data
		  }else{
			  uni.showToast({
			  	icon:'none',
			  	title: res.msg,
			  });
		  }
      })
    },
  },
}
</script>
<style lang="less" scoped>
	.container {
	  height: 100%;
	}
	/*优惠券列表公共*/
	.coupon-list {
	  padding: 0 0.3 * 100rpx;
	  margin-top: 0.25 * 100rpx;
	  box-sizing: border-box;
	}
	
	.coupon-list .item {
	  width: 100%;
	  height: 1.7 * 100rpx;
	  margin-bottom: 0.16 * 100rpx;
	}
	
	.coupon-list .item .money {
	  background-size: 100% 100%;
	  width: 2.4 * 100rpx;
	  height: 100%;
	  color: #fff;
	  font-size: 0.36 * 100rpx;
	  font-weight: bold;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  
	}
	.coupon-list .item .money .img{
	  position: absolute;
	  width: 2.4 * 100rpx;
	  height: 100%;
	  color: #fff;
	  
	}
	
	.coupon-list .item .money .num {
	  font-size: 0.6 * 100rpx;
	}
	.coupon-list .item .money .pic-num {
	  font-size: 20rpx;
	  z-index: 99;
	}

	
	.coupon-list .item .text {
	  width: 4.5 * 100rpx;
	  padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
	  background-color: #fff;
	  box-sizing: border-box;
	}
	
	.coupon-list .item .text .condition {
	  font-size: 0.3 * 100rpx;
	  color: #282828;
	  height: 0.93 * 100rpx;
	  line-height: 0.93 * 100rpx;
	  border-bottom: 1px solid #f0f0f0;
	}
	
	.coupon-list .item .text .data {
	  font-size: 0.2 * 100rpx;
	  color: #999;
	  height: 0.76 * 100rpx;
	}
	
	.coupon-list .item .text .data .bnt {
	  width: 1.36 * 100rpx;
	  height: 0.44 * 100rpx;
	  border-radius: 0.22 * 100rpx;
	  font-size: 0.22 * 100rpx;
	  color: #fff;
	  text-align: center;
	  line-height: 0.44 * 100rpx;
	  background-color: red;
	}
	
	.coupon-list .item .text .data .bnt.gray {
	  background-color: #ccc;
	}
</style>