2022-09-21 17:30:39 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
|
<meta name="viewport"
|
|
|
|
|
|
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
|
2022-09-22 14:13:46 +08:00
|
|
|
|
<title>我的券</title>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
|
|
|
|
|
|
charset="utf-8"></script>
|
2022-09-27 16:46:22 +08:00
|
|
|
|
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
<link rel="stylesheet" href="./myCoupon.css" />
|
2022-09-21 18:35:54 +08:00
|
|
|
|
<link rel="stylesheet" href="./tabbar.css">
|
2022-09-27 16:46:22 +08:00
|
|
|
|
<script src="./tabbar.js"></script>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<img class="backPresTy" @click="backHandler"
|
|
|
|
|
|
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
|
|
|
|
|
<ul class="tab">
|
|
|
|
|
|
<li v-for="item in tabList" :key="item.id" @click="tabActive=item.id">
|
|
|
|
|
|
<span :class="tabActive===item.id?'tab_text tab_active':'tab_text'">{{item.text}}</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="content">
|
2022-09-27 16:46:22 +08:00
|
|
|
|
<div v-for="(item,index) in couponLists" :key="item.id"
|
2022-09-21 17:30:39 +08:00
|
|
|
|
:class="more===item.id?'content-item content-item-more':'content-item'">
|
|
|
|
|
|
<div class="content-box">
|
|
|
|
|
|
<div :class="item.status===2 ?'left-box left-boxs':'left-box'">
|
|
|
|
|
|
<p class="left-box-moneySign">
|
|
|
|
|
|
<span class="left-box-money">￥</span>
|
|
|
|
|
|
{{item.money}}
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="left-box-full">满{{item.full}}元可用</p>
|
2022-09-22 14:08:22 +08:00
|
|
|
|
<p class="left-box-button" @click="goUse(item)">
|
2022-09-22 15:07:27 +08:00
|
|
|
|
{{item.status===0?'去使用':item.status===1?'已使用':"已失效"}}
|
2022-09-22 14:08:22 +08:00
|
|
|
|
</p>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right-box">
|
|
|
|
|
|
<p class="right-box-title">{{item.title}}</p>
|
|
|
|
|
|
<p class="right-box-time">{{item.time}}</p>
|
|
|
|
|
|
<div class="right-box-bottom">
|
2022-09-27 16:46:22 +08:00
|
|
|
|
<span class="right-box-id">券编号 <span>{{String((item.id)).padStart(8,0)+index}}</span></span>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
<p class="right-box-more" @click="moreHandle(item.id)">
|
|
|
|
|
|
{{more===item.id?'收起':'查看更多'}}
|
|
|
|
|
|
<img :class="more===item.id?'imgArrow':''" src="./img/arr.png" alt="">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<img class="stand" v-show="item.status===2" src="./img/invalid.png" alt="">
|
|
|
|
|
|
<img class="stand" v-show="item.status===1" src="./img/use.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text" v-html="item.text" />
|
|
|
|
|
|
</div>
|
2022-09-28 14:20:46 +08:00
|
|
|
|
<!-- 空状态 -->
|
|
|
|
|
|
<div class="empty" v-if="!couponLists.length">
|
|
|
|
|
|
<img src="./img/coupon-empty.png" alt="">
|
|
|
|
|
|
<p>暂无优惠券</p>
|
|
|
|
|
|
</div>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
</div>
|
2022-09-28 14:20:46 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- tab组件 -->
|
|
|
|
|
|
<tab-component :current="3"></tab-component>
|
2022-09-21 17:30:39 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: "#app",
|
|
|
|
|
|
data () {
|
|
|
|
|
|
return {
|
|
|
|
|
|
tabList: [
|
|
|
|
|
|
{ id: 0, text: "待使用" },
|
|
|
|
|
|
{ id: 1, text: "已使用" },
|
|
|
|
|
|
{ id: 2, text: "已失效" }
|
|
|
|
|
|
],
|
2022-09-22 14:08:22 +08:00
|
|
|
|
tabActive: 0, /* tab 选中下标 */
|
|
|
|
|
|
more: false, /* 是否展示更多 状态 */
|
2022-09-21 17:30:39 +08:00
|
|
|
|
couponList: [
|
|
|
|
|
|
{
|
2022-09-27 16:46:22 +08:00
|
|
|
|
id: 16,
|
2022-09-21 17:30:39 +08:00
|
|
|
|
money: 5,
|
|
|
|
|
|
status: 0,
|
|
|
|
|
|
full: 10,
|
|
|
|
|
|
time: '2022.09.13 12: 00: 00 - 2022.09.15 12: 00: 00',
|
|
|
|
|
|
title: '满10元减5元券',
|
|
|
|
|
|
text: `1、券具体有效期、生效时间、失效时间、使用地区限制以获取成功后的券面实际显示为准;<br>
|
|
|
|
|
|
2、部分券当前正在随机测试中，用户进入页面后券力度纯随机展示，请以页面上当前展示力度为准；<br>
|
|
|
|
|
|
3、优惠券不与其他优惠同享且实付金额满足券面要求金额时方能使用；<br>
|
|
|
|
|
|
4、优惠券不可拆分使用且不可与其他优惠券叠加使用；每笔订单，最多使用1张优惠券；券叠加使用；每笔订单，最多使用1张优惠券`,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-09-27 16:46:22 +08:00
|
|
|
|
id: 89,
|
2022-09-21 17:30:39 +08:00
|
|
|
|
money: 5,
|
|
|
|
|
|
full: 10,
|
2022-09-28 14:20:46 +08:00
|
|
|
|
status: 0,
|
2022-09-21 17:30:39 +08:00
|
|
|
|
time: '2022.09.13 12: 00: 00 - 2022.09.15 12: 00: 00',
|
|
|
|
|
|
title: '满10元减5元券',
|
|
|
|
|
|
text: `1、券具体有效期、生效时间、失效时间、使用地区限制以获取成功后的券面实际显示为准;<br>
|
|
|
|
|
|
2、部分券当前正在随机测试中，用户进入页面后券力度纯随机展示，请以页面上当前展示力度为准；<br>
|
|
|
|
|
|
3、优惠券不与其他优惠同享且实付金额满足券面要求金额时方能使用；<br>
|
|
|
|
|
|
4、优惠券不可拆分使用且不可与其他优惠券叠加使用；每笔订单，最多使用1张优惠券；券叠加使用；每笔订单，最多使用1张优惠券`,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2022-09-27 16:46:22 +08:00
|
|
|
|
id: 65,
|
2022-09-21 17:30:39 +08:00
|
|
|
|
money: 5,
|
|
|
|
|
|
full: 10,
|
|
|
|
|
|
status: 2,
|
|
|
|
|
|
time: '2022.09.13 12: 00: 00 - 2022.09.15 12: 00: 00',
|
|
|
|
|
|
title: '满10元减5元券',
|
|
|
|
|
|
text: `1、券具体有效期、生效时间、失效时间、使用地区限制以获取成功后的券面实际显示为准;<br>
|
|
|
|
|
|
2、部分券当前正在随机测试中，用户进入页面后券力度纯随机展示，请以页面上当前展示力度为准；<br>
|
|
|
|
|
|
3、优惠券不与其他优惠同享且实付金额满足券面要求金额时方能使用；<br>
|
|
|
|
|
|
4、优惠券不可拆分使用且不可与其他优惠券叠加使用；每笔订单，最多使用1张优惠券；券叠加使用；每笔订单，最多使用1张优惠券`,
|
2022-09-22 11:40:16 +08:00
|
|
|
|
},
|
2022-09-21 17:30:39 +08:00
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2022-09-22 14:08:22 +08:00
|
|
|
|
|
2022-09-21 18:35:54 +08:00
|
|
|
|
components: {
|
|
|
|
|
|
tabComponent
|
|
|
|
|
|
},
|
2022-09-21 17:30:39 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
computed: {
|
2022-09-22 14:08:22 +08:00
|
|
|
|
/* 过滤不同类型数据 */
|
2022-09-21 17:30:39 +08:00
|
|
|
|
couponLists () {
|
|
|
|
|
|
return this.couponList.filter(item => item.status === this.tabActive)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2022-09-22 14:08:22 +08:00
|
|
|
|
|
2022-09-27 16:46:22 +08:00
|
|
|
|
created () {
|
|
|
|
|
|
const key = sessionStorage.getItem('key')
|
|
|
|
|
|
req.axiosGet('/key/coupon/list', { key, status: this.tabActive }).then(({ data, code }) => {
|
|
|
|
|
|
if (code === 200) {
|
|
|
|
|
|
data.map(item => {
|
|
|
|
|
|
item.product.map(items => {
|
|
|
|
|
|
console.log(items);
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2022-09-21 17:30:39 +08:00
|
|
|
|
methods: {
|
2022-09-22 14:08:22 +08:00
|
|
|
|
|
|
|
|
|
|
/* 查看更多 */
|
2022-09-21 17:30:39 +08:00
|
|
|
|
moreHandle (id) {
|
|
|
|
|
|
if (id !== this.more) {
|
|
|
|
|
|
this.more = id
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.more = null
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2022-09-22 14:08:22 +08:00
|
|
|
|
/* 返回 */
|
2022-09-21 17:30:39 +08:00
|
|
|
|
backHandler () {
|
|
|
|
|
|
window.location.replace('./couponCollection.html');
|
2022-09-22 14:08:22 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/* 去使用 */
|
|
|
|
|
|
goUse (item) {
|
|
|
|
|
|
if (item.status) return;
|
|
|
|
|
|
window.location.replace('./couponCollection.html');
|
2022-09-21 17:30:39 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
