sadjv3/anmo-shop/my/hongbao/youhuijuan.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>