<template>
	<view class="albumBox">
		<!--头部-->
		<view class="album-address">
			<view class="address-left">
				<view class="left-name">照片来源</view>
				<view class="left-picker" @click="orderShow=true">
					<i>{{cityName}}</i>
					<image src="../static/album/myPhoto01.png"></image>
				</view>
				<u-picker mode="selector" v-model="orderShow" :default-selector="[orderType]" :range="option"	range-key="areaName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker>
				<template v-for="(item,index) in merchantList">
					<view :key="index" v-if="index<2" class="left-project" :class="[projectCheck==0?'left-projectDe':'']" @click="projectClick(index,item.id)">
						{{item.name}}
						<i>{{previewData.length}}</i>
					</view>
				</template>
			</view>
			<view class="address-right" @click="projectMoreFun()" v-if="merchantList.length>2">
				<u-icon name="more-dot-fill"></u-icon>
			</view>
		</view>
		<!--头部更多-->
		<view class="album-addressMore" v-if="projectMoreType==true">
			<view class="addressMore-name" v-for="(item,index) in merchantList" :key="index" >{{item.name}}({{previewData.length}})</view>
		</view>
		<!--全选按钮-->
		<view class="album-checkAll">
			<u-checkbox v-model="checkProjectAll" @change="checkProjectAllFun()">全选</u-checkbox>
			<view class="checkAll-tips">未下载影像保留15天</view>
		</view>
		<!--主体循环-->
		<view class="album-subject">
			<view class="subject-List" v-for="(item,index) in previewData" :key="index" >
				<image class="list-image" :src="item.faceSourceUrl||item.faceAiUrl" @click="stopPhoto(index)"></image>
				<u-checkbox v-model="item.checkType" v-if="checkTypeFun==true" shape="circle" class="list-uCheck" @click.stop.native="()=>{}" @change="stopPhoto(index)"></u-checkbox>
				<view class="list-mask" @click.stop.native="()=>{}" @click="projectCheckPhoto(index)" >预览</view>
			</view>
		</view>
		<!--脚部-->
		<view class="album-bottom">
			<view class="bottom-left" v-if="maskDetail==false">
				<view class="left-oldMoney">￥{{originalPrices}}</view>
				<view class="left-newMoney">￥{{sellingPrices}}</view>
				<view class="left-detail" @click="maskDetail=true">
					<text>明细</text>
					<u-icon name="arrow-up"></u-icon>
				</view>

				<view class="left-num" v-if="priceNum>0">{{priceNum}}</view>
				<view class="left-mask" v-if="priceNum>0">
					多够更省
					<view class="mask-transparent"></view>
				</view>
			</view>
			<view class="bottom-Detail" v-if="maskDetail==true">
				<view class="detail-total">合计：￥{{sellingPrices}}</view>
				<view class="detail-favorable">优惠减：￥{{favorablePrice}}</view>
			</view>
			<view class="bottom-right">
				<view class="bootom-btn" @click="toGetPortrait()">更多相片</view>
				<view class="bootom-btn" @click="upLoad()">去下载</view>
			</view>
		</view>
		<!--预览-->
		<view class="album-maskPreview" v-if="maskPreviewType==true" @click="maskPreviewType=false">
			<view class="maskPreview-Num">{{previewNum+1}}/{{previewData.length}}</view>
			<!-- <view class="maskPreview-img" @touchstart="start" @touchend="end" @touchmove="move">
				<template v-if="previewData.length==1">
					<image class="img-center" :src="previewData[previewNum].faceSourceUrl"></image>
				</template>
				<template v-else>
					<image class="img-left" :style="{left:touchLeft0 +'rpx'}" v-if="previewNum==0" :src="previewData[previewData.length-1].faceSourceUrl||previewData[previewData.length-1].faceAiUrl"></image>
					<image class="img-left" :style="{left:touchLeft0 +'rpx'}" v-else :src="previewData[previewNum-1].faceSourceUrl||previewData[previewNum-1].faceAiUrl"></image>

					<image class="img-center" :style="{right:touchRight +'rpx',left:touchLeft +'rpx'}" :src="previewData[previewNum].faceSourceUrl||previewData[previewNum].faceAiUrl"></image>

					<image class="img-right" :style="{right:touchRight2 +'rpx'}" v-if="previewNum==previewData.length-1" :src="previewData[0].faceSourceUrl||previewData[0].faceAiUrl"></image>
					<image class="img-right" :style="{right:touchRight2 +'rpx'}" v-else :src="previewData[previewNum+1].faceSourceUrl||previewData[previewNum+1].faceAiUrl"></image>
				</template>
			</view> -->
			<u-swiper class="maskPreview-swiper" height="794" :list="previewData" :effect3d="true" :autoplay="false" :mode="none" :current ="previewNum" @change="projectNumFun" ></u-swiper>
			<view class="maskPreview-check" v-if="checkTypeFun==true">
				<u-checkbox v-model="previewData[previewNum].checkType" @click.stop.native="()=>{}" @change="stopPhoto(previewNum)" shape="circle" class="maskPreview-Check"></u-checkbox>
			</view>
			
		</view>
		<!--明细-->
		<view class="album-maskDetail" v-if="maskDetail==true">
			<view class="maskDetail-content">
				<view class="content-title">
					明细
					<u-icon class="title-close" name="close-circle" @click="maskDetail=false"></u-icon>
				</view>
				<view class="content-label">我的相片</view>
				<view class="content-money">
					<view class="money-name">相片</view>
					<view class="money-text">{{priceNum}}*{{sellingPrice}}={{sellingPrices}}</view>
				</view>
				<view class="content-favorable">
					<view class="favorable-name">优惠</view>
					<view class="favorable-text">-￥{{favorablePrice}}</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import uPicker from '@/uview-ui/components/u-picker/u-picker.vue'
