TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

员工管理添加员工列表优惠券完善

Browse Source
This commit is contained in:
唐明明
2021-09-14 17:22:04 +08:00
parent f5e99ca292
commit 291ce57704
22 changed files with 7141 additions and 3586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
pages/coupons/management.vue
View File

@@ -1,24 +1,40 @@
<template>
<view>
<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 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">
<image class="cover-img" :src="item.cover" mode="aspectFill" />
<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">{{item.start_at}}至{{item.end_at}}</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.type.text}}</text>
<text>{{item.channel.text}}</text>
<text>已{{item.status.text}}</text>
<text>{{item.goods_count}}商品可用</text>
</view>
</view>
<view class="arrowright">
@@ -29,7 +45,6 @@
</block>
<block v-else>
<view class="list-null">
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
<view class="sub-title">暂无相关优惠券</view>
</view>
</block>
@@ -42,6 +57,7 @@
data() {
return {
listType: '',
tabsType: '',
coupons : [],
pages : {}
};
@@ -56,11 +72,19 @@
this.listType = value
this.getCoupons()
},
// 状态筛选
onTabsType(val){
if(this.tabsType === val) return
this.tabsType = val
this.getCoupons()
},
// 数据列表
getCoupons(){
toolsCoupons({
type: this.listType
type : this.listType,
status : this.tabsType
}).then(res => {
console.log(res)
this.coupons = res.lists.data
this.pages = res.lists.page
}).catch(err => {
@@ -79,24 +103,46 @@
<style lang="scss" scoped>
// tabs
.tabs{
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
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{
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;
}
}
}
}
@@ -104,9 +150,7 @@
.list-null{
width: 100vw;
height: 100vh;
padding-bottom: 20vh;
box-sizing: border-box;
background: white;
text-align: center;
@extend .vertical;
.sub-title{
@@ -119,7 +163,7 @@
}
// 订单管理
.coupons{
padding-top: 90rpx;
padding-top: 180rpx;
@extend .ios-bottom;
.coupons-flex{
position: relative;
@@ -155,6 +199,23 @@
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;