fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by huangyCode
Commit 5cfeb7f597820fa77ce0a30e748248781b4659e8 1 parent 7ea99d10

搜索

Inline Side-by-side
Showing 10 changed files with 231 additions and 14 deletions
<template>
<LayoutApp>
<div class="tab">
<div class="item right-line" :class="type ==='unused' ? 'item-selected' : 'item-default'"
@click="onChangeList('unused')">未使用{{unused.length && '('+ unused.length + ')'}}
</div>
<div class="item right-line" :class="type ==='used' ? 'item-selected' : 'item-default'"
@click="onChangeList('used')">已使用{{used.length && '('+ used.length + ')'}}
</div>
<div class="item" :class="type ==='overtime' ? 'item-selected' : 'item-default'"
@click="onChangeList('overtime')">已失效{{overtime.length && '('+ overtime.length + ')'}}
</div>
</div>
<Scroll class="coupon-list"
:options="scrollOptions"
:data="list"
@pulling-up="onPullingUp">
<div class="item" v-for="(item,index) in list">
<div :class="type === 'unused' ? 'item-bg' : 'item-gray-bg'">
<div class="item-left">
<div class="item-price" :class="type !== 'unused' && 'gray'">{{item.coupon_value}}</div>
<div class="item-rule" v-if="item.use_rule" :class="type !== 'unused' && 'gray'">{{item.use_rule}}</div>
</div>
<div class="item-right">
<div class="item-name" :class="type !== 'unused' && 'gray'">
<span class="item-type" :class="type !== 'unused' && 'gray'">[{{item.coupon_type_name}}]</span>
{{item.coupon_name}}
</div>
<div class="item-time" :class="type !== 'unused' && 'gray'">{{item.coupon_validity}}</div>
<div class="item-desc-btn" :class="type !== 'unused' && 'gray'">使用说明</div>
<div class="time-up" v-if="item.is_expired_soon === 'Y'"></div>
<div class="item-used-flag" v-if="type === 'used'"></div>
<div class="item-overtime-flag" v-if="type === 'overtime'"></div>
</div>
</div>
</div>
</Scroll>
</LayoutApp>
</template>
<script>
export default {
name: "list"
}
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('home/coupon');
export default {
name: 'Coupon',
components: {Scroll},
activated: function() {
this.fetchCouponList({type: 'unused', isReset: true}).then(r => {
this.list = r;
});
this.fetchCouponList({type: 'used', isReset: true});
this.fetchCouponList({type: 'overtime', isReset: true});
},
data() {
return {
scrollOptions: {
bounce: {
top: false
},
pullUpLoad: true
},
type: 'unused',
list: []
};
},
methods: {
...mapActions(['fetchCouponList']),
onChangeList(type) {
// 切换tab
this.type = type;
// 切换list
this.list = this[type].list;
},
async onPullingUp() {
this.list = await this.fetchCouponList({type: this.type});
},
},
computed: {
...mapState(['unused', 'used', 'overtime']),
},
};
</script>
<style scoped>
<style lang="scss" scoped>
.tab {
display: flex;
width: 100%;
height: 88px;
padding: 14px 0;
align-items: center;
.item {
font-size: 28px;
flex: 1;
height: 60px;
text-align: center;
line-height: 60px;
}
.right-line {
border-left: 1px solid #E0E0E0;
}
.item-default {
color: #B0B0B0;
}
.item-selected {
color: #444444;
}
}
.coupon-list {
background: #f5f5f5;
.item {
width: 100%;
margin-top: 20px;
}
.item-bg {
background: url(~statics/image/coupon/bg@3x.png) no-repeat;
width: 710px;
height: 200px;
background-size: cover;
margin: 0 auto;
display: flex;
position: relative;
}
.item-left {
width: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.item-price {
font-size: 72px;
color: #002B47;
}
.item-rule {
font-size: 24px;
margin-top: 4px;
color: #002B47;
}
}
.item-right {
margin-left: 6px;
.item-name {
font-size: 24px;
color: #222;
margin-top: 22px;
}
.item-type {
color: #002B47;
}
.item-time {
margin-top: 36px;
font-size: 22px;
color: #999;
}
.item-desc-btn{
margin-top: 26px;
font-size: 22px;
color: #999;
}
.time-up {
background: url(~statics/image/coupon/time-up@3x.png) no-repeat;
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
}
.item-used-flag {
background: url(~statics/image/coupon/used@3x.png) no-repeat;
background-size: cover;
position: absolute;
right: 30px;
width: 130px;
height: 130px;
top: 30px;
}
.item-overtime-flag {
background: url(~statics/image/coupon/overtime@3x.png) no-repeat;
background-size: cover;
position: absolute;
right: 30px;
width: 130px;
height: 130px;
top: 30px;
}
}
.gray {
color: #ccc;
}
.item-gray-bg {
background: url(~statics/image/coupon/bg-gray@3x.png) no-repeat;
width: 710px;
height: 200px;
background-size: cover;
margin: 0 auto;
display: flex;
position: relative;
}
}
</style>
... ...
... ... @@ -3,6 +3,8 @@ import Trade from './tradeIncome';
import Favorite from './favorite';
import news from './news';
import Income from './income';
import Coupon from './coupon';
export default [
{
name: 'channel',
... ... @@ -13,5 +15,6 @@ export default [
...Mine,
...Trade,
...Favorite,
...Income
...Income,
...Coupon
];
... ...
... ... @@ -54,7 +54,7 @@ export default function() {
let params = {
page: couponData.page,
limit: couponData.limit,
type: couponData.limit,
type: couponData.type,
};
if (param.isReset) {
... ... @@ -63,7 +63,7 @@ export default function() {
params.page += 1;
}
params.uid = uid;
let result = await this.$api.get('api/ufo/coupon/list', {...params});
let result = await this.$api.get('/api/ufo/coupon/list', {...params});
if (result.code === 200) {
let data = result.data;
... ... @@ -82,7 +82,7 @@ export default function() {
commit('addList', { data: couponData });
}
}
return result.data || [];
return couponData.list || [];
},
},
};
... ...
... ... @@ -107,16 +107,15 @@ module.exports = {
uid: { type: Number },
},
},
'api/ufo/coupon/list': {
'/api/ufo/coupon/list': {
ufo: true,
// auth: true,
path: '/ufo-gateway/coupon',
api: 'ufo.coupons.list',
param: {
uid: { type: Number },
page: {type: Number},
limit: {type: Number},
type: {type: Number}
type: {type: String},
uid: { type: Number },
}
},
};
... ...