影集项目新建

pages/photos/test.vue

+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file

pages/scenic/scenicChooseProduct/components/detail.vue

 <template>
 	<!-- 详情 -->
+	<u-popup  v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
+		<view class="son-wrap">
+			<view class="title">
+				明细
+			</view>
+	
+			<view class="middle">
+				
+			</view>
+	
+			<view class="bottom">
+				<text class="bottom-left">
+					<view></view>
+					<view></view>
+				</text>
+				<view class="bottom-right">
+					<text class="btn">
+						去预订
+					</text>
+				</view>
+			</view>
+		</view>
+	</u-popup>
 </template>
 
 <script>
+export default {
+	  props: ['chooseProduct'],
+	  data() {
+	    return {
+	      showPop: false, //控制弹窗显示隐藏
+	    }
+	  },
+	  methods: {
+			
+	  }
+}
 </script>
 
-<style>
+<style scoped="scoped">
+	.son-wrap{
+		position: relative;
+	}	
+	.title{
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: bold;
+		text-align: center;
+		padding: 30rpx 0;
+		position:fixed;
+		top: 0;
+		width: 100%;
+		background: #fff;
+		z-index: 1;	
+	}
+	.middle {
+		padding: 100rpx 24rpx 0 24rpx;
+	}
+	.bottom {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 24rpx;
+		height: 100rpx;
+		align-items: center;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		z-index: 9;
+		background: #FFFFFF;
+		box-sizing: border-box;
+	}
+	.bottom-left{
+		color: #f9690e;
+	}
+	.bottom-left text {
+		font-size: 36rpx;
+		font-weight: bolder;
+	}
+	.bottom view {
+		display: flex;
+		align-items: center;
+	}
+	.btn{
+		padding: 16rpx 48rpx;
+		border-radius: 20rpx;
+		font-size: 32rpx;
+	}
 </style>

pages/scenic/scenicChooseProduct/scenicChooseProduct.vue

@@ -12,6 +12,7 @@
 			<swiper :current="active"  @animationfinish="animationfinish" class="swiper-box">
 				<swiper-item class="swiper-item">
 					<scroll-view scroll-y style="height:100%;width: 100%;">
+					<checkbox-group @change="checkboxChange">
 						<view class="merchant" v-for="(item,index) in scenicList" :key='index'>
 							<view class="merchant-title">
 								<view class="title-left">
@@ -26,11 +27,11 @@
 									距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km
 								</view>							
 							</view>
-						<checkbox-group @change="checkboxChange">
+							
 								<label v-for="(items,a) in item.productListCopy" :key='a'>
 									<view class="product" :class="{'on':items.ifChoose}">
 										<view class="product-left">
-										<checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" />
+											<checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" :checked="items.ifChecked" />
 										</view>
 										
 										<view class="product-right">
@@ -65,7 +66,7 @@
 										</view>
 									</view>
 								</label>
-						</checkbox-group>
+							
 							<view class="product-more" v-if="index>0&&item.productList.length>2" >
 								<view v-if="item.productListCopy.length!=item.productList.length" @click="showMoreProduct(item)">
 									更多
@@ -78,6 +79,7 @@
 								</view>
 							</view>
 						</view>
+					</checkbox-group>
 					<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
 					</scroll-view>
 				</swiper-item>
@@ -105,7 +107,7 @@
 					<text class="bottom-three"></text>
 				</view>
 				
-				<view class="bottom-detail" :style="{'top':chooseProduct.length>0?'-28rpx':'0'}">
+				<view class="bottom-detail" @click="showDetail()" :style="{'top':chooseProduct.length>0?'-28rpx':'0'}">
 					<text>
 						明细
 					</text>
@@ -123,6 +125,8 @@
 		<customer :scenicList='scenicList' ref='customer'></customer>
 		<!-- 购买须知 -->
 		<buyKnow :buyKnowData='buyKnowData' ref='buyKnow'></buyKnow>
+		<!-- 详情明细 -->
+		<detail :chooseProduct='chooseProduct' ref='detail'></detail>
 		<!-- 模态框 -->
 		<u-modal 
 			v-model="showModal" 
@@ -138,10 +142,12 @@
 <script>
 import customer from '@/components/customer.vue'//客服
 import buyKnow from '@/components/buyKnow.vue'//购买须知
