lilei 10 kuukautta sitten
vanhempi
commit
fd69f61635
2 muutettua tiedostoa jossa 171 lisäystä ja 133 poistoa
  1. 5 1
      pages.json
  2. 166 132
      pagesB/promoDetail.vue

+ 5 - 1
pages.json

@@ -422,7 +422,11 @@
 			"path" : "promoDetail",
 			"style" : 
 			{
-				"navigationBarTitleText" : "促销产品详情"
+				"navigationBarTitleText" : "促销产品详情",
+				"enablePullDownRefresh": false,
+				"titleView":false,
+				// 将回弹属性关掉
+				"bounce":"none"
 			}
 		},
 		{

+ 166 - 132
pagesB/promoDetail.vue

@@ -4,8 +4,8 @@
 			<u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="pageInit" @search="pageInit" @custom="pageInit"></u-search>
 		</view>
 		<view class="tab-body">
-			<scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
-				<view class="product-list">
+			<!-- <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom"> -->
+				<view class="product-list" v-if="list.length">
 					<view
 					class="check-order-list" 
 					v-for="(item,index) in list" 
@@ -13,12 +13,12 @@
 					>
 						<view class="video-item">
 							<view>
-								<u-image :src="item.productImage" height="140px" width="100%"></u-image>
+								<u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="140px" width="100%"></u-image>
 								<view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
+								<view class="product-code">{{item.productCode}}</view>
 							</view>
 							<view>
 								<view class="product-name">{{item.productName}}</view>
-								<view class="product-code">{{item.productCode}}</view>
 								<view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
 								<view class="product-button">
 									<view class="price-txt">¥<text>{{item.cost}}</text></view>
@@ -35,76 +35,75 @@
 					 <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
 					 <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
 				 </view>
-			</scroll-view> 
-			<!-- 底部栏 -->
-			<view class="bottom-bar" @click="clearAction">
-				<view class="bottom-bar-left">
-					<view class="bottom-bar-left-item">
-						<view class="bottom-bar-left-item-icon" @click="openChoose">
-							<u-icon name="shopping-cart" size="40"></u-icon>
-							<u-badge type="error" :count="totalNum" :offset="[-7,-8]"></u-badge>
-						</view>
-					</view>
-					<view class="bottom-bar-left-item" v-if="showChoosePopu">
-						合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view>
+			<!-- </scroll-view> -->
+		</view>
+		<!-- 底部栏 -->
+		<view class="bottom-bar" @click="clearAction">
+			<view class="bottom-bar-left">
+				<view class="bottom-bar-left-item">
+					<view class="bottom-bar-left-item-icon" @click="openChoose">
+						<u-icon name="shopping-cart" size="40"></u-icon>
+						<u-badge type="error" :count="totalNum" :offset="[-7,-8]"></u-badge>
 					</view>
 				</view>
-				<view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
-					<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
+				<view class="bottom-bar-left-item" v-if="showChoosePopu">
+					合计:<view class="price-txt">¥<text>{{totalAmount}}</text></view>
 				</view>
 			</view>
-			<!-- 已选列表 -->
-			<u-popup 
-			v-model="showChoosePopu" 
-			closeable 
-			:zIndex="100" 
-			mode="bottom" 
-			border-radius="14" 
-			height="80%" 
-			@scrolltolower="onreachPopuBottom"
-			@open="openRender"
-			@close="closePopu">
-				<view :style="{width:screenWidth + 'px'}" @click="clearAction">
-					<view class="choose-title">
+			<view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
+				<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
+			</view>
+		</view>
+		<!-- 已选列表 -->
+		<page-container 
+		:show="showChoosePopu" 
+		:round="true"
+		position="bottom" 
+		custom-style="height:80%"
+		@enter="openRender"
+		@leave="closePopu">
+			<scroll-view :style="{width:screenWidth + 'px',height:'100%'}" scroll-y="true" @scrolltolower="onreachPopuBottom">
+				<view class="choose-title">
+					<view class="flex align_center">
 						<view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
 						<u-button @click="claerChoose" size="mini" type="error" plain style="margin: 0 20upx;">清空列表</u-button>
 						<text class="choose-inf">左滑删除产品</text>
 					</view>
-					<view class="choose-product-list" v-if="showSwipeAction">
-						<u-swipe-action 
-						:show="item.show" 
-						v-for="(item, index) in chooseProductList" 
-						:index="item.id" 
-						:key="item.id" 
-						@click="chooseClick" 
-						@open="chooseOpen"
-						:options="chooseOptions"
-						>
-							<view class="choose-product-item">
-								 <view>
-									 <view class="choose-product-item-img">
-										<u-image :src="item.productImage" height="200rpx" width="100%"></u-image>
-										<view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
-									 </view>
-									 <view class="choose-product-item-info">
-										<view class="choose-product-item-left-info-name">{{item.productName}}</view>
-										<view class="choose-product-item-left-info-code">{{item.productCode}}</view>
-										<view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
-										<view class="choose-product-item-left-info-price">
-											<view class="price-txt">¥<text>{{item.cost}}</text></view>
-											<view>
-												<u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="1" @change="changeQty"></u-number-box>
-											</view>
+					<u-icon name="close" size="30" @click="showChoosePopu=false"></u-icon>
+				</view>
+				<view class="choose-product-list" v-if="showSwipeAction">
+					<u-swipe-action 
+					:show="item.show" 
+					v-for="(item, index) in chooseProductList" 
+					:index="item.id" 
+					:key="item.id" 
+					@click="chooseClick" 
+					@open="chooseOpen"
+					:options="chooseOptions"
+					>
+						<view class="choose-product-item" :style="{width:(screenWidth-20) + 'px'}">
+							 <view>
+								 <view class="choose-product-item-img">
+									<u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="200rpx" width="100%"></u-image>
+									<view class="back-price">返¥<text>{{item.promoRuleValue}}</text></view>
+									<view class="choose-product-item-left-info-code">{{item.productCode}}</view>
+								 </view>
+								 <view class="choose-product-item-info">
+									<view class="choose-product-item-left-info-name">{{item.productName}}</view>
+									<view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
+									<view class="choose-product-item-left-info-price">
+										<view class="price-txt">¥<text>{{item.cost}}</text></view>
+										<view>
+											<u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="1" @change="changeQty"></u-number-box>
 										</view>
-									 </view>
+									</view>
 								 </view>
-							</view>
-						</u-swipe-action>
-					</view>
+							 </view>
+						</view>
+					</u-swipe-action>
 				</view>
-			</u-popup>
-		</view>
-		</view>
+			</scroll-view>
+		</page-container>
 	</view>
 </template>
 
@@ -123,7 +122,7 @@
 				queryWord: '',// 关键词查询列表
 				// 查询条件
 				pageNo: 1, // 当前页
-				pageSize: 8,//每页条数
+				pageSize: 6,//每页条数
 				list: [], // 产品列表
 				total: 0, // 总记录
 				showChoosePopu: false,//已选列表弹框
@@ -193,6 +192,19 @@
 				this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
 			}
 			this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
