allCoupon.vue

<template>
	<div class="trade_area">
		<uni-top-status></uni-top-status>
		<van-nav-bar title="我的券夹" class="header" left-arrow :border="false" @click-left="onClickLeft" />
    <div style="margin: 13vh 10px;">
			<div :key="index" v-for="(items,index) in couponCope" style="margin: 10px auto;">
				<div class="coupon_box">
					<div class="pic">
						<img :src=" 'https://shapp.mbcloud.com/' + items.couponLogo" alt="">
					</div>
					<div class="coupon_tips">
						<span>{{items.couponName}}</span>
						<span style="color: #a0a0a0;font-size: 14px;">{{items.couponCode}}</span>
						<span style="color: #a0a0a0;font-size: 14px;">有效期至{{items.endDate}}</span>
					</div>
					<div class="btn">
						<van-button round :color="color" @click="handleClick(items)" :disabled="items.text == '已失效'">去使用</van-button>
						<van-button v-clipboard:copy="items.couponCode" v-clipboard:success="onCopy" v-clipboard:error="onError" round
							:color="color" :disabled="items.text == '已失效'">复制券码</van-button>
					</div>
				</div>
				<div class="tip">{{ items.remark == null ? '暂无备注' :  items.remark }}</div>
			</div>
      <div class="handleMore" @click="handleMore">查看更多已失效优惠券</div>
    </div>
	</div>
</template>

<script>
	import uniTopStatus from '@/components/topStatus.vue'
	import COUPON from '@/api/coupon.js'
	let COUPON_API = new COUPON()
	export default {
		name: 'trade_area',
		components: {
			uniTopStatus
		},
		data() {
			return {
				color: 'linear-gradient(to right,#5B29D6,#0B25DF)',
				couponCope: [
					{
						couponLogo: '',
						couponCode: '12366'
					}
				],
				flag: false,
				coridc: ''
			}
		},
		created() {
			this.coridc = localStorage.getItem('coridc')
			this.init()
		},
		methods: {
			// 复制券码
			onCopy() {
				this.$toast.success({
					className: 'toast',
					message:'复制成功',
				});
			},
			onError() {
				this.$toast.fail({
					className: 'toast',
					message: '复制失败',
				});
			},
			init() {
        COUPON_API.getAllReceivedListSE({
            coridc: this.coridc,
            usridc: this.$store.state.inforMation.usridc
          })
          .then(res => {
            if (res.data.code == 200) {
              this.couponCope = res.data.data
            } else {
              this.$toast.fail({
                className: 'toast',
                message: res.data.msg,
              });
            }
          })
			},
			onClickLeft() {
				this.$router.back(-1)
      },
      handleMore() {
				if (this.flag) {
					this.$toast.fail({
						className: 'toast',
						message: '没有更多失效优惠券',
					});
				} else {
					COUPON_API.getOverdueList({
            coridc: this.coridc,
            usridc: this.$store.state.inforMation.usridc
					})
					.then(res => {
						if (res.data.code == 200) {
							this.flag = true
							const { data } = res.data
							const arr = []
							data.map(item => {
								item.text = '已失效'
								arr.push(item)
							})
							this.couponCope.push(...arr)
							console.log(this.couponCope, 'this.couponCope')
            } else {
              this.$toast.fail({
                className: 'toast',
                message: res.data.msg,
              });
            }
					})
				}
      },
      handleClick(item) {
				const { couponLink, enterpriseName } = item
				console.log(item, 'link')
				if (couponLink.startsWith('https') || couponLink.startsWith('http')) {
					this.$router.push({ path: '/jump', query: { couponLink, enterpriseName }})
				} else {
					this.$toast({
						className: 'toast',
						message: '暂无兑换链接,请前往官网兑换'
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.coupon_box {
		display: flex;
		flex-direction: row;
		width: 94vw;
		height: 100px;
		// background-color: #f8f8f8;
		border: 1px solid #988ECD;

		.pic {
			width: 30%;
			height: 100px;

			img {
				margin-top: 5px;
				margin-left: 5%;
				height: 90px;
				width: 90%;
			}
		}

		.coupon_tips {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 40%;
			margin-left: 10px;
			padding: 10px 0;
			font-size: 18px;
		}

		.btn {
			width: 30%;
			.van-button {
				width: 80%;
				margin: 10px 0 10px 10px;
				border-radius: 40px;
				height: 30px;
				letter-spacing: 2px;
				font-size: 12px;
			}
			.van-button--normal {
				padding: 0;
			}
		}
	}
	.title {
		height: 20px;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 1px;
		span:first-child {
			font-weight: 700;
			font-size: 16px;
		}
	}
	.tip {
		width: 94vw;
		height: 30px;
		border: 1px solid #988ECD;
		line-height: 30px;
		font-size: 12px;
	}
	.header {
		height: 45px;
		width: 100vw;
		line-height: 45px;
		text-align: center;
		background-color: #988ECD;
		color: white;
		position: fixed;
		top: 6vh;
		z-index: 3000;
	}
  .handleMore {
    text-align: center;
    font-size: 12px;
  }
</style>