zsw-farm-bxg/pages/user/coupon/UserCoupon/index.vue

<template>
  <view ref="container">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">我的券包</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="content-box" :style="'height:calc(100vh - '+CustomBar+'px);'">
			<view class="content">
				<view class="nav acea-row row-around" :style="'top:calc('+CustomBar+'px+2px)'">
					<view class="item" @click="setType(0)">
						<view :class="'title ' + (navType == 0? 'active' : '')">待领取</view>
					</view>
					<view class="item" @click="setType(1)">
						<view :class="'title ' + (navType === 1 ? 'active' : '')">已领取</view>
					</view>
					<view class="item" @click="setType(2)">
						<view :class="'title acea-row row-middle ' + (navType === 2 ? 'active' : '')">已失效</view>
					</view>
				</view>
				
				<view class="coupon-list" v-if="couponsList.length > 0">
				  <view class="item acea-row row-between" v-cloak v-for="(item, index) in couponsList" :key="index">
						<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
						<view class="coupon-left">
							<view class="left-bg acea-row" :style="item._msg == '已过期'?'background: linear-gradient(135deg, #D4D4D4 0%, #B4B4B4 100%);':''">
								<view class="radiusLT"></view>
								<view class="radiusRT"></view>
								<view class="radiusLB"></view>
								<view class="radiusRB"></view>
							</view>
							<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
							<view class="text-box">
								<view class="money">¥{{ item.couponPrice }}</view>
								<!-- <view class="money">7<text>折</text></view> -->
								<view class="line"></view>
								<view class="tip acea-row row-between">
									<view class="">仅限定品牌可用</view>
									<view v-if="item.endTime === 0">不限时</view>
									<view v-else>{{ item.createTime }}-{{ item.endTime }}</view>
								</view>
							</view>
						</view>
						<view class="coupon-right acea-row row-center-column">
							<image v-if="item._msg == '已过期'" class="tag" src="../../../../static/images/failure-icon.png" mode=""></image>
							<image v-else class="tag" src="../../../../static/images/gotCoupon-icon.png" mode=""></image>
							<view :class="'type '+(item._msg == '已过期'?'col-fail':'')">{{'满减券' || '折扣券'}}</view>
							<view :class="'tip '+(item._msg == '已过期'?'col-fail':'')">满{{ item.useMinPrice }}可用</view>
							<view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view>
							<view v-else class="btn">立刻领取</view>
							<!-- <view class="btn btn-white">去使用</view> -->
						</view>
				    <!-- <div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
				      <div>
				        ￥<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 v-if="item.endTime === 0">不限时</div>
				        <div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
				        <div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
				        <div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
				      </div>
				    </div> -->
				  </view>
				</view>
				
				<!--暂无优惠券-->
				<view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
				  <view class="noPictrue">
				    <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
				  </view>
				</view>
				
			</view>
		</view>
    
  </view>
</template>
<script>
import { getCouponsUser } from '@/api/user'
import DataFormatT from '@/components/DataFormatT'

const NAME = 'UserCoupon'

export default {
  name: 'UserCoupon',
  components: {
    DataFormatT,
  },
  props: {},
  data: function() {
    return {
			CustomBar: this.CustomBar,
			navType: 0,
      couponsList: [],
      loading: false,
    }
  },
  watch: {
    $yroute: function(n) {
      var that = this
      if (n.name === NAME) {
        that.getUseCoupons()
      }
    },
  },
  mounted: function() {
    this.getUseCoupons()
  },
  methods: {
		setType(i) {
			if(this.navType == i) return;
			this.navType = i;
		},
    getUseCoupons: function() {
      let that = this,
        type = 0
      getCouponsUser(type).then(res => {
        that.couponsList = res.data
        that.loading = true
      })
    },
  },
}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.content-box {
		padding-top: 4rpx;
		width: 100vw;
		position: relative;
		.content {
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			.nav {
				width: 100vw;
				background: #FFFFFF;
				height: 88rpx;
				padding: 34rpx 52rpx 12rpx;
				position: fixed;
				left: 0;
				z-index: 5;
				border-radius: 28rpx 28rpx 0rpx 0rpx;
				.item {
					text-align: center;
					position: relative;
					.title {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #3A3A3C;
						line-height: 38rpx;
					}
					.active {
						color: #2DB5AE;
						font-weight: 600;
					}
					.title::after {
						display: block;
						content: '';
						width: 100%;
						height: 2rpx;
						background: #2DB5AE;
						position: absolute;
						bottom: 0;
						left: 0;
						opacity: 0;
						transform:scaleX(0);
						transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease;
					}
					.active::after {
						opacity: 1;
						transform: scaleX(1);
					}
				}
			}
			.coupon-list {
				padding-top: 98rpx;
			}
		}
	}
</style>