liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(时令尝鲜):接口对接

Browse Source
This commit is contained in:
lifizer
2023-09-23 18:13:26 +08:00
parent c9ceac9f37
commit 2d73c2fe46
35 changed files with 2834 additions and 1547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthList.vue
+74 -90
View File
@@ -37,27 +37,30 @@
</view>
<view class="article-box">
<mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
<view class="list flex flex-wrap">
<view v-for="(item, index) in dataList" :key="index">
<view class="item item-store" @click="goStore(item.id)" v-if="tabIndex===0">
<image class="cover" :src="item.cover" mode="scaleToFill"/>
<view class="name one-t">{{ item.content }}</view>
<view class="price store flex ai-center" style="width: 100%;">
<image class="flex-0" :src="item.logo" mode="scaleToFill"/>
<view class="one-t">{{ item.name }}</view>
</view>
</view>
<view class="item" @click="goGoods(item.id)" v-else>
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">￥{{ item.price }}</view>
<scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
:scroll-anchoring="true"
:scroll-y="true"
:scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower" v-if="dataList.length>0">
<view v-for="(item, index) in dataList" :key="index">
<view class="item item-store" @click="goStore(item.id)" v-if="tabIndex===0">
<image class="cover" :src="item.cover" mode="scaleToFill"/>
<view class="name one-t">{{ item.content }}</view>
<view class="price store flex ai-center" style="width: 100%;">
<image class="flex-0" :src="item.logo" mode="scaleToFill"/>
<view class="one-t">{{ item.name }}</view>
</view>
</view>
<view class="item" @click="goGoods(item.id)" v-else>
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">￥{{ item.price }}</view>
</view>
</view>
</mescroll-body>
</scroll-view>
<image class="img-nodata" :src="webUrl+'/20230912145123537792.png'" mode="scaleToFill" v-else-if="tabIndex===0"/>
<image class="img-nodata" :src="webUrl+'/20230912145113749133.png'" mode="scaleToFill" v-else/>
</view>
</view>
</view>
@@ -67,80 +70,34 @@
import {fetchCity} from "@/api/wenwan";
import {wellnessFood, wellnessPlaceList} from "@/api/product";
import {getProducts} from "@/api/store";
import MescrollMixins from "@/mixins/mescroll-mixins";
import MescrollBody from "@/components/mescroll-uni/mescroll-body";
export default {
name: "healthList",
components: {
MescrollBody
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabIndex: 0,
keyword: "",
page: 1,
listHeight: "auto",
bannerList: [],
asideList: [],
asideIndex: 0,
dataList: [], // 列表数据
upOption: {
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
auto: true,
empty: {
tip: '暂无数据' // 提示
}
},
downOption: {
auto: false
}
}
},
mixins: [
MescrollMixins({
getPageData(mescroll) {
let that = this;
// 此时mescroll会携带page的参数:
let pageNum = mescroll.num; // 页码, 默认从1开始
let timer = setInterval(() => {
if (that.asideList.length > 0) {
clearInterval(timer);
let param = {
page: pageNum,
limit: 10,
keyword: that.keyword,
provinceId: that.asideList.length > 0 ? that.asideList[that.asideIndex].provinceId : ""
}
if (mescroll.num === 1) {
that.dataList = [];
}
if (that.tabIndex === 0) {
wellnessPlaceList(param).then(({data}) => {
that.dataList = that.dataList.concat(data);
mescroll.endSuccess(data.length);
});
} else {
param.isWellnessFood = 1;
getProducts(param).then(({data}) => {
that.dataList = that.dataList.concat(data);
mescroll.endSuccess(data.length);
});
}
}
}, 500)
}
})
],
onLoad() {
wellnessFood().then(({data}) => this.bannerList = data.banner);
fetchCity(4).then(({data}) => this.asideList = data.group);
this.init();
},
methods: {
init() {
wellnessFood().then(({data}) => this.bannerList = data.banner);
fetchCity(4).then(({data}) => {
this.asideList = data.group;
this.search();
});
},
changeTab(index) {
if (this.asideList.length === 0) return;
if (index === this.tabIndex) return;
@@ -148,17 +105,11 @@ export default {
this.tabIndex = index;
this.search();
},
search() {
if (this.asideList.length === 0) return;
//触发加载请求
this.mescroll.scrollTo(0, 0);
this.mescroll && this.mescroll.resetUpScroll(false);
},
asideTap(index) {
this.asideIndex = index;
onLower() {
this.page++;
this.search();
},
fetchData() {
search() {
let param = {
page: this.page,
limit: 10,
@@ -167,19 +118,41 @@ export default {
}
if (this.tabIndex === 0) {
wellnessPlaceList(param).then(({data}) => {
for (let i = 0; i < data.length; i++) {
this.dataList.push(data[i]);
}
this.handleData(data);
});
} else {
param.isWellnessFood = 1;
getProducts(param).then(({data}) => {
for (let i = 0; i < data.length; i++) {
this.dataList.push(data[i]);
}
this.handleData(data);
});
}
},
handleData(data){
let that = this;
if (this.page === 1) {
this.dataList = [];
}
this.dataList = this.dataList.concat(data);
uni.getSystemInfo({
success: function (res) {
let len = that.dataList.length;
let {windowHeight} = res;
console.log("test data",windowHeight)
that.listHeight = "auto";
if (windowHeight > 600 && len > 4) {
that.listHeight = "100%";
}
if (windowHeight <= 600 && len > 2) {
that.listHeight = "100%";
}
}
});
},
asideTap(index) {
this.asideIndex = index;
this.page = 1;
this.search();
},
goStore(id) {
uni.navigateTo({
url: "/pagesInn/inn/innHome?id=" + id
@@ -198,7 +171,8 @@ export default {
@import "@/assets/css/product.less";
.pkg-product-list {
min-height: 100vh;
height: 100vh;
overflow-y: hidden;
box-sizing: border-box;
padding-top: 16rpx;
background: #fff;
@@ -241,6 +215,16 @@ export default {
color: #333;
}
}
.img-nodata{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 360rpx;
height: 360rpx;
vertical-align: middle;
}
}
}
</style>