<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 20px;"> <div :key="index2" v-for="(items2,index2) in couponCope[index]" style="margin: 0px auto 10px;"> <div class="title" v-if="index2 === 0"> <span>{{ items2.coridcName }}</span> <span @click="handleAllCoupon(items2)">查看全部>></span> </div> <div class="coupon_box" v-if="index2 < 3"> <div class="pic"> <img :src=" 'https://shapp.mbcloud.com/' + items2.couponLogo" alt=""> </div> <div class="coupon_tips"> <span>{{items2.couponName}}</span> <span style="color: #a0a0a0;font-size: 14px;">{{items2.couponCode}}</span> <span style="color: #a0a0a0;font-size: 14px;">有效期至{{items2.endDate}}</span> </div> <div class="btn"> <van-button round :color="color" @click="handleClick(items2)">去使用</van-button> <van-button v-clipboard:copy="items2.couponCode" v-clipboard:success="onCopy" v-clipboard:error="onError" round :color="color">复制券码</van-button> </div> </div> <div class="tip" v-if="index2 < 3">{{ items2.remark == null ? '暂无备注' : items2.remark}}</div> </div> </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: [] } }, created() { this.init() }, methods: { // 复制券码 onCopy() { this.$toast.success({ className: 'toast', message:'复制成功', }); }, onError() { this.$toast.fail({ className: 'toast', message: '复制失败', }); }, init() { COUPON_API.getAllReceivedList({ usridc: this.$store.state.inforMation.usridc }) .then(res => { if (res.data.code == 200) { const data = res.data.data // for (const key of data) { // this.couponCope.push(data[key]) // } for (const key in data) { const element = data[key] this.couponCope.push(element) } console.log(this.couponCope, 'this.couponCope') // this.couponCope = res.data.data } else { this.$toast.fail({ className: 'toast', message: res.data.msg, }); } }) }, onClickLeft() { this.$router.back(-1) }, handleAllCoupon(items) { localStorage.setItem('coridc', items.coridc) this.$router.push('/allCoupon') }, handleClick(item) { console.log(item, item) const { couponLink, coridcName } = item console.log(item, 'link') if (couponLink.startsWith('https') || couponLink.startsWith('http')) { this.$router.push({ path: '/jump', query: { couponLink, enterpriseName: coridcName }}) } 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; margin-bottom: 10px; font-size: 12px; 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; } </style>