索道首页开发

pages/scenic/combinationProduct/combinationProduct.vue

@@ -82,7 +82,46 @@
 					</swiper-item>
 
 					<swiper-item class="swiper-item">
-						<u-empty text="空空如也2..." mode="list"></u-empty>
+						<u-waterfall v-model="albumList">
+							<template v-slot:left="{leftList}">
+								<view v-for="(item, index) in leftList" :key="index" class="album-left" @click="goAlbum(index)">
+									<view class="album-list-top">
+										<image :src="item.image" mode="widthFix"></image>
+									</view>
+									
+									<view class="album-list-bottom" :style="{'background': item.color}">
+										<view>{{item.title}}</view>
+										<view>快来定制吧</view>
+										<view>
+											<view class="album-btn">
+												点击定制
+												<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
+											</view>
+											<text class="count">{{item.count}}</text>
+										</view>
+									</view>
+								</view>
+							</template>
+							<template v-slot:right="{rightList}">
+								<view v-for="(item, index) in rightList" :key="index" class="album-right" @click="goAlbum(index)">
+									<view class="album-list-top">
+										<image :src="item.image" mode="widthFix"></image>
+									</view>
+									
+									<view class="album-list-bottom" :style="{'background': item.color}">
+										<view>{{item.title}}</view>
+										<view>快来定制吧</view>
+										<view>
+											<view class="album-btn">
+												点击定制
+												<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
+											</view>
+											<text class="count">{{item.count}}</text>
+										</view>
+									</view>
+								</view>
+							</template>
+						</u-waterfall>
 					</swiper-item>
 
 					<swiper-item class="swiper-item">
@@ -133,14 +172,17 @@
 import customer from '@/components/customer.vue' //客服
 import buyKnow from '@/components/buyKnow.vue' //购买须知
 import detail from './components/detail.vue' //购买须知
+import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
 export default {
   components: {
     customer,
     buyKnow,
-    detail
+    detail,
+    UWaterfall
   },
   data() {
     return {
+      companyId:'',//公司Id
       merchantId: '', //商户Id
       // tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
       tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
@@ -156,7 +198,44 @@ export default {
       groupChannelId: '', //组合渠道Id
       channelType: 0, //渠道类型
       swiperHeight: 0 ,//swiper高度
-      tabbarObj:''
+      tabbarObj:'',
+      albumList: [{
+			  title: '精彩瞬间',
+			  count: '10W+',
+			  image: '../static/scenic/wonderfulMoment.png',
+			  color: '#037EFF'
+      },
+      {
+			  title: '网红旅拍',
+			  count: '8W+',
+			  image: '../static/scenic/travalphoto.png',
+			  color: '#826847'
+      },
+      {
+			  title: '抱枕DIY',
+			  count: '4W+',
+			  image: '../static/scenic/pillow.png',
+			  color: '#1175B4'
+      },
+      {
+			  title: '明信片',
+			  count: '4W+',
+			  image: '../static/scenic/postcard.png',
+			  color: '#3478DC'
+      },
+      {
+			  title: '旅游台历定制',
+			  count: '4W+',
+			  image: '../static/scenic/deskCalender.png',
+			  color: '#1A9B45'
+      },
+      {
+			  title: '定制相册',
+			  count: '4W+',
+			  image: '../static/scenic/customPic.png',
+			  color: '#D48D46'
+      }
+      ],
     }
   },
   watch: {
@@ -217,7 +296,7 @@ export default {
   },
   onLoad(option) {
     //获取公司Id,保存到本地，支付等逻辑需要入口companyId
-    this.$commonjs.getCompanyId(option)
+    this.companyId=this.$commonjs.getCompanyId(option)
     this.channelType = option.channelType || 0
     this.merchantId = option.merchantId || ''
     let token = uni.getStorageSync('token')
@@ -463,7 +542,36 @@ export default {
           url: '/pages/combination/combiOrder/combiOrder' + query
         })
       }
-    }
+    },
+    //---跳转影集页面
+    goAlbum(index){
+      if(index==0){
+        let data={
+          openid: uni.getStorageSync('openid')||''
+        }
+        this.$request('wechatUser/pdFace/checkScanFace',data).then(res => {
+				  if (res.code === '00') {
+				    let merchantId = this.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
+				    if (res.data.isScanFace == 0) { //未扫脸
+				      uni.navigateTo({
+				        url:`/pages/album/getPortrait?merchantId=${merchantId}`
+				      })
+				    } else if (res.data.isScanFace == 1) { //已扫脸
+				      let faceIds = JSON.stringify(res.data.faceIds)
+				      let companyId = this.companyId
+				      uni.navigateTo({
+                url: `/pages/album/myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
+				      })
+				    }
+				  } else {
+				    uni.showToast({
+				      title: res.message,
+				      icon: 'none'
+				    })
+				  }
+        })
+      } 
+    },
   }
 }
 </script>
@@ -681,4 +789,44 @@ export default {
 	border-radius: 20rpx;
 	font-size: 32rpx;
 }
+//摄影、旅拍
+.album-left{
+	margin:16rpx 6rpx 0 0;
+}
+.album-right{
+	margin: 16rpx 0 0 6rpx;
+}
+.album-list-top image {
+	width: 100%;
+}
+.album-list-bottom{
+	border-radius: 0 0 16rpx 16rpx;
+	position: relative;
+	top: -4px;
+	padding: 20rpx 16rpx;
+	color: #fff;
+	view:first-child{
+		font-weight: bold;
+	}
+	view:nth-child(2){
+		font-size: 24rpx;
+		margin-top: 16rpx;
+	}
+	view:nth-child(3){
+		display: flex;
+		justify-content: space-between;
+		margin-top: 20rpx;
+	}
+}
+.album-btn{
+	display: inline-block;
+	width: 160rpx;
+	height: 44rpx;
+	background: #E1E1D9;
+	border-radius: 20rpx 20rpx 20rpx 20rpx;
+	font-size: 22rpx;
+	color: #333333;
+	text-align: center;
+	line-height: 44rpx;
+}
 </style>