222 lines
9.2 KiB
HTML
222 lines
9.2 KiB
HTML
<!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/api_test1.js?v=1000"></script>
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/myCoupon.css" />
|
|
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabbar.css">
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/tabbar.js"></script>
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/modelPop.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<img class="backPresTy" @click="backHandler" v-if="goodsCount<2"
|
|
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
|
<div class="nav">
|
|
<p class="nav-title">我的券</p>
|
|
<ul class="tab">
|
|
<li v-for="item in tabList" :key="item.id" @click="tabHandle(item)">
|
|
<span :class="tabActive===item.id?'tab_text tab_active':'tab_text'">{{item.text}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="content">
|
|
<div v-for="(item,index) in couponList" :key="item.id"
|
|
:class="more===item.id?'content-item content-item-more':'content-item'">
|
|
<div class="content-box">
|
|
<div :class="item.status===3 ?'left-box left-boxs':'left-box'">
|
|
<p class="left-box-moneySign" :style="{fontSize:item.reduce.length>5?'0.24rem':'0.3rem'}">
|
|
<span class="left-box-money">￥</span>
|
|
{{item.reduce}}
|
|
</p>
|
|
<p class="left-box-full">满{{item.full}}元可用</p>
|
|
<p class="left-box-button" @click="goUse(item)">
|
|
{{item.status===1?'去使用':item.status===2?'已使用':"已失效"}}
|
|
</p>
|
|
</div>
|
|
<div class="right-box">
|
|
<p class="right-box-title">满{{item.full}}元减{{item.reduce}}元券</p>
|
|
<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 #f1f1f1':'0')}">
|
|
<span class="right-box-id">券编号 <span>{{item.id}}</span></span>
|
|
<p class="right-box-more" @click="moreHandle(item.id)">
|
|
{{more===item.id?'收起':'查看更多'}}
|
|
<img :class="more===item.id?'imgArrow':''"
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/arrow.png"
|
|
alt="">
|
|
</p>
|
|
</div>
|
|
<img class="stand" v-show="item.status===3"
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/invalid.png" alt="">
|
|
<img class="stand" v-show="item.status===2"
|
|
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/use.png" alt="">
|
|
</div>
|
|
</div>
|
|
<p class="text">
|
|
商品使用范围：{{item.productArray.map(item=>item.name).join('、')}}
|
|
</p>
|
|
</div>
|
|
<!-- 空状态 -->
|
|
<div class="empty" v-if="!couponList.length">
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon-empty.png" alt="">
|
|
<p>暂无优惠券</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tab组件 -->
|
|
<tab-component :current="3"></tab-component>
|
|
<!-- 弹出提示 -->
|
|
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText"
|
|
@backFunction="backFunction"></model-pop>
|
|
</div>
|
|
<script>
|
|
new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
tabList: [{
|
|
id: 1,
|
|
text: "待使用"
|
|
},
|
|
{
|
|
id: 2,
|
|
text: "已使用"
|
|
},
|
|
{
|
|
id: 3,
|
|
text: "已失效"
|
|
}
|
|
],
|
|
tabActive: 1,
|
|
/* tab 选中下标 */
|
|
more: false,
|
|
/* 是否展示更多 状态 */
|
|
couponList: [],
|
|
/* 提示框状态 */
|
|
popShow: false,
|
|
popTitle: '',
|
|
popText: '',
|
|
popStatus: 1, /*1 成功 2提示 3失败 */
|
|
redirect: false,
|
|
goodsCount: 0 /* 商品数量 */
|
|
};
|
|
},
|
|
|
|
components: {
|
|
tabComponent,
|
|
modelPop
|
|
},
|
|
|
|
created() {
|
|
this.goodsCount = localStorage.getItem('goodsCount');
|
|
this.getCouponList();
|
|
},
|
|
|
|
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 === 1) {
|
|
window.location.replace('./couponCollection.html');
|
|
};
|
|
},
|
|
|
|
/* tab点击 */
|
|
tabHandle({
|
|
id
|
|
}) {
|
|
this.tabActive = id;
|
|
this.getCouponList();
|
|
},
|
|
|
|
/* 重定向 */
|
|
backFunction() {
|
|
if (this.redirect) {
|
|
this.delayedOut();
|
|
}
|
|
},
|
|
|
|
/* 延时自动退出 */
|
|
delayedOut(time = 1) {
|
|
let entryLink = localStorage.getItem('entryLink');
|
|
setTimeout(() => {
|
|
window.location.replace(entryLink);
|
|
}, time * 1000);
|
|
},
|
|
|
|
/* 请求数据 */
|
|
getCouponList() {
|
|
const token = localStorage.getItem('token');
|
|
req.axiosGet('/key/coupon/list', {
|
|
token,
|
|
status: this.tabActive
|
|
}).then(({
|
|
data,
|
|
code,
|
|
message
|
|
}) => {
|
|
if (code === 403) {
|
|
this.popTitle = '温馨提示';
|
|
this.popText = message;
|
|
this.popStatus = 2;
|
|
this.popShow = true;
|
|
this.redirect = true;
|
|
this.delayedOut(3);
|
|
return;
|
|
}
|
|
if (code === 200) {
|
|
data.map((item, index) => {
|
|
const productArray = [];
|
|
item.id = String((item.id)).padStart(8, 0) + index;
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |