|
@@ -1,16 +1,20 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <page-theme :theme="theme">
|
|
|
|
|
- <template>
|
|
|
|
|
- <u-swiper :list="list1" @click="click"></u-swiper>
|
|
|
|
|
- <view class="f-30 p-40 flex-dir-column flex-x-center">
|
|
|
|
|
- <view class="f-30 p-40 flex-dir-column flex-x-center">
|
|
|
|
|
- <view class="col-info-d t-c m-b-30">其他内容展示</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="col-info-d t-c m-b-30">搜索框</view>
|
|
|
|
|
- <view class="col-info-d t-c m-b-30">名菜列表</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- </page-theme>
|
|
|
|
|
|
|
+ <view class="width-100 height-100 view-page">
|
|
|
|
|
+ <u-swiper :list="list1" @click="click"></u-swiper>
|
|
|
|
|
+ <view class="p-10">
|
|
|
|
|
+ <u-search :clearabled="true" placeholder="请输入搜索关键字" v-model="keyword" :shape="square" search="doRefresh" @custom="doRefresh"></u-search>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-list @scrolltolower="scrolltolower" height="calc(100% - 180px)" lowerThreshold="10">
|
|
|
|
|
+ <u-list-item v-for="(item, index) in list" :key="index">
|
|
|
|
|
+ <u-cell :title="item.name" @click="toDetail(item.id)">
|
|
|
|
|
+ <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
|
|
|
|
|
+ customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
|
|
|
|
+ </u-cell>
|
|
|
|
|
+ </u-list-item>
|
|
|
|
|
+ <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
|
|
|
|
|
+ :nomore-text="page.nomoreText" />
|
|
|
|
|
+ </u-list>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -23,21 +27,72 @@
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
|
- ]
|
|
|
|
|
|
|
+ ],
|
|
|
|
|
+ page: {
|
|
|
|
|
+ current: 1,
|
|
|
|
|
+ size: 10,
|
|
|
|
|
+ total: 0,
|
|
|
|
|
+ // loadmore loading nomore
|
|
|
|
|
+ status: 'loadmore',
|
|
|
|
|
+ loadingText: '正在加载中',
|
|
|
|
|
+ loadmoreText: '上拉加载更多',
|
|
|
|
|
+ nomoreText: '没有更多了'
|
|
|
|
|
+ },
|
|
|
|
|
+ keyword: '',
|
|
|
|
|
+ list: []
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ onShow() {
|
|
|
|
|
+ this.keyword = '';
|
|
|
|
|
+ this.doRefresh();
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ scrolltolower() {
|
|
|
|
|
+ this.loadmore()
|
|
|
|
|
+ },
|
|
|
|
|
+ loadmore() {
|
|
|
|
|
+ this.page.current++;
|
|
|
|
|
+ this.getDishList();
|
|
|
|
|
+ },
|
|
|
|
|
+ doRefresh() {
|
|
|
|
|
+ this.page.current = 1;
|
|
|
|
|
+ this.page.status = 'loadmore'
|
|
|
|
|
+ this.list = [];
|
|
|
|
|
+ this.getDishList();
|
|
|
|
|
+ },
|
|
|
getDishList() {
|
|
getDishList() {
|
|
|
- this.$u.api.getDishList().then(res => {
|
|
|
|
|
- //res.data.records
|
|
|
|
|
|
|
+
|
|
|
|
|
+ if (this.page.status == 'loading' || this.page.status == 'nomore') {
|
|
|
|
|
+ // 防止重复下拉
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.page.status = 'loading';
|
|
|
|
|
+ //
|
|
|
|
|
+ this.$u.api.getDishList(this.page.current, this.page.size, {
|
|
|
|
|
+ name: this.keyword || ''
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.data.records && res.data.records.length > 0) {
|
|
|
|
|
+ this.list.push(...res.data.records)
|
|
|
|
|
+ }
|
|
|
|
|
+ this.page.total = res.data.total || 0;
|
|
|
|
|
+ if (this.page.size * this.page.current >= res.data.total) {
|
|
|
|
|
+ this.page.status = 'nomore'
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.page.status = 'loadmore'
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ toDetail(id) {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: "/pages/yuecai/dish/detail/index?id=" + id,
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- onLoad(options) {
|
|
|
|
|
- this.getDishList();
|
|
|
|
|
- },
|
|
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
|
+ .view-page {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|