Skip to content
GitLab
Commit a756578b authored by Junling Bu's avatar Junling Bu
Browse files

refact[litemall-vue]: 删除infinity-scroll自定义组件，而是采用vant List组件

parent a8b0fbc3
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/components/infinity-scroll/index.vue deleted 100644 → 0
View file @ a8b0fbc3
<template>
<van-list
v-model="loading"
:finished="finished"
:offset="100"
@load="loadMore"
v-bind="$attrs"
v-on="$listeners"
:immediate-check="false"
>
<is-empty v-if="isEmpty">{{ emptyText }}</is-empty>
<slot v-else></slot>
<div v-if="finished" class="text-center nomore">{{ onMoreText }}</div>
</van-list>
</template>
<script>
import { List } from 'vant';
import { get } from 'lodash';
import IsEmpty from '@/components/is-empty';
import loadMore from '@/mixin/load-more';
import { getList } from '@/api/api';
const DEFAULT_CONFIG = {
params: {},
headers: {}
};
export default {
name: 'infinity-scroll',
mixins: [loadMore],
props: {
apiUrl: {
type: String,
required: true
},
resKey: {
type: String,
default: 'data.goodsList'
},
pageKey: {
type: String,
default: 'data.page'
},
emptyText: {
type: String,
default: '抱歉,找不到结果~'
},
onMoreText: {
type: String,
default: '没有更多了~'
},
perPage: Number,
beforeRequest: Function
},
created() {
this.resetInit();
},
methods: {
beforeInitData() {
return this.beforeRequest ? this.beforeRequest() : DEFAULT_CONFIG;
},
initData() {
const { params = {}, headers = {} } = this.beforeInitData();
const prePage = this.perPage || this.pages.perPage;
console.log(params);
console.log(headers);
getList(this.apiUrl, {
page: this.pages.currPage,
limit: prePage,
...params
},
headers
).then(res => {
const items = get(res.data.data, this.resKey, []);
const page = get(res.data.data, this.pageKey, null);
this.$emit('onLoad', items);
return page;
});
},
sleep(time) {
return new Promise(resolve => {
setTimeout(resolve, time);
});
}
},
components: {
IsEmpty,
[List.name]: List
}
};
</script>
<style lang="scss" scoped>
.nomore {
padding: 10px 0;
color: $font-color-gray;
}
</style>
litemall-vue/src/views/items/list/index.vue
View file @ a756578b
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
<script> <script>
import { goodsCategory, goodsList } from '@/api/api'; import { goodsCategory, goodsList } from '@/api/api';
import { Card, List, Tab, Tabs } from 'vant'; import { Card, List, Tab, Tabs } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
export default { export default {
name: 'Item-list', name: 'Item-list',
......
litemall-vue/src/views/user/coupon-list/index.vue
View file @ a756578b
<template> <template>
<div class="order_list no-pad-bottom over-hide"> <div class="coupon_list">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick"> <van-tabs v-model="activeIndex"
<van-tab v-for="(tabTitle, tabIndex) in tabTitles" :title="tabTitle" :key="tabIndex"> :swipe-threshold="5"
<!-- <InfinityScroll @click="handleTabClick">
class="full-page scroll-wrap height-fix42" <van-tab v-for="(tabTitle, tabIndex) in tabTitles"
:beforeRequest="beforeRequest" :title="tabTitle"
:apiUrl="listApi" :key="tabIndex">
@onLoad="onLoad(tabIndex, $event)" <van-list v-model="loading"
> --> :finished="finished"
:immediate-check="false"
<van-panel style=" padding-bottom: 10px;"> finished-text="没有更多了"
<div class="van-coupon-item" v-for="(coupon,index) in couponList" :key="index"> @load="getCouponList">
<div class="van-coupon-item__content"> <van-panel style=" padding-bottom: 10px;">
<div class="van-coupon-item__head"> <div class="van-coupon-item"
<h2> v-for="(coupon,index) in couponList"
<span>¥</span> :key="index">
{{coupon.discount}} 元 <div class="van-coupon-item__content">
</h2> <div class="van-coupon-item__head">
<p>{{coupon.desc }} - {{coupon.tag}}</p> <h2>
</div> <span>¥</span>
<div class="van-coupon-item__body"> {{coupon.discount}} 元
<h2>{{coupon.name}}</h2> </h2>
<p>有效期: 至 {{coupon.endTime}}</p> <p>{{coupon.desc }} - {{coupon.tag}}</p>
</div>
</div> <div class="van-coupon-item__body">
</div> <h2>{{coupon.name}}</h2>
<p>有效期: 至 {{coupon.endTime}}</p>
</div>
</van-panel> </div>
<!-- </InfinityScroll> --> </div>
</div>
</van-panel>
</van-list>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
</template> </template>
<script> <script>
import { CouponMyList, couponMyList } from '@/api/api'; import { couponMyList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant'; import { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant';
import _ from 'lodash'; import _ from 'lodash';
import InfinityScroll from '@/components/infinity-scroll';
export default { export default {
name: 'coupon-list', name: 'coupon-list',
...@@ -57,28 +58,43 @@ export default { ...@@ -57,28 +58,43 @@ export default {
}, },
data() { data() {
return { return {
listApi: CouponMyList,
activeIndex: this.active, activeIndex: this.active,
tabTitles: [ tabTitles: ['未使用', '已使用', '已过期'],
'未使用',
'已使用',
'已过期'
],
status: 0, status: 0,
couponList: [] couponList: [],
page: 0,
limit: 10,
loading: false,
finished: false
}; };
}, },
methods: { methods: {
init(i) { init() {
let status = i || this.activeIndex; this.page = 0;
couponMyList({status: status}).then(res => { this.couponList = [];
this.couponList = res.data.data.list; this.getCouponList();
},
getCouponList() {
this.page++;
couponMyList({
status: this.activeIndex,
page: this.page,
limit: this.limit
}).then(res => {
this.couponList.push(...res.data.data.list);
this.loading = false;
this.finished = res.data.data.page >= res.data.data.pages;
}); });
}, },
handleTabClick(index) { handleTabClick(index) {
this.init(index); this.activeIndex = index;
}, this.page = 0;
this.couponList = [];
this.getCouponList();
}
}, },
components: { components: {
[Tab.name]: Tab, [Tab.name]: Tab,
...@@ -86,15 +102,14 @@ export default { ...@@ -86,15 +102,14 @@ export default {
[Panel.name]: Panel, [Panel.name]: Panel,
[Card.name]: Card, [Card.name]: Card,
[List.name]: List, [List.name]: List,
InfinityScroll,
CouponCell, CouponCell,
CouponList, CouponList
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.order_list { .coupon_list {
&--footer_btn { &--footer_btn {
text-align: right; text-align: right;
} }
...@@ -130,8 +145,7 @@ export default { ...@@ -130,8 +145,7 @@ export default {
padding: 24px 0 0 15px; padding: 24px 0 0 15px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border:1px solid red; border: 1px solid red;
} }
.van-coupon-item h2, .van-coupon-item h2,
.van-coupon-item p { .van-coupon-item p {
...@@ -166,7 +180,7 @@ export default { ...@@ -166,7 +180,7 @@ export default {
flex: 1; flex: 1;
position: relative; position: relative;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
margin-left:20px; margin-left: 20px;
} }
.van-coupon-item__body h2 { .van-coupon-item__body h2 {
font-size: 16px; font-size: 16px;
......
litemall-vue/src/views/user/order-entity-list/index.vue
View file @ a756578b
<template> <template>
<div class="order_list over-hide"> <div class="order_list">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick"> <van-tabs v-model="activeIndex"
<van-tab v-for="(tabTitle, index) in tabTitles" :title="tabTitle" :key="index"> :swipe-threshold="5"
<!-- <InfinityScroll @click="handleTabClick">
class="full-page scroll-wrap height-fix42" <van-tab v-for="(tabTitle, index) in tabTitles"
:beforeRequest="beforeRequest" :title="tabTitle"
:apiUrl="listApi" :key="index">
@onLoad="onLoad(tabIndex, $event)" <van-list v-model="loading"
> --> :finished="finished"
<van-panel :immediate-check="false"
v-for="(el, i) in orderList" finished-text="没有更多了"
class="order_list--panel" @load="getOrderList">
:key="i" <van-panel v-for="(el, i) in orderList"
:title="'订单编号: ' + el.orderSn" class="order_list--panel"
:status="el.orderStatusText" :key="i"
> :title="'订单编号: ' + el.orderSn"
:status="el.orderStatusText">
<div> <div>
<van-card <van-card v-for="(goods, goodsI) in el.goodsList"
v-for="(goods, goodsI) in el.goodsList" class="order_list--van-card"
class="order_list--van-card" :key="goodsI"
:key="goodsI" :title="goods.goodsName"
:title="goods.goodsName" :num="goods.number"
:num="goods.number" :thumb="goods.picUrl"
:thumb="goods.picUrl" @click.native="toOrderDetail(el.id)">
@click.native="toOrderDetail(el.id)" <div slot="desc">
> <div class="van-card__desc">
<div slot="desc"> <van-tag plain
<div class="van-card__desc"> style="margin-right:6px;"
<van-tag plain style="margin-right:6px;" v-for="(spec, index) in goods.specifications" :key="index"> v-for="(spec, index) in goods.specifications"
{{spec}} :key="index">
</van-tag> {{spec}}
</van-tag>
</div>
</div> </div>
</div> </van-card>
</van-card> <div class="order_list--total">合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
<div
class="order_list--total"
>合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
</div> </div>
<div slot="footer" class="order_list--footer_btn"> <div slot="footer"
<van-button size="small" v-if="el.handleOption.cencel" @click="cancelOrder(el.id)">取消订单</van-button> class="order_list--footer_btn">
<van-button size="small" v-if="el.handleOption.pay" type="danger" @click="toPay(el.id)">去支付</van-button> <van-button size="small"
<van-button size="small" v-if="el.handleOption.confirm" type="danger" @click="confirmOrder(el.id)">确认收货</van-button> v-if="el.handleOption.cencel"
<van-button size="small" v-if="el.handleOption.delete" @click="delOrder(el.id)">删除订单</van-button> @click="cancelOrder(el.id)">取消订单</van-button>
<van-button size="small" v-if="el.handleOption.comment" @click="commentOrder(el.id)">去评价</van-button> <van-button size="small"
</div> v-if="el.handleOption.pay"
type="danger"
@click="toPay(el.id)">去支付</van-button>
<van-button size="small"
v-if="el.handleOption.confirm"
type="danger"
@click="confirmOrder(el.id)">确认收货</van-button>
<van-button size="small"
v-if="el.handleOption.delete"
@click="delOrder(el.id)">删除订单</van-button>
<van-button size="small"
v-if="el.handleOption.comment"
@click="commentOrder(el.id)">去评价</van-button>
</div>
</van-panel> </van-panel>
<!-- </InfinityScroll> --> </van-list>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
...@@ -56,10 +69,9 @@ ...@@ -56,10 +69,9 @@
</template> </template>
<script> <script>
import { OrderList, orderList } from '@/api/api'; import { orderList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List, Tag } from 'vant'; import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
export default { export default {
name: 'order-list', name: 'order-list',
...@@ -74,25 +86,33 @@ export default { ...@@ -74,25 +86,33 @@ export default {
this.init(); this.init();
}, },
data() { data() {
return { return {
listApi: OrderList,
activeIndex: this.active, activeIndex: this.active,
tabTitles: [ tabTitles: ['全部', '待付款', '待发货', '待收货', '待评价'],
'全部', orderList: [],
'待付款', page: 0,
'待发货', limit: 10,
'待收货', loading: false,
'待评价' finished: false
],
orderList: []
}; };
}, },
methods: { methods: {
init(i) { init() {
let showType = i || this.activeIndex; this.page = 0;
orderList({showType: showType}).then(res => { this.orderList = [];
this.orderList = res.data.data.list; this.getOrderList();
},
getOrderList() {
this.page++;
orderList({
showType: this.activeIndex,
page: this.page,
limit: this.limit
}).then(res => {
this.orderList.push(...res.data.data.list);
this.loading = false;
this.finished = res.data.data.page >= res.data.data.pages;
}); });
}, },
delOrder(i) { delOrder(i) {
...@@ -110,13 +130,15 @@ export default { ...@@ -110,13 +130,15 @@ export default {
}); });
this.$toast('已确认收货'); this.$toast('已确认收货');
}, },
commentOrder(id) { commentOrder(id) {},
},
toPay(id) { toPay(id) {
this.$router.push({ name: 'payment', params: { orderId: id } }); this.$router.push({ name: 'payment', params: { orderId: id } });
}, },
handleTabClick(index) { handleTabClick(index) {
this.init(index); this.activeIndex = index;
this.page = 0;
this.orderList = [];
this.getOrderList();
}, },
toOrderDetail(id) { toOrderDetail(id) {
this.$router.push({ this.$router.push({
...@@ -126,7 +148,6 @@ export default { ...@@ -126,7 +148,6 @@ export default {
} }
}, },
components: { components: {
InfinityScroll,
[Tab.name]: Tab, [Tab.name]: Tab,
[Tabs.name]: Tabs, [Tabs.name]: Tabs,
[Panel.name]: Panel, [Panel.name]: Panel,
...@@ -140,16 +161,15 @@ export default { ...@@ -140,16 +161,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.order_list { .order_list {
padding-bottom: 0; padding-bottom: 0;
overflow-y: hidden;
&--footer_btn { &--footer_btn {
text-align: right; text-align: right;
} }
&--panel { &--panel {
margin-bottom: 10px; margin-bottom: 20px;
} }
&--van-card { &--van-card {
background-color: #fafafa; background-color: #fff;
} }
&--total { &--total {
......
litemall-vue/src/views/user/refund-list/index.vue
View file @ a756578b
<template> <template>
<div class="order_list"> <div class="refund_list">
<van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick"> <van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type"> <van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tabIndex">
<InfinityScroll <van-list v-model="loading"
class="full-page scroll-wrap" :finished="finished"
:beforeRequest="beforeRequest" :immediate-check="false"
:apiUrl="listApi" finished-text="没有更多了"
@onLoad="onLoad(tabIndex, $event)" @load="getRefundList">
>
<van-panel <van-panel
v-for="(el, i) in tab.items" v-for="(el, i) in tab.items"
class="order_list--panel" class="order_list--panel"
...@@ -36,7 +35,7 @@ ...@@ -36,7 +35,7 @@
>{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button> >{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
</div> </div>
</van-panel> </van-panel>
</InfinityScroll> </van-list>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
...@@ -46,7 +45,6 @@ ...@@ -46,7 +45,6 @@
import { REFUND_LIST } from '@/api/api'; import { REFUND_LIST } from '@/api/api';
import { Tab, Tabs, Panel, Card, List } from 'vant'; import { Tab, Tabs, Panel, Card, List } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = { const STATUS_TEXT = {
10: '退款中', 10: '退款中',
...@@ -60,9 +58,12 @@ export default { ...@@ -60,9 +58,12 @@ export default {
data() { data() {
return { return {
listApi: REFUND_LIST, listApi: REFUND_LIST,
shop_id: 1,
activeIndex: 0, activeIndex: 0,
items: [], items: [],
page: 0,
limit: 10,
loading: false,
finished: false,
tabsItem: [ tabsItem: [
{ {
name: '全部', name: '全部',
...@@ -87,17 +88,6 @@ export default { ...@@ -87,17 +88,6 @@ export default {
onLoad(i, items) { onLoad(i, items) {
this.tabsItem[i].items.push(...items); this.tabsItem[i].items.push(...items);
}, },
beforeRequest() {
const i = this.activeIndex;
const status = this.tabsItem[i].status;
const { shop_id } = this;
return {
params: {
status,
shop_id
}
};
},
refund_handle(i) { refund_handle(i) {
const item = this.items[i]; const item = this.items[i];
if (item.status == 10) { if (item.status == 10) {
...@@ -120,6 +110,9 @@ export default { ...@@ -120,6 +110,9 @@ export default {
}, },
getStatusText(status) { getStatusText(status) {
return STATUS_TEXT[status] || ''; return STATUS_TEXT[status] || '';
},
getRefundList(){
} }
}, },
components: { components: {
...@@ -127,14 +120,13 @@ export default { ...@@ -127,14 +120,13 @@ export default {
[Tabs.name]: Tabs, [Tabs.name]: Tabs,
[Panel.name]: Panel, [Panel.name]: Panel,
[Card.name]: Card, [Card.name]: Card,
[List.name]: List, [List.name]: List
InfinityScroll
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.order_list { .refund_list {
padding-bottom: 0; padding-bottom: 0;
&--footer_btn { &--footer_btn {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment