lilei il y a 9 mois
Parent
commit
a37534b517

+ 23 - 14
components/icon-items-list/icon-items-list.vue

@@ -40,6 +40,10 @@
 			noDataText: {
 				type: String,
 				default: '暂无数据'
+			},
+			isLogin: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -49,21 +53,26 @@
 		},
 		methods: {
 			toPage(item,index){
-				console.log(item,index)
-				if(item.url&&item.url!=''){
-					if(item.target == 'page'){
-						uni.navigateTo({
-							url: item.url
-						})
-					}
-					if(item.target == 'tabPage'){
-						uni.switchTab({
-							url: item.url
-						})
-					}
-					if(item.target == 'fun'){
-						this.$emit('callback',item)
+				if(this.isLogin){
+					if(item.url&&item.url!=''){
+						if(item.target == 'page'){
+							uni.navigateTo({
+								url: item.url
+							})
+						}
+						if(item.target == 'tabPage'){
+							uni.switchTab({
+								url: item.url
+							})
+						}
+						if(item.target == 'fun'){
+							this.$emit('callback',item)
+						}
 					}
+				}else{
+					uni.navigateTo({
+						url: '/pages/login/login'
+					})
 				}
 			}
 		}

+ 52 - 12
pages/index/index.vue

@@ -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;

+ 2 - 1
pagesB/components/chooseProductItemSkline.vue

@@ -104,7 +104,8 @@
 			height: 180rpx;
 			position: relative;
 			overflow: hidden;
-			border: 1px solid #eee;
+			border: 1px solid #f8f8f8;
+			border-radius: 6px;
 			padding: 10rpx;
 			.no-txt{
 				position: absolute;

+ 2 - 2
pagesB/shopiing/productDetail.vue

@@ -174,10 +174,10 @@
 						this.detail = res.data
 						if(res.data && res.data.productPicList){
 							res.data.productPicList.forEach(item => {
-								this.imgList.push(item.imageUrl+'?x-oss-process=image/resize,p_50')
+								this.imgList.push(item.imageUrl)
 							})
 						}else{
-							this.imgList.push(res.data.productMsg+'?x-oss-process=image/resize,p_50')
+							this.imgList.push(res.data.productMsg)
 						}
 					}
 					uni.hideLoading()

+ 5 - 3
pagesB/shopiing/searchProduct.vue

@@ -34,7 +34,7 @@
 					<!-- 搜索,吸顶 -->
 					<sticky-header>
 						<view class="search-head">
-							<uni-search-bar v-model="queryWord" :focus="focus" radius="100" placeholder="请输入商品名称/产品编码/原厂编码" :bgColor="clzId?'#f5f5f5':'#fff'" textColor="#666" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="clearList" />
+							<uni-search-bar v-model="queryWord" :focus="focus" radius="100" placeholder="请输入商品名称/产品编码/原厂编码" textColor="#666" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="clearList" />
 						</view>
 					</sticky-header>
 					<!-- 产品列表 -->
@@ -373,9 +373,8 @@
 			width: 75%;
 			.scrollPage-body{
 				width:100%;
-				.search-head input{
+				.uni-searchbar{
 					background-color: #FFFFFF;
-					border-radius: 10px;
 				}
 				/deep/ .choose-product-item{
 					background-color: #FFFFFF;
@@ -452,6 +451,9 @@
 				}
 				.search-head{
 					background-color: #FFFFFF;
+					/deep/ .uni-searchbar{
+						padding: 5px 6px;
+					}
 				}
 			}
 		}