选择产品详情开发

manifest.json

@@ -71,9 +71,7 @@
         "uniStatistics" : {
             "enable" : true
         },
-				"requiredPrivateInfos":[
-					"getLocation"
-				]
+        "requiredPrivateInfos" : [ "getLocation" ]
     },
     "mp-alipay" : {
         "usingComponents" : true,

pages/indexs/merchantListIndex/merchantListIndex.vue

@@ -26,7 +26,7 @@
 			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
 				<swiper-item class="swiper-item">
 					<scroll-view scroll-y style="height:100%;width: 100%;">
-						<view class="merchant-list" v-for="(item,index) in scenicList" :key='index' @click="clikDetail(item.id)">
+						<view class="merchant-list" v-for="(item,index) in scenicList" :key='index' @click="goProduct(item.id)" >
 							<view class="list-left">
 								<image :src="item.imgUrl"></image>
 							</view>
@@ -50,7 +50,7 @@
 									<text class="right3-text" v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">
 									{{items}}
 									</text>
-									<text>
+									<text @click.stop="clikDetail(item.id)">
 										详情
 									</text>
 									<u-icon name="arrow-right"></u-icon>
@@ -165,6 +165,12 @@ export default {
       this.swiperCurrent = current
       this.current = current
     },
+    //---跳转产品页面
+    goProduct(merchantId){
+      uni.navigateTo({
+        url:'/pages/scenic/scenicChooseProduct/scenicChooseProduct?merchantId='+merchantId
+      })
+    },
     //---加载数据
     initList(latitude,longitude,click){
       let data = {

pages/scenic/scenicChooseProduct/components/detail.vue

 <template>
 	<!-- 详情 -->
-	<u-popup  v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
+	<u-popup  v-model="showPop" mode="bottom" border-radius="14" closeable height="65%">
 		<view class="son-wrap">
 			<view class="title">
 				明细
 			</view>
 	
 			<view class="middle">
-				
+				<view class="merchantlist" v-for="(item,index) in merchantList" :key="index">
+					<view class="merchant-title">
+						{{item.merchantName}}
+					</view>
+					<view class="productlist" v-for="(items,a) in item.productlist" :key='a'>
+						<text>
+							{{items.name}}
+						</text>
+						<text style="font-weight: bold;">
+							¥{{items.sellingPrice}}
+						</text>
+					</view>
+				</view>
 			</view>
 	
 			<view class="bottom">
-				<text class="bottom-left">
-					<view></view>
-					<view></view>
-				</text>
+				<view class="bottom-left">
+					合计：¥{{priceTotal}}
+				</view>
 				<view class="bottom-right">
 					<text class="btn">
 						去预订
@@ -31,7 +42,41 @@ export default {
   data() {
     return {
       showPop: false, //控制弹窗显示隐藏
+      priceTotal:0,//总价
+      merchantList:[],//商家列表
+    }
+  },
+  watch: {
+    //选中产品的数量变化
+    chooseProduct: { 
+      handler(newValue, oldValue){
+        this.priceTotal=0
+        this.chooseProduct.forEach((item)=>{
+          this.priceTotal+=item.sellingPrice
+        })
+        this.priceTotal=parseFloat(this.priceTotal.toFixed(2))
+        this.merchantList=[]
+        this.chooseProduct.forEach(item=>{
+				  if(!this.merchantList.find(item2=>item2.merchantId==item.merchantId)){
+				    this.merchantList.push({
+				      merchantName:item.merchantName,
+				      merchantId:item.merchantId,
+				      productlist:[]
+				    })
+				  }
+        })
+        //一级数组转化成二级数组
+        this.merchantList.forEach(item=>{
+				  this.chooseProduct.forEach(item2=>{
+				    if(item.merchantId==item2.merchantId){
+				      item.productlist.push(item2)
 				    }
+				  })
+        })
+      },
+      deep:true,
+      immediate: false
+    },
   },
   methods: {
 		
@@ -58,6 +103,22 @@ export default {
 	.middle {
 		padding: 100rpx 24rpx 0 24rpx;
 	}
+	.merchantlist{
+		border-bottom:2rpx solid #ececec;
+		padding-bottom: 40rpx;
+		margin-top: 24rpx;
+	}
+	.merchant-title{
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #191919;
+	}
+	.productlist{
+		display: flex;
+		justify-content: space-between;
+		font-size: 32rpx;
+		margin-top: 20rpx;
+	}
 	.bottom {
 		display: flex;
 		justify-content: space-between;
@@ -71,17 +132,6 @@ export default {
 		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;

pages/scenic/scenicChooseProduct/scenicChooseProduct.vue

@@ -118,7 +118,7 @@
 				</view>
 			</view>
 			<view class="bottom-right">
-				<text class="btn">去预定</text>
+				<text class="btn" @click="goFillorder()">去预定</text>
 			</view>
 		</view>
 		<!-- 客服组件 -->
@@ -142,6 +142,7 @@
 <script>
 import customer from '@/components/customer.vue'//客服
 import buyKnow from '@/components/buyKnow.vue'//购买须知
+import detail from './components/detail.vue'//购买须知
 export default {
   components:{
     customer,
@@ -150,7 +151,7 @@ export default {
   },
   data() {
     return {
-      merchantId:'z0015605022691a5945bbe463141668c',//商户Id
+      merchantId:'',//商户Id
       tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
       active:0,//导航栏下标
       imgList:[],//图片列表
@@ -160,18 +161,14 @@ export default {
       chooseProduct:[],//选中的产品
       showModal:false,//是否显示模态框
       chooseMerchantProduct:'',//不支持多产品购买时，选中的景区产品
+      groupId:'',//组合Id
+      groupChannelId:'',//组合渠道Id
     }
   },
   watch: {
     //选中产品的数量变化
 	  chooseProduct: { 
 	    handler(newValue, oldValue){
-	      // this.originalTotal=0
-	      // this.sellTotal=0
-	      // this.chooseProduct.forEach((item)=>{//通过选中的产品计算价格
-	      //   this.originalTotal+=item.originalPrice
-	      //   this.sellTotal+=item.sellingPrice
-	      // })
         //当选中产品时
         if(newValue.length>oldValue.length){
           //找到当前选中的产品
@@ -226,6 +223,7 @@ export default {
 	
   },
   onLoad(option){
+    this.merchantId=option.merchantId||''
     let token = uni.getStorageSync('token')
     if(token){
 		  uni.getLocation({
@@ -347,7 +345,9 @@ export default {
 		  }
 		  this.$request('/scenic/groupGood/getGroupProducts', data).then(res => {
 		    if (res.code == '00') {
-		      this.scenicList = res.data.merchantList
+		      this.scenicList = res.data.merchantList||[]
+          this.groupId=res.data.groupId||''
+          this.groupChannelId=res.data.groupChannelId||''
           this.scenicList.forEach((item,index)=>{
             //获取当前景区图片,把当前景区放在第一位
             if(item.id==this.merchantId){
@@ -388,6 +388,45 @@ export default {
 		    }
 		  })
     },
+    //---跳转填写订单页面
+    goFillorder(){
+      for (let i = 0; i < this.chooseProduct.length; i++) {
+			  let item = this.chooseProduct[i]
+			  if (item.status == 2) {
+          uni.showToast({
+					  title: '售罄产品不能进行购买',
+					  icon: 'none'
+          })
+			    return
+			  }
+      }
+      if (this.chooseProduct.length == 0) {
+        uni.showToast({
+				  title: '请选择至少一个产品',
+				  icon: 'none'
+        })
+			  return
+      } else if (this.chooseProduct.length == 1) {
+        let query='?merchantId='+this.chooseProduct[0].merchantId+'&productId='+this.chooseProduct[0].id+'&orderSource=3'
+			  if(this.chooseProduct[0].ticketType==2){//联票
+          uni.navigateTo({
+            url:'/pages/scenic/scenicJointOrder/scenicJointOrder'+query
+          })
+			  }else{//普通票
+			    uni.navigateTo({
+			    	url:'/pages/scenic/scenicSingleOrder/scenicSingleOrder'+query
+			    })
+			  }
+      } else {
+			  let productIdList = this.chooseProduct.map((item) => {
+			    return item.id
+			  })
+        let query='?productIdList='+JSON.stringify(productIdList)+'&groupId='+this.groupId+'&groupChannelId='+this.groupChannelId+'&orderSource=3'
+			  uni.navigateTo({
+			  	url:'/pages/combination/combiOrder/combiOrder'+query
+			  })
+      }
+    }
   }
 }
 </script>