purchasedPhotoAlbum.vue

<template>
	<view class="albumBox">
		<!--头部-->
		<view class="album-address">
			<view class="address-left">
				<view class="left-picker" @click="orderShow=true">
					<i>{{cityName}}</i>
					<image src="../static/album/myPhoto01.png"></image>
				</view>
				<u-picker mode="selector" :show="orderShow" :default-selector="[orderType]" :columns="option"	keyName="areaName" @confirm="industrysTypeConfirm($event)" @cancel="cancel"></u-picker>
				
				<view class="left-picker" @click="merchantShow=true">
					<i>{{merchantName}}</i>
					<image src="../static/album/myPhoto01.png"></image>
				</view>
				<u-picker mode="selector" :show="merchantShow" :default-selector="[orderType]" :columns="merchantList"	keyName="merchantName" @confirm="industrysTypeConfirm2($event)" @cancel="cancel2"></u-picker>
			</view>
		</view>
		
		<!--主体循环-->
		<view class="album-subjectBox" v-for="(item,index) in previewData" :key="index">
			<view class="suject-lable">
				<image src="../static/album/icon01.png"></image>
				<view>{{item.merchantName}}</view>
			</view>
			<view class="album-subject">
				<view class="subject-List" v-for="(item2,index2) in item.photoOrderImgResVoList" :key="index2">
					<image class="list-image" :src="item2.imgUrl"  @click="stopPhoto(index,index2)"></image>
					<!-- <u-checkbox v-model="item2.checkType" v-if="checkTypeFun==true" @click.stop.native="()=>{}" @change="stopPhoto(index,index2)" shape="circle" class="list-uCheck"></u-checkbox> -->
					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index,index2)">
						<checkbox value="val" :checked="item2.checkType" style="transform:scale(0.7)" class="list-uCheck" :class="item2.checkType==true?'list-uCheckAct':''" />
					</checkbox-group>
				</view>
			</view>
		</view>
		
		<!--脚部-->
		<view class="album-bottom">
			<view class="bottom-left" v-if="maskDetail==false">
				<!--全选按钮-->
				<view class="album-checkAll" @click="checkProjectAllFun()">
					<!-- <u-checkbox v-model="checkProjectAll" @change="checkProjectAllFun()">全选</u-checkbox> -->
					<checkbox value="val" :checked="checkProjectAll" style="transform:scale(0.7)" :class="checkProjectAll==true?'checkAll-allAct':''" />
					<view class="checkAll-tips">未下载影像保留15天</view>
				</view>
			</view>
			<view class="bootom-btn" @click="upLoad()">去下载</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'