+			
+			// 清空数据
+			this.chooseList = null
+			this.list = null
+		},
+		// 到底部加载更多
+		onReachBottom() {
+			if(this.list.length < this.total){
+				this.pageNo += 1
+				this.getRow()
+			}else{
+				this.status = "nomore"
+			}
 		},
 		methods: {
 			// 初始化页面
@@ -239,26 +251,33 @@
 					if(this.showChoosePopu){
 						console.log(this.chooseList)
 						// 默认加载第一页数据
-						this.choosePageNo = 1
 						this.chooseTotal = this.chooseList.length
-						this.chooseProductList = this.chooseTotal > this.choosePageSize ? this.chooseList.slice(0,this.choosePageSize) : this.chooseList
+						this.choosePageNo = 0
+						this.onreachPopuBottom()
 					}
 				}else{
 					this.$u.toast(`请选择产品`);
 				}
 			},
 			// 已选产品滚动到底部
-			onreachPopuBottom(e){
+			onreachPopuBottom(){
 				const totalPages = Math.ceil(this.chooseTotal/this.choosePageSize)
 				if(this.choosePageNo>=totalPages){
 					return
 				}
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
 				this.choosePageNo = this.choosePageNo + 1
 				const start = (this.choosePageNo-1)*this.choosePageSize
 				const end = this.choosePageNo*this.choosePageSize
-				const list = this.chooseList.slice(start,end>this.chooseTotal?this.chooseTotal:end)
+				const list = this.chooseTotal > this.choosePageSize ? this.chooseList.slice(start,end>this.chooseTotal?this.chooseTotal:end) : this.chooseList
 				this.chooseProductList = this.chooseProductList.concat(list)
 				this.chooseProductList.splice()
+				this.$nextTick(()=>{
+					uni.hideLoading()
+				})
 			},
 			// 已选产品变更数量
 			changeQty(e){
@@ -297,6 +316,10 @@
 						this.chooseProductList.splice(rindex, 1);
 						this.chooseList.splice(rindex, 1);
 					}
+					// 如果数量小于每页数量,自动加载下一页
+					if(this.chooseProductList.length < this.choosePageSize){
+						this.onreachPopuBottom()
+					}
 					this.$u.toast(`删除成功!`);
 				}
 			},
@@ -344,15 +367,6 @@
 					item.qty = 0
 				})
 			},
