浏览代码

虚拟滚动

lilei 10 月之前
父节点
当前提交
38be98a54d
共有 4 个文件被更改,包括 371 次插入511 次删除
  1. 111 0
      pagesB/components/chooseProductItem.vue
  2. 117 0
      pagesB/components/productItem.vue
  3. 143 349
      pagesB/promoDetail.vue
  4. 0 162
      pagesB/promoProduct.vue

+ 111 - 0
pagesB/components/chooseProductItem.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="choose-product-item" :style="{width:width + '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" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
+				<view class="choose-product-item-left-info-code ellipsis-one">{{item.productCode}}</view>
+			 </view>
+			 <view class="choose-product-item-info">
+				<view class="choose-product-item-left-info-name ellipsis-two">{{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>
+</template>
+
+<script>
+	export default {
+		name: 'chooseProductItem',
+		props: {
+			item: {
+				type: Object,
+				default: () => {}
+			},
+			width: {
+				type: Number,
+				default: 730
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			changeQty(e) {
+				this.$emit('changeQty', e)
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.choose-product-item{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 0;
+		border-bottom: 1px solid #eee;
+		> view{
+			 display: flex;
+			 align-items: center;
+			 justify-content: space-between;
+			 flex-grow: 1;
+			 width: 100%;
+		}
+		.choose-product-item-img{
+			margin-right: 20rpx;
+			width: 35%;
+			position: relative;
+			overflow: hidden;
+			border: 1px solid #eee;
+			padding: 10rpx;
+			.back-price{
+				zoom: calc(0.8);
+			}
+			.choose-product-item-left-info-code{
+				color: #666;
+				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;
+			width: 65%;
+			flex-grow: 1;
+			.choose-product-item-left-info-price{
+				display: flex;
+				align-items:center;
+				justify-content: space-between;
+				>view{
+					&:last-child{
+						display: flex;
+						align-items:center;
+					}
+				}
+			}
+			.choose-product-item-left-info-name{
+				font-size: 28rpx;
+				font-weight: 900;
+				color: #666;
+			}
+			.choose-product-item-left-info-guige{
+				color: #2196F3;
+				margin: 10rpx 0;
+				text{
+					margin-right: 10rpx;
+				}
+			}
+		}
+	}
+</style>

+ 117 - 0
pagesB/components/productItem.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="product-item">
+		<view>
+			<u-image :src="item.productImage+'?x-oss-process=image/resize,p_30'" height="140px" width="100%"></u-image>
+			<view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
+			<view class="product-code ellipsis-one">{{item.productCode}}</view>
+		</view>
+		<view>
+			<view class="product-name ellipsis-two">{{item.productName}}</view>
+			<view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
+			<view class="product-button">
+				<view class="price-txt">¥<text>{{item.cost}}</text></view>
+				<view>
+					<u-button v-if="!checked" @click="addToCat(item)" :throttle-time="50" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
+					<u-button v-else :throttle-time="50" @click="addToCat(item)" size="mini" type="success" shape="circle"><u-icon name="plus"></u-icon>{{item.qty}}</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'productItem',
+		props: {
+			item: {
+				type: Object,
+				default: () => ({})
+			},
+			checked:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			addToCat(item){
+				this.$emit('chooseProduct',item)
+			}
+		},
+	}
+</script>
+
+<style lang="less">
+.product-item{
+	background: #ffffff;
+	border-radius: 10upx;
+	box-shadow: 1px 1px 3px #EEEEEE;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	> view{
+		&:first-child{
+			position: relative;
+			overflow: hidden;
+			border-bottom: 1px solid #eee;
+			.product-code{
+				color: #666;
+				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;
+			position: relative;
+			flex-grow: 1;
+			.product-name{
+				font-size: 28rpx;
+				font-weight: 900;
+				color: #666;
+			}
+			.product-guige{
+				margin: 10rpx 0 20rpx 0;
+				color: #2196F3;
+				text{
+					margin-right: 10rpx;
+				}
+			}
+		}
+		.product-button{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			position: absolute;
+			bottom: 20rpx;
+			left: 0;
+			width: 100%;
+			padding: 0 20rpx;
+		}
+		.cart-add{
+			padding: 6rpx 15rpx;
+			border-radius: 30rpx;
+			background: #2196F3;
+			color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 24rpx;
+		}
+		.colr-add{
+			background: #2196F3;
+			padding: 10rpx 20rpx;
+		}
+		.colr-checks{
+			background: #00aa00;
+		}
+	}
+	}
+</style>

+ 143 - 349
pagesB/promoDetail.vue

@@ -4,44 +4,24 @@
 			<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" v-if="list.length">
+				<view class="product-list" id="list">
 					<view
 					class="check-order-list" 
 					v-for="(item,index) in list" 
 					:key="item.id" 
-					>
-						<view class="video-item">
-							<view>
-								<u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="140px" width="100%"></u-image>
-								<view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
-								<view class="product-code">{{item.productCode}}</view>
-							</view>
-							<view>
-								<view class="product-name">{{item.productName}}</view>
-								<view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
-								<view class="product-button">
-									<view class="price-txt">¥<text>{{item.cost}}</text></view>
-									<view @click="chooseProduct(item)">
-										<!-- <view class="cart-add" :class="!item.checked?'colr-add':'colr-checks'">
-											<u-icon v-if="!item.checked" color="#fff" name="plus"></u-icon>
-											<view v-else>
-												<u-icon name="plus" color="#fff"></u-icon>{{item.qty}}
-											</view>
-										</view> -->
-										<u-button v-if="!item.checked" :throttle-time="50" @click="chooseProduct(item)" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
-										<u-button v-else :throttle-time="50" @click="chooseProduct(item)" size="mini" type="success" shape="circle"><u-icon name="plus"></u-icon>{{item.qty}}</u-button>
-									</view>
-								</view>
-							</view>
-						</view>
+					> 
+						<productItem 
+						v-if="item.top > curScrollTop-showScrollHeight*2 && item.top < curScrollTop + showScrollHeight*3"
+						:item="item" 
+						:checked="item.checked"
+						@chooseProduct="chooseProduct"
+						></productItem>
 					 </view>
 				</view>
 				 <view style="padding: 20upx;">
 					 <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>
 		<!-- 底部栏 -->
 		<view class="bottom-bar" @click="clearAction" v-if="total>0">
@@ -60,10 +40,6 @@
 				<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
 			</view>
 		</view>
-		<!-- 分页 -->
-		<view class="pages-box" v-if="showPage">
-			<uni-pages-nav :totalPages="totalPages" :currentPage="pageNo" @pagechanged="pagechanged"></uni-pages-nav>
-		</view>
 		<!-- 已选列表 -->
 		<page-container 
 		:show="showChoosePopu" 
@@ -72,7 +48,12 @@
 		custom-style="height:90%"
 		@enter="openRender"
 		@afterleave="closePopu">
-			<scroll-view :style="{width:screenWidth + 'px',height:'100%'}" scroll-y="true">
+			<scroll-view 
+			:style="{width:screenWidth + 'px',height:'100%'}" 
+			scroll-y="true" 
+			@scroll="onscrollPopu"
+			id="popuScroll"
+			>
 				<view class="choose-title">
 					<view class="flex align_center">
 						<view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
@@ -84,38 +65,23 @@
 					</view>
 				</view>
 				<view class="choose-product-list" v-if="showSwipeAction">
-					<u-swipe-action 
-					:show="item.show" 
-					v-for="(item, index) in chooseProductList" 
-					:index="item.id" 
+					<view
+					v-for="(item, index) in chooseList" 
 					: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" v-if="item.promoRuleValue">返<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 class="choose-product-pages" v-if="totalSelPages>1">
-						<uni-pages-nav :totalPages="totalSelPages" :showShadow="false" :currentPage="choosePageNo" @pagechanged="onreachPopuBottom"></uni-pages-nav>
+						<u-swipe-action
+						:show="item.show" 
+						:index="item.id" 
+						@click="chooseClick" 
+						@open="chooseOpen"
+						:options="chooseOptions"
+						v-if="item.top > curScrollPopuTop-showScrollPopuHeight && item.top < curScrollPopuTop + showScrollPopuHeight*2"
+						>
+							<chooseProductItem 
+							:item="item" 
+							:width="screenWidth-20" 
+							@changeQty="changeQty"></chooseProductItem>
+						</u-swipe-action>
 					</view>
 				</view>
 			</scroll-view>
@@ -130,20 +96,27 @@
 	} from 'vuex'
 	import { queryPromoProductByPage } from '@/api/video.js'
 	import { purchaseSave } from '@/api/purchase.js'
+	import productItem from '@/pagesB/components/productItem.vue'
+	import chooseProductItem from '@/pagesB/components/chooseProductItem.vue'
 	export default {
+		components:{
+			productItem,
+			chooseProductItem
+		},
 		data() {
 			return {
 				status: 'loading',
 				noDataText: '暂无数据',
+				promoActiveSn: null, // 活动sn
+				submitOk: false, // 是否提交
 				queryWord: '',// 关键词查询列表
-				// 查询条件
 				pageNo: 1, // 当前页
-				pageSize: 24,//每页条数
+				pageSize: 6,//每页条数
 				list: [], // 产品列表
 				total: 0, // 总记录
+				// 已选列表
 				showChoosePopu: false,//已选列表弹框
 				chooseList:[], // 已选数据
-				chooseProductList:[], // 已选弹框中当前数据
 				chooseOptions:[
 					{
 						text: '删除',
@@ -153,15 +126,14 @@
 					}
 				], // 左滑删除已选产品
 				screenWidth: 750, // 屏幕宽度
-				showSwipeAction: false, // 已选弹框是否一打开
-				choosePageNo: 1, // 已选产品当前页
-				choosePageSize: 6, // 已选产品每页数
-				chooseTotal: 0 ,// 已选产品总记录数
-				promoActiveSn: null, // 活动sn
-				submitOk: false,
-				// 分页
-				showPage: false,
-				maxScrollTop: 0
+				showSwipeAction: false, // 已选弹框是否已经打开
+				curScrollPopuTop:0, // 当前滚动条top
+				showScrollPopuHeight:0, // 可显示区域实际高度
+				popuItemHeight: 133, // 已选产品列表项高度
+				// 虚拟滚动
+				showScrollHeight: 0, // 模块可显示区域高度
+				curScrollTop: 0 ,// 当前滚动条top
+				scrolltimer: null, // 滚动定时器
 			}
 		},
 		computed: {
@@ -189,14 +161,6 @@
 				})
 				return total
 			},
-			// 总页数
-			totalPages(){
-				return Math.ceil(this.total / this.pageSize)
-			},
-			// 已选产品分页总数
-			totalSelPages(){
-				return Math.ceil(this.chooseTotal/this.choosePageSize)
-			}
 		},
 		onLoad(opts) {
 			uni.setNavigationBarTitle({
@@ -208,6 +172,9 @@
 			// 购物车是否有缓存
 			const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
 			this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
+			if(this.chooseList.length){
+				this.updateChooseListTop()
+			}
 			// 查询产品列表
 			this.pageInit()
 		},
@@ -230,32 +197,27 @@
 		},
 		// 到底部加载更多
 		onReachBottom() {
-			this.showPage = true
 			if(this.list.length < this.total){
-				// this.pageNo += 1
-				// this.getRow()
+				this.pageNo += 1
+				this.getRow()
 			}else{
 				this.status = "nomore"
 			}
 		},
+		// 页面滚动
 		onPageScroll(e){
-			if(this.showPage && this.maxScrollTop == 0){
-				this.maxScrollTop = e.scrollTop
-			}
-			// console.log(this.maxScrollTop , e.scrollTop)
-			if(this.showPage && this.maxScrollTop>0 && (e.scrollTop < (this.maxScrollTop/10)*9)){
-				this.showPage = false
-			}
-			// 最后一页显示
-			if(this.pageNo >= this.totalPages){
-				this.showPage = true
+			console.log(e,'----')
+			// 已选列表未打开时,更新当前滚动高度
+			if(!this.showChoosePopu){
+				// 清除计时器
+				clearTimeout(this.scrolltimer)
+				// 如果停留则表示滚动结束
+				this.scrolltimer = setTimeout(() => {
+				  this.curScrollTop = e.scrollTop
+				}, 500)
 			}
 		},
 		methods: {
-			pagechanged(page){
-				this.pageNo = page
-				this.getRow()
-			},
 			// 初始化页面
 			pageInit(){
 				// 重置分页
@@ -267,15 +229,18 @@
 			},
 			// 添加已选产品
 			chooseProduct(item){
-				if(!item.checked){
-					item.checked = true
-					item.qty = 1
-					item.show = false
-					this.chooseList.unshift(this.$u.deepClone(item))
+				const rowItem = this.list.find(k => k.id == item.id)
+				if(!rowItem.checked){
+					rowItem.checked = true
+					rowItem.qty = 1
+					rowItem.show = false
+					this.chooseList.unshift(this.$u.deepClone(rowItem))
+					// 更新top值
+					this.updateChooseListTop()
 				}else{
-					item.qty = item.qty + 1
-					// 已添加,则增加数量
-					const row = this.chooseList.find(key => key.id == item.id)
+					rowItem.qty = rowItem.qty + 1
+					// 已添加,则增加已选列表中的数量
+					const row = this.chooseList.find(key => key.id == rowItem.id)
 					if(row){
 						row.qty = row.qty + 1
 					}
@@ -284,13 +249,20 @@
 			},
 			// 渲染已选产品列表
 			openRender(){
-				setTimeout(()=>{
-					this.showSwipeAction = true
-				},100)
+				const query = uni.createSelectorQuery().in(this);
+				query.select('#popuScroll').boundingClientRect(data => {
+				  if (data) {
+					const maxRows = Math.ceil(data.height/this.popuItemHeight)
+					this.showScrollPopuHeight = this.popuItemHeight * maxRows
+					// console.log(this.showScrollPopuHeight,maxRows)
+					setTimeout(()=>{
+						this.showSwipeAction = true
+					},100)
+				  }
+				}).exec(); 
 			},
 			// 关闭已选列表弹框
 			closePopu(){
-				this.chooseProductList = []
 				this.showChoosePopu=false
 				if(this.submitOk){
 					uni.hideLoading()
@@ -299,99 +271,67 @@
 					})
 				}
 			},
+			// 更新top值
+			updateChooseListTop(){
+				this.chooseList.forEach((item,index)=>{
+					item.top = (index+1)* this.popuItemHeight
+				})
+				this.chooseList.splice()
+			},
 			// 打开已选产品列表
 			openChoose(){
 				this.submitOk = false
+				console.log(this.chooseList)
 				if(this.chooseLength){
 					this.showChoosePopu = !this.showChoosePopu
-					if(this.showChoosePopu){
-						console.log(this.chooseList)
-						// 默认加载第一页数据
-						this.chooseTotal = this.chooseList.length
-						this.choosePageNo = 0
-						// this.onreachPopuBottom()
-						this.onreachPopuBottom(1)
-					}
 				}else{
 					this.$u.toast(`请选择产品`);
 				}
 			},
-			// 已选产品滚动到底部
-			onreachPopuBottom(pages){
-				console.log(pages)
-				this.chooseProductList = []
-				console.log(pages,this.totalSelPages)
-				// if(this.choosePageNo>=this.totalSelPages){
-				// 	return
-				// }
-				uni.showLoading({
-					title: '加载中',
-					mask: true
-				})
-				// this.choosePageNo = this.choosePageNo + 1
-				this.choosePageNo = pages
-				const start = (this.choosePageNo-1)*this.choosePageSize
-				const end = this.choosePageNo*this.choosePageSize
-				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 = list
-				// this.chooseProductList.splice()
-				this.$nextTick(()=>{
-					uni.hideLoading()
-				})
+			// popu 滚动
+			onscrollPopu(e){
+				console.log(e.detail.scrollTop)
+				// 清除计时器
+				clearTimeout(this.scrolltimer)
+				// 如果停留则表示滚动结束
+				this.scrolltimer = setTimeout(() => {
+				  this.curScrollPopuTop = e.detail.scrollTop
+				}, 500)
 			},
 			// 已选产品变更数量
 			changeQty(e){
-				const _this = this
-				const rowIndex = this.chooseProductList.findIndex(key => key.id == e.index)
-				if(e.value>0){
-					this.chooseProductList[rowIndex].qty = e.value
-					// 更新原始数据
-					const rindex = this.chooseList.findIndex(key => key.id == e.index)
-					if(rindex>=0){
-						this.chooseList[rindex].qty = e.value
-						this.chooseList.splice()
-					}
-					// 更新页面产品数据
-					const aindex = this.list.findIndex(key => key.id == e.index)
-					if(aindex>=0){
-						this.list[aindex].qty = e.value
-						this.list.splice()
-					}
-				}else{
-					// 数量为0时,删除
-					// this.chooseClick(e.index,0)
+				const rowIndex = this.chooseList.findIndex(key => key.id == e.index)
+				if(rowIndex>=0){
+					this.chooseList[rowIndex].qty = e.value
+					this.chooseList.splice()
+				}
+				// 更新页面产品数据
+				const aindex = this.list.findIndex(key => key.id == e.index)
+				if(aindex>=0){
+					this.list[aindex].qty = e.value
+					this.list.splice()
 				}
 			},
 			//已选产品删除
 			chooseClick(index, btns){
 				if(btns == 0) {
+					// 删除项
+					const aindex = this.chooseList.findIndex(item => item.id == index)
+					if(aindex>=0){
+						this.chooseList.splice(aindex, 1);
+						// 更新top
+						this.updateChooseListTop()
+					}
+					
 					// 更新列表已选状态
 					const row = this.list.find(item => item.id == index)
 					if(row){
 						row.checked = false
 						row.qty = 0
 					}
-					const rindex = this.chooseProductList.findIndex(item => item.id == index)
-					if(rindex>=0){
-						this.chooseProductList.splice(rindex, 1);
-						// this.chooseList.splice(rindex, 1);
-					}
-					const aindex = this.chooseList.findIndex(item => item.id == index)
-					if(aindex>=0){
-						this.chooseList.splice(aindex, 1);
-					}
-					// 重新计算分页,并更新当前页
-					this.chooseTotal = this.chooseList.length
-					this.onreachPopuBottom(this.choosePageNo>this.totalSelPages?this.totalSelPages:this.choosePageNo)
-					
-					// 如果数量小于每页数量,自动加载下一页
-					// if(this.chooseProductList.length < this.choosePageSize){
-					// 	this.onreachPopuBottom()
-					// }
 					
 					// 如果没有数据了
-					if(this.chooseTotal==0){
+					if(this.chooseList.length==0){
 						this.clearChooseData()
 					}
 					this.$u.toast(`删除成功!`);
@@ -401,20 +341,20 @@
 			chooseOpen(index){
 				// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
 				// 原本为'false',再次设置为'false'会无效
-				const row = this.chooseProductList.find(item => item.id == index)
+				const row = this.chooseList.find(item => item.id == index)
 				if(row) {
 					row.show = true
 				}
-				this.chooseProductList.map((item, idx) => {
-					if(index != item.id) this.chooseProductList[idx].show = false;
+				this.chooseList.map((item, idx) => {
+					if(index != item.id) this.chooseList[idx].show = false;
 				})
 			},
 			// 清除滑动按钮
 			clearAction(){
-				this.chooseProductList.map(item => {
+				this.chooseList.map(item => {
 					item.show = false
 				})
-				this.chooseProductList.splice()
+				this.chooseList.splice()
 			},
 			// 确定清空已选列表
 			claerChoose(){
@@ -433,9 +373,7 @@
 			// 清空已选数据
 			clearChooseData(){
 				this.chooseList = []
-				this.chooseProductList = []
 				this.showChoosePopu = false
-				// nav.navigateBack()
 				// 重置已选状态
 				this.list.filter(item => item.checked).map(item=>{
 					item.checked = false
@@ -451,6 +389,13 @@
 				queryWord: this.queryWord,
 				promoActiveSn: this.promoActiveSn
 			  }
+			  
+			  const rowHeight = 287 // 行高
+			  const pageHeight = uni.getSystemInfoSync().windowHeight // 页面高度
+			  const maxShowNums = Math.ceil( pageHeight / rowHeight ) //最大显示行数
+			  console.log(maxShowNums)
+			  this.showScrollHeight = rowHeight * maxShowNums // 可显示区域高度
+			  
 			  this.status = "loading"
 			  uni.showLoading({
 				  title: '加载中',
@@ -460,10 +405,12 @@
 				if (res.code == 200 || res.status == 204 || res.status == 200) {
 				  const list = res.data.list||[]
 				  const ret = []
+				  let curPageNums = (this.pageNo - 1) * this.pageSize / 2
 				  // 更新已选状态
-				  list.map(k => {
+				  list.map((k,i) => {
 					  // 如果筛选或分页后,更新页面列表产品数量
 					  const hasChecked = this.chooseList.find(s=>s.id == k.id)
+					  curPageNums = (i+1) % 2 != 0 ? curPageNums + 1 : curPageNums
 					  ret.push({
 						  id: k.id,
 						  cost: k.cost,
@@ -478,25 +425,19 @@
 						  promoRuleSn: k.promoRuleSn,
 						  promoRuleValue: k.promoRuleValue,
 						  promoRuleType: k.promoRuleType,
-						  show: false
+						  show: false,
+						  top: rowHeight * curPageNums
 					  })
 				  })
-				  
-				  // _this.list = _this.list.concat(ret)
-				  _this.list = ret
+				  _this.list = _this.list.concat(ret)
+				  console.log(_this.list)
 				  _this.total = res.data.count || 0
 				} else {
 				  _this.list = []
 				  _this.total = 0
 				  _this.noDataText = res.message
 				}
-				// 滚动到顶部
 				_this.$nextTick(()=>{
-					_this.showPage = false
-					uni.pageScrollTo({
-						scrollTop: 0,
-						duration: 300
-					});
 					uni.hideLoading()
 				})
 				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
@@ -548,16 +489,6 @@
 <style lang="less">
     page{
 		height: 100vh;
-		.pages-box{
-			position: fixed;
-			left: 10%;
-			bottom: 150rpx;
-			z-index: 90;
-			width: 80%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
 	}
 	.video-pagesCons{
 		height: 100vh;
@@ -583,74 +514,8 @@
 			.check-order-list{
 				width: 50%;
 				padding: 10upx;
-				.video-item{
-					background: #ffffff;
-					border-radius: 10upx;
-					box-shadow: 1px 1px 3px #EEEEEE;
-					height: 100%;
-					display: flex;
-					flex-direction: column;
-					> view{
-						&:first-child{
-							position: relative;
-							overflow: hidden;
-							border-bottom: 1px solid #eee;
-							.product-code{
-								color: #666;
-								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;
-							position: relative;
-							flex-grow: 1;
-							.product-name{
-								font-size: 28rpx;
-								font-weight: 900;
-								color: #666;
-							}
-							.product-guige{
-								margin: 10rpx 0 20rpx 0;
-								color: #2196F3;
-								text{
-									margin-right: 10rpx;
-								}
-							}
-						}
-						.product-button{
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							position: absolute;
-							bottom: 20rpx;
-							left: 0;
-							width: 100%;
-							padding: 0 20rpx;
-						}
-						.cart-add{
-							padding: 6rpx 15rpx;
-							border-radius: 30rpx;
-							background: #2196F3;
-							color: #fff;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							font-size: 24rpx;
-						}
-						.colr-add{
-							background: #2196F3;
-							padding: 10rpx 20rpx;
-						}
-						.colr-checks{
-							background: #00aa00;
-						}
-					}
-				}
+				height: 287px;
+				background: url('/static/def_imgs.png') no-repeat center center;
 			}
 		}
 		.bottom-bar{
@@ -733,82 +598,11 @@
 				padding: 25rpx 20rpx;
 			}
 		}
-		.choose-product-pages{
-			padding: 10rpx;
-			display: flex;
-			justify-content: center;
-			position: absolute;
-			left: 0;
-			bottom: 150rpx;
-			z-index: 20;
-			width: 100%;
-		}
 		.choose-product-list{
-			padding: 100rpx 20rpx 280rpx;
+			padding: 100rpx 20rpx 150rpx;
 			width: 100%;
+			height: 133px;
 			position: relative;
-			.choose-product-item{
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: 20rpx 0;
-				border-bottom: 1px solid #eee;
-				> view{
-					 display: flex;
-					 align-items: center;
-					 justify-content: space-between;
-					 flex-grow: 1;
-					 width: 100%;
-				}
-				.choose-product-item-img{
-					margin-right: 20rpx;
-					width: 35%;
-					position: relative;
-					overflow: hidden;
-					border: 1px solid #eee;
-					padding: 10rpx;
-					.back-price{
-						zoom: calc(0.8);
-					}
-					.choose-product-item-left-info-code{
-						color: #666;
-						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;
-					width: 65%;
-					flex-grow: 1;
-					.choose-product-item-left-info-price{
-						display: flex;
-						align-items:center;
-						justify-content: space-between;
-						>view{
-							&:last-child{
-								display: flex;
-								align-items:center;
-							}
-						}
-					}
-					.choose-product-item-left-info-name{
-						font-size: 28rpx;
-						font-weight: 900;
-						color: #666;
-					}
-					.choose-product-item-left-info-guige{
-						color: #2196F3;
-						margin: 10rpx 0;
-						text{
-							margin-right: 10rpx;
-						}
-					}
-				}
-			}
 		}
 		.back-price{
 			padding: 6rpx 65rpx;

+ 0 - 162
pagesB/promoProduct.vue

@@ -1,162 +0,0 @@
-<template>
-	   <view class="content">
-	       <mosowe-invented-list
-	         :list="list"
-	         :cacheNum="30">
-	         <template #default="{ item }">
-	           <view class="item">
-	             <view class="name">
-	               {{ item.list[0].productName }}
-	             </view>
-	             <view class="age">
-	               {{ item.list[0].productCode }}
-	             </view>
-	           </view>
-	         </template>
-	       </mosowe-invented-list>
-	     </view>
-</template>
-
-<script>
-	import { queryPromoProductByPage } from '@/api/video.js'
-	import { purchaseSave } from '@/api/purchase.js'
-	export default {
-	        data() {
-	            return {
-					promoActiveSn: null,
-					chooseList: [],
-					windowWidth: 0,
-					windowHeight: 0,
-					showChoosePopu: false,
-					queryWord: '',
-					ctxScroll: null,
-					trigger: false,
-					loading: false,
-					over: false,
-					// 列表数据
-					pageNo: 1,
-					pageSize: 200,
-					list: [],
-	            };
-	        },
-			onLoad(opts) {
-				 uni.setNavigationBarTitle({
-				 	title: opts.title||'促销活动产品'
-				 })
-				 this.windowWidth = uni.getSystemInfoSync().windowWidth
-				 this.windowHeight = uni.getSystemInfoSync().windowHeight
-				 // 初始化数据
-				 this.$store.state.vuex_tempData = null
-				 this.promoActiveSn = opts.promoActiveSn
-				 // 购物车是否有缓存
-				 const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
-				 this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
-			},
-			onReady() {
-				this.loadData()
-			},
-			onShow() {
-				this.showChoosePopu=false
-			},
-			onUnload() {
-				// 存储已选列表值
-				const hasCache = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
-				if(hasCache){
-					hasCache.list = this.chooseList
-				}else{
-					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
-			},
-	        methods: {
-				// 加载数据
-	            loadData() {
-					console.log('pageNo',this.pageNo)
-					console.log('pageSize',this.pageSize)
-					let params = {
-					  pageNo: this.pageNo,
-					  pageSize: this.pageSize,
-					  queryWord: this.queryWord,
-					  promoActiveSn: this.promoActiveSn
-					}
-					queryPromoProductByPage(params).then(res => {
-						if (res.status == 200) {
-						  const list = res.data.list||[]
-						  const ret = []
-						  if(list.length%2!=0){
-							  list.push(null)
-						  }
-						  for(let i=0;i<list.length;i=i+2){
-							  const a = list[i]
-							  const hasAChecked = this.chooseList.find(s=>s.id == a.id)
-							  const b = list[i+1]
-							  const hasBChecked = this.chooseList.find(s=>s.id == b.id)
-							  // 如果超出
-							  if(b){
-								  ret.push({list:[this.formatData(a,hasAChecked),this.formatData(b,hasBChecked)]})
-							  }else{
-								  ret.push({list:[this.formatData(a,hasAChecked)]})
-							  }
-						  }
-						  this.total = (res.data.count || 0) + 1
-						  this.list = this.list.concat(ret)
-						} 
-					})
-	            },
-				// 格式化数据
-				formatData(k,hasChecked){
-					return {
-						id: k.id,
-						cost: k.cost,
-						checked: !!hasChecked,
-						qty: !!hasChecked ? hasChecked.qty : 0,
-						productCode: k.productCode,
-						productSn: k.productSn,
-						productImage: k.productImage,
-						productName: k.productName,
-						productOrigCode: k.productOrigCode,
-						promoActiveSn: k.promoActiveSn,
-						promoRuleSn: k.promoRuleSn,
-						promoRuleValue: k.promoRuleValue,
-						promoRuleType: k.promoRuleType,
-						show: false
-					}
-				},
-				// 添加产品
-				chooseProduct(item){
-					
-				}
-	        },
-	    };
-</script>
-
-<style lang="less" scoped>
-.tab-search{
-	padding: 15rpx 20rpx;
-	background: #fff;
-}
-.content {
-  width: 100vw;
-  height: 100vh;
-  .name {
-    font-size: 32rpx;
-    font-weight: bold;
-    line-height: 40rpx;
-    margin-bottom: 20rpx;
-    color: #333;
-  }
-  .age {
-    font-size: 24rpx;
-    color: #999;
-  }
-  .item {
-    margin: 30rpx;
-    padding: 30rpx;
-    box-sizing: border-box;
-    background-color: #eee;
-    border-radius: 12rpx;
-  }
-}
-</style>