mobileclient/v1_5_0_C/myCoupon.html

198 lines
7.9 KiB
HTML
Raw Normal View History

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>
<script src="./modelPop.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">
2022-09-28 15:05:58 +08:00
<li v-for="item in tabList" :key="item.id" @click="tabHandle(item)">
2022-09-21 17:30:39 +08:00
<span :class="tabActive===item.id?'tab_text tab_active':'tab_text'">{{item.text}}</span>
</li>
</ul>
<div class="content">
2022-09-28 15:05:58 +08:00
<div v-for="(item,index) in couponList" :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">
2022-09-28 17:39:12 +08:00
<div :class="item.status===3 ?'left-box left-boxs':'left-box'">
2022-09-21 17:30:39 +08:00
<p class="left-box-moneySign">
<span class="left-box-money"></span>
2022-09-28 15:05:58 +08:00
{{item.reduce}}
2022-09-21 17:30:39 +08:00
</p>
<p class="left-box-full">满{{item.full}}元可用</p>
<p class="left-box-button" @click="goUse(item)">
2022-09-28 17:39:12 +08:00
{{item.status===1?'去使用':item.status===2?'已使用':"已失效"}}
</p>
2022-09-21 17:30:39 +08:00
</div>
<div class="right-box">
2022-09-28 16:35:26 +08:00
<p class="right-box-title">满{{item.full}}元减{{item.reduce}}元券</p>
2022-09-28 15:05:58 +08:00
<p class="right-box-time">{{item.begin_time}} - {{item.end_time}}</p>
<div class="right-box-bottom"
:style="{borderBottom:(more===item.id?'0.01rem solid #D7D7D7':'0')}">
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>
2022-09-28 17:39:12 +08:00
<img class="stand" v-show="item.status===3" src="./img/invalid.png" alt="">
<img class="stand" v-show="item.status===2" src="./img/use.png" alt="">
2022-09-21 17:30:39 +08:00
</div>
</div>
2022-09-28 15:05:58 +08:00
<p class="text">
商品使用范围:{{item.productArray.map(item=>item.name).join('、')}}
2022-09-28 15:05:58 +08:00
</p>
2022-09-21 17:30:39 +08:00
</div>
2022-09-28 14:20:46 +08:00
<!-- 空状态 -->
2022-09-28 15:05:58 +08:00
<div class="empty" v-if="!couponList.length">
2022-09-28 14:20:46 +08:00
<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>
<!-- 弹出提示 -->
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"></model-pop>
2022-09-21 17:30:39 +08:00
</div>
<script>
new Vue({
el: "#app",
data () {
return {
tabList: [{
id: 1,
text: "待使用"
},
{
id: 2,
text: "已使用"
},
{
id: 3,
text: "已失效"
}
2022-09-21 17:30:39 +08:00
],
tabActive: 1,
/* tab 选中下标 */
more: false,
/* 是否展示更多 状态 */
couponList: [],
/* 提示框状态 */
popShow: false,
popTitle: '',
popText: '',
popStatus: 1 /*1 成功 2提示 3失败 */
2022-09-21 17:30:39 +08:00
}
},
2022-09-21 18:35:54 +08:00
components: {
tabComponent,
modelPop
2022-09-21 18:35:54 +08:00
},
2022-09-21 17:30:39 +08:00
2022-09-27 16:46:22 +08:00
created () {
2022-09-28 15:05:58 +08:00
this.getCouponList()
2022-09-27 16:46:22 +08:00
},
2022-09-21 17:30:39 +08:00
methods: {
/* 查看更多 */
2022-09-21 17:30:39 +08:00
moreHandle (id) {
if (id !== this.more) {
this.more = id
} else {
this.more = null
}
},
/* 返回 */
2022-09-21 17:30:39 +08:00
backHandler () {
window.location.replace('./couponCollection.html');
},
/* 去使用 */
goUse (item) {
2022-09-28 17:39:12 +08:00
if (item.status === 1) {
window.location.replace('./couponCollection.html');
};
2022-09-28 15:05:58 +08:00
},
/* tab点击 */
tabHandle ({
id
}) {
2022-09-28 15:05:58 +08:00
this.tabActive = id
this.getCouponList()
},
/* 请求数据 */
getCouponList () {
const key = sessionStorage.getItem('key')
req.axiosGet('/key/coupon/list', {
key,
status: this.tabActive
}).then(({
data,
code,
message
}) => {
if (code === -1) {
this.popTitle = '温馨提示'
this.popText = message
this.popStatus = 2
this.popShow = true
if (!this.popShow) {
window.location.replace('./index.html');
}
return
}
2022-09-28 15:05:58 +08:00
if (code === 200) {
const productArray = []
data.map(item => {
2022-09-28 16:35:26 +08:00
item.full = Number(item.full).toFixed(0)
item.reduce = Number(item.reduce).toFixed(0)
2022-09-28 15:05:58 +08:00
item.product.legal.map(items => {
productArray.push({
name: items.product_name,
type: 1,
id: items.product_id
})
})
item.product.reduce.map(items => {
productArray.push({
name: items.batch_goods_name,
type: 2,
id: items.channel_activity_id
})
})
item.status = this.tabActive
item.productArray = productArray
})
this.couponList = data
}
})
2022-09-21 17:30:39 +08:00
}
}
})
</script>
</body>
</html>