zhibo/pages_shopping/shopping/myCoupon.vue

<template>
  <view ref="container">
    <div class="coupon-list" v-if="couponsList.length > 0">
      <div class="item acea-row row-center-wrapper"  v-for="(item, index) in couponsList" :key="index">
        <div class="money" >
          <image v-if="item.status==0" class="img" src="../../static/images/coupon1.png" mode="widthFix"></image>
		  <image v-if="item.status!=0" class="img" src="../../static/images/coupon2.png" mode="widthFix"></image>
		  <div style="z-index: 999;">
            ￥<span class="num">{{ item.couponPrice }}</span>
          </div>
          <div class="pic-num"  >满{{ item.useMinPrice }}元可用</div>
        </div>
        <div class="text">
          <div class="condition line1">
            {{ item.couponTitle }}
          </div>
          <div class="data acea-row row-between-wrapper">
            <div >{{ item.limitTime }}到期</div>
			<div class="bnt gray" v-if="item.status==1" >已使用</div>
			<div class="bnt gray" v-if="item.status==-1" >已过期</div>
			<div class="bnt bg-color-red" v-if="item.status==0" >可使用</div>
          </div>
        </div>
      </div>
    </div>
	<view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
		<image src="/static/images/no_data.png" mode="aspectFit"></image>
		<view class="empty-title">暂无数据</view>
	</view>
     
  </view>
</template>
<script>
import { getMyCouponList } from '@/api/coupon'
 
export default {
  name: 'UserCoupon',
 
  props: {},
  data: function() {
    return {
      couponsList: [],
      loading: false,
    }
  },
  watch: {
    
  },
  mounted: function() {
    this.getUseCoupons()
  },
  onShow() {
  	
  },
  methods: {
    getUseCoupons: function() {
      let that = this;
	  var data={};
      getMyCouponList(data).then(res => {
        that.couponsList = res.data
      })
    },
  },
}
</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>