137 行
4.5 KiB
HTML
可执行文件
137 行
4.5 KiB
HTML
可执行文件
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>优惠券</title>
|
|
<link rel="stylesheet" href="__PUBLIC__/css/css-comment.css">
|
|
<script src="__PUBLIC__/rem/js/rem.js"></script>
|
|
<link rel="stylesheet" href="__PUBLIC__/vip/css/templateA/vip.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
|
|
<div class="coupon">
|
|
<div class="couponNav">
|
|
<span class="navItem" :class="[usetype==1?'navActice':'']" @click="navItem(1)">未使用</span>
|
|
<span class="navItem" :class="[usetype==2?'navActice':'']" @click="navItem(2)">已使用</span>
|
|
<span class="navItem" :class="[usetype==3?'navActice':'']" @click="navItem(3)">已过期</span>
|
|
</div>
|
|
<ul class="coupon-ul">
|
|
<template v-for="item in coupondata">
|
|
<li class="coupon-li" @click="todetails(item.id)">
|
|
<img class="couponbg" src="__PUBLIC__/vip/images/templateA/coupon1.png" alt="">
|
|
<div class="coupon-box">
|
|
<div class="coupon-left">
|
|
<p class="couponName" :class="[usetype==1?'':'couponColor']">优惠券</p>
|
|
<img class="coupon-bottom" :src="usetype==1?'__PUBLIC__/vip/images/templateA/coupon-bottom.png':'__PUBLIC__/vip/images/templateA/coupon-bottom2.png'">
|
|
<p class="fullReduce" :class="[usetype==1?'':'couponColor']">消费满{{item.needmoney}}元立减{{item.reducemoney}}元</p>
|
|
<p class="stage" :class="[usetype==1?'':'couponColor']">到期时间{{item.endtime}}</p>
|
|
</div>
|
|
<img class="coupon-rightImg" src="__PUBLIC__/vip/images/templateA/coupon-right.png" alt="">
|
|
<div class="coupon-right">
|
|
<div class="garden">
|
|
<img :src="usetype==1?'__PUBLIC__/vip/images/templateA/garden1.png':'__PUBLIC__/vip/images/templateA/garden2.png'" alt="">
|
|
<div class="fullReduce2">
|
|
<p style="margin-bottom: .08rem">￥{{item.reducemoney}}元</p>
|
|
<p>满{{item.needmoney}}可用</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
<div class="card_more" v-if="allcoupon[usetype-1]['hasmore']==1" @click="loadmore">加载更多</div>
|
|
<div class="card_more" v-if="allcoupon[usetype-1]['hasmore']!=1">--没有更多了--</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="__PUBLIC__/retails/js/vue.js"></script>
|
|
<script src="__PUBLIC__/vip/js/jquery-3.2.1.min.js"></script>
|
|
<script src="__PUBLIC__/vip/js/window-reload.js"></script>
|
|
<script type="text/javascript">
|
|
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
usetype: 1,
|
|
allcoupon: [{
|
|
usetype: 1,
|
|
page: 1,
|
|
limit: 10,
|
|
data: [],
|
|
hasmore: 1
|
|
}, {
|
|
usetype: 2,
|
|
page: 1,
|
|
limit: 10,
|
|
data: [],
|
|
hasmore: 1
|
|
}, {
|
|
usetype: 3,
|
|
page: 1,
|
|
limit: 10,
|
|
data: [],
|
|
hasmore: 1
|
|
}],
|
|
coupondata: []
|
|
|
|
},
|
|
created: function() {
|
|
this.getCoupon(1, 1);
|
|
},
|
|
methods: {
|
|
navItem: function(usetype) {
|
|
this.usetype = usetype;
|
|
if(this.allcoupon[usetype - 1]['data'].length == 0) {
|
|
if(this.allcoupon[usetype - 1]['hasmore'] == 1) {
|
|
this.loadmore();
|
|
} else {
|
|
this.coupondata = this.allcoupon[usetype - 1]['data'];
|
|
}
|
|
} else {
|
|
this.coupondata = this.allcoupon[usetype - 1]['data'];
|
|
}
|
|
},
|
|
getCoupon(usetype, page) {
|
|
var vm = this;
|
|
$.ajax({
|
|
url: "{:U('vip/coupon/getcoupondata')}",
|
|
data: {
|
|
usetype: usetype,
|
|
page: page
|
|
},
|
|
type: "post",
|
|
success: function(res) {
|
|
console.log(res)
|
|
if(res.status == 1) {
|
|
vm.allcoupon[usetype - 1]['page'] = res.page;
|
|
vm.allcoupon[usetype - 1]['data'] = vm.allcoupon[usetype - 1]['data'].concat(res.data);
|
|
vm.coupondata = vm.allcoupon[usetype - 1]['data'];
|
|
} else {
|
|
vm.allcoupon[usetype - 1]['hasmore'] = 2;
|
|
vm.coupondata = vm.allcoupon[usetype - 1]['data'];
|
|
}
|
|
|
|
},
|
|
error: function(error) {
|
|
alert('出错了');
|
|
}
|
|
})
|
|
},
|
|
loadmore: function() {
|
|
var usetype = this.usetype;
|
|
var page = this.allcoupon[usetype - 1]['page'];
|
|
this.getCoupon(usetype, page);
|
|
},
|
|
todetails: function(id) {
|
|
window.location.href = "{:U('vip/coupon/coupondetail')}?id=" + id;
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |