<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }" :class="blowUpMaks==true?'albumBoxAct':''">
		<!--头部 我的相片-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==false">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			我的相片
		</view>
		<!--头部 当前第几张 遮罩代替我的相片显示-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==true">
			<u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon>
			{{blowUpNumNew}}/{{pictureFrameList.length}}
		</view>
		<!--相框/项目切换-->
		<view class="myPhoto-search" v-if="pictureFrameList.length!=0">
			<view class="search-left">
				<view class="right-addressClick" @click="show = true">
					{{showAddress}}
					<view class="address-triangle"></view>
					<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
				</view>
			</view>
			<view class="search-right">
				<view class="right-addressClick" @click="toAccount()">
					{{phone}}
					<view class="address-triangle"></view>
				</view>
			</view>
		</view>
		<!--相片列表-->
		<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
			<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
				<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
					<image class="pictureFrame-img" :src="item.pictureZipUrl"></image>
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" >
						<checkbox :value="item.pictureZipUrl" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
					</checkbox-group>
					<view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view>
					<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
					<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
					<view class="pictureFrame-blowTxt" v-if="item.pictureType==1">普通</view>
					<view class="pictureFrame-blowTxt" v-else>旅拍</view>
				</view>
			</template>
			<template v-else>
				<view class="list-noFigure">
					<image class="noFigure-img" src="../static/album/icon07.png"></image>
				</view>
			</template>
		</view>
		<!--点击放大后相片遮罩-->
		<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
			<swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
				<swiper-item v-for="(item,index) in pictureFrameList" :key="index">
					<image :src="item.pictureZipUrl" @click="stopPhoto(index)" :style="{'width': item.width+'rpx', 'height': item.height+'rpx'}"></image>
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true">
						<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
					</checkbox-group>
					<view class="pictureFrame-blowTxt" v-if="item.pictureType==1">普通</view>
					<view class="pictureFrame-blowTxt" v-else>旅拍</view>
				</swiper-item>
			</swiper>
		</view>
		<!--获取照片-->
		<!--脚部选择相片、加入购物车、直接购买 v-if="pictureFrameListNum>0"-->
		<view class="myPhoto-bottom">
			<view class="bottom-feature">
				<view class="feature-message">
					<view class="message-money" @click="totalAmountFun">
						¥{{totalAmount}}
						<u-icon name="arrow-up" color="#2979ff" v-if="totalAmountMask==false"></u-icon>
						<u-icon name="arrow-down" color="#2979ff" v-if="totalAmountMask==true"></u-icon>
					</view>
					<view class="message-trading">
						<view class="trading-btnAct" @click="upLoad">立即购买</view>
					</view>
				</view>
			</view>
		</view>
		<!--金额遮罩-->
		<view class="totalAmount-mask" v-if="totalAmountMask==true">
			<view class="totalAmount-case">	
				<view class="case-list">
					旅拍金额：
					<text>¥{{travelBeatMoney}}</text>
				</view>
				<view class="case-list">
					普通上传金额：
					<text>¥{{leafletMoney}}</text>
				</view>
				<view class="case-tips">
					提示：<br/>
					旅拍：{{travelBeatTips}}<br/>
					普通上传：{{leafletTips}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import compometsBuy from './../albumComponets/compometsBuy/compometsBuy.vue'
import photoPreview from './../albumComponets/photoPreview/photoPreview.vue'
export default {
  components: {
    compometsBuy,
    photoPreview
  },
  data() {
    return {
      phone:'',//手机号
				
      titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
      frameNum:1,//相框选择参数
      show: false,//遮罩显隐---项目
      columns: [//遮罩列表---项目
        // [{
        //   label: '雪月夜1',
        //   // 其他属性值
        //   id: 2021
        //   // ...
        // }]
      ],
      merchantId:'',//
      companyId:'',
      merchantMessage:[],//景区基础参数
      showAddress:'全部',//显示内容---项目
      pictureFrameList:[
        // {
        //   image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
        //   checkType:false,
        //   pickerChoose:false,
        //   width:607,
        //   height:879,
        // },
        
      ],
      checkTypeFun:true,//刷新选项
      
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
			
      blowUpMaks:false,//放大显示的遮罩
      blowUpNumNew:0,//当前的位置
      currentNum:0,//当前所在滑块的 index
			
      bottomShow:false,//脚部的显隐
      pictureFrameListNum:0,//当前选择了多少张
      maxChooseImg:0,//最多选择多少张
			
      configTypeList:[],//价格参数
      travelBeatList:[],//已选择旅拍照片
      travelBeatMoney:0,//旅拍金额
      travelBeatNum:0,//旅拍数量
      travelBeatMoneyList:[],//旅拍价格表
      travelBeatTips:'',//提示
			
      leafletList:[],//已选择单张金额
      leafletMoney:0,//单张上传金额
      leafletNum:0,//单张上传数量
      leafletMoneyList:[],//普通价格表
      leafletTips:'',//提示
			
      totalAmount:0,//总金额
      priceNum:0,//购买数量
      
			
      totalAmountMask:false,//金额详情
    }
  },
  onLoad(option) {
    this.companyId = this.$commonjs.getKey(option,'companyId')||''
    this.phone = option.phone
    this.recordDeviceInfo()
    this.albumMerchants()
  },
  methods: {
    upLoad(){//下单
      var data = {
        companyId:this.companyId||'',//公司ID
        orderMoney:this.totalAmount,//订单总价
        userId:uni.getStorageSync('openid'),
        orderProductVo:{},//下单信息
        orderType:11,//相册TYPE值
        orderProductList:[],//景区下单信息
      }
      var orderProductListData = {//旅拍下单信息
			  buyNum:this.travelBeatNum,//购买数量
			  merchantId:this.merchantMessage[0].merchantId,
			  orderType:11,//11相册
			  productId:this.merchantMessage[0].merchantExtendProjectId,
			  productName:this.merchantMessage[0].merchantExtendProjectName,
			  extendContent:'',
			  unitPrice:this.leafletMoneyList[0].sellingMoney,//产品单价
			  orderImgList:[],////订单图片
			  couponList:[],//券信息
      }
      var orderProductListData2 = {//普通相片下单信息
			  buyNum:this.leafletNum,//购买数量
			  merchantId:this.merchantMessage[0].merchantId,
			  orderType:11,//11相册
			  productId:this.merchantMessage[0].merchantExtendProjectId,
			  productName:this.merchantMessage[0].merchantExtendProjectName,
			  extendContent:'',
			  unitPrice:this.leafletMoneyList[0].sellingMoney,//产品单价
			  orderImgList:[],////订单图片
			  couponList:[],//券信息 暂无券
      }
			
      this.pictureFrameList.forEach(item=>{//循环已经选择的图片分类到旅拍和普通
			  if(item.checkType == true){
          var imgList = {
					  imgUrl:item.pictureSourceUrl||item.pictureZipUrl,
					  imgType:0,
          }
			    if(item.pictureType==0){//旅拍
			      orderProductListData.orderImgList.push(imgList)
			    }else{//普通
			      orderProductListData2.orderImgList.push(imgList)
			    }
			  }
      })
      if(orderProductListData.orderImgList.length==0&&orderProductListData2.orderImgList.length==0){
			  uni.showToast({
				  title: '请选择相片',
				  icon: 'none'
			  })
			  return false
      }
      var extendContentData={
			  openid:uni.getStorageSync('openid'),
			  projectAddress:this.merchantMessage[0].projectAddress,
			  projectPhone:this.merchantMessage[0].projectPhone||'',
      }
      orderProductListData.extendContent = JSON.stringify(extendContentData)
      orderProductListData2.extendContent = JSON.stringify(extendContentData)
			
      //加入下单信息
      if(orderProductListData.orderImgList.length>0){
        data.orderProductList.push(orderProductListData)
      }
      if(orderProductListData2.orderImgList.length>0){
      	data.orderProductList.push(orderProductListData2)
      }
      
						
      this.$request('orderc/photo/photoCreateOrder',data).then((res)=>{
			  if(res.code=='00'){
			    uni.navigateTo({
			      url:'../../payment/orderPayment/orderPayment?orderId='+res.data.id+'&albumOrderdetail=1'
			    })
			  }else{
			    uni.showToast({
            title: res.message,
            icon: 'none'
			    })
			  }
      })
    },
    totalAmountFun(){//总金额显隐
      if(this.totalAmountMask == false){
        this.totalAmountMask = true
      }else{
        this.totalAmountMask = false
      }
    },
    stopPhotoMoney(){//计算价格 分为旅拍和单张
      var travelBeatNum = 0 //旅拍张数
      var leafletNum = 0 //普通照片张数
      this.travelBeatMoney = 0
      this.leafletMoney = 0
      this.totalAmount = 0
      this.pictureFrameList.forEach(item=>{
        if(item.checkType == true){
          if(item.pictureType==0){//旅拍
            travelBeatNum+=1
          }else{//普通
            leafletNum+=1
          }
        }
      })
      //当前到达多少档 每一档的价格
      this.travelBeatMoneyList.forEach(item=>{
        if(item.pictureNumMin<=travelBeatNum&&item.pictureNumMax===0){
          this.travelBeatMoney = item.sellingMoney
        }else if(item.pictureNumMin===0&&travelBeatNum<=item.pictureNumMax){
          this.travelBeatMoney = 0
        }else if(item.pictureNumMin<=travelBeatNum&&travelBeatNum<=item.pictureNumMax){
          this.travelBeatMoney = parseInt(this.travelBeatMoney) + parseInt(item.sellingMoney) * (travelBeatNum-(item.pictureNumMin-1))
        }
      })
      //普通价格
      this.leafletMoney = this.leafletMoneyList[0].sellingMoney * leafletNum
			
      //数量录入
      this.travelBeatNum = travelBeatNum
      this.leafletNum = leafletNum
			
      this.totalAmount = parseInt(this.travelBeatMoney) + parseInt(this.leafletMoney)
      this.priceNum = parseInt(this.travelBeatNum) + parseInt(this.leafletNum)
    },
		
    pictureLoad(){//调用查询照片接口
		  var data = {
		    phone : this.phone
		  }
      if(this.merchantId!=''){
        data.merchantId = this.merchantId
      }
		  this.$request('scenic/albumPicture/albumPictureLoad', data).then(res => {
			  if (res.code === '00') { 
          var pictureList = []
          res.data.pictureList.forEach(item=>{
            if(item.isOrder===0){
              pictureList.push(item)
            }
          })
		      this.pictureFrameList = pictureList
          this.pictureFrameList.forEach(item=>{
            item.checkType = false
            item.pickerChoose = false
            //     let imageInfoObj =  uni.getImageInfo({
            //       src: item.pictureZipUrl,
            //       success: function (imageInfo) {
								
            //         if(imageInfo.height>imageInfo.width){
            //           item['width'] = '680rpx'
            //           item['height'] = '956rpx'
            //         }else{
            //           item['width'] = '680rpx'
            //           item['height'] = '510rpx'
            //         } 
            //       },
            //       fail: function (error) {
            //         console.error(error)
            //         // 获取图片信息失败后的操作
            //       }
            //     })
          })
          //价格计算
          this.configTypeList = res.data.albumPictureConfigVo.configTypeList//价格表
          this.travelBeatMoneyList = [] //旅拍价格表
          this.leafletMoneyList = [] //普通价格列表  暂时限制普通价格只设置单张价格
          this.configTypeList.forEach(item=>{
					  if(item.configType===0){//获得旅拍价格表
					    this.travelBeatMoneyList = item.configVoList
					  }else{//获得普通价格表
					    this.leafletMoneyList = item.configVoList
              this.leafletTips = '普通上传相片价格为：'+item.configVoList[0].sellingMoney+'元/张'
					  }
          })
          //旅拍张数阶梯排序  普通价格表不用
          this.travelBeatMoneyList.sort((a, b) => a.pictureNumMin - b.pictureNumMin)
          this.travelBeatMoneyList.forEach(item=>{//旅拍价格提示文字 travelBeatTips
            if(item.pictureNumMax===0){
              this.travelBeatTips += item.pictureNumMin + '张以上时价格为：' + item.sellingMoney + '元，购买所有相片。'
            }else{
              this.travelBeatTips += item.pictureNumMin + '张至' + item.pictureNumMax + '张，价格为：' + item.sellingMoney + '元/张，'
            }
          })
          this.mearchLoadList()
			  } else {
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  }).catch(err => {
			  uni.showToast({
			    title: err,
			    icon: 'none'
			  })
		  })
    },
    mearchLoadList(){//调用参数
		  var merchantIds = []
		  merchantIds.push(this.merchantId)
		  this.$request('scenic/merchantExtendProject/loadList',{
		    merchantIds:merchantIds
		  }).then((res)=>{
		    if(res.code=='00'){
		      this.merchantMessage = res.data
		    }else{
		      uni.showToast({
		        title: res.message,
		        icon: 'none'
		      })
		    }
		  })
    },
		
    albumMerchants(){//调用查询照片接口
		  var data = {
		    
		  }
		  this.$request('scenic/albumWeb/loadAlbumMerchants', data).then(res => {
			  if (res.code === '00') {   
          res.data.forEach(item=>{
            item.label = item.name
          })
		      this.columns = []
          this.columns.push(res.data)
          this.merchantId = res.data[0].merchantId
          this.showAddress = res.data[0].label
					
          this.pictureLoad()
			  } else {
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
		  }).catch(err => {
			  uni.showToast({
			    title: err,
			    icon: 'none'
			  })
		  })
    },
		
    toAccount(){//跳转账户切换
      uni.navigateTo({
			  url: '/pages/album/photoAccount/photoAccount'
      })
    },
    clickActFun(num){//宫格选择
      this.checkTypeFun = false
      this.titleclick = num
      this.pictureFrameList.forEach(item=>{
        item.checkType = false
        item.pickerChoose = false
      })
      this.pictureFrameListNum = 0
      if(this.titleclick==2){
        this.maxChooseImg = 2
      }else if(this.titleclick==3){
        this.maxChooseImg = 3
      }else if(this.titleclick==4){
        this.maxChooseImg = 6
      }
      this.checkTypeFun = true
    },
    frameFun(num){//相框选择
      this.frameNum = num
    },
    addressFun(e){//项目选择
      this.showAddress = e.value[0].label
      this.merchantId = e.value[0].merchantId
      this.show=false
      this.pictureLoad()
    },
    stopPhoto(index){//相片选择
      this.checkTypeFun = false
      this.stopPhotoNumFun(index)
      if(this.pictureFrameListNum>0){
        this.bottomShow = true
      }
		  this.checkTypeFun = true
    },
    stopPhotoNumFun(index){//相片选择开关
      if(this.pictureFrameList[index].checkType==false){
			  this.pictureFrameList[index].checkType = true
        this.pictureFrameList[index].pickerChoose = true
      }else{
			  this.pictureFrameList[index].checkType = false
        this.pictureFrameList[index].pickerChoose = false
      }
      this.pictureFrameListNum = 0
      this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
			  if(item.checkType==true){
			    this.pictureFrameListNum +=1
			  }
      })
      this.stopPhotoMoney()
    },
		
    blowUpFun(index){//相片放大 遮罩显隐
      this.blowUpMaks = true
      this.blowUpNumNew = index+1
      this.currentNum = index
    },
    projectNumFun(e){//当前滑动到第几张  
		  this.blowUpNumNew = e.target.current+1
    },
    recordDeviceInfo() { //---记录设备信息
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
		  this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
		  this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
      this.albumBoxTop = this.statusBarHeight+this.navHeight
    },
    returnClick() {//头部 点击返回
		  uni.navigateBack({
		    delta: 1
		  })
    },
  }
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 120rpx;
	}
	.albumBoxAct{
		background-color: #F5F7FA;
	}
	.nav-bar {
		width: 100%;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		/deep/ .u-icon{
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.myPhoto-title{
		width: 100%;
		height: 100rpx;
		padding: 32rpx 40rpx 0 40rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		.title-click{
			height: 68rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
			position: relative;
			.click-line{
				display: none;
				width: 100%;
				height: 6rpx;
				background: #000000;
				border-radius: 4rpx;
				position: absolute;
				bottom: 18rpx;
				left: 0;
			}
		}
		.title-clickAct{
			font-size: 30rpx;
			color: #333333;
			.click-line{
				display: block;
			}
		}
	}
	.myPhoto-search{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 102rpx;
		padding: 20rpx 24rpx 0 24rpx;
		background: #F5F7FA;
		.search-left{
			display: flex;
		}
		.left-frame{
			font-size: 24rpx;
			color: #666666;
			line-height: 64rpx;
			padding: 0 20rpx 0 20rpx;
		}
		.left-frameAct{
			width: 160rpx;
			height: 64rpx;
			padding:0;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: center;
			background: #E6E9F4;
			border-radius: 8rpx;
			border: 2rpx solid #DAE0EB;
		}
		.search-right{
			display: flex;
		}
		.right-addressClick{
			display: flex;
			font-weight: 600;
			font-size: 24rpx;
			color: #333333;
			line-height: 64rpx;
			position: relative;
			.address-triangle{
				width: 0px;
				height: 0px;
				margin: auto;
				margin-left: 12rpx;
				border: 10rpx solid transparent;
				border-top: 10rpx solid #333333;
				margin-top: 25rpx;
			}
		}
	}
	.myPhoto-list{
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content:flex-start;
		background-color: #F5F7FA;
		overflow: auto;
		position: relative;
		.list-pictureFrame{
			height: 248rpx;
			margin-bottom: 4rpx;
			position: relative;
			.pictureFrame-img{
				width: 248rpx;
				height: 248rpx;
			}
			.pictureFrame-check{
				width: 32rpx;
				height: 32rpx;
				background: transparent;
				position: absolute;
				top: 24rpx;
				left: 192rpx;
				z-index: 9;
				/deep/ .wx-checkbox-input{
					width: 32rpx;
					height: 32rpx;
					background: rgba(255,255,255,0.5);//transparent;
					border: 2rpx solid #C7C7C7;
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
					background: #FE6600; // 选中的颜色
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
					color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
				}
			}
			.pictureFrame-checkAct{
				/deep/ .wx-checkbox-input{
					border: solid 1px #FE6600;
				}
			}
			.pictureFrame-blowUp{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				bottom: 24rpx;
				left: 192rpx;
				z-index: 9;
			}
			.pictureFrame-blowTxt{
				height: 32rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				color: #409EFF;
				border: solid 1rpx #409EFF;
				padding: 0 10rpx;
				border-radius: 4rpx;
				position: absolute;
				bottom: 24rpx;
				left: 24rpx;
				z-index: 9;
			}
			.pictureFrame-boxTop,
			.pictureFrame-boxBottom{
				width: 248rpx;
				height: 124rpx;
				position: absolute;
				left: 0;
				z-index: 5;
			}
			.pictureFrame-boxTop{
				top: 0;
			}
			.pictureFrame-boxBottom{
				bottom: 0;
			}
		}
		.list-pictureFrame:nth-last-child(1){
			flex: 1;
		}
		.list-noFigure{
			width: 100%;
			height: 456rpx;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			.noFigure-img{
				display: block;
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
			}
			.noFigure-text{
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: center;
				text{
					color: #165DFF;
					margin-left: 10rpx;
				}
			}
		}
	}
	.myPhoto-listAct{
		padding-bottom: 320rpx;
	}
	.myPhoto-mask{
		width: 100%;
		height: 100%;
		background: #F5F7FA;
		position: fixed;
		left: 0;
		z-index: 10;
		.swiper{
			width: 607rpx;
			height: 879rpx;//510rpx
			margin: 0 auto;
			background: #F5F7FA;
			margin-top: 80rpx;
			/deep/ swiper-item{
				display: flex;
				align-items:center;
			}
			.pictureFrame-check{
				width: 32rpx;
				height: 32rpx;
				background: transparent;
				position: absolute;
				right: 22rpx;
				bottom: 22rpx;
				z-index: 11;
				/deep/ .wx-checkbox-input{
					width: 32rpx;
					height: 32rpx;
					background: rgba(255,255,255,0.5);//transparent;
					border: 2rpx solid #C7C7C7;
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
					background: #FE6600; // 选中的颜色
				}
				/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
					color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
				}
			}
			.pictureFrame-blowTxt{
				height: 32rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				color: #409EFF;
				border: solid 1rpx #409EFF;
				padding: 0 10rpx;
				border-radius: 4rpx;
				position: absolute;
				bottom: 22rpx;
				left: 24rpx;
				z-index: 9;
			}
			.pictureFrame-checkAct{
				/deep/ .wx-checkbox-input{
					border: solid 1px #FE6600;
				}
			}
		}
	}
	.myPhoto-bottom{
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 30;
		.bottom-tips{
			width: 726rpx;
			height: 64rpx;
			background: #FFEFC9;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 24rpx;
			color: #9A5500;
			padding: 0 26rpx;
			line-height: 64rpx;
			margin: 0 auto;
		}
		.bottom-feature{
			width: 100%;
			height: 400rpx;
			background-color: #fff;
			padding: 0rpx 0rpx 0 0rpx;
			.feature-list{
				display: flex;
				width: 100%;
				overflow: auto;
			}
			.feature-case{
				width: 142rpx;
				height: 142rpx;
				padding: 10rpx 10rpx 0 0;
				margin-right: 15rpx;
				position: relative;
				.feature-img{
					width: 132rpx;
					height: 132rpx;
				}
				.feature-close{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
			.feature-message{
				display: flex;
				justify-content: space-between;
				border-top: 2rpx solid #F5F5F5;
				padding: 0 40rpx 0 40rpx;
				height: 120rpx;
				.message-selectNum{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 64rpx;
					.selectNum-color{
						color: #333333;
						margin-left: 10rpx;
					}
				}
				.message-trading{
					display: flex;
					position: relative;
					margin-top: 20rpx;
					.trading-btn{
						width: 220rpx;
						height: 80rpx;
						position: relative;
					}
					.trading-left{
						background: #FFB143;
						border-radius: 40rpx 0rpx 0rpx 40rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 28rpx;
						font-weight: 600;
						text-align: center;
						color: #FFFFFF;
					}
					.trading-right{
						background: #FE6600;
						border-radius: 0rpx 200rpx 200rpx 0rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 28rpx;
						font-weight: 600;
						text-align: center;
						color: #FFFFFF;
					}
					.trading-btnAct{
						width: 260rpx;
						height: 80rpx;
						position: relative;
						background: #FE6600;
						border-radius: 40rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 28rpx;
						font-weight: 600;
						text-align: center;
						color: #FFFFFF;
					}
				}
				.message-jigsaw{
					width: 160rpx;
					height: 64rpx;
					background: #FE6600;
					border-radius: 32rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
				.message-inPhoto{
					width: 60rpx;
					margin-top: 24rpx;
					position: relative;
					.inPhoto-img{
						display: block;
						width: 44rpx;
						height: 44rpx;
						margin: 0 auto 4rpx auto;
					}
					.inPhoto-text{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						text-align: center;
						line-height: 20rpx;
					}
					.inPhoto-num{
						width: 24rpx;
						height: 24rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						border: 2rpx solid #FE6600;
						font-size: 18rpx;
						color: #FE6600;
						line-height: 20rpx;
						text-align: center;
						position: absolute;
						right: -2rpx;
						top: -4rpx;
					}
				}
				.message-money{
					display: flex;
					font-size: 28rpx;
					font-weight: 600;
					color: #FE6600;
					line-height: 120rpx;
					/deep/ .u-icon{
						margin-left: 10px;
					}
					/deep/ .u-icon__icon{
						color: #FE6600 !important;
					}
				}
			}
			.feature-warn{
				width: 750rpx;
				height: 180rpx;
				padding-top: 42rpx;
				.warn-title{
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: center;
				}
				.warn-text{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 48rpx;
					text-align: center;
					text{
						color: #165DFF;
					}
				}
			}
		}
	}
	.myPhoto-getPhotos{
		width: 174rpx;
		height: 174rpx;
		position: fixed;
		right: 32rpx;
		bottom: 58rpx;
	}
	.totalAmount-mask{
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 120rpx;
		z-index: 50;
		.totalAmount-case{
			background-color: #fff;
			padding: 24rpx;
			border-radius: 4rpx 4rpx 0 0;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			.case-list{
				display: flex;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				text{
					font-weight: 600;
					color: #FE6600;
				}
			}
			.case-list:nth-last-child(1){
				margin-bottom: 0;
			}
			.case-tips{
				font-size: 24rpx;
				color: red;
				margin-bottom: 10rpx;
			}
		}
	}
</style>