chooseFavorite.vue

<template>
	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
		<view class="nav-bar" :style="{'height': navHeight + 'px'}">
			<picker mode="selector" @change="companyChage" :value="index" :range="companyArr" range-key="merchantName">
				<view class="company">{{companyArr[index] ? companyArr[index].merchantName : '请选择公司'}}</view>
			</picker>
			<u-icon name="arrow-down" color="#fff"></u-icon>
		</view>
		<view class="outer-container">
			<view class="inner-container">
				<view class="icon">
					<image class="favorite" src="./static/album/favorite.png"></image>
					<image class="start" src="./static/album/star.png"></image>
				</view>
				<view class="img-box">
					<view class="item" v-for="(item, index) in imgArr" :key="item.templateId" @click="imageChange(item)">
						<image class="img" :src="item.templateUrl" mode="widthFix"></image>
						<checkbox class="checkbox blue round" :checked="item.value" :value="item.templateId" shape="circle"></checkbox>
					</view>
				</view>
				<button class="btn" @click="saveClick">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      capsule: 0,
      navHeight: 0,
      index: 0,// 选中的公司索引-默认选中第一个
      companyArr: [],// 公司枚举
      imgArr: [],//图片
      option: {},//路由传参
    }
  },
  methods: {
    saveClick() {//---提交
      const templateIds = this.imgArr.map(item => {
        if(item.value) return item.templateId
      }) || []
			
      if(!templateIds.length) return uni.showToast({
        title: '您还没有选择模板哟！',
        icon: 'none'
      })
			
      const data = {
        merchantId: this.companyArr[this.index].merchantId,//商店id
        openid: uni.getStorageSync('openid'), //openid
        templateIds//模板Id
      }
      this.$request('wechatUser/pdAlbum/saveVisitorSurvey', data).then(res => {
			  if (res.code === '00') {
			    uni.showToast({
			      title: '提交成功',
			      icon: 'success'
			    })
          uni.navigateTo({
            url: `./albumIndex?template=true&merchantId=${data.merchantId}`
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    companyChage(e) {//---公司变化
      this.index = Number(e.detail.value)
      this.imgArr = this.companyArr[this.index].templateDetailList
    },
    imageChange(item) {//---图片选择
      this.$set(item, 'value', !item.value)
      this.$set(item, 'show', false)
      this.$set(item, 'show', true)
    },
    recordDeviceInfo() {//---记录设备信息
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
    }
  },
  onLoad(option) {
    this.recordDeviceInfo()
    this.option = option
		
    this.companyArr = JSON.parse(option.surveyConfig)
    const imgArr = []
    this.companyArr.forEach(item => {
      imgArr.push(...item.templateDetailList)
    })
    imgArr.forEach(item => {
      this.$set(item, 'value', false)
      this.$set(item, 'show', true)
    })
    this.imgArr = this.companyArr[0].templateDetailList
  }		
}
</script>

<style lang="scss" scoped>
	.big-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #3688FF;
		color: #fff;
	}
	.nav-bar {
		display: flex;
		align-items: center;
		picker {
			max-width: 50%;
		}
		.company {
			margin: 0 12rpx 0 24rpx;
			font-size: 36rpx;
			font-weight: 700;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.outer-container {
		flex: 1;
		margin: 16rpx 16rpx 24rpx 16rpx;
		border-radius: 96rpx;
		background: url('@/pages/album/static/album/dash-bg.png');
		background-size: 100% 100%;
		padding: 16rpx;
		overflow: hidden;
		.inner-container {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			background-color: #3041D7;
			border-radius: 96rpx;
		}
		.img-box {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			overflow-y: auto;
			flex: 1;
			margin: 42rpx 20rpx;
			padding: 24rpx 16rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
			border-radius: 16rpx;
			.item {
				width: 49%;
				height: 236rpx;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				position: relative;
				overflow: hidden;
				&:nth-child(2n-1) {
					margin-right: 2%;
				}
				.img {
					width: 100%;
					heigit: 100%;
					border-radius: 16rpx;
				}
				.checkbox {
					position: absolute;
					right: 0;
					top: 8rpx;
					transform: scale(0.8);
				}
			}
		}
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 78rpx;
			.favorite {
				width: 318rpx;
				height: 94rpx;
			}
			.start {
				width: 180rpx;
				height: 118rpx
			}
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 440rpx;
			height: 80rpx;
			margin-bottom: 24rpx;
			background: linear-gradient(90deg, #3688FF 0%, #539FFF 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-size: 32rpx;
		}
	}
</style>