['设置中心']
This commit is contained in:
265
pages/coupons/management.vue
Normal file
265
pages/coupons/management.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<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: 148rpx;
|
||||
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% - 148rpx - #{$padding*2});
|
||||
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>
|
||||
Reference in New Issue
Block a user