lilei 10 ماه پیش
والد
کامیت
336446378a
1فایلهای تغییر یافته به همراه112 افزوده شده و 38 حذف شده
  1. 112 38
      pagesB/promoDetail.vue

+ 112 - 38
pagesB/promoDetail.vue

@@ -8,22 +8,22 @@
 				<view class="product-list">
 					<view
 					class="check-order-list" 
-					v-for="(item,index) in 20" 
+					v-for="(item,index) in list" 
 					:key="item.id" 
 					>
 						<view class="video-item">
 							<view>
-								<u-image :src="item.imageSet[0]" height="140px" width="100%"></u-image>
+								<u-image :src="item.images" height="140px" width="100%"></u-image>
 								<view class="back-price">返<text>¥15</text></view>
 							</view>
 							<view>
 								<view class="product-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
 								<view class="product-guige">285/70R17LT RT-5900</view>
 								<view class="product-button">
-									<view class="price-txt">¥<text>325.63</text></view>
+									<view class="price-txt">¥<text>{{item.price}}</text></view>
 									<view>
-										<u-button v-if="index!=2" :throttle-time="50" @click="chooseProduct(item)" :custom-style="{width:'50rpx'}" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
-										<u-button v-if="index==2" :throttle-time="50" @click="chooseProduct(item)" :custom-style="{width:'50rpx'}" size="mini" type="success" shape="circle"><u-icon name="checkmark"></u-icon></u-button>
+										<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>
@@ -44,7 +44,7 @@
 							<u-badge type="error" :count="chooseLength" :offset="[-7,-8]"></u-badge>
 						</view>
 					</view>
-					<view class="bottom-bar-left-item">
+					<view class="bottom-bar-left-item" v-if="showChoosePopu">
 						合计:<view class="price-txt">¥<text>325.63</text></view>
 					</view>
 				</view>
@@ -60,18 +60,20 @@
 			mode="bottom" 
 			border-radius="14" 
 			height="100%" 
+			@scrolltolower="onreachPopuBottom"
 			@open="openRender"
 			@close="closePopu">
 				<view :style="{width:screenWidth + 'px'}" @click="clearAction">
 					<view class="choose-title">
 						<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">左滑或数量0时删除产品</text>
 					</view>
 					<view class="choose-product-list" v-if="showSwipeAction">
 						<u-swipe-action 
 						:show="item.show" 
-						:index="index" 
 						v-for="(item, index) in chooseProductList" 
+						:index="item.id" 
 						:key="item.id" 
 						@click="chooseClick" 
 						@open="chooseOpen"
@@ -87,9 +89,9 @@
 										<view class="choose-product-item-left-info-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
 										<view class="choose-product-item-left-info-guige">285/70R17LT RT-5900</view>
 										<view class="choose-product-item-left-info-price">
-											<view class="price-txt">¥<text>325.63</text></view>
+											<view class="price-txt">¥<text>{{item.price}}</text></view>
 											<view>
-												<u-number-box :input-width="60" :input-height="60" size="mini"></u-number-box>
+												<u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="0" @change="changeQty"></u-number-box>
 											</view>
 										</view>
 									 </view>