-			// scroll-view到底部加载更多
-			onreachBottom() {
-				if(this.list.length < this.total){
-					this.pageNo += 1
-					this.getRow()
-				}else{
-					this.status = "nomore"
-				}
-			},
 			// 查询列表
 			getRow () {
 			  let _this = this
@@ -444,61 +458,21 @@
 	}
 	.video-pagesCons{
 		height: 100vh;
-		display: flex;
-		flex-direction: column;
+		position: relative;
 		.tab-search{
 			padding: 15rpx 20rpx;
 			background: #fff;
+			position: fixed;
+			top:0;
+			left:0;
+			width:100%;
+			z-index:20;
 		}
 		.tab-body{
 			display: flex;
 			flex-direction: column;
 			flex-grow: 1;
-			overflow: auto;
-			.bottom-bar{
-				height: 130upx;
-				z-index: 500;
-				background-color: #fff;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				font-size: 32upx;
-				.bottom-bar-left{
-					padding: 0 30upx;
-					flex-grow: 1;
-					display: flex;
-					align-items: center;
-				}
-				.bottom-bar-left-item{
-					padding-right: 20rpx;
-					font-size: 24rpx;
-					display: flex;
-					align-items: center;
-				}
-				.bottom-bar-left-item-icon{
-					position: relative;
-					background: #2196F3;
-					padding: 20rpx;
-					border-radius: 100%;
-					color: #fff;
-				}
-				.bottom-bar-right{
-					padding: 0 50rpx;
-					height: 100%;
-					background: #2196F3;
-					display: flex;
-					align-items: center;
-					.bottom-bar-right-item{
-						color: #fff;
-					}
-				}
-				.bg-0{
-					background: #2196F3;
-				}
-				.bg-1{
-					background: #f44336;
-				}
-			}
+			padding: 90rpx 0 130rpx 0;
 			.product-list{
 				display: flex;
 				flex-wrap: wrap;
@@ -518,6 +492,15 @@
 							position: relative;
 							overflow: hidden;
 							border-bottom: 1px solid #eee;
+							.product-code{
+								color: #2196F3;
+								position: absolute;
+								width: 100%;
+								left:0;
+								bottom:0;
+								background: rgba(255,255,255,0.7);
+								text-align: center;
+							}
 						}
 						&:last-child{
 							padding: 20rpx 20rpx 70rpx 20rpx;
@@ -526,10 +509,6 @@
 							.product-name{
 								font-size: 28rpx;
 							}
-							.product-code{
-								margin: 10rpx 0 0;
-								color: #2196F3;
-							}
 							.product-guige{
 								margin: 10rpx 0 20rpx 0;
 								color: #888;
@@ -552,6 +531,54 @@
 				}
 			}
 		}
+		.bottom-bar{
+			height: 130upx;
+			z-index: 200;
+			background-color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 32upx;
+			position: fixed;
+			bottom:0;
+			left:0;
+			width:100%;
+			.bottom-bar-left{
+				padding: 0 30upx;
+				flex-grow: 1;
+				display: flex;
+				align-items: center;
+			}
+			.bottom-bar-left-item{
+				padding-right: 20rpx;
+				font-size: 24rpx;
+				display: flex;
+				align-items: center;
+			}
+			.bottom-bar-left-item-icon{
+				position: relative;
+				background: #2196F3;
+				padding: 20rpx;
+				border-radius: 100%;
+				color: #fff;
+			}
+			.bottom-bar-right{
+				padding: 0 50rpx;
+				height: 100%;
+				background: #2196F3;
+				display: flex;
+				align-items: center;
+				.bottom-bar-right-item{
+					color: #fff;
+				}
+			}
+			.bg-0{
+				background: #2196F3;
+			}
+			.bg-1{
+				background: #f44336;
+			}
+		}
 		.price-txt{
 			color: red;
 			text{
@@ -561,11 +588,13 @@
 		.choose-title{
 			display: flex;
 			align-items:center;
+			justify-content: space-between;
 			padding: 25rpx;
 			position: fixed;
 			background: #fff;
 			width: 100%;
 			z-index: 3;
+			border-bottom: 1px solid #eee;
 			.p-nums{
 				color: #2196F3;
 				margin: 0 6rpx;
@@ -601,6 +630,15 @@
 					.back-price{
 						zoom: calc(0.8);
 					}
+					.choose-product-item-left-info-code{
+						color: #2196F3;
+						position: absolute;
+						width: 100%;
+						left:0;
+						bottom:0;
+						background: rgba(255,255,255,0.7);
+						text-align: center;
+					}
 				}
 				.choose-product-item-info{
 					margin-right: 10rpx;
@@ -620,10 +658,6 @@
 					.choose-product-item-left-info-name{
 						font-size: 28rpx;
 					}
-					.choose-product-item-left-info-code{
-						color: #2196F3;
-						margin: 10rpx 0;
-					}
 					.choose-product-item-left-info-guige{
 						color: #666;
 						margin: 10rpx 0;