mobileclient/v1_5_0_C/myCoupon.html

166 lines
8.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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" />
<title>我的券</title>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<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>
<link rel="stylesheet" href="./myCoupon.css" />
<link rel="stylesheet" href="./tabbar.css">
<script src="./tabbar.js"></script>
</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">
<div v-for="(item,index) in couponLists" :key="item.id"
: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>
<p class="left-box-button" @click="goUse(item)">
{{item.status===0?'去使用':item.status===1?'已使用':"已失效"}}
</p>
</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">
<span class="right-box-id">券编号 <span>{{String((item.id)).padStart(8,0)+index}}</span></span>
<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>
<tab-component :current="3"></tab-component>
</div>
</div>
<script>
new Vue({
el: "#app",
data () {
return {
tabList: [
{ id: 0, text: "待使用" },
{ id: 1, text: "已使用" },
{ id: 2, text: "已失效" }
],
tabActive: 0, /* tab 选中下标 */
more: false, /* 是否展示更多 状态 */
couponList: [
{
id: 16,
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张优惠券`,
},
{
id: 89,
money: 5,
full: 10,
status: 1,
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张优惠券`,
},
{
id: 65,
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张优惠券`,
},
]
}
},
components: {
tabComponent
},
computed: {
/* 过滤不同类型数据 */
couponLists () {
return this.couponList.filter(item => item.status === this.tabActive)
}
},
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);
})
})
}
})
},
methods: {
/* 查看更多 */
moreHandle (id) {
if (id !== this.more) {
this.more = id
} else {
this.more = null
}
},
/* 返回 */
backHandler () {
window.location.replace('./couponCollection.html');
},
/* 去使用 */
goUse (item) {
if (item.status) return;
window.location.replace('./couponCollection.html');
}
}
})
</script>
</body>
</html>