@@ -115,26 +117,29 @@
 			return {
 				status: 'loading',
 				noDataText: '暂无数据',
-				queryWord: '',
+				queryWord: '',// 关键词查询列表
 				// 查询条件
-				pageNo: 1,
-				pageSize: 10,
-				list: [],
-				total: 0,
-				showChoosePopu: false,
-				chooseList:[],
-				chooseProductList:[],
-				chooseOptions:
-				[
+				pageNo: 1, // 当前页
+				pageSize: 10,//每页条数
+				list: [], // 产品列表
+				total: 0, // 总记录
+				showChoosePopu: false,//已选列表弹框
+				chooseList:[], // 已选数据
+				chooseAllList:[], // 已选原始所有数据
+				chooseProductList:[], // 已选弹框中当前数据
+				chooseOptions:[
 					{
 						text: '删除',
 						style: {
 							backgroundColor: '#dd524d'
 						}
 					}
-				],
-				screenWidth: 750,
-				showSwipeAction: false
+				], // 左滑删除已选产品
+				screenWidth: 750, // 屏幕宽度
+				showSwipeAction: false, // 已选弹框是否一打开
+				choosePageNo: 1, // 已选产品当前页
+				choosePageSize: 8, // 已选产品每页数
+				chooseTotal: 0 // 已选产品总记录数
 			}
 		},
 		computed: {
@@ -142,6 +147,7 @@
 			userInfo(){
 				return this.$store.state.vuex_userInfo
 			},
+			// 已选产品总款数
 			chooseLength(){
 				return this.chooseList.length
 			}
@@ -153,28 +159,46 @@
 			this.pageInit()
 		},
 		methods: {
+			// 初始化页面
 			pageInit(){
 				this.screenWidth = uni.getSystemInfoSync().windowWidth
 				this.total = 0
 				this.pageNo = 1
-				this.getRow()
+				// 获取列表数据
+				// this.getRow()
+				for(let i=0;i<25;i++){
+					this.list.push({
+						id: this.$u.guid(),
+						title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
+						images: 'https://cdn.uviewui.com/uview/common/logo.png',
+						price: Number(Math.random() * 100 + 50).toFixed(2),
+						checked: false,
+						show: false,
+						qty: 1
+					})
+				}
 			},
 			// 添加已选产品
 			chooseProduct(item){
-				this.chooseList.push({
-					id: new Date().getTime(),
-					title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
-					images: 'https://cdn.uviewui.com/uview/common/logo.png',
-					show: false
-				})
-				this.showChoosePopu = false
+				if(!item.checked){
+					item.checked = true
+					item.qty = 1
+					item.show = false
+					this.chooseList.unshift(item)
+				}else{
+					// item.qty = item.qty + 1
+					// 已添加,则增加数量
+					const row = this.chooseList.find(key => key.id == item.id)
+					if(row){row.qty = row.qty + 1}
+				}
 			},
+			// 渲染已选产品列表
 			openRender(){
-				this.chooseProductList = JSON.parse(JSON.stringify(this.chooseList))
 				setTimeout(()=>{
 					this.showSwipeAction = true
 				},100)
 			},
+			// 关闭已选列表弹框
 			closePopu(){
 				this.chooseProductList = []
 				this.showChoosePopu=false
@@ -183,25 +207,68 @@
 			openChoose(){
 				if(this.chooseLength){
 					this.showChoosePopu = !this.showChoosePopu
+					if(this.showChoosePopu){
+						this.chooseAllList = JSON.parse(JSON.stringify(this.chooseList))
+						// 默认加载第一页数据
+						this.choosePageNo = 1
+						this.chooseTotal = this.chooseAllList.length
+						this.chooseProductList = this.chooseTotal > this.choosePageSize ? this.chooseAllList.slice(0,this.choosePageSize) : this.chooseAllList
+					}
 				}else{
 					this.$u.toast(`请选择产品`);
 				}
 			},
+			// 已选产品滚动到底部
+			onreachPopuBottom(e){
+				const totalPages = Math.ceil(this.chooseTotal/this.choosePageSize)
+				if(this.choosePageNo>=totalPages){
+					return
+				}
+				this.choosePageNo = this.choosePageNo + 1
+				const start = (this.choosePageNo-1)*this.choosePageSize
+				const end = this.choosePageNo*this.choosePageSize
+				const list = this.chooseAllList.slice(start,end>this.chooseTotal?this.chooseTotal:end)
+				this.chooseProductList = this.chooseProductList.concat(list)
+				this.chooseProductList.splice()
+			},
+			// 已选产品变更数量
+			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)
+					this.chooseList[rindex].qty = e.value
+					this.chooseList.splice()
+				}else{
+					// 数量为0时,删除
+					this.chooseClick(e.index,0)
+				}
+			},
 			//已选产品删除
 			chooseClick(index, btns){
 				if(btns == 0) {
-					this.chooseList.splice(index, 1);
-					this.chooseProductList.splice(index, 1);
-					this.$u.toast(`删除了第${index}个cell`);
+					// 更新列表已选状态
+					const row = this.list.find(item => item.id == index)
+					if(row){row.checked = false}
+					const rindex = this.chooseProductList.findIndex(item => item.id == index)
+					console.log(rindex)
+					this.chooseProductList.splice(rindex, 1);
+					this.chooseList.splice(rindex, 1);
+					this.$u.toast(`删除成功!`);
 				}
 			},
 			// 同时打开一个
 			chooseOpen(index){
 				// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
 				// 原本为'false',再次设置为'false'会无效
-				this.chooseProductList[index].show = true;
-				this.chooseProductList.map((val, idx) => {
-					if(index != idx) this.chooseProductList[idx].show = false;
+				const row = this.chooseProductList.find(item => item.id == index)
+				if(row) {
+					row.show = true
+				}
+				this.chooseProductList.map((item, idx) => {
+					if(index != item.id) this.chooseProductList[idx].show = false;
 				})
 			},
 			// 清除滑动按钮
@@ -223,6 +290,8 @@
 							_this.chooseList = []
 							_this.chooseProductList = []
 							_this.showChoosePopu = false
+							// 重置已选状态
+							_this.list.filter(item => item.checked).map(item=>item.checked = false)
 						}
 					}
 				})
@@ -272,6 +341,7 @@
 			// 提交订单
 			submitOrder(){
 				if(this.showChoosePopu){
+					console.log(this.chooseList)
 					uni.navigateTo({
 						url: '/pagesB/procureOrder?id='
 					})
@@ -391,7 +461,7 @@
 		.choose-title{
 			display: flex;
 			align-items:center;
-			padding: 30rpx;
+			padding: 25rpx;
 			position: fixed;
 			background: #fff;
 			width: 100%;
@@ -400,6 +470,10 @@
 				color: #2196F3;
 				margin: 0 6rpx;
 			}
+			.choose-inf{
+				color: #999;
+				font-size: 24rpx;
+			}
 		}
 		.choose-product-list{
 			padding: 100rpx 20rpx 130rpx;