206 lines
6.2 KiB
Vue
206 lines
6.2 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="flex align-center justify-between padding-lr bg" style="padding-bottom: 10rpx;">
|
||
|
|
<view v-for="(item,index) in tab" :key="index" class="text-center box"
|
||
|
|
:class="tabIndex == index?'tanColor':''" @click="bindTab(item.state)">
|
||
|
|
<view style="z-index: 9;">{{item.name}}</view>
|
||
|
|
<view class="" :class="tabIndex == index?'line':''"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="tabIndex == 0">
|
||
|
|
<view v-for="(item,index) in hongbao" :key="index" class="bg radius" style="margin: 30rpx;">
|
||
|
|
<view class="flex align-center justify-between" style="padding-right: 30rpx;">
|
||
|
|
<view class="flex align-center">
|
||
|
|
<view class="" style="text-align: center;background-color: #fdf5f3;padding: 24rpx 0;width: 180rpx;">
|
||
|
|
<view class="text-lg" style="color: #ea4635;font-size: 26rpx;font-weight: bold;">￥ <text class="text-df text-xxl" style="font-size: 60rpx;font-weight: bold;">{{item.money}}</text></view>
|
||
|
|
<view style="color: #ea4635;font-size: 24rpx;">满{{item.minMoney}}元可用</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view style="width: 2upx;height: 100upx;border: 2upx dashed #E6E6E6;margin: 29upx auto;"></view> -->
|
||
|
|
<view class="" style="flex: 1;padding-left: 20rpx;">
|
||
|
|
<view class="text-lg text-bold">{{item.couponName}}</view>
|
||
|
|
<view style="font-size: 26rpx;color: #999999;margin-top: 14rpx;">{{item.endDate}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="btn" @tap="shiYong()">立即使用</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="tabIndex == 1">
|
||
|
|
<view v-for="(item,index) in hongbao" :key="index" class="bg radius" style="margin: 30rpx;position: relative;">
|
||
|
|
<view class="flex align-center justify-between" style="padding-right: 30rpx;">
|
||
|
|
<view class="flex align-center">
|
||
|
|
<view class="" style="text-align: center;background-color: #e4f2d5;padding: 24rpx 0;width: 180rpx;">
|
||
|
|
<view class="text-lg" style="color: #a3bb8a;font-size: 26rpx;font-weight: bold;">￥<text class="text-df text-xxl" style="font-size: 60rpx;font-weight: bold;">{{item.money}}</text></view>
|
||
|
|
<view style="color: #a3bb8a;font-size: 24rpx;">满{{item.minMoney}}元可用</view>
|
||
|
|
</view>
|
||
|
|
<view class="" style="flex: 1;padding-left: 20rpx;">
|
||
|
|
<view class="text-lg text-bold">{{item.couponName}}</view>
|
||
|
|
<view style="font-size: 26rpx;color: #999999;margin-top: 14rpx;">{{item.endDate}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view style="width: 638upx;height: 2upx;border: 2upx dashed #E6E6E6;margin: 29upx auto;"></view> -->
|
||
|
|
<view style="position: absolute;top: 0;right: 0;">
|
||
|
|
<image src="../../static/images/my/youhui-user.png" style="width: 120upx;height: 117upx;"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="tabIndex == 2">
|
||
|
|
<view v-for="(item,index) in hongbao" :key="index" class="bg radius" style="margin: 30rpx;position: relative;">
|
||
|
|
<view class="flex align-center justify-between" style="padding-right: 30rpx;">
|
||
|
|
<view class="flex align-center">
|
||
|
|
<view class="" style="text-align: center;background-color: #cccccc;padding: 24rpx 0;width: 180rpx;">
|
||
|
|
<view class="text-lg" style="color: #ffffff;font-size: 26rpx;font-weight: bold;">￥<text class="text-df text-xxl" style="font-size: 60rpx;font-weight: bold;">{{item.money}}</text></view>
|
||
|
|
<view style="color: #ffffff;font-size: 24rpx;">满{{item.minMoney}}元可用</view>
|
||
|
|
</view>
|
||
|
|
<view class="" style="flex: 1;padding-left: 20rpx;">
|
||
|
|
<view class="text-lg text-bold">{{item.couponName}}</view>
|
||
|
|
<view style="font-size: 26rpx;color: #999999;margin-top: 14rpx;">{{item.endDate}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view style="width: 638upx;height: 2upx;border: 2upx dashed #E6E6E6;margin: 29upx auto;"></view> -->
|
||
|
|
<view style="position: absolute;top: 0;right: 0;">
|
||
|
|
<image src="../../static/images/my/shixioa.png" style="width: 120upx;height: 117upx;"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<empty v-if="hongbao.length==0"></empty>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import empty from '@/components/empty.vue'
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
empty
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tab: [{
|
||
|
|
name: '可使用',
|
||
|
|
state: 0
|
||
|
|
}, {
|
||
|
|
name: '已使用',
|
||
|
|
state: 1
|
||
|
|
}, {
|
||
|
|
name: '已失效',
|
||
|
|
state: 2
|
||
|
|
}],
|
||
|
|
tabIndex: 0,
|
||
|
|
hongbao: [],
|
||
|
|
page: 1,
|
||
|
|
size: 10,
|
||
|
|
loadingType: 0,
|
||
|
|
scrollTop: false,
|
||
|
|
contentText: {
|
||
|
|
contentdown: '上拉显示更多',
|
||
|
|
contentrefresh: '正在加载...',
|
||
|
|
contentnomore: '没有更多数据了'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getMyList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
shiYong(){
|
||
|
|
uni.switchTab({
|
||
|
|
url:'/pages/index/index'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getMyList() {
|
||
|
|
this.loadingType = 1;
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中...'
|
||
|
|
});
|
||
|
|
this.$Request.getT('/app/coupon/selectCouponUserList?page='+this.page+'&limit='+this.size+'&status=' + this.tabIndex).then(res => {
|
||
|
|
if (res.code == 0) {
|
||
|
|
if (this.page == 1) {
|
||
|
|
this.hongbao = [];
|
||
|
|
}
|
||
|
|
res.data.list.forEach(d => {
|
||
|
|
this.hongbao.push(d);
|
||
|
|
});
|
||
|
|
if (res.data.list.length === this.size) {
|
||
|
|
this.loadingType = 0;
|
||
|
|
} else {
|
||
|
|
this.loadingType = 3;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.loadingType = 2;
|
||
|
|
}
|
||
|
|
uni.hideLoading();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
bindTab(index) {
|
||
|
|
this.tabIndex = index
|
||
|
|
this.hongbao = [];
|
||
|
|
this.page = 1;
|
||
|
|
this.getMyList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll: function(e) {
|
||
|
|
this.scrollTop = e.scrollTop > 200;
|
||
|
|
},
|
||
|
|
onReachBottom: function() {
|
||
|
|
this.page = this.page + 1;
|
||
|
|
this.getMyList('');
|
||
|
|
},
|
||
|
|
onPullDownRefresh: function() {
|
||
|
|
this.page = 1;
|
||
|
|
this.getMyList('Refresh');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background: #F5F5F5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
background: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
width: 128upx;
|
||
|
|
height: 60upx;
|
||
|
|
color: #999999;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30upx;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 8rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
background: #096f4b;
|
||
|
|
position: relative;
|
||
|
|
top: 5px;
|
||
|
|
opacity: 1;
|
||
|
|
z-index: -1;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tanColor {
|
||
|
|
color: #000000;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 140upx;
|
||
|
|
height: 55upx;
|
||
|
|
border: 2upx solid #FF130A;
|
||
|
|
border-radius: 30upx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 55upx;
|
||
|
|
color: #FF130A;
|
||
|
|
font-size: 24upx;
|
||
|
|
}
|
||
|
|
</style>
|