|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="content" :class="hasShopiing?'bg-0':'bg-0'">
|
|
|
+ <view class="content" :class="hasShopiing?'bg-0':'bg-0'">
|
|
|
+ <view class="content-body">
|
|
|
<!-- 头部栏 -->
|
|
|
<view class="header-box">
|
|
|
<UniStatusBar></UniStatusBar>
|
|
@@ -10,6 +10,15 @@
|
|
|
<text class="version" v-if="showVersion">体验版</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 浮动头部 -->
|
|
|
+ <view class="header-box headerFixed" v-if="hasShopiing&&showFixed">
|
|
|
+ <UniStatusBar></UniStatusBar>
|
|
|
+ <view class="title flex align_center" :style="{height:(navHeight+'px')}">
|
|
|
+ <view class="search-head" @click="toSearch">
|
|
|
+ <uni-search-bar readonly radius="100" placeholder="请输入商品名称/产品编码/原厂编码" clearButton="auto" cancelButton="none"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="cbody">
|
|
|
<view :class="hasShopiing?'shopping bg-blue':'body-box bg-blue'">
|
|
|
<!-- 滚动区域 -->
|
|
@@ -80,13 +89,13 @@
|
|
|
</view>
|
|
|
<!-- 快捷导航 -->
|
|
|
<view class="quick-nav pa-box" v-if="hasShopiing&&navList.length">
|
|
|
- <iconItemsList :list="navList" :iconSize="45" @callback="onNavFun"></iconItemsList>
|
|
|
+ <iconItemsList :list="navList" :iconSize="45" :isLogin="hasLogin" @callback="onNavFun"></iconItemsList>
|
|
|
</view>
|
|
|
<!-- 产品分类 -->
|
|
|
<view class="ptype-nav pa-box" v-if="hasShopiing&&productTypeList.length">
|
|
|
<swiper class="swiper" @change="e=>{currentPtypeDot=e.detail.current}">
|
|
|
<swiper-item v-for="(item, idx) in productTypeList" :index="idx" :key="item.id">
|
|
|
- <iconItemsList :list="item.list" type="img"></iconItemsList>
|
|
|
+ <iconItemsList :list="item.list" :isLogin="true" type="img"></iconItemsList>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<view class="indicator-dots">
|
|
@@ -94,8 +103,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 产品列表 -->
|
|
|
- <view class="product-box" v-if="hasShopiing && productList.length">
|
|
|
- <u-divider bg-color="">热门推荐</u-divider>
|
|
|
+ <view class="product-box" v-if="hasShopiing && totalhotPage>0">
|
|
|
+ <u-divider bg-color="" color="#666" :fontSize="28">热门推荐</u-divider>
|
|
|
<view class="product-list">
|
|
|
<!-- 产品列表 -->
|
|
|
<productItem
|
|
@@ -107,9 +116,9 @@
|
|
|
:gap="5"
|
|
|
:isLogin="hasLogin"
|
|
|
></productItem>
|
|
|
- <view style="padding: 20upx;">
|
|
|
- <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="productList.length==0 && status!='loading'" mode="list"></u-empty>
|
|
|
- <u-loadmore v-if="status=='loading'" :status="status" />
|
|
|
+ <view style="padding: 50upx 0;">
|
|
|
+ <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="totalhotPage==0 && status!='loading'" mode="list"></u-empty>
|
|
|
+ <u-loadmore v-else color="#999" :fontSize="24" :status="status" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -191,7 +200,9 @@
|
|
|
currentPtypeDot: 0, // 当前产品分类页
|
|
|
screenWidth: 325, // 屏幕宽度
|
|
|
productList:[], // 热门产品
|
|
|
- hotProductPageNo: 1 // 热门产品页码
|
|
|
+ hotProductPageNo: 1 ,// 热门产品页码
|
|
|
+ totalhotPage: 0, // 热门产品总页数
|
|
|
+ showFixed: false, // 是否显示浮动头部
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -327,6 +338,17 @@
|
|
|
}, 1000);
|
|
|
},
|
|
|
onShareAppMessage() {},
|
|
|
+ // 页面滚动
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.showFixed = e.scrollTop > 120
|
|
|
+ },
|
|
|
+ // 滚动到底部,加载热门产品
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.hasShopiing && this.hotProductPageNo < this.totalhotPage){
|
|
|
+ this.hotProductPageNo++
|
|
|
+ this.getProductList()
|
|
|
+ }
|
|
|
+ },
|
|
|
onShow() {
|
|
|
// 用户头像
|
|
|
this.avatarUrl = uni.getStorageSync('userPhoto');
|
|
@@ -574,11 +596,11 @@
|
|
|
}
|
|
|
})
|
|
|
// 获取推荐产品
|
|
|
+ this.productList = []
|
|
|
this.getProductList()
|
|
|
},
|
|
|
// 商品列表查询
|
|
|
getProductList(){
|
|
|
- this.productList = []
|
|
|
this.status = "loading"
|
|
|
getShopProductList({pageNo:this.hotProductPageNo,pageSize:15,hotFlag:1}).then(res => {
|
|
|
if(res.status == 200){
|
|
@@ -587,6 +609,7 @@
|
|
|
this.status = res.data.count>=this.list.length ? "nomore" : 'loadmore'
|
|
|
// 判断是否最后一页
|
|
|
const maxPages = Math.ceil(res.data.count / 15)
|
|
|
+ this.totalhotPage = maxPages
|
|
|
this.status = this.hotProductPageNo >= maxPages ? "nomore" : 'loadmore'
|
|
|
this.noDataText = this.status == 'nomore' ? '没有更多了' : '更多商品'
|
|
|
}else{
|
|
@@ -902,9 +925,11 @@
|
|
|
.content {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
- height: 100vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ .content-body{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
.header-box{
|
|
|
z-index: 5;
|
|
|
padding: 0em 1em;
|
|
@@ -918,6 +943,21 @@
|
|
|
margin-left: 1em;
|
|
|
}
|
|
|
}
|
|
|
+ .headerFixed{
|
|
|
+ padding: 0 0.5rem;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 10;
|
|
|
+ left: 0;
|
|
|
+ top:0;
|
|
|
+ position: fixed;
|
|
|
+ background: #066cff;
|
|
|
+ /deep/ .uni-searchbar{
|
|
|
+ padding: 0;
|
|
|
+ .uni-searchbar__box{
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.cbody{
|
|
|
flex-grow: 1;
|
|
|
overflow-y: auto;
|