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 @@
<script>
import { goodsCategory, goodsList } from '@/api/api';
import { Card, List, Tab, Tabs } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
export default {
name: 'Item-list',
......
litemall-vue/src/views/user/coupon-list/index.vue
View file @ a756578b
<template>
<div class="order_list no-pad-bottom over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tabTitle, tabIndex) in tabTitles" :title="tabTitle" :key="tabIndex">
<!-- <InfinityScroll
class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
> -->
<van-panel style=" padding-bottom: 10px;">
<div class="van-coupon-item" v-for="(coupon,index) in couponList" :key="index">
<div class="van-coupon-item__content">
<div class="van-coupon-item__head">
<h2>
<span>¥</span>
{{coupon.discount}} 元
</h2>
<p>{{coupon.desc }} - {{coupon.tag}}</p>
</div>
<div class="van-coupon-item__body">
<h2>{{coupon.name}}</h2>
<p>有效期: 至 {{coupon.endTime}}</p>
</div>
</div>
</div>
</van-panel>
<!-- </InfinityScroll> -->
<div class="coupon_list">
<van-tabs v-model="activeIndex"
:swipe-threshold="5"
@click="handleTabClick">
<van-tab v-for="(tabTitle, tabIndex) in tabTitles"
:title="tabTitle"
:key="tabIndex">
<van-list v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="getCouponList">
<van-panel style=" padding-bottom: 10px;">
<div class="van-coupon-item"
v-for="(coupon,index) in couponList"
:key="index">
<div class="van-coupon-item__content">
<div class="van-coupon-item__head">
<h2>
<span>¥</span>
{{coupon.discount}} 元
</h2>
<p>{{coupon.desc }} - {{coupon.tag}}</p>
</div>
<div class="van-coupon-item__body">
<h2>{{coupon.name}}</h2>
<p>有效期: 至 {{coupon.endTime}}</p>
</div>
</div>
</div>
</van-panel>
</van-list>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { CouponMyList, couponMyList } from '@/api/api';
import { couponMyList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant';
import _ from 'lodash';
import InfinityScroll from '@/components/infinity-scroll';
export default {
name: 'coupon-list',
......@@ -57,28 +58,43 @@ export default {
},
data() {
return {
listApi: CouponMyList,
activeIndex: this.active,
tabTitles: [
'未使用',
'已使用',
'已过期'
],
tabTitles: ['未使用', '已使用', '已过期'],
status: 0,
couponList: []
couponList: [],
page: 0,
limit: 10,
loading: false,
finished: false
};
},
methods: {
init(i) {
let status = i || this.activeIndex;
couponMyList({status: status}).then(res => {
this.couponList = res.data.data.list;
init() {
this.page = 0;
this.couponList = [];
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) {
this.init(index);
},
this.activeIndex = index;
this.page = 0;
this.couponList = [];
this.getCouponList();
}
},
components: {
[Tab.name]: Tab,
......@@ -86,15 +102,14 @@ export default {
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll,
CouponCell,
CouponList,
CouponList
}
};
</script>
<style lang="scss" scoped>
.order_list {
.coupon_list {
&--footer_btn {
text-align: right;
}
......@@ -130,8 +145,7 @@ export default {
padding: 24px 0 0 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border:1px solid red;
border: 1px solid red;
}
.van-coupon-item h2,
.van-coupon-item p {
......@@ -166,7 +180,7 @@ export default {
flex: 1;
position: relative;
border-radius: 0 4px 4px 0;
margin-left:20px;
margin-left: 20px;
}
.van-coupon-item__body h2 {
font-size: 16px;
......
litemall-vue/src/views/user/order-entity-list/index.vue
View file @ a756578b
<template>
<div class="order_list over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tabTitle, index) in tabTitles" :title="tabTitle" :key="index">
<!-- <InfinityScroll
class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
> -->
<van-panel
v-for="(el, i) in orderList"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.orderSn"
:status="el.orderStatusText"
>
<div class="order_list">
<van-tabs v-model="activeIndex"
:swipe-threshold="5"
@click="handleTabClick">
<van-tab v-for="(tabTitle, index) in tabTitles"
:title="tabTitle"
:key="index">
<van-list v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="getOrderList">
<van-panel v-for="(el, i) in orderList"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.orderSn"
:status="el.orderStatusText">
<div>
<van-card
v-for="(goods, goodsI) in el.goodsList"
class="order_list--van-card"
:key="goodsI"
:title="goods.goodsName"
:num="goods.number"
:thumb="goods.picUrl"
@click.native="toOrderDetail(el.id)"
>
<div slot="desc">
<div class="van-card__desc">
<van-tag plain style="margin-right:6px;" v-for="(spec, index) in goods.specifications" :key="index">
{{spec}}
</van-tag>
<van-card v-for="(goods, goodsI) in el.goodsList"
class="order_list--van-card"
:key="goodsI"
:title="goods.goodsName"
:num="goods.number"
:thumb="goods.picUrl"
@click.native="toOrderDetail(el.id)">
<div slot="desc">
<div class="van-card__desc">
<van-tag plain
style="margin-right:6px;"
v-for="(spec, index) in goods.specifications"
:key="index">
{{spec}}
</van-tag>
</div>
</div>
</div>
</van-card>
<div
class="order_list--total"
>合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
</van-card>
<div class="order_list--total">合计: {{el.actualPrice * 100 | yuan}}（含运费{{el.post_fee | yuan}}）</div>
</div>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" v-if="el.handleOption.cencel" @click="cancelOrder(el.id)">取消订单</van-button>
<van-button size="small" 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>
<div slot="footer"
class="order_list--footer_btn">
<van-button size="small"
v-if="el.handleOption.cencel"
@click="cancelOrder(el.id)">取消订单</van-button>
<van-button size="small"
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>
<!-- </InfinityScroll> -->
</van-list>
</van-tab>
</van-tabs>
......@@ -56,10 +69,9 @@
</template>
<script>
import { OrderList, orderList } from '@/api/api';
import { orderList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
export default {
name: 'order-list',
......@@ -74,25 +86,33 @@ export default {
this.init();
},
data() {
return {
listApi: OrderList,
return {
activeIndex: this.active,
tabTitles: [
'全部',
'待付款',
'待发货',
'待收货',
'待评价'
],
orderList: []
tabTitles: ['全部', '待付款', '待发货', '待收货', '待评价'],
orderList: [],
page: 0,
limit: 10,
loading: false,
finished: false
};
},
methods: {
init(i) {
let showType = i || this.activeIndex;
orderList({showType: showType}).then(res => {
this.orderList = res.data.data.list;
init() {
this.page = 0;
this.orderList = [];
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) {
......@@ -110,13 +130,15 @@ export default {
});
this.$toast('已确认收货');
},
commentOrder(id) {
},
commentOrder(id) {},
toPay(id) {
this.$router.push({ name: 'payment', params: { orderId: id } });
},
handleTabClick(index) {
this.init(index);
this.activeIndex = index;
this.page = 0;
this.orderList = [];
this.getOrderList();
},
toOrderDetail(id) {
this.$router.push({
......@@ -126,7 +148,6 @@ export default {
}
},
components: {
InfinityScroll,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
......@@ -140,16 +161,15 @@ export default {
<style lang="scss" scoped>
.order_list {
padding-bottom: 0;
overflow-y: hidden;
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
margin-bottom: 20px;
}
&--van-card {
background-color: #fafafa;
background-color: #fff;
}
&--total {
......
litemall-vue/src/views/user/refund-list/index.vue
View file @ a756578b
<template>
<div class="order_list">
<div class="refund_list">
<van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
<InfinityScroll
class="full-page scroll-wrap"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tabIndex">
<van-list v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="getRefundList">
<van-panel
v-for="(el, i) in tab.items"
class="order_list--panel"
......@@ -36,7 +35,7 @@
>{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
</div>
</van-panel>
</InfinityScroll>
</van-list>
</van-tab>
</van-tabs>
</div>
......@@ -46,7 +45,6 @@
import { REFUND_LIST } from '@/api/api';
import { Tab, Tabs, Panel, Card, List } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '退款中',
......@@ -60,9 +58,12 @@ export default {
data() {
return {
listApi: REFUND_LIST,
shop_id: 1,
activeIndex: 0,
items: [],
page: 0,
limit: 10,
loading: false,
finished: false,
tabsItem: [
{
name: '全部',
......@@ -87,17 +88,6 @@ export default {
onLoad(i, 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) {
const item = this.items[i];
if (item.status == 10) {
......@@ -120,6 +110,9 @@ export default {
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
},
getRefundList(){
}
},
components: {
......@@ -127,14 +120,13 @@ export default {
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll
[List.name]: List
}
};
</script>
<style lang="scss" scoped>
.order_list {
.refund_list {
padding-bottom: 0;
&--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