影集首页位置修改

pages.json

@@ -437,7 +437,7 @@
 		{
 			"root": "pages/album", //影集分包
 			"pages": [{
-					"path": "albumIndex",
+					"path": "albumIndex/albumIndex",
 					"style": {
 						"navigationBarTitleText": "相册首页",
 						"enablePullDownRefresh": false,

pages/album/albumIndex/albumIndex.vue

+<template>
+	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="show">
+
+		<view class="nav-bar"
+			:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
+			<u-icon name="arrow-left" color="#333" v-if="options.index" @click="returnClick"></u-icon>
+			摄影/旅拍
+		</view>
+		
+		<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
+			<swiper-item>
+				<view class="swiper-item uni-bg-red">A</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="swiper-item uni-bg-green">B</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="swiper-item uni-bg-blue">C</view>
+			</swiper-item>
+		</swiper>
+		
+		<view class="photo-acquire">
+			<view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick">
+				<view class="box-title">获取相片</view>
+				<view class="box-text">获取拍摄相片</view>
+			</view>
+			<view class="acquire-box acquire-boxGreen">
+				<view class="box-title">相片DIY</view>
+				<view class="box-text">编辑手机相片</view>
+			</view>
+		</view>
+		
+		<view class="private-custom">
+			<view class="title">私人定制</view>
+			<u-waterfall v-model="list" ref="uWaterfall">
+				<template v-slot:left="{leftList}">
+					<view class="left demo-water" v-for="(item, index) in leftList" :key="index"
+						@click="jumpToClick(item.title)">
+						<image :src="item.image" mode="aspectFill"></image>
+						<view class="info-box" :style="{'background-color': item.color}">
+							<view class="item-title">{{item.title}}</view>
+							<view class="slogan">快来定制吧</view>
+							<view class="bottom">
+								<view class="img-btn">
+									点击定制
+									<u-icon name="arrow-right"></u-icon>
+								</view>
+								<text class="count">{{item.count}}</text>
+							</view>
+						</view>
+					</view>
+				</template>
+				<template v-slot:right="{rightList}">
+					<view class="demo-water" v-for="(item, index) in rightList" :key="index"
+						@click="jumpToClick(item.title)">
+						<image :src="item.image" mode="aspectFill"></image>
+						<view class="info-box" :style="{'background-color': item.color}">
+							<view class="item-title">{{item.title}}</view>
+							<view class="slogan">快来定制吧</view>
+							<view class="bottom">
+								<view class="img-btn">
+									点击定制
+									<u-icon name="arrow-right"></u-icon>
+								</view>
+								<text class="count">{{item.count}}</text>
+							</view>
+						</view>
+					</view>
+				</template>
+			</u-waterfall>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      couponTip: false, //券领取提示
+      showUseRule: false, //使用规则提示
+      statusBarHeight: 0,
+      capsule: 0,
+      navHeight: 0,
+      show: false, //是否显示首页
+      isHaveCoupon: false, //是否有劵
+      list: [{
+        title: '精彩瞬间',
+        count: '10W+',
+        image: './static/album/wonderfulMoment.png',
+        color: '#037EFF'
+      },
+      {
+        title: '网红旅拍',
+        count: '8W+',
+        image: './static/album/travalphoto.png',
+        color: '#826847'
+      },
+      {
+        title: '抱枕DIY',
+        count: '4W+',
+        image: './static/album/pillow.png',
+        color: '#1175B4'
+      },
+      {
+        title: '明信片',
+        count: '4W+',
+        image: './static/album/postcard.png',
+        color: '#3478DC'
+      },
+      {
+        title: '旅游台历定制',
+        count: '4W+',
+        image: './static/album/deskCalender.png',
+        color: '#1A9B45'
+      },
+      {
+        title: '定制相册',
+        count: '4W+',
+        image: './static/album/customPic.png',
+        color: '#D48D46'
+      }
+      ],
+      rules: [], //使用规则
+      options: {}, //路由参数
+      couponPrice: '', //优惠券金额
+      openid: '',
+      userId: '',
+    }
+  },
+  methods: {
+    returnClick() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    closeMask() { //---关闭遮罩
+      this.couponTip = false
+      this.showUseRule = false
+    },
+    jumpToScanFaceClick() { //---跳转扫脸页面
+      this.$request('wechatUser/pdFace/checkScanFace', {
+        openid: this.openid
+      }).then(res => {
+        if (res.code === '00') {
+          const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
+          if (res.data.isScanFace === 0) { //未扫脸
+            uni.navigateTo({
+              url: `./getPortrait?merchantId=${merchantId}`
+            })
+          } else if (res.data.isScanFace === 1) { //已扫脸
+            const faceIds = JSON.stringify(res.data.faceIds)
+            const companyId = this.options.companyId
+            uni.navigateTo({
+              url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId=${merchantId}`
+            })
+          }
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: 'none'
+          })
+        }
+      }).catch(err => {
+        uni.showToast({
+          title: err,
+          icon: 'none'
+        })
+      })
+    },
+    jumptoVlog() { //---跳转到vlog页面
+      uni.redirectTo({
+        url: '/pages/vlog/vlogIndex/vlogIndex'
+      })
+    },
+    jumpToClick(title) {
+      if (title === '精彩瞬间' || title === '网红旅拍') {
+        this.jumpToScanFaceClick()
+      }
+    },
+    judgeWhether(url, data) { //---判断是否成功的封装函数
+      return new Promise((resolve, reject) => {
+        this.$request(url, data).then(res => {
+          if (res.code === '00') {
+            resolve(res.data)
+          } else {
+            reject(false)
+          }
+        }).catch(() => {
+          reject(false)
+        })
+      })
+    },
+    async handleWhetherToVotePage() { //---判断是否跳转投票页面
+      try{
+        // 1.获取调查列表id
+        const surveyQueryData = {
+          pageCode: 'albumIndex', //默认前端写死
+          channelId: this.options.channelId //游客扫码携带的channelId
+        }
+        const surveyList = await this.judgeWhether('scenic/market/findPageMarket', surveyQueryData)
+				
+        // 2.判断商店是否在做投票活动，获取模板
+        let surveyIds
+        let surveyResult = []
+
+        if (surveyList.length) {
+          surveyIds = surveyList.map(item => item.surveyId)
+          surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', {
+            surveyIds
+          })
+        }else {// 调查模板为空则直接展示首页
+          this.show = true
+          this.couponIsUse()
+          return
+        }
+
+        // 3.判断用户是否已经投过票
+        let voteObj = {} // 用户投票信息
+
+        if (surveyResult.length) {
+          const votedQueryData = {
+            merchantId: surveyResult[0].merchantId,
+            openid: uni.getStorageSync('openid')
+          }
+          voteObj = await this.judgeWhether('wechatUser/pdAlbum/checkVisitorSurvey', votedQueryData)
+        }else {
+          this.show = true
+          this.couponIsUse()
+          return
+        }
+
+        // 4.判断是否跳转投票页面
+        if (voteObj.alreadySurvey === 0) { // 未投过票	
+          uni.navigateTo({
+            url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
+          })
+        } else if (voteObj.alreadySurvey === 1) { // 已投票
+          this.show = true
+          this.couponIsUse()
+        }
+			
+      }catch(e){
+        this.show = true
+        this.couponIsUse()
+        console.log(e)
+      }
+    },
+    getCoupon() { //---获取优惠券
+      var data = {
+        pageCode: 'albumIndex',
+        marketingStatus: 1,
+        openid: this.openid,
+        userId: this.userId
+      }
+      this.$request('scenic/market/findPageMarket', data).then((res) => {
+        if (res.code === '00') {
+          if(res.data.length) {
+            this.couponTip = true
+          }
+        } else if(res.code === '04') {
+          this.isHaveCoupon = false
+        }else {
+          uni.showToast({
+					  title: res.message,
+					  icon: 'none'
+          })
+        }
+      })
+    },
+    couponIsUse() { //---判断是否有劵
+      this.$request('wechatUser/myPage/getUserCouponList', {
+        openid: this.openid
+      }).then(res => {
+        if (res.code === '00') {
+          const albumCoupon = res.data.filter(item => item.useRange === 11 && item.couponStatus === 1) // 过滤 相册的劵
+
+          if(!albumCoupon.length) return
+					
+          const firstItem = albumCoupon[0]
+					
+          this.isHaveCoupon = true
+          this.couponPrice = firstItem.deductPrice
+					
+          // 处理使用规则数据结构
+          this.handleDataStructure(firstItem.couponRule, '规则说明')
+          this.handleDataStructure(firstItem.couponRuleRemind, '补充说明')
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: 'none'
+          })
+        }
+      }).catch(err => {
+        uni.showToast({
+          title: err,
+          icon: 'none'
+        })
+      })
+    },
+    handleDataStructure(str, title) { //---处理使用规则数据结构
+      let ruleContents = str ? str.split(';') : []
+      ruleContents = ruleContents.map(value => {
+			  return {
+			    value
+			  }
+      })
+      this.rules.push({
+			  ruleName: title,
+			  contents: ruleContents
+      })
+    },
+    recordDeviceInfo() { //---记录设备信息
+      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
+      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
+      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
+    }
+  },
+  onLoad(options) {
+    this.$commonjs.getCompanyId(options)
+    this.openid = uni.getStorageSync('openid')
+    this.userId = uni.getStorageSync('userId')
+    this.recordDeviceInfo()
+    this.options = options
+    if (this.options.template === 'true') { // 从模板选择页进入
+      this.show = true
+      this.couponTip = true
+    }else if (this.options.channelId) { // 扫码进入本页
+      this.handleWhetherToVotePage()
+    } else if (this.options.index == 1) { // 从vlog首页进入
+      this.show = true
+      this.couponIsUse()
+    }
+		
+    if (uni.getStorageSync('location')) return
+
+    uni.getLocation({ //获取定位
+      type: 'wgs84',
+      success: res => {
+        uni.setStorageSync('location', JSON.stringify(res))
+      },
+      fail() {
+        console.log('获取经纬度失败')
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+	.big-box {
+		position: relative;
+		padding: 0;
+		//background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
+		// background: #F7F8FA;
+		z-index: 0;
+
+		&::after {
+			content: '';
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			z-index: -1;
+			// background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
+		}
+
+		/deep/.u-transition {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transform: scale(1);
+		}
+
+		.coupon {
+			position: fixed;
+			right: -30rpx;
+			bottom: 200rpx;
+			width: 180rpx;
+			height: 180rpx;
+
+			.coupon-img {
+				width: 100%;
+				height: 100%;
+			}
+
+			.coupon-price {
+				position: absolute;
+				bottom: 64rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				font-size: 40rpx;
+				font-weight: 700;
+				color: #fff;
+			}
+
+			.r-symbol {
+				font-size: 10rpx;
+			}
+		}
+	}
+
+	.nav-bar {
+		font-size: 36rpx;
+		font-weight: 700;
+		padding: 0 24rpx 0 24rpx;
+		z-index: 10;
+	}
+
+	.swiper {
+		width: 750rpx;
+		height: 520rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+	.swiper-item {
+		display: block;
+		height: 520rpx;
+		line-height: 520rpx;
+		text-align: center;
+		background-color: red;
+	}
+	.swiper-list {
+		margin-top: 40rpx;
+		margin-bottom: 0;
+	}
+	.uni-common-mt {
+		margin-top: 60rpx;
+		position: relative;
+	}
+	.info {
+		position: absolute;
+		right: 20rpx;
+	}
+	.uni-padding-wrap {
+		width: 550rpx;
+		padding: 0 100rpx;
+	}
+	/deep/ .wx-swiper-dots-horizontal{
+		bottom: 80rpx;
+	}
+
+	.photo-acquire{
+		display: flex;
+		justify-content: space-between;
+		width: 750rpx;
+		background-color: #fff;
+		border-radius: 24rpx 24rpx 0 0;
+		padding: 32rpx;
+		margin-top: 292rpx;
+		margin-bottom: 20rpx;
+		.acquire-box{
+			width: 334rpx;
+			height: 240rpx;
+			border-radius: 16rpx;
+			position: relative;
+			.box-title{
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #FFFFFF;
+				line-height: 36rpx;
+				text-align: center;
+				margin-top: 40rpx;
+				margin-bottom: 12rpx;
+			}
+			.box-text{
+				font-weight: 500;
+				font-size: 24rpx;
+				color: #A5D3FF;
+				line-height: 28rpx;
+				text-align: center;
+			}
+		}
+		.acquire-boxBlue{
+			background: linear-gradient( 132deg, #3465F7 0%, #659EF3 100%);
+		}
+		.acquire-boxGreen{
+			background: linear-gradient( 132deg, #5CB18F 0%, #81D2B1 100%);
+			.box-text{
+				color: #DAFFF0;
+			}
+		}
+	}
+
+	.private-custom {
+		background-color: #fff;
+		padding: 40rpx 32rpx 40rpx 32rpx;
+		.title {
+			position: relative;
+			margin-bottom: 40rpx;
+			font-weight: 600;
+			font-size: 36rpx;
+			color: #191919;
+			line-height: 46rpx;
+	
+			&::after {
+				content: '';
+				width: 128rpx;
+				height: 44rpx;
+				position: absolute;
+				left: -8rpx;
+				bottom: -24rpx;
+				// background: url('@/pages/album/static/album/private-custom.png') no-repeat;
+			}
+		}
+	
+		.demo-water {
+			image {
+				border-radius: 16rpx 16rpx 0 0;
+				height: 458rpx;
+				width: 100%;
+			}
+	
+			/deep/.u-wrap,
+			/deep/.u-lazy-item {
+				broder-radius: 16rpx 16rpx 0 0 !important;
+			}
+		}
+	
+		.left.demo-water {
+			margin-right: 14rpx;
+	
+			image {
+				height: 400rpx;
+			}
+		}
+	
+		.info-box {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			height: 170rpx;
+			position: relative;
+			top: -16rpx;
+			padding: 16rpx;
+			box-sizing: border-box;
+			border-radius: 0 0 16rpx 16rpx;
+			color: #fff;
+	
+			.item-title {
+				font-size: 28rpx;
+				font-weight: 700;
+			}
+	
+			.slogan {
+				font-size: 24rpx;
+			}
+	
+			.img-btn {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 160rpx;
+				height: 40rpx;
+				border-radius: 20rpx;
+				background-color: #E1E1D9;
+				color: #333;
+				font-size: 22rpx;
+			}
+	
+			.bottom {
+				display: flex;
+				justify-content: space-between;
+	
+				.count {
+					font-size: 28rpx;
+					color: #ececec;
+				}
+			}
+		}
+	}
+</style>