+import detail from '@/components/detail.vue'//购买须知
 export default {
   components:{
     customer,
-    buyKnow
+    buyKnow,
+    detail
   },
   data() {
     return {
@@ -154,6 +160,7 @@ export default {
       buyKnowData:'',//购买须知数据
       chooseProduct:[],//选中的产品
       showModal:false,//是否显示模态框
+      chooseMerchantProduct:'',//不支持多产品购买时，选中的景区产品
     }
   },
   watch: {
@@ -168,13 +175,49 @@ export default {
 	      // })
         //当选中产品时
         if(newValue.length>oldValue.length){
-          let item=newValue[newValue.length-1]
-          if(item.isMoreBuy!==0){
-            //不支持多产品购买时，删除该景区的其他产品
+          //找到当前选中的产品
+          let product=newValue[newValue.length-1]
+          //商家一级
+          let merchant=''
+          //通过产品一级找到商家一级
+          this.scenicList.forEach(item=>{
+            if(item.id==product.merchantId){
+              merchant=item
+            }
+          })
+          //当选中产品的景区有2个以上选中产品时
+          let number=0
+          this.chooseProduct.forEach(item=>{
+            if(merchant.id==item.merchantId){
+              number+=1
+            }
+          })
+          if(product.isMoreBuy!==0){
+            if(number>1){
+              //显示确认弹窗
               this.showModal=true
-						
+              //当前选中的景区产品，用于确定以及取消方法取值
+              this.chooseMerchantProduct=product
+            } 
           }else{
             //支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
+            this.chooseProduct.forEach((item,index)=>{
+              if(merchant.id==item.merchantId&&item.isMoreBuy!==0){
+                //取消选中状态和选中背景颜色
+                this.scenicList.forEach(item2=>{
+								  item2.productList.forEach(item3=>{
+								    if(item.id==item3.id){
+								      item3.ifChecked=false
+								      item3.ifChoose=false
+								    }
+								  })
+                })
+                delete this.chooseProduct[index]
+              }
+            })
+            this.chooseProduct=this.chooseProduct.filter(function (val) {
+              	return val
+            })
           }
         }
 	    },
@@ -221,6 +264,10 @@ export default {
       this.buyKnowData=data
       this.$refs.buyKnow.showPop=true
     },
+    //---展示明细弹窗
+    showDetail(){
+      this.$refs.detail.showPop=true
+    },
     //---展示更多产品
     showMoreProduct(item){
       item.productListCopy=item.productList
@@ -251,47 +298,46 @@ export default {
         })
       })
     },
-    //---不支持多选产品弹窗，选择确定事件
+    //---不支持多选产品，选择确定事件
     chooseConfirm(){
-		  this.chooseProduct.forEach((item2,index)=>{
+		  this.chooseProduct.forEach((item,index)=>{
 		    //删除选中产品以外的其他所有产品
-		    if(this.chooseMerchantId==item2.merchantId&&JSON.stringify(item2)!=JSON.stringify(this.chooseMerchantProduct)){
-		      delete this.chooseProduct[index]
-		      //找到删除下标，然后找到对应的多选框不让选中
-		      this.scenicList.forEach((item3,x)=>{
-		        item3.productList.forEach((item4,y)=>{
-		          if(JSON.stringify(item2)==JSON.stringify(item4)){
-		            document.querySelectorAll('.list')[x].children[1].children[y].children[0].children[0].children[0].checked=false
+		    if(this.chooseMerchantProduct.merchantId==item.merchantId&&JSON.stringify(item)!=JSON.stringify(this.chooseMerchantProduct)){
+          //取消选中状态和选中背景颜色
+          this.scenicList.forEach(item2=>{
+            item2.productList.forEach(item3=>{
+              if(item.id==item3.id){
+                item3.ifChecked=false
+                item3.ifChoose=false
               }
             })
           })
+		      delete this.chooseProduct[index]
 		    }
 		  })
 		  this.chooseProduct=this.chooseProduct.filter(function (val) {
 		    	return val
 		  })
-		  this.showConfig=false
+		  this.showModal=false
     },
-    //---不支持多选产品弹窗，选择取消事件
+    //---不支持多选产品，选择取消事件
     chooseCancel(){
 		  //删除选中产品
-		  this.chooseProduct.forEach((item2,index)=>{
-		    if(JSON.stringify(item2)===JSON.stringify(this.chooseMerchantProduct)){
-		      delete this.chooseProduct[index]
-		      //找到删除下标，然后找到对应的多选框不让选中
-		      this.scenicList.forEach((item3,x)=>{
-		        item3.productList.forEach((item4,y)=>{
-		          if(JSON.stringify(item2)==JSON.stringify(item4)){
-		            document.querySelectorAll('.list')[x].children[1].children[y].children[0].children[0].children[0].checked=false
+		  this.chooseProduct.forEach((item,index)=>{
+		    if(item.id===this.chooseMerchantProduct.id){
+          //取消选中状态和选中背景颜色
+          this.scenicList.forEach(item2=>{
+					  item2.productList.forEach(item3=>{
+					    if(item.id==item3.id){
+					      item3.ifChecked=false
+					      item3.ifChoose=false
 					    }
 					  })
           })
+		      this.chooseProduct.splice(index,1)
 		    }
 		  })
-		  this.chooseProduct=this.chooseProduct.filter(function (val) {
-		    	return val
-		  })
-		  this.showConfig=false
+		  this.showModal=false
     },
     //---商品列表
     initList(latitude,longitude) {