266 lines
6.2 KiB
Vue
266 lines
6.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="header">
|
|
<view class="tabs">
|
|
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
|
|
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
|
|
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
|
|
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
|
|
</view>
|
|
<view class="tabs-type">
|
|
<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
|
|
<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
|
|
<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
|
|
<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
|
|
<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
|
|
</view>
|
|
</view>
|
|
<block v-if="coupons.length > 0">
|
|
<view class="coupons">
|
|
<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
|
|
<view class="item cover">
|
|
<view v-if="item.type.value === 2">
|
|
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
|
|
<view class="cover-subtitle">代金券</view>
|
|
</view>
|
|
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
|
|
</view>
|
|
|
|
<view class="item mian">
|
|
<view class="title nowrap">{{item.title}}</view>
|
|
<view class="time nowrap">
|
|
<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
|
|
<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
|
|
</view>
|
|
<view class="tags nowrap">
|
|
<text>已{{item.status.text}}</text>
|
|
<text>{{item.goods_count}}商品可用</text>
|
|
</view>
|
|
</view>
|
|
<view class="arrowright">
|
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="list-null">
|
|
<view class="sub-title">暂无相关优惠券</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { toolsCoupons } from '@/apis/interfaces/coupons'
|
|
export default {
|
|
data() {
|
|
return {
|
|
listType: '',
|
|
tabsType: '',
|
|
coupons : [],
|
|
pages : {}
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getCoupons()
|
|
},
|
|
methods:{
|
|
// 选择类型
|
|
onTabs(value){
|
|
if(value == this.listType) return
|
|
this.listType = value
|
|
this.getCoupons()
|
|
},
|
|
// 状态筛选
|
|
onTabsType(val){
|
|
if(this.tabsType === val) return
|
|
this.tabsType = val
|
|
this.getCoupons()
|
|
},
|
|
// 数据列表
|
|
getCoupons(){
|
|
toolsCoupons({
|
|
type : this.listType,
|
|
status : this.tabsType
|
|
}).then(res => {
|
|
console.log(res)
|
|
this.coupons = res.lists.data
|
|
this.pages = res.lists.page
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.$Router.push({name: 'couponsAdd'})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// tabs
|
|
.header{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
.tabs{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: white;
|
|
padding: 15rpx 0;
|
|
font-size: $title-size-lg;
|
|
color: $text-gray;
|
|
.item{
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
&.show{
|
|
color: $text-price;
|
|
border-bottom: solid 4rpx $text-price;
|
|
}
|
|
}
|
|
}
|
|
// 类型
|
|
.tabs-type{
|
|
display: flex;
|
|
padding: 20rpx 30rpx;
|
|
background: white;
|
|
.item{
|
|
font-size: $title-size-sm;
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
border-radius: 23rpx;
|
|
padding: 0 ($padding - 10);
|
|
background: white;
|
|
margin-right: $margin/2;
|
|
color: $text-gray;
|
|
&.show{
|
|
background-color: rgba($color: $text-price, $alpha: .1);
|
|
color: $text-price;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 空提示
|
|
.list-null{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
@extend .vertical;
|
|
.sub-title{
|
|
color: $text-gray;
|
|
font-size: $title-size-m;
|
|
}
|
|
.icon{
|
|
width: 288rpx;
|
|
}
|
|
}
|
|
// 订单管理
|
|
.coupons{
|
|
padding-top: 180rpx;
|
|
@extend .ios-bottom;
|
|
.coupons-flex{
|
|
position: relative;
|
|
background: white;
|
|
margin: $margin;
|
|
border-radius: $radius/2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: $padding 70rpx $padding 0;
|
|
.item{
|
|
position: relative;
|
|
padding: 0 $padding;
|
|
}
|
|
.arrowright{
|
|
position: absolute;
|
|
right: $margin;
|
|
top: 0;
|
|
bottom: 0;
|
|
@extend .vertical
|
|
}
|
|
.cover{
|
|
position: relative;
|
|
border-right: dashed 3rpx $border-color;
|
|
width: 208rpx;
|
|
text-align: center;
|
|
.cover-img{
|
|
width: 148rpx;
|
|
height: 148rpx;
|
|
border-radius: $radius/2;
|
|
vertical-align: top;
|
|
background: $border-color-lg;
|
|
border:solid 1rpx $border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
.cover-price{
|
|
padding-top: 24rpx;
|
|
font-weight: bold;
|
|
line-height: 58rpx;
|
|
font-size: $title-size + 10;
|
|
color: $text-price;
|
|
text{
|
|
font-size: 70%;
|
|
padding-left: 5rpx;
|
|
}
|
|
}
|
|
.cover-subtitle{
|
|
padding-bottom: 24rpx;
|
|
line-height: 40rpx;
|
|
color: $text-gray;
|
|
font-size: $title-size-sm;
|
|
}
|
|
&::after,&::before{
|
|
position: absolute;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: #f8f8f8;
|
|
content: " ";
|
|
right: -16rpx;
|
|
border-radius: 50%;
|
|
}
|
|
&::after{
|
|
top: -($padding + 15);
|
|
}
|
|
&::before{
|
|
bottom: -($padding + 15);
|
|
}
|
|
}
|
|
.mian{
|
|
justify-content: center;
|
|
width: calc(100% - 208rpx);
|
|
box-sizing: border-box;
|
|
@extend .vertical;
|
|
.title{
|
|
font-size: $title-size-lg;
|
|
line-height: 50rpx;
|
|
font-weight: bold;
|
|
}
|
|
.time, .tags{
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m;
|
|
line-height: 40rpx;
|
|
}
|
|
.tags{
|
|
margin-top: 10rpx;
|
|
text{
|
|
background: $border-color-lg;
|
|
color: $text-gray;
|
|
padding: 0 ($padding/2);
|
|
margin-right: ($margin/2);
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|