import uCheckboxGroup from '@/uview-ui/components/u-checkbox-group/u-checkbox-group.vue'
import uCheckbox from '@/uview-ui/components/u-checkbox/u-checkbox'
import uToast from '@/uview-ui/components/u-toast/u-toast.vue'
import Uswiper from '@/uview-ui/components/u-toast/u-toast.vue'
export default {
  components: {
    uPicker,
    uCheckboxGroup,
    uCheckbox,
    uToast,
    Uswiper
  },
  data() {
    return {
      companyId:'',//公司ID
      background: ['color1', 'color2', 'color3'],
      indicatorDots: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      faceIds: [], //查询照片ID
      openid:'',
      orderShow: false, //头部城市选择
      option: [],//城市
      cityName: '重庆',
      areaId:'100500000',//城市ID
      merchantId:'',//商户ID
      location: {},//位置信息
      projectCheck: 0, //当前选择的产品
      merchantList:[],//头部列表
      projectMoreType: false, //是否显示更多产品
      checkProjectAll: false, //所有产品全选
      maskDetail: false,
      maskPreviewType:false,//遮罩预览
      previewData: [ //图片预览
        // {
        //   type: false,
        //   src: '../static/album/customPic.png'
        // },
      ],
      previewNum: 0, //当前是第几张图片
      checkTypeFun:true,//刷新选项
      //左右滑动监听开始
      startData: {
        clientX: '',
        clientY: '',
      },
      transition: '',
      touch: {},
      touchLeft0: -466,
      touchLeft: 0,
      touchRight: 0,
      touchRight2: -466,
      touchType: 0, //向左0++  向右1--
      //左右滑动 监听结束
      originalPrice:0,//原价单价
      originalPrices:0,//原价
      sellingPrice:0,//售价单价
      sellingPrices:0,//售价
      favorablePrice:0,//优惠
      priceNum:0,//选购了多少照片
      merchantMessage:[],//景区基础参数
      masterSlaveCouponList:[],//优惠券
    }
  },
  onLoad(option) {
    this.companyId = this.$commonjs.getCompanyId(option)||''
    //this.companyId = '6da527f930be4aa1904fe17fcb41874f'
    this.openid = uni.getStorageSync('openid') //获取openid
    this.faceIds = JSON.parse(option.faceIds)
    this.location = JSON.parse(uni.getStorageSync('location'))
    this.merchantId = option.merchantId||'z0015605022691a5945bbe463141668c'// 'z0015605022691a5945bbe463141668c'
    this.obtainProvince()//获取省市区
    this.inquireMerchant()//查询所有商户
    this.getPhotos()//照片列表
    
  },
  methods: {
    mearchLoadList(){//调用参数
      var merchantIds = []
      merchantIds.push(this.merchantId)
      this.$request('scenic/merchantExtendProject/loadList',{
        merchantIds:merchantIds
      }).then((res)=>{
        if(res.code=='00'){
          this.merchantMessage = res.data
          this.checkMonkey()
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    obtainProvince(){//获取省列表
      this.$request('scenic/search/loadAreaByCity',{
        areaLevel:1,
        inChina:0
      }).then((res)=>{
        if(res.code=='00'){
          this.option = res.data
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    inquireMerchant(){//查询所有商户
      var data = {
        id:this.merchantId,//商户ID
        province:this.areaId,//省市ID
        areaCode:this.areaId,//省市ID
        userlatitude:this.location.latitude,//纬度
        userlongitude:this.location.longitude,//经度
        merchantType:1,// 
      }
		  this.$request('scenic/newMerchant/findAllMerchant',data).then((res)=>{
		    if(res.code=='00'){
		      this.merchantList = res.data
		    }else{
		      this.$refs.uToast.show({
		        title: res.message,
		        type: 'error',
		      })
		    }
		  })
    },
    getPhotos(){//照片
		  var data = {
		    faceIds:this.faceIds,//照片ID
		    openid:this.openid,
		    merchantId:this.merchantId,//商户ID
        isOrder:0,//0未购  1已购
		  }
		  this.$request('wechatUser/pdFace/list',data).then((res)=>{
		    if(res.code=='00'){
		      this.previewData = res.data
          this.previewData.forEach((item,index)=>{
            item['checkType'] = false
            if(item.sellingPrice!=null){
              this.originalPrice = item.originalPrice//原价.
              this.sellingPrice = item.sellingPrice//售价
            }
            item['image']=item.faceSourceUrl||item.faceAiUrl
            item['title']=''
          })
          this.mearchLoadList()
          
		    }else{
		      this.$refs.uToast.show({
		        title: res.message,
		        type: 'error',
		      })
		    }
		  })
    },
    industrysTypeConfirm(e) { //单列----分类 点击确定 城市
      this.cityName = this.option[e].areaName
      this.areaId = this.option[e].areaId
      this.inquireMerchant()
    },
    cancel() { //单列 点击取消
      this.orderShow = false
    },
    projectClick(num,id) { //商户选择
      this.projectCheck = num
      this.merchantId = id
      this.inquireMerchant()
    },
    projectCheckPhoto(index){//点击预览
      this.previewNum = index
      this.maskPreviewType = true
    },
    projectNumFun(e){//当前滑动到第几张
      this.previewNum = e
    },
    stopPhoto(index){//刷新显示
      if(this.checkProjectAll==true){
        this.checkProjectAll=false
      }
      if(this.previewData[index].checkType==false){
        this.previewData[index].checkType = true
      }else{
        this.previewData[index].checkType = false
      }
      this.checkTypeFun = false
      this.checkTypeFun = true
			
      this.checkMonkey()
    },
    checkProjectAllFun(){//是否全选
      if(this.checkProjectAll==true){
        this.checkProjectAll = false
        this.previewData.forEach((item,index)=>{
          item.checkType = false
        })
      }else{
        this.checkProjectAll = true
        this.previewData.forEach((item,index)=>{
          item.checkType = true
        })
      }
      this.checkMonkey()
    },
    checkMonkey(){//明细价格计算
      this.originalPrices = 0//原价
      this.sellingPrices = 0//售价
      this.priceNum = 0
      this.previewData.forEach((item,index)=>{
			  if(item.checkType==true){
          this.originalPrices += item.originalPrice//原价
          this.sellingPrices += item.sellingPrice//售价
          this.priceNum++
        }
      })
      //金额是否达到优惠券资格
      var data = {
        openid:this.openid,//用户ID
        money:this.sellingPrices,//当前选购金额
        singleMoney:this.sellingPrices,//当前选购金额
        merchantId:this.merchantMessage[0].merchantId,
        tickets:1,
        productId:this.merchantMessage[0].merchantExtendProjectId,
        orderSource:11,//指定为相册优惠券
        merchantType:11,//指定为相册
      }
      this.$request('wechatUser/myPage/usableCouponList',data).then((res)=>{
        if(res.code=='00'){
          if(res.data.masterSlaveCouponList.length>0){
            res.data.masterSlaveCouponList.forEach(item=>{
						  item['couponPrice']=item.savedMoney
            })
            this.masterSlaveCouponList = res.data.masterSlaveCouponList
            this.favorablePrice = this.masterSlaveCouponList[0].savedMoney
            this.sellingPrices = this.sellingPrices-this.masterSlaveCouponList[0].savedMoney
          }
          if(this.sellingPrices<0){
            this.sellingPrices=0
          }
          if(this.originalPrices<0){
					  this.originalPrices=0
          }
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    projectMoreFun() { //更多产品显示
      if (this.projectMoreType == false) {
        this.projectMoreType = true
      } else {
        this.projectMoreType = false
      }
    },
    toGetPortrait(){//跳转面部识别
      uni.navigateTo({
			  url: '/pages/album/getPortrait?merchantId='+this.merchantId
      })
    },
    upLoad(){//下单
      var data = {
        companyId:this.companyId,//公司ID
			  orderMoney:this.sellingPrices,//订单总价
        userId:this.openid,
        orderProductVo:{},//下单信息
        orderType:11,//相册TYPE值
        orderProductList:[],//景区下单信息
      }
      // var orderProductVo = {
      //   buyNum:this.priceNum,//购买数量
      //   orderImgList:[],//订单图片
      //   orderType:1,//订单类型(0其他，1景区，2酒店，3餐饮，4特产，5运营车，10组合订单)	
      //   postage:0,//邮费
      //   couponList:[],//产品券信息 游客使用券信息后传
      //   unitPrice:this.sellingPrice,//产品单价
      // }
      var orderProductListData = {
        buyNum:this.priceNum,//购买数量
        merchantId:this.merchantMessage[0].merchantId,
        orderType:11,//11相册
        productId:this.merchantMessage[0].merchantExtendProjectId,
        productName:this.merchantMessage[0].merchantExtendProjectName,
        extendContent:'',
        unitPrice:this.sellingPrice,//产品单价
        orderImgList:[],////订单图片
        couponList:[],//券信息
      }
			
      if(this.masterSlaveCouponList.length>0){
        this.masterSlaveCouponList[0]['isMerchant']=1
        this.masterSlaveCouponList[0]['myCouponId']=this.masterSlaveCouponList[0].id
        orderProductListData.couponList.push(this.masterSlaveCouponList[0])
      }
      
			
      this.previewData.forEach((item,index)=>{
			  if(item.checkType==true){
          var imgList = {
            imgUrl:item.faceSourceUrl||item.faceAiUrl
          }
			    orderProductListData.orderImgList.push(imgList)
			  }
      })
      var extendContentData={
        openid:this.openid,
        projectAddress:this.merchantMessage[0].projectAddress,
        projectPhone:this.merchantMessage[0].projectPhone,
      }
      orderProductListData.extendContent = JSON.stringify(extendContentData)
      data.orderProductList.push(orderProductListData)
      //data.orderProductVo = orderProductVo
      this.$request('orderc/photo/photoCreateOrder',data).then((res)=>{
        if(res.code=='00'){
          uni.navigateTo({
            // url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${JSON.stringify(res.data.faceIds)}`
            url:'../../payment/orderPayment/orderPayment?orderId='+res.data.id+'&albumOrderdetail=1'
          })
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.albumBox {
		// 76=16 - 44 - 16   98 =34 - 32 - 32
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F7F7F7;
		padding-bottom: 98rpx;
		padding-top: 174rpx;
		overflow: auto;
	}

	.album-address {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 76rpx;
		padding: 0 24rpx 0 24rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;

		.address-left {
			display: flex;
			flex: 1;
			box-shadow: inset -16px 0px 8px 0px rgba(255, 255, 255, 0.2);
			overflow-x: auto;

			.left-name {
				flex-shrink: 0;
				font-size: 32rpx;
				color: #999999;
				line-height: 76rpx;
				margin-right: 48rpx
			}

			.left-picker {
				flex-shrink:0;
				display: flex;
				font-size: 32rpx;
				color: #333333;
				line-height: 76rpx;
				margin-right: 24rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-top: 25rpx;
					margin-left: 8rpx;
				}
			}

			.left-project {
				font-size: 32rpx;
				color: #333333;
				line-height: 76rpx;
				margin-right: 48rpx;
				position: relative;

				i {
					display: block;
					width: 24rpx;
					height: 24rpx;
					font-size: 16rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: center;
					background-color: #EE520E;
					border-radius: 50%;
					position: absolute;
					top: 12rpx;
					right: -24rpx;
				}
			}

			.left-projectDe {
				color: #3688FF;
				font-weight: bold;
			}
		}

		.address-right {
			display: flex;

		}
	}

	.album-address::-webkit-scrollbar {
		display: none;
	}

	.album-addressMore {
		width: 232rpx;
		padding: 24rpx 24rpx 0 24rpx;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 76rpx;
		right: 0;
		z-index: 20;

		.addressMore-name {
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 24rpx;
		}
	}

	.album-checkAll {
		display: flex;
		width: 100%;
		height: 98rpx;
		padding: 32rpx 24rpx 0 24rpx;
		overflow: hidden;
		position: fixed;
		top: 76rpx;
		left: 0;
		z-index: 20;

		/deep/ .u-checkbox {
			line-height: 34rpx !important;
		}

		/deep/ .u-checkbox__label {
			font-size: 24rpx !important;
		}

		.checkAll-tips {
			font-size: 24rpx;
			color: #999999;
			line-height: 46rpx;
			margin-left: 24rpx;
		}
	}

	.album-subject {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex: 1;
		padding: 0 24rpx 0 24rpx;
		overflow: auto;

		.subject-List {
			width: 344rpx;
			height: 460rpx;
			margin-bottom: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.list-image {
				display: block;
				width: 344rpx;
				height: 460rpx;
			}
			.list-image::after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: url(../static/album/backgroundImg.png);
				background-size: cover;
			}

			.list-mask {
				width: 344rpx;
				height: 64rpx;
				background-color: rgba(0, 0, 0, 0.2);
				font-size: 28rpx;
				color: #fff;
				line-height: 64rpx;
				text-align: center;
				position: absolute;
				left: 0;
				bottom: 0;
			}

			.list-uCheck {
				position: absolute;
				right: 0;
				top: 24rpx;
				
			}
			/deep/ .u-checkbox__icon-wrap{
				color: #fff !important;
				border: 1px solid #fff;
				box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
			}
			/deep/ .u-checkbox__icon-wrap--checked{
				background-color: #2979ff !important;
				border-color: #2979ff !important;
			}
		}
	}

	.album-bottom {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 98rpx;
		padding: 0 0 0 24rpx;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.08);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 25;

		.bottom-left {
			flex: 1;
			display: flex;
			line-height: 98rpx;

			.left-oldMoney {
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
				line-height: 110rpx;
				margin-right: 8rpx;
			}

			.left-newMoney {
				font-size: 40rpx;
				color: #EE520E;
				font-weight: bold;
				margin-right: 68rpx;
			}

			.left-detail {
				display: flex;
				color: #333333;
				margin-right: 20rpx;

				text {
					font-size: 28rpx;
					line-height: 98rpx;
					margin-right: 10rpx;
				}
			}
			.left-num {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background-color: #EE520E;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				font-weight: bold;
				color: #fff;
				margin-top: 34rpx;
			}

			.left-mask {
				width: 128rpx;
				height: 48rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				background-color: #EE520E;
				border-radius: 28rpx;
				opacity: 0.5;
				position: absolute;
				left: 230rpx;
				top: -24rpx;
				z-index: 23;

				.mask-transparent {
					width: 0px;
					height: 0px;
					border: 10rpx solid transparent;
					/*以下四个样式对应四种三角形，任选其一即可实现*/
					border-top-color: #EE520E;
					/* border-left-color:lightseagreen; */
					/* border-right-color:lightseagreen; */
					// border-bottom-color:lightseagreen;
					position: absolute;
					right: 15rpx;
					bottom: -17rpx;
				}
			}
		}
		.bottom-right{
			display: flex;
		}
		.bottom-Detail {
			flex: 1;
			display: flex;
			flex-direction: column;

			.detail-total {
				font-size: 28rpx;
				line-height: 40rpx;
				color: 191919;
				margin-bottom: 4rpx;
				margin-top: 16rpx;
			}

			.detail-favorable {
				font-size: 16rpx;
				color: #FF4308;
				line-height: 22rpx;
			}
		}

		.bootom-btn {
			width: 144rpx;
			height: 72rpx;
			background-color: #3688FF;
			background: linear-gradient(90deg, #ED400C 0%, #FB862C 100%);
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
			border-radius: 8rpx;
			margin-top: 13rpx;
			margin-right: 24rpx;
		}
	}

	.album-maskDetail {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 98rpx;
		left: 0;
		z-index: 24;
		background-color: rgba(0, 0, 0, .9);

		.maskDetail-content {
			width: 100%;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			position: fixed;
			left: 0;
			bottom: 98rpx;

			.content-title {
				width: 100%;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 38rpx;
				text-align: center;
				font-weight: bold;
				position: relative;

				.title-close {
					position: absolute;
					top: 8rpx;
					right: 0;
				}
			}

			.content-label {
				font-size: 36rpx;
				color: #191919;
				font-weight: bold;
				line-height: 50rpx;
				margin-bottom: 32rpx;
			}

			.content-money {
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;

				.money-name {
					font-size: 32rpx;
					color: #191919;
					line-height: 44rpx;
				}

				.money-text {
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					font-weight: bold;
				}
			}

			.content-favorable {
				display: flex;
				justify-content: space-between;

				.favorable-name {
					font-size: 28rpx;
					color: #FC771D;
					line-height: 40rpx;
				}

				.favorable-text {
					font-size: 28rpx;
					color: #FC771D;
					line-height: 40rpx;
				}
			}
		}
	}

	.album-maskPreview {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 98rpx;
		left: 0;
		z-index: 22;
		background-color: rgba(0, 0, 0, .9);

		.maskPreview-Num {
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			position: fixed;
			top: 72rpx;
			right: 32rpx;
		}

		.maskPreview-img {
			display: flex;
			width: 100%;
			height: 794rpx;
			position: fixed;
			top: 152rpx;
			left: 0;

			.img-left {
				width: 520rpx;
				height: 692rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				position: absolute;
				left: -466rpx;
				top: 0;
				bottom: 0;
				z-index: 29;
			}

			.img-right {
				width: 520rpx;
				height: 692rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				position: absolute;
				right: -466rpx;
				top: 0;
				bottom: 0;
				z-index: 29;
			}

			.img-center {
				width: 596rpx;
				height: 794rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				left: 0;
				z-index: 30;
			}
		}
		.maskPreview-swiper{
			width: 100%;
			position: fixed;
			top: 152rpx;
			left: 0;
		}
		/deep/ swiper{
			background-color: rgba(0, 0, 0, 0) !important;
		}
		.maskPreview-check {
			width: 48rpx;
			height: 48rpx;
			margin: auto;
			position: fixed;
			top: 998rpx;
			left: 0;
			right: 0;

			/deep/ .u-checkbox__icon-wrap {
				width: 50rpx !important;
				height: 50rpx !important;
				color: #fff !important;
				border: solid 2px #fff;
			}
		}
		/deep/ .u-swiper-image::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url(../static/album/backgroundImg.png);
			background-size: cover;
		}
	}
</style>