fe / yoho-app-web · Commits

Go to a project

Authored by htoooth
Commit 8d263683d8e3200ff2237131e2868b25a5e80afb 1 parent c06269c5

action change

Inline Side-by-side
Showing 8 changed files with 200 additions and 160 deletions
<template>
<div class="exchange-box">
<input type="text" name="couponCodeInput" placeholder="请输入优惠券码" v-model="code">
<div class="input-wrapper">
<input type="text" name="couponCodeInput" placeholder="请输入优惠券码" v-model="code">
</div>
<button :class="btnCls" @click="onClick">兑换</button>
</div>
</template>
<script>
export default {
name: 'ExchangeBox',
... ... @@ -18,7 +18,7 @@ export default {
methods: {
onClick() {
this.$emit('click');
},
}
},
computed: {
btnCls() {
... ... @@ -30,6 +30,9 @@ export default {
watch: {
code() {
this.$emit('input', this.code);
},
value(val) {
this.code = val;
}
}
};
... ... @@ -45,6 +48,11 @@ export default {
left: 0;
z-index: 2;
.input-wrapper {
display: inline-block;
position: relative;
}
input {
width: 570px;
height: 60px;
... ...
import ScrollView from './scroll-view';
export default ScrollView;
... ...
<template>
<Scroll ref="scroll" :options="options" @pulling-up="reachBottom" :data="data">
<slot></slot>
</Scroll>
</template>
<script>
import {Scroll} from 'cube-ui';
export default {
name: 'yoho-scroll-view',
props: {
options: {
type: Object,
default() {
return {};
}
},
reachBottom: {
type: Function,
default() {
return {};
}
},
data: {
type: Array,
default() {
return [];
}
}
},
methods: {
forceUpdate() {
this.$refs.scroll.forceUpdate();
}
},
components: {
Scroll
}
};
</script>
<style lang="scss" scoped>
</style>
... ...
... ... @@ -2,9 +2,9 @@
<div style="height: 100%;">
<div style="background-color: #f0f0f0;height: 100%;">
<div class="head"></div>
<Scroll :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
<ScrollView :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
<CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
</Scroll>
</ScrollView>
<Empty v-else></Empty>
</div>
</div>
... ... @@ -17,17 +17,16 @@ const {mapState} = createNamespacedHelpers('coupon/yoho');
import CouponItem from '../components/coupon-item';
import Empty from '../components/empty';
import {Scroll} from 'cube-ui';
import ScrollView from '../components/scroll-view';
export default {
name: 'UfoCouponListPage',
computed: {
...mapState(['ufoList']),
},
asyncData({store, router}) {
asyncData({store}) {
return store.dispatch('coupon/yoho/fetchUfoList', {
limit: 20,
limit: 100,
page: 1
});
},
... ... @@ -45,7 +44,7 @@ export default {
methods: {
},
components: {
Scroll,
ScrollView,
CouponItem,
Empty
}
... ... @@ -56,70 +55,4 @@ export default {
.head {
height: 90px;
}
.coupon-wrapper {
height: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background: #f0f0f0;
box-sizing: content-box;
}
.coupon-item {
width: 100%;
height: 100%;
background: white;
border-radius: 10px;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.4);
}
.list-wrapper {
overflow: hidden;
li {
padding: 15px 10px;
background-color: white;
border-radius: 10px;
}
}
.tab-slide-container {
/*position: fixed;*/
/*left: 0;*/
/*right: 0;*/
/*bottom: 0;*/
height: 100%;
}
.tab-container {
height: 90px;
background-color: white;
border-bottom: 1px solid #e0e0e0;
}
.tab-item {
line-height: 60px;
text-align: center;
font-size: 28px;
color: #b0b0b0;
}
.tab-item + .tab-item {
border-left: 1px solid #e0e0e0;
}
.cube-tab_active {
color: #444 !important;
}
.cube-scroll-wrapper {
padding-top: 20px;
}
</style>
... ...
<template>
<div style="height: 100%;">
<div class="head"></div>
<ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
<div class="tab-slide-container">
<Slide
ref="slide"
:loop="false"
:auto-play="false"
:show-dots="false"
:initial-index="initialIndex"
:options="slideOptions"
@scroll="scroll"
@change="changePage"
>
<SlideItem style="background-color: #f0f0f0;">
<ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
<div class="filter-wrapper" v-if="showFilter">
<div class="filter-mask" @click="onMaskClick"></div>
<FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
</div>
<div class="head"></div>
<Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">
<CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
</Scroll>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
<CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
</Scroll>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
<CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
</Scroll>
<Empty v-else></Empty>
</SlideItem>
</Slide>
<div style="height: 100%;">
<div class="head"></div>
<ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="onFilterChange"></ClassicTabs>
<div class="tab-slide-container">
<Slide
ref="slide"
:loop="false"
:auto-play="false"
:show-dots="false"
:initial-index="initialIndex"
:options="slideOptions"
@scroll="scroll"
@change="changePage"
>
<SlideItem style="background-color: #f0f0f0;">
<ExchangeBox v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
<div class="filter-wrapper" v-if="showFilter">
<div class="filter-mask" @click="onMaskClick"></div>
<FilterBar :list="filterList" v-model="selectFilterId" class="filter"></FilterBar>
</div>
<div class="head"></div>
<ScrollView ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<ScrollView ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getUseList" :key="index"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
<SlideItem style="background-color: #f0f0f0;">
<ScrollView ref="overtime" :data="getOvertimeList" options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
<CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index"></CouponItem>
</ScrollView>
<Empty v-else></Empty>
</SlideItem>
</Slide>
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('coupon/yoho');
const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');
import Tabs from '../components/tabs';
import FilterBar from '../components/filter-bar';
import ExchangeBox from '../components/exchange-box';
import CouponItem from '../components/coupon-item';
import Empty from '../components/empty';
import ScrollView from '../components/scroll-view';
import {Slide, Scroll} from 'cube-ui';
import {Slide} from 'cube-ui';
const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};
export default {
name: 'YohoCouponListPage',
asyncData({store}) {
return store.dispatch('coupon/yoho/fetchYohoList', {
return Promise.all([
store.dispatch('coupon/yoho/fetchYohoList', {
type: TYPE.notuse,
filter: 0,
limit: 20,
page: 1
});
}),
store.dispatch('coupon/yoho/fetchYohoList', {
type: TYPE.use,
}),
store.dispatch('coupon/yoho/fetchYohoList', {
type: TYPE.overtime,
})
]);
},
data() {
return {
selectLabel: '未使用',
selectType: TYPE.notuse,
showFilter: false,
selectFilterId: 0,
inputCouponCode: '',
... ... @@ -99,6 +106,13 @@ export default {
],
scrollOptions: {
directionLockThreshold: 0,
pullUpLoad: {
threshold: 0,
txt: {
more: '加载更多',
noMore: '以上是最新的内容'
}
}
},
slideOptions: {
listenScroll: true,
... ... @@ -109,7 +123,8 @@ export default {
};
},
computed: {
...mapState(['yohoList', 'filterList']),
...mapState(['filterList']),
...mapGetters(['getNotUseList', 'getUseList', 'getOvertimeList']),
initialIndex() {
let index = 0;
... ... @@ -120,28 +135,17 @@ export default {
created() {
},
mounted() {
this.getNum();
this.fetchYohoNum();
},
methods: {
...mapActions(['getCouponCode']),
...mapActions(['getCouponCode', 'fetchYohoList', 'fetchYohoNum']),
changePage(current) {
const tab = this.tabLabels[current];
this.selectLabel = this.tabLabels[current].label;
this.$store.dispatch('coupon/yoho/fetchYohoList', {
type: tab.type,
filter: tab.selectFilterId,
limit: 20,
page: 1
});
this.selectType = this.tabLabels[current].type;
},
scroll() {
},
getNum() {
return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
},
onFilterChange(show) {
this.showFilter = show;
},
... ... @@ -152,17 +156,21 @@ export default {
onSubmitCode() {
this.getCouponCode({code: this.inputCouponCode}).then(result => {
if (result.code === 200) {
this.inputCouponCode = '';
this.$createToast({
txt: result.message,
type: 'correct'
});
}).show();
} else {
this.$createToast({
txt: result.message,
type: 'error'
});
}).show();
}
});
},
reachBottom() {
this.fetchYohoList({type: this.selectType});
}
},
watch: {
... ... @@ -178,9 +186,9 @@ export default {
ExchangeBox,
Slide,
SlideItem: Slide.Item,
Scroll,
CouponItem,
Empty
Empty,
ScrollView
}
};
</script>
... ... @@ -194,10 +202,6 @@ export default {
height: 100%;
}
.cube-scroll-wrapper {
padding-top: 20px;
}
.filter-wrapper {
width: calc(100% / 3);
height: 100%;
... ...
... ... @@ -23,17 +23,26 @@ function _handleUfoCoupon(item) {
}
export default {
async fetchYohoList({commit}, {type, filter, limit, page}) {
async fetchYohoList({commit, state}, {type, filter = 0}) {
commit(Types.FETCH_YOHO_COUPON_REQUEST);
const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit, page});
if (state.yohoList[type].page > state.yohoList[type].pageNum) {
return;
}
const result = await this.$api.get('/api/coupon/yoho/list', {type, filter, limit: 10, page: state.yohoList[type].page + 1});
if (result && result.code === 200) {
const data = {
type,
list: result.data.couponList.map(_handleCoupon),
couponList: result.data.couponList.map((i) => _handleCoupon(i, type)),
pageNum: result.data.pageNum,
pageSize: result.data.pageSize,
total: result.data.total
};
console.log(data);
if (type === TYPE.notuse) {
data.filter = result.data.filters;
}
... ... @@ -42,6 +51,8 @@ export default {
} else {
commit(Types.FETCH_YOHO_COUPON_FAILED);
}
return result.data.couponList ? result.data.couponList.length !== 0 : false;
},
async fetchYohoNum({commit}) {
... ...
... ... @@ -11,9 +11,27 @@ export default function() {
state: {
fetching: false,
yohoList: {
notuse: [],
use: [],
overtime: []
notuse: {
couponList: [],
pageNum: 0,
pageSize: 10,
total: 0,
page: 0,
},
use: {
couponList: [],
pageNum: 0,
pageSize: 10,
total: 0,
page: 0,
},
overtime: {
couponList: [],
pageNum: 0,
pageSize: 10,
total: 0,
page: 0
}
},
num: {
notuse: 0,
... ... @@ -29,6 +47,15 @@ export default function() {
getNum(state) {
return [handleNum(state.num.notuse), handleNum(state.num.use), handleNum(state.num.overtime)];
},
getNotUseList(state) {
return state.yohoList.notuse.couponList;
},
getUseList(state) {
return state.yohoList.use.couponList;
},
getOvertimeList(state) {
return state.yohoList.overtime.couponList;
},
}
};
}
... ...
... ... @@ -4,9 +4,16 @@ export default {
[Types.FETCH_YOHO_COUPON_REQUEST](state) {
state.fetching = true;
},
[Types.FETCH_YOHO_COUPON_SUCCESS](state, {list, filter, type}) {
[Types.FETCH_YOHO_COUPON_SUCCESS](state, {couponList, filter, type, pageNum, pageSize, total}) {
state.fetching = false;
state.yohoList[type] = list;
const list = state.yohoList[type].couponList;
state.yohoList[type].couponList = list.concat(couponList);
state.yohoList[type].pageNum = pageNum;
state.yohoList[type].pageSize = pageSize;
state.yohoList[type].total = total;
state.yohoList[type].page += 1;
if (filter) {
state.filterList = filter;
... ...