325 lines
12 KiB
Vue
325 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 优惠券分类 -->
|
|
<view class="header">
|
|
<view class="tabs">
|
|
<view class="item" :class="{'show': tabsType == ''}" @click="onTabs('')">全部 <block v-if="counts.all != 0">({{ counts.all}})</block></view>
|
|
<view class="item" :class="{'show': tabsType == '1'}" @click="onTabs('1')">服务券 <block v-if="counts.services != 0">({{ counts.services}})</block></view>
|
|
<view class="item" :class="{'show': tabsType == '2'}" @click="onTabs('2')">代金券 <block v-if="counts.reductions != 0">({{ counts.reductions}})</block></view>
|
|
<view class="item" :class="{'show': tabsType == '3'}" @click="onTabs('3')">提货券 <block v-if="counts.exchanges != 0">({{ counts.exchanges}})</block></view>
|
|
</view>
|
|
<scroll-view class="tabs-type" scroll-x="true" scroll-with-animation="true">
|
|
<view class="item" :class="{'show': tabsStatus == ''}" @click="onTabsType('')">全部 <block v-if="statusCount.all != 0">({{ statusCount.all}})</block></view>
|
|
<view class="item" :class="{'show': tabsStatus == '1'}" @click="onTabsType('1')">未使用 <block v-if="statusCount.unused != 0">({{ statusCount.unused}})</block></view>
|
|
<view class="item" :class="{'show': tabsStatus == '2'}" @click="onTabsType('2')">已使用 <block v-if="statusCount.used != 0">({{ statusCount.used}})</block></view>
|
|
<view class="item" :class="{'show': tabsTime == 'expire'}" @click="onTabsTime('expire')">即将到期 <block v-if="statusCount.expire != 0">({{ statusCount.expire}})</block></view>
|
|
<view class="item" :class="{'show': tabsTime == 'new'}" @click="onTabsTime('new')">新到 <block v-if="statusCount.new != 0">({{ statusCount.new}})</block></view>
|
|
<view class="item" :class="{'show': tabsStatus == '3'}" @click="onTabsType('3')">已过期 <block v-if="statusCount.over != 0">({{ statusCount.over}})</block></view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="couponsMargin" v-if="coupons.length > 0">
|
|
<view class="coupons" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'myCouponsDte', params: {couponId: item.coupon_grant_id}})">
|
|
<view class="coupons-flex" :class="{active : item.coupon_count > 1}">
|
|
<view class="item cover" v-if="item.type.value == 2">
|
|
<view class="cover-price" :class="{active : item.type.value == 2}">
|
|
{{ item.price }}
|
|
</view>
|
|
<view class="cover-text">
|
|
{{ item.type.text }}
|
|
</view>
|
|
</view>
|
|
<view class="item cover" v-else-if="item.type.value == 1">
|
|
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-fu.png" mode=""></image>
|
|
</view>
|
|
<view class="item cover" v-else>
|
|
<image class="cover-tips" src="http://localhost:8081/static/images/coupon-ti.png" mode=""></image>
|
|
</view>
|
|
<view class="item mian">
|
|
<view class="title nowrap">{{ item.title }}</view>
|
|
<view class="time nowrap" v-if="item.type.value == 2">
|
|
{{ item.price_text }}
|
|
</view>
|
|
<view class="time nowrap">
|
|
{{ item.time.interval }}
|
|
</view>
|
|
</view>
|
|
<image v-if="item.status.status == 2" class="coupons-tips" src="/static/imgs/coupon_tips_00.png" mode="aspectFill"></image>
|
|
<image v-else-if="item.status.status == 3" class="coupons-tips" src="/static/imgs/coupon_tips_01.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="couponMore" v-if="item.coupon_count > 1">
|
|
<view class="couponMore-text" @click.stop="$Router.push({name: 'myCouponsList', params: {couponId: item.coupon_id, status: tabsStatus}})">
|
|
<view class="couponMore-title">查看全部{{ item.coupon_count }}张优惠券</view>
|
|
<view class="couponMore-arrow">
|
|
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<block v-else>
|
|
<view class="list-null">
|
|
<no-list name='no-counpon' txt="没有任何相关优惠券~" />
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { userCoupon } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
coupons : [] ,// 列表
|
|
counts : '',
|
|
tabsType : '',
|
|
tabsStatus : '',
|
|
tabsTime : '',
|
|
statusCount : '',
|
|
|
|
// 分页
|
|
pages : {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getCoupons()
|
|
},
|
|
methods:{
|
|
// 数据列表
|
|
getCoupons(){
|
|
userCoupon({
|
|
type : this.tabsType,
|
|
status : this.tabsStatus,
|
|
time : this.tabsTime
|
|
}).then(res => {
|
|
this.coupons = res.lists
|
|
this.counts = res.count.type
|
|
this.statusCount = res.count.status
|
|
this.pages = res.lists.page
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 选择类型
|
|
onTabs(value){
|
|
if(value == this.tabsType) return
|
|
this.tabsType = value
|
|
this.getCoupons()
|
|
},
|
|
// 状态筛选
|
|
onTabsType(val){
|
|
if(this.tabsStatus === val) return
|
|
this.tabsStatus = val
|
|
this.tabsTime = null
|
|
this.getCoupons()
|
|
},
|
|
// 新状态筛选
|
|
onTabsTime(val) {
|
|
if(this.tabsTime === val) return
|
|
this.tabsTime = val
|
|
this.tabsStatus = null
|
|
this.getCoupons()
|
|
}
|
|
}
|
|
}
|
|
</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: $mian-color;
|
|
border-bottom: solid 4rpx $mian-color;
|
|
}
|
|
}
|
|
}
|
|
// 类型
|
|
.tabs-type{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
padding: 20rpx 30rpx;
|
|
background: white;
|
|
.item{
|
|
display: inline-block;
|
|
padding: 0 20rpx;
|
|
text-align: center;
|
|
font-size: $title-size-sm;
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
border-radius: 23rpx;
|
|
background: white;
|
|
margin-right: $margin/2;
|
|
color: $text-gray;
|
|
&.show{
|
|
background-color: rgba($color: $mian-color, $alpha: .1);
|
|
color: $mian-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 列表
|
|
.couponsMargin {
|
|
padding: 200rpx 0 $padding;
|
|
}
|
|
.coupons {
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
margin-bottom: 30rpx;
|
|
@extend .ios-bottom;
|
|
.coupons-flex{
|
|
position: relative;
|
|
background: white;
|
|
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
|
|
border-radius: $radius;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: $padding 40rpx $padding 0;
|
|
&.active {
|
|
border-radius: $radius $radius 0 0;
|
|
}
|
|
.cover{
|
|
position: relative;
|
|
border-right: dashed 3rpx $border-color;
|
|
width: 160rpx;
|
|
text-align: center;
|
|
.cover-price {
|
|
font-size: 38rpx;
|
|
font-weight: 600;
|
|
color: #ee4c47;
|
|
&.active {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.cover-text {
|
|
font-size: 24rpx;
|
|
}
|
|
.cover-tips {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
.mian{
|
|
justify-content: center;
|
|
width: calc(100% - 190rpx);
|
|
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 - 4;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupons-tips {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
.couponMore {
|
|
font-size: 28rpx;
|
|
color: #686868;
|
|
position: relative;
|
|
height: 120rpx;
|
|
&::after,
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 20rpx;
|
|
border-radius: 10rpx;
|
|
background: #fff;
|
|
box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
|
|
z-index: 1;
|
|
height: 30rpx;
|
|
}
|
|
&::after {
|
|
width: calc(100% - 40rpx);
|
|
top: 70rpx;
|
|
left: 20rpx;
|
|
}
|
|
|
|
&::before {
|
|
width: calc(100% - 80rpx);
|
|
top: 90rpx;
|
|
left: 40rpx;
|
|
}
|
|
.couponMore-text {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 80rpx;
|
|
border-radius: 0 0 10rpx 10rpx;
|
|
line-height: 80rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
box-shadow: 0 0 10rpx rgba(0, 0,0, .1);
|
|
}
|
|
|
|
.couponMore-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.couponMore-arrow {
|
|
position: absolute;
|
|
right: $margin;
|
|
top: 0;
|
|
bottom: 0;
|
|
@extend .vertical
|
|
}
|
|
}
|
|
}
|
|
</style>
|