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.
330 lines
10 KiB
330 lines
10 KiB
<template>
|
|
<div class="index wrapper_1200">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>领券中心</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
|
|
<div class="coupon_Box">
|
|
<div class="couponType_discount" v-if="noThresholdList.length">
|
|
<div class="couponType_title">无门槛优惠券</div>
|
|
|
|
<div class="couponCardBox">
|
|
<div class="couponCard" v-for="(item, index) in noThresholdList" :key="index">
|
|
<div class="couponCard_l">
|
|
<div style="display: flex">
|
|
<span>￥</span>
|
|
<span style="font-weight: 500; font-size: 24px">
|
|
{{ item.money }}
|
|
</span>
|
|
</div>
|
|
<div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>
|
|
<div class="couponCard_leftBg"></div>
|
|
</div>
|
|
<div class="couponCard_r">
|
|
<div class="couponCard_rt">
|
|
<div style="font-size: 18px; font-weight: 500">
|
|
{{ item.coupon_name }}
|
|
</div>
|
|
<div
|
|
class="couponCard_rt_btn"
|
|
@click="draw('no_threshold', item.coupon_type_id)"
|
|
>
|
|
立即领取
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 12px">
|
|
有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
|
|
</div>
|
|
<div class="couponCard_rightBg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="couponType_discount" v-if="decrementList.length">
|
|
<div class="couponType_title">满减券</div>
|
|
|
|
<div class="couponCardBox">
|
|
<div class="couponCard" v-for="(item, index) in decrementList" :key="index">
|
|
<div class="couponCard_l">
|
|
<div style="display: flex">
|
|
<span>￥</span>
|
|
<span style="font-weight: 500; font-size: 24px">
|
|
{{ item.money }}
|
|
</span>
|
|
</div>
|
|
<div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>
|
|
<div class="couponCard_leftBg"></div>
|
|
</div>
|
|
<div class="couponCard_r">
|
|
<div class="couponCard_rt">
|
|
<div style="font-size: 18px; font-weight: 500">
|
|
{{ item.coupon_name }}
|
|
</div>
|
|
<!--state 1已领用（未使用） 2已使用 3已过期 4已关闭', -->
|
|
<div
|
|
class="couponCard_rt_btn"
|
|
@click="draw('reward', item.coupon_type_id)"
|
|
>
|
|
立即领取
|
|
</div>
|
|
<!-- <div class="couponCard_rt_btn" v-show="item.state==1">已领用</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==2">已使用</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==3">已过期</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==4">已关闭</div>-->
|
|
</div>
|
|
<div style="font-size: 12px">
|
|
有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
|
|
</div>
|
|
<div class="couponCard_rightBg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="couponType_discount" v-if="discountList.length">
|
|
<div class="couponType_title">折扣</div>
|
|
|
|
<div class="couponCardBox">
|
|
<div class="couponCard" v-for="(item, index) in discountList" :key="index">
|
|
<div class="couponCard_l">
|
|
<div style="display: flex">
|
|
<span style="font-weight: 500; font-size: 24px">
|
|
{{ item.discount }}
|
|
</span>
|
|
<span>折</span>
|
|
</div>
|
|
<div style="font-size: 12px; width: 100%">满{{ item.at_least }}可用</div>
|
|
|
|
<div class="couponCard_leftBg"></div>
|
|
</div>
|
|
<div class="couponCard_r">
|
|
<div class="couponCard_rt">
|
|
<div style="font-size: 18px; font-weight: 500">
|
|
{{ item.coupon_name }}
|
|
</div>
|
|
<!--state 1已领用（未使用） 2已使用 3已过期 4已关闭', -->
|
|
<div
|
|
class="couponCard_rt_btn"
|
|
@click="draw('reward', item.coupon_type_id)"
|
|
>
|
|
立即领取
|
|
</div>
|
|
<!-- <div class="couponCard_rt_btn" v-show="item.state==1">已领用</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==2">已使用</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==3">已过期</div>
|
|
<div class="couponCard_rt_btn" v-show="item.state==4">已关闭</div>-->
|
|
</div>
|
|
<div style="font-size: 12px">
|
|
有效期：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
|
|
</div>
|
|
<div class="couponCard_rightBg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 暂无可领取折扣优惠券，去看点别的吧 -->
|
|
<div
|
|
class="nothing"
|
|
v-if="!discountList.length && !decrementList.length && !noThresholdList.length"
|
|
>
|
|
<img src="@/assets/images/noGoods.png" />
|
|
暂无可领取折扣优惠券，去看点别的吧
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
:visible.sync="receiveDialog"
|
|
width="30%"
|
|
:show-close="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
>
|
|
<div slot="title" style="display: flex">
|
|
<img
|
|
style="width: 24px; height: 24px; margin-right: 10px"
|
|
src="~assets/images/Tips.png"
|
|
alt
|
|
/>
|
|
<div style="height: 24px; line-height: 24px; font-size: 16px; font-weight: 500">
|
|
提示
|
|
</div>
|
|
</div>
|
|
<div style="margin: 0px auto; width: 330px; height: 100%">
|
|
优惠券领取成功，请到个人中心-我的优惠券 查看已领取优惠券。
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="receiveDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="goMyCoupon">去查看</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
// 折扣
|
|
discountList: [],
|
|
// 满减
|
|
decrementList: [],
|
|
// 无门槛
|
|
noThresholdList: [],
|
|
receiveDialog: false,
|
|
};
|
|
},
|
|
created() {
|
|
// reward满减 discount折扣 no_threshold无门槛
|
|
this.getClassList("reward");
|
|
this.getClassList("discount");
|
|
this.getClassList("no_threshold");
|
|
},
|
|
methods: {
|
|
getClassList(type) {
|
|
let obj = {
|
|
type: type,
|
|
couponURL: true,
|
|
};
|
|
this.$axios.post(`coupon/api/coupon/typepagelists`, obj).then((res) => {
|
|
console.log(res.data.list, 1111);
|
|
// reward满减
|
|
if (type == "reward") {
|
|
this.decrementList = res.data.list;
|
|
}
|
|
// discount折扣
|
|
else if (type == "discount") {
|
|
this.discountList = res.data.list;
|
|
}
|
|
// no_threshold无门槛
|
|
else if (type == "no_threshold") {
|
|
this.noThresholdList = res.data.list;
|
|
}
|
|
});
|
|
},
|
|
// 领取优惠券
|
|
draw(type, coupon_type_id) {
|
|
let obj = {
|
|
type: type,
|
|
coupon_type_id: coupon_type_id,
|
|
get_type: 2, //获取方式:1订单2.直接领取3.活动领取
|
|
couponURL: true,
|
|
};
|
|
this.$axios
|
|
.post(`coupon/api/coupon/receive`, obj)
|
|
.then((res) => {
|
|
this.receiveDialog = true;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
goMyCoupon() {
|
|
this.$router.push({ path: "/user/myCoupon" + `?types=4` });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.index {
|
|
.crumbs {
|
|
margin: 20px 0;
|
|
}
|
|
.coupon_Box {
|
|
width: 1200px;
|
|
min-height: 582px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
padding: 30px;
|
|
.couponType_discount {
|
|
width: 1200px;
|
|
height: 280px;
|
|
.couponType_title {
|
|
width: 108px;
|
|
height: 25px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 25px;
|
|
}
|
|
.couponCardBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.couponCard {
|
|
width: 340px;
|
|
height: 90px;
|
|
background: linear-gradient(146deg, #ffe2bb 0%, #ffeedc 35%, #fcd8ab 100%);
|
|
border: 1px solid rgba(255, 229, 195, 0.3);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
margin-right: 60px;
|
|
border-radius: 10px;
|
|
color: rgba(240, 132, 51, 0.78);
|
|
.couponCard_l {
|
|
width: 110px;
|
|
padding-right: 15px;
|
|
border-right: 1px dashed rgba(230, 201, 165, 0.8);
|
|
position: relative;
|
|
.couponCard_leftBg {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: -30px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.couponCard_r {
|
|
width: 250px;
|
|
margin-left: 15px;
|
|
position: relative;
|
|
.couponCard_rt {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
.couponCard_rt_btn {
|
|
background: linear-gradient(133deg, #fb6677 0%, #f33b50 100%);
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
padding: 0px 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.couponCard_rightBg {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: -30px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nothing {
|
|
padding-top: 150px;
|
|
padding-bottom: 150px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #969696;
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|