export default {
  components: {
    // uPicker,
    // uCheckboxGroup,
    // uCheckbox,
    // uToast
  },
  data() {
    return {
      faceIds: [], //查询照片ID
      openid:'',
      orderShow: false, //头部城市选择
      option: [],//城市
      cityName: '全部',
      areaId:'',//城市ID
      merchantId:'',//商户ID
      location: {},//位置信息
      projectCheck: 0, //当前选择的产品
      merchantList:[],//商户列表
      merchantName:'全部',//商户名称
      merchantShow:false,//
      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: {},
      touchLeft: 0,
      touchRight: 0,
      touchType: 0, //向左0++  向右1--
      //左右滑动 监听结束
      originalPrice:0,//原价单价
      originalPrices:0,//原价
      sellingPrice:0,//售价单价
      sellingPrices:0,//售价
      favorablePrice:0,//优惠
      priceNum:0,//选购了多少照片
      //options:{},//参数
      imgList:[],//下载图片列表
      downImgNumber:0,//下载图片的数量
    }
  },
  onLoad(option) {
    this.openid = uni.getStorageSync('openid') //获取openid
    //this.openid = 'oh2UV1lFq2CjxbBw0y7DOohhBFBM' //获取openid uni.getStorageSync('openid') 
    //this.options = option
    //this.merchantId = 'z0015605022691a5945bbe463141668c'//uni.getStorageSync('merchantId')
    this.obtainProvince()//获取省市区
    this.inquireMerchant()//查询所有商户
    this.getPhotos()//照片列表
  },
  methods: {
    obtainProvince(){//获取省列表
      this.$request('scenic/search/loadAreaByCity',{
        areaLevel:1,
        inChina:0
      }).then((res)=>{
        if(res.code=='00'){
          var opTionList = []
          opTionList.push(res.data)
          this.option = opTionList
        }else{
          this.$refs.uToast.show({
            title: res.message,
            type: 'error',
          })
        }
      })
    },
    inquireMerchant(){//查询所有商户
      var data = {
        areaCode:this.areaId,//省市ID
      }
		  this.$request('scenic/albumConfig/getSurveyConfig',data).then((res)=>{
		    if(res.code=='00'){
          var merchantListList = []
          merchantListList.push(res.data)
          this.merchantList = merchantListList
		    }else{
		      this.$refs.uToast.show({
		        title: res.message,
		        type: 'error',
		      })
		    }
		  })
    },
    getPhotos(){//照片
		  var data = {
		    userId:this.openid,
		    orderType:11,//商户ID
		  }
		  this.$request('orderc/photo/queryPhotoOrderList',data).then((res)=>{
		    if(res.code=='00'){
		      this.previewData = res.data
          this.previewData.forEach((item,index)=>{
            item.photoOrderImgResVoList.forEach((item2,index2)=>{
              item2['checkType'] = false
            })
          })
		    }else{
		      this.$refs.uToast.show({
		        title: res.message,
		        type: 'error',
		      })
		    }
		  })
    },
    industrysTypeConfirm(e) { //单列----分类 点击确定 城市
      this.cityName = e.value[0].areaName
      this.areaId = e.value[0].areaId
      this.inquireMerchant()
      this.cancel()
    },
    industrysTypeConfirm2(e) { //单列----分类 点击确定 项目
      this.merchantId = e.value[0].merchantId
      this.merchantName = e.value[0].merchantName
		  this.getPhotos()
      this.cancel2()
    },
    cancel() { //单列 点击取消
      this.orderShow = false
    },
    cancel2() { //单列 点击取消
		  this.merchantShow = false
    },
    stopPhoto(index,index2){//刷新显示
      if(this.checkProjectAll==true){
        this.checkProjectAll=false
      }
      if(this.previewData[index].photoOrderImgResVoList[index2].checkType==false){
        this.previewData[index].photoOrderImgResVoList[index2].checkType = true
      }else{
        this.previewData[index].photoOrderImgResVoList[index2].checkType = false
      }
      this.checkTypeFun = false
      this.checkTypeFun = true
    },
    checkProjectAllFun(){//是否全选
      if(this.checkProjectAll==true){
        this.checkProjectAll = false
        this.previewData.forEach((item,index)=>{
          item.photoOrderImgResVoList.forEach((item2,index2)=>{
					  item2.checkType = false
          })
        })
      }else{
        this.checkProjectAll = true
        this.previewData.forEach((item,index)=>{
          item.photoOrderImgResVoList.forEach((item2,index2)=>{
					  item2.checkType = true
          })
        })
      }
    },
    upLoad(){//下载
      this.imgList = []
      this.previewData.forEach((item,index)=>{
			  item.photoOrderImgResVoList.forEach((item2,index2)=>{
          if(item2.checkType==true){
            var imgUrl = item2.imgUrl
            this.imgList.push(imgUrl)
          }
			  })
      })
      this.download()
    },
    //---点击下载
    download(){
		  this.downImgNumber=0
		  this.imgList.forEach(item=>{
		    this.downloadFun(item)
		  })
    },
    //---下载方法
    downloadFun(imgUrl) { 
		  uni.showLoading({
		    title: '下载中',
		    mask: true
		  })
		  let fileName = new Date().getTime()
		  uni.downloadFile({ //下载文件资源到本地
		    url:imgUrl,
		    filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
		    success: res => { //下载到本地成功
		      if(res.statusCode==200){
		        let filePath = res.filePath
		        uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
						  filePath,
						  success: file => { //保存成功
		            this.downImgNumber+=1
		            if(this.downImgNumber==this.imgList.length){
		              uni.showToast({
									  title: '下载成功',
									  icon: 'success',
									  mask: true
		              })
		            }
						  },
						  fail: err => {
						    uni.hideLoading()
						    this.getPermissions(err)
						  }
		        })
		      }
		    },
		    fail: err => { //下载失败
		      uni.hideLoading()
		      uni.showToast({
		        title: '下载失败',
		        icon: 'none',
		        mask: true
		      })
		    }
		  })
    },
    //---获取授权
    getPermissions(err){
		  //拒绝授权时显示
		  if (err.errMsg.includes('fail auth deny')) {
			  uni.showModal({
			    title: '提示',
			    content: '需要您授权保存相册',
			    showCancel: false,
			    success: data => {
			      //打开权限设置
			      uni.openSetting({
			        success: setting => {
			          if (!setting.authSetting['scope.writePhotosAlbum']) {
			            uni.showModal({
			              title: '提示',
			              content: '获取权限失败无法保存到相册',
			              showCancel: false,
			            })
			          }
			        },
			      })
			    }
			  })
		  }
    },
  }
}
</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: 96rpx;
		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-picker {
				display: flex;
				font-size: 32rpx;
				color: #333333;
				line-height: 76rpx;
				margin-right: 24rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-top: 25rpx;
					margin-left: 8rpx;
				}
			}
			/deep/ .u-popup{
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}

	.album-address::-webkit-scrollbar {
		display: none;
	}
	.album-subjectBox{
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
	}
	.suject-lable{
		display: flex;
		height: 44rpx;
		margin-bottom: 24rpx;
		padding: 0 24rpx 0 24rpx;
		image{
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin: 6rpx 6rpx 0 0;
		}
		view{
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
		}
	}
	.album-subject {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 24rpx 0 24rpx;
		.subject-List {
			width: 344rpx;
			height: 344rpx;
			margin-bottom: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;

			.list-image {
				display: block;
				width: 344rpx;
				height: 344rpx;
			}

			.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/ .wx-checkbox-input,
				/deep/ .uni-checkbox-input{
					border-radius: 100rpx;
				}
			}
			.list-uCheckAct{
				/deep/ .wx-checkbox-input,
				/deep/ .uni-checkbox-input{
					background-color: #3688FF !important;
					border-color: #3688FF !important;
					color: #ffffff !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;
			.album-checkAll {
				display: flex;
				width: 100%;
				height: 98rpx;
				padding: 0rpx 24rpx 0 0rpx;
				overflow: hidden;
				/deep/ .u-checkbox {
					line-height: 34rpx !important;
				}
			
				/deep/ .u-checkbox__label {
					font-size: 24rpx !important;
				}
				.checkAll-allAct{
					/deep/ .wx-checkbox-input,
					/deep/ .uni-checkbox-input{
						background-color: #3688FF !important;
						border-color: #3688FF !important;
						color: #ffffff !important;
					}
				}
			
				.checkAll-tips {
					font-size: 24rpx;
					color: #999999;
					line-height: 98rpx;
					margin-left: 24rpx;
				}
			}
		}

		.bootom-btn {
			width: 240rpx;
			height: 98rpx;
			background-color: #3688FF;
			background: linear-gradient(90deg, #ED400C 0%, #FB862C 100%);
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			text-align: center;
			line-height: 98rpx;
		}
	}

</style>