You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
9.5 KiB
370 lines
9.5 KiB
<template>
|
|
<!-- 我的优惠券 -->
|
|
<div class="mycoupon-wrapper maCoupon">
|
|
<div class="user-com-title">我的优惠券</div>
|
|
<div class="user-com-tabs">
|
|
<span
|
|
class="item"
|
|
:class="{ on: tabCur ==1 }"
|
|
@click="changeTabCur(1) "
|
|
>可使用优惠券（{{availableNum}}）</span>
|
|
<span
|
|
class="item"
|
|
:class="{ on: tabCur == 2 }"
|
|
@click="changeTabCur(2) "
|
|
>不可使用优惠券（{{expireList.length}}）</span>
|
|
</div>
|
|
<div class="main-section">
|
|
<!-- 可用优惠券 -->
|
|
<div class="main-ky" v-if="tabCur == 1">
|
|
<ul>
|
|
<li v-for="(item, index) in couponList" :key="index">
|
|
<div class="left">
|
|
<p v-if="item.type=='discount'">
|
|
{{item.discount}}
|
|
<span>折</span>
|
|
</p>
|
|
<p v-if="!(item.type=='discount')">
|
|
<span>¥</span>1.5
|
|
</p>
|
|
<span>满{{item.at_least}}可使用</span>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">
|
|
<div class="title">{{item.coupon_name}}</div>
|
|
<div class="btn" @click="goGoodCate">去使用</div>
|
|
</div>
|
|
<div class="time">有效期：{{ $dayjs(item.end_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- 分页 -->
|
|
<!-- <Page :padding="0" @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page> -->
|
|
</div>
|
|
<div class="main-bky" v-if="tabCur == 2">
|
|
<ul>
|
|
<li v-for="(item, index) in expireList" :key="index">
|
|
<div class="tops">
|
|
<div class="left">
|
|
<p>
|
|
<span>¥</span>200
|
|
</p>
|
|
<span>无使用门槛</span>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">
|
|
<div class="title">元旦满减券</div>
|
|
</div>
|
|
<div class="time">有效期：2022.12.12-202212.22</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottm">·这里是不可用的原因</div>
|
|
</li>
|
|
</ul>
|
|
<!-- 分页 -->
|
|
<!-- <Page :padding="0" @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "myCoupon",
|
|
auth: "guest",
|
|
data() {
|
|
return {
|
|
total: 3,
|
|
query: {
|
|
page: 1,
|
|
limit: 10
|
|
},
|
|
availableNum: 0,
|
|
tabCur: 1,
|
|
list: [1],
|
|
couponList: [],
|
|
expireList: []
|
|
};
|
|
},
|
|
watch: {},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "我的优惠券-" + this.$store.state.titleCon
|
|
};
|
|
},
|
|
created() {
|
|
this.getCouponList(this.tabCur);
|
|
this.getCouponNum();
|
|
},
|
|
methods: {
|
|
changeTabCur(i) {
|
|
this.tabCur = i;
|
|
this.getCouponList(i);
|
|
},
|
|
goGoodCate() {
|
|
this.$router.push({ path: `/goods_cate` });
|
|
},
|
|
currentChange() {},
|
|
getCouponList(state) {
|
|
let obj = {
|
|
couponURL: true,
|
|
state: state
|
|
};
|
|
this.$axios
|
|
.post(`coupon/api/coupon/memberpage`, obj)
|
|
.then(res => {
|
|
console.log(res);
|
|
if (state == 1) {
|
|
this.couponList = res.data.list;
|
|
} else if (state == 1) {
|
|
this.expireList = res.data.list;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
getCouponNum() {
|
|
let obj = {
|
|
couponURL: true
|
|
};
|
|
this.$axios
|
|
.post(`coupon/api/coupon/num`, obj)
|
|
.then(res => {
|
|
console.log(res, `getCouponNum`);
|
|
this.availableNum = res.data;
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.maCoupon {
|
|
padding: 0 30px;
|
|
}
|
|
.main-section {
|
|
margin-top: 20px;
|
|
.main-ky {
|
|
ul {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
li {
|
|
width: 343px;
|
|
margin: 0 40px 20px 0;
|
|
margin-bottom: 20px;
|
|
|
|
height: 88px;
|
|
background-image: url("~assets/images/ky.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
.left {
|
|
width: 113px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
height: 58px;
|
|
border-right: 1px dashed rgba(230, 201, 165, 0.8);
|
|
}
|
|
|
|
span {
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240, 132, 51, 0.78);
|
|
}
|
|
p {
|
|
font-size: 32px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #f08433;
|
|
span {
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #e5831e;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: calc(100% - 113px);
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #f08433;
|
|
}
|
|
.btn {
|
|
width: 60px;
|
|
height: 24px;
|
|
background: linear-gradient(133deg, #fb6677 0%, #f33b50 100%);
|
|
border-radius: 14px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.time {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(240, 132, 51, 0.78);
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.main-bky {
|
|
ul {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
li {
|
|
margin: 0 40px 20px 0;
|
|
margin-bottom: 20px;
|
|
width: 347px;
|
|
height: 125px;
|
|
background-image: url("~assets/images/bky.png");
|
|
background-size: 100% 100%;
|
|
.tops {
|
|
display: flex;
|
|
height: 88px;
|
|
|
|
.left {
|
|
width: 113px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
height: 58px;
|
|
border-right: 1px dashed rgba(230, 201, 165, 0.8);
|
|
}
|
|
|
|
span {
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
|
|
color: #999999;
|
|
margin-bottom: 13px;
|
|
}
|
|
p {
|
|
font-size: 32px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
|
|
color: #999999;
|
|
span {
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: calc(100% - 113px);
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
line-height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
|
|
color: #999999;
|
|
}
|
|
}
|
|
.time {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
|
|
color: #bfbfbf;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
.bottm {
|
|
height: 37px;
|
|
line-height: 37px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-left: 26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.user-com-tabs {
|
|
.item {
|
|
margin-right: 70px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.on {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
width: 47px;
|
|
height: 2px;
|
|
background: var(--themeColor);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|