<template>
<view class="box">
<!-- <view class="tab">
<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">可使用</view>
<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">可赠送</view>
</view> -->
<view class="main" :class="{mainActive:tabIndex==1}">
<view class="okBox" v-if="tabIndex==1">
<view class="tabLine2" :class="{tabActive2:tabIndex2==0}" @click="tabClick2(0)">可使用</view>
<view class="tabLine2" :class="{tabActive2:tabIndex2==2}" @click="tabClick2(2)">已使用</view>
<view class="tabLine2" :class="{tabActive2:tabIndex2==1}" @click="tabClick2(1)">已过期</view>
</view>
<view style="height: 92rpx;"></view>
<view class="itemBg" v-for="(item,index) in currentList">
<view class="itemTop">
<view class="leftB">
<view class="use" v-if="item.state==0">￥<span class="use2">{{item.actMoney}}</span></view>
<view class="used" v-else>￥<span class="used2">{{item.actMoney}}</span></view>
<view class="tiaojian">{{item.whereMoney!==0?'满'+item.whereMoney+'元可用':'满任意金额可用'}}</view>
</view>
<view class="centerB">
<view class="name">{{item.actName}}</view>
<view class="time" v-if="item.startTime">有效期：{{item.startTime.slice(0,10)}}-{{item.endTime.slice(0,10)}}</view>
<view class="time" v-else>有效期：</view>
</view>
<view class="rightB">
<image src="../../static/img/icon_yishiyong.png" mode="" v-if="item.state==2&&tabIndex==1" class="couponlineTopImg"></image>
<image src="../../static/img/icon_guoqi.png" mode="" v-if="item.state==1&&tabIndex==1" class="couponlineTopImg"></image>
<view class="shareB" v-if="item.shareQty>0&&tabIndex==2" @click.stop="">
<image src="../../static/img/icon_share.png" alt="" class="couponlineshareImg"></image>
<view class="keshare">赠送给好友</view>
</view>
</view>
</view>
<view class="itemBottom">
<view v-if="tabIndex==1">可用次数:{{item.avaQty}}</view>
<view v-else>可分享次数:{{item.shareQty}}</view>
<view @click="goDetail(item.id)" class="rightJian">查看详情
<image src="../../static/img/little_rightArrow.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
</view>
</view>
</view>
<!-- 无数据空白页 -->
<nodata v-if="items.length==0"></nodata>
</view>
</view>
</template>
<script>
import nodata from '@/components/nodata/nodata.vue'
export default {
components: {
nodata
},
computed: {
currentList () {
if (this.tabIndex == 2) {
return this.items.filter(item => ~~item.shareQty > 0)
} else {
return this.items.filter(item => item.state == this.tabIndex2)
}
}
},
data() {
return {
tabIndex: 1,
tabIndex2: 0,
items: [],
}
},
onLoad(opt) {
this.tabIndex = opt.num;
this.myOrderCoupon()
},
onShow() {
console.log(this.tabIndex)
this.myOrderCoupon()
},
methods: {
goDetail(id) {
uni.navigateTo({
url: 'discountCardDetail?id=' + id
})
},
tabClick(num) {
this.tabIndex = num;
},
tabClick2(num) {
this.tabIndex2 = num;
},
myOrderCoupon() {
uni.showLoading({
title: '加载中'
})
this.$http('opencoupon/listCoupon', {
// page: this.page,
// limit: 10,
}, 'POST').then(res => {
uni.hideLoading();
// var list = res.data.Items
var list = res.data
// 处理 undefined和null转为空白字符串
// list.forEach((item, index) => {
// for (const key in item) {
// item[key] = this.$praseStrEmpty(item[key])
// }
// })
this.items = list
})
},
}
}
</script>
<style scoped>
.box {
min-height: 100vh;
background: #F4F5F7;
}
.tab {
background: #FFFFFF;
display: flex;
justify-content: space-around;
line-height: 92rpx;
position: fixed;
width: calc(100vw - 48rpx);
padding-left: 24rpx;
padding-right: 24rpx;
height: 92rpx;
z-index: 11;
}
.tabLine {
font-size: 30rpx;
text-align: center;
}
.tabActive {
color: #FF0000;
border-bottom: 4rpx solid #FF0000;
}
.main {
/* padding-top: 92rpx; */
padding-bottom: 20rpx;
background-color: #F4F5F7;
}
.mainActive{
/* padding-top: 184rpx; */
padding-bottom: 20rpx;
background-color: #F4F5F7;
}
.okBox {
background: #FFFFFF;
display: flex;
justify-content: flex-start;
align-items: center;
/* border-top: 1rpx solid #EEEEEE; */
position: fixed;
width: 100vw;
padding-left: 24rpx;
padding-right: 24rpx;
/* margin-top: -93rpx; */
height: 92rpx;
z-index: 11;
}
.tabLine2 {
font-size: 28rpx;
text-align: center;
width: 144rpx;
height: 56rpx;
background: #F4F5F7;
border-radius: 28rpx;
line-height: 56rpx;
margin-right: 24rpx;
}
.tabActive2 {
background-color: rgba(240, 59, 59, 0.06);
border-radius: 28rpx;
background-color: 0.06;
font-size: 28rpx;
color: #FF0000;
width: 144rpx;
height: 56rpx;
line-height: 56rpx;
margin-right: 24rpx;
}
.itemBg {
margin: 20rpx 24rpx 0rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 40rpx 20rpx 20rpx;
}
.itemTop {
display: flex;
justify-content: space-between;
margin-bottom: 40rpx;
}
.use {
font-size: 26rpx;
color: #FF0000;
}
.use2 {
font-size: 40rpx;
font-weight: 500;
color: #FF0000;
line-height: 56rpx;
}
.used {
font-size: 26rpx;
color: #666666;
}
.used2 {
font-size: 40rpx;
font-weight: 500;
color: #666666;
line-height: 56rpx;
}
.rightB{
position: relative;
}
.tiaojian{
font-size: 24rpx;
color: #666666;
}
.name{
font-size: 30rpx;
font-weight: 500;
color: #333333;
line-height: 42rpx;
}
.time{
font-size: 24rpx;
color: #666666;
margin-top: 15rpx;
}
.itemBottom {
display: flex;
justify-content: space-between;
padding-top: 20rpx;
border-top: 1rpx solid #EEEEEE;
font-size: 24rpx;
color: #999999;
line-height: 33rpx;
}
.couponlineTopImg{
width: 118rpx;
height: 100rpx;
position: absolute;
top: -38rpx;
right: 0;
}
.shareB{
display: flex;
flex-direction: column;
align-items: center;
}
.couponlineshareImg{
width: 44rpx;
height: 44rpx;
}
.keshare{
font-size: 22rpx;
color: #666666;
margin-top: 15rpx;
}
.rightJian{
display: flex;
align-items: center;
}
</style>