mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

回滚首页商品列表

Browse Source
This commit is contained in:
luofei 2024-05-13 17:50:09 +08:00
parent 0094d1fe79
commit 6990b0d6dd
2 changed files with 50 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
components/recommend/index.vue
View File

@ -46,7 +46,6 @@
里海新闻</view>
<view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
</view>
<view class="information" v-if="showTab&&list.length>0">
<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
<view class="nav-item" style="display: inline-block;margin-right: 16rpx;"
@ -66,43 +65,22 @@
<!-- tab导航 -->
<view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}">
<block v-for="(item,indx) in tabsArr" :key="indx">
<!-- <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view> -->
<view :class="{'tabs-item-active':indx==currTabIndex}" class="tabs-item" @click="changeTab(indx)">
<view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view>
<view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
<view class="tabs-item-main">{{item.name}}</view>
<view class="tabs-item-sub">{{item.desc}}</view>
</view>
</block>
</view>
<!-- 滑动 49 55 var(--status-bar-height)-->
<swiper :indicator-dots="false" :autoplay="false" :duration="0" :current="currTabIndex" @change="changeTab"
:style="{height:'calc(100vh - 98rpx - 110rpx - 108rpx - var(--status-bar-height))'}">
<swiper-item v-for="(item,indx) in tabsArr" :key="indx">
<scroll-view style="height: 100%;" :scroll-y="scrollY" @scroll="onscroll"
@scrolltolower="onScrollBottom" @scrolltoupper="onScrollTop">
<view class='recommendList' :class="indexP?'on':''">
<WaterfallsFlow :wfList='hostProduct[currTabIndex]' @itemTap="goDetail" :type="0"
:sale_type="sale_type" />
<view class='pictrue' v-if="!loading&&hostProduct[currTabIndex].length==0">
<image :src="`${domain}/static/images/noCart.png`"></image>
<view>暂无商品，看点别的吧</view>
</view>
</view>
<view class="loadingicon acea-row row-center-wrapper">
<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
{{ hotTitleArr[currTabIndex] }}
</view>
</scroll-view>
</swiper-item>
</swiper>
<!-- <swiper class="tab-box" ref="swiper1" :current="tabIndex" :duration="300" @change="onswiperchange"
@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
<swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
<newsPage class="page-item" :nid="page.newsid" :ref="'page' + index"></newsPage>
</swiper-item>
</swiper> -->
<view class='recommendList' :class="indexP?'on':''">
<WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0"
:sale_type="sale_type" />
<view class='pictrue' v-if="!loading&&hostProduct.length==0">
<image :src="`${domain}/static/images/noCart.png`"></image>
<view>暂无商品，看点别的吧</view>
</view>
</view>
</view>
</template>
@ -129,27 +107,18 @@
import {
Toast
} from "../../libs/uniApi";
import {
getProductslist,
getProductHot,
storeCategory
} from '@/api/store.js';
export default {
components: {
WaterfallsFlow
},
computed: mapGetters(['uid']),
props: {
// hostProduct: {
// type: Array,
// default: function() {
// return [];
// }
// },
// loadTitle: {
// type: String,
// default: '加载更多...'
// },
hostProduct: {
type: Array,
default: function() {
return [];
}
},
showTab: {
type: Boolean,
default: false
@ -191,153 +160,18 @@
desc: '特色农副',
val: 4
}],
currTabIndex: 0,
list: [],
loadTitle: '加载更多',
hostProduct: [
[],
[],
[],
[]
],
hotPageArr: [1, 1, 1, 1],
hotScrollArr: [true, true, true, true],
hostIndex: 0,
hotPage: 1,
hotLimit: 20,
hotScroll: true,
hotLoading: [false, false, false, false],
hotTitle: '加载更多',
hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
scrollY: false
currTabs: 1,
list: []
};
},
mounted() {
this.getArticleList();
// 初始化
this.loadGoods(0);
},
methods: {
// 父页面滚动
parentPageScroll(boolean) {
this.scrollY = boolean;
this.$forceUpdate();
},
// 滚动底部 触底刷新
onScrollBottom() {
this.loadGoods();
},
// 滚动顶部
onScrollTop() {},
// 滚动商品
onscroll() {
console.log(1111);
},
changeTab(e) {
if (e.detail) this.currTabIndex = e.detail.current;
else this.currTabIndex = e;
this.currTabs = e;
this.$emit('changeRecommedTab', e)
},
loadGoods(e = 0) {
this.$nextTick(() => {
if (e == 0) return this.get_host_product(0);
if (e == 1) return this.get_host_home({
mer_type: 1
}, 1);
if (e == 2) return this.get_host_home({
mer_type: 2
}, 2);
if (e == 3) return this.get_host_home({
mer_type: 3
}, 3);
})
},
/**
* 获取我的推荐
*/
get_host_product: function(e = 0) {
let that = this;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
that.hotLoading[e] = true;
that.hotTitleArr[that.currTabIndex] = '加载中';
getProductHot(that.hotPageArr[that.currTabIndex], that.hotLimit, 1, 1).then(res => {
console.log(res.data.list);
res.data.list = this.shuffleArray(res.data.list);
let list = res.data.list;
let productList = that.hostProduct[that.currTabIndex];
// if (!that.hostProduct[that.currTabIndex]) productList[e] = [];
productList = [...productList, ...res.data.list];
console.log(productList);
let hotScroll = list.length <= res.data.limit && list.length != 0;
that.hotScrollArr[that.currTabIndex] = hotScroll;
that.hotLoading[that.currTabIndex] = false;
that.hotTitleArr[that.currTabIndex] = !hotScroll ? '已全部加载' : '加载更多';
// that.$set(that, 'hostProduct', productList);
that.hostProduct[that.currTabIndex] = productList;
// if (this.hostIndex == e) this.$forceUpdate();
that.hotPageArr[that.currTabIndex] = res.data.page + 1
// that.$set(that, 'hotPage', res.data.page + 1);
that.$set(that, 'hotLimit', res.data.limit);
console.log(that.hostProduct);
this.$forceUpdate()
});
},
/**
* 获取里海云仓, 云市场, 名优特产
*/
get_host_home: function(query = {}, e = 1) {
let that = this;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
that.hotLoading[e] = true;
that.hotTitle = '加载中';
query.page = that.hotPage;
query.limit = that.hotLimit;
query.sale_type = 1;
query.rand = 1;
getProductslist({
...query
}).then(res => {
uni.stopPullDownRefresh();
res.data.list = this.shuffleArray(res.data.list);
let list = res.data.list;
let productList = that.hostProduct;
if (!productList[e]) productList[e] = [];
productList[e] = [...productList[e], ...list];
let hotScroll = list.length <= res.data.limit && list.length != 0;
that.hotScroll = hotScroll;
that.hotLoading[e] = false;
that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
that.$set(that, 'hostProduct', productList);
if (this.hostIndex == e) this.$forceUpdate();
that.$set(that, 'hotPage', res.data.page + 1);
that.$set(that, 'hotLimit', res.data.limit);
});
},
// 数组乱序
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
},
navTo(url) {
uni.navigateTo({
url: url,
@ -346,7 +180,6 @@
}
})
},
getArticleList() {
getArticleList(20, {
page: 1,
@ -355,7 +188,6 @@
this.list = res.data.list;
})
},
goDetail(item) {
goShopDetail(item, this.uid).then(res => {
if (this.isLogin) {

86
pages/index/index.vue
View File

@ -42,16 +42,16 @@
<!-- 首页推荐 -->
<view v-if="recommend_switch == 1" class="index-product-wrapper">
<!-- 首发新品 -->
<recommend ref="recommendRef" :hostProduct="hostProduct" :loadTitle="hotTitle"
<recommend ref="recommendRef" :hostProduct="hostProduct[hostIndex]"
@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading">
</recommend>
<!-- <view class="loadingicon acea-row row-center-wrapper"
<view class="loadingicon acea-row row-center-wrapper"
v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }}
</view> -->
</view>
</view>
</view>
<view v-show="navIndex == 0" class="loadingicon acea-row row-center-wrapper"
@ -111,12 +111,12 @@
@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
:loading="loading">
</recommend>
<!-- <view class="loadingicon acea-row row-center-wrapper"
<view class="loadingicon acea-row row-center-wrapper"
v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
<text class="loading iconfont icon-jiazai"
:hidden="hotLoading[hostIndex] == false"></text>
{{ hotTitle }}
</view> -->
</view>
</view>
</view>
<view class="loadingicon acea-row row-center-wrapper"
@ -345,7 +345,7 @@
setVisit,
spread
} from '@/api/user.js';
import recommend from '@/components/recommend/';
import recommend from '@/components/recommend';
import card from './component/card';
// #ifndef H5
import passwordPopup from '@/components/passwordPopup';
@ -490,15 +490,12 @@
[],
[]
],
hotPageArr: [1, 1, 1, 1],
hotScrollArr: [true, true, true, true],
hostIndex: 0,
hotPage: 1,
hotLimit: 20,
hotScroll: true,
hotLoading: [false, false, false, false],
hotTitle: '加载更多',
hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
// #ifdef MP || APP-PLUS
isFixed: false,
// #endif
@ -589,15 +586,6 @@
selectedIconPath: "/static/tabbar_icon/a-a.png"
})
}
this.$util.getDom(this, '.tabs', (res) => {
console.log(res.top);
if (86 >= res.top) {
this.$refs.recommendRef.parentPageScroll(true);
} else {
this.$refs.recommendRef.parentPageScroll(false);
}
})
},
/**
@ -691,15 +679,12 @@
// that.overflow = true;
// #ifdef APP-PLUS
setTimeout(() => {
this.hotPageArr[this.hostIndex] = 1;
this.hotScrollArr[this.hostIndex] = true;
// this.hotPage = 1;
// this.hotScroll = true;
// let hostList = this.hostProduct;
// hostList[this.hostIndex] = [];
// this.$set(this, 'hostProduct', hostList);
this.loadGoods(this.hostIndex);
this.hotPage = 1;
this.hotScroll = true;
let hostList = this.hostProduct;
hostList[this.hostIndex] = [];
this.$set(this, 'hostProduct', hostList);
this.loadGoods(this.hostIndex + 1);
}, 50)
// #endif
},
@ -1097,30 +1082,30 @@
});
},
/**
* 点击组件选项卡 e
* 点击组件选项卡
*/
changeRecommedTab(e) {
// this.hotPage = 1;
// this.hotScroll = true;
// this.hostIndex = e - 1;
this.hotPageArr[e] = 1;
this.hotScrollArr[e] = true;
this.hostIndex = e;
// let hostList = this.hostProduct;
// hostList[e - 1] = [];
// this.$set(this, 'hostProduct', hostList);
this.hotPage = 1;
this.hotScroll = true;
this.hostIndex = e - 1;
let hostList = this.hostProduct;
hostList[e - 1] = [];
this.$set(this, 'hostProduct', hostList);
this.loadGoods(e);
},
loadGoods(e = 0) {
loadGoods(e = 1) {
console.log(e);
this.$nextTick(() => {
if (e == 0) return this.get_host_product(0);
if (e == 1) return this.get_host_home({
if (e == 1) return this.get_host_product(0);
if (e == 2) return this.get_host_home({
mer_type: 1
}, 1);
if (e == 2) return this.get_host_home({
if (e == 3) return this.get_host_home({
mer_type: 2
}, 2);
if (e == 3) return this.get_host_home({
if (e == 4) return this.get_host_home({
mer_type: 3
}, 3);
})
@ -1130,6 +1115,7 @@
*/
get_host_product: function(e = 0) {
let that = this;
let num = that.hotLimit;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
@ -1159,6 +1145,7 @@
*/
get_host_home: function(query = {}, e = 1) {
let that = this;
let num = that.hotLimit;
if (!that.hotScroll) return;
if (that.hotLoading[e]) return;
that.hotLoading[e] = true;
@ -1289,22 +1276,9 @@
},
// 滚动到底部
onReachBottom() {
// this.$util.getDom(this, '.tabs', (res) => {
// if () == res.top) {
// this.$refs.recommendRef.parentPageScroll(true);
// } else {
// this.$refs.recommendRef.parentPageScroll(false);
// }
// this.scrollTop = res.top;
// })
return;
console.log(12312);
if (this.recommend_switch == 1 && this.navIndex == 0) {
// 首页加载更多
this.loadGoods(this.$refs.recommendRef.currTabs || 0);
this.loadGoods(this.$refs.recommendRef.currTabs || 1);
} else if (this.navIndex == 1) {
// 分类栏目加载更多
if (this.sortProduct.length > 0) {