hongze_yb_xcx/pages-applyPermission/selectVariety.vue

<template>
  <view class="select-variety-page">
      <view class="flex variety-list">
          <view class="variety-item" v-for="(item,index) in list" :key="item.name" @click="handleSelect(index)">
              <view :class="['variety-radio',item.selected&&'variety-radio-s']"></view>
              <image class="variety-img" :src="item.pic_url" mode="aspectFill"></image>
              <view class="variety-name">{{item.name}}</view>
          </view>
      </view>

      <view class="global-btn-yellow-change btn" v-if="has" @click="handleConfirm">关注</view>
      <view class="global-btn-disable btn" v-else>请至少关注一个品种</view>
  </view>
</template>

<script>
import {apiGetPermissionList} from '@/api/common'
export default {
    data () {
        return {
            list:[]
        }
    },
    computed: {
      has(){
          let flag=false
            this.list.forEach(item=>{
                if(item.selected) flag=true
            })
          return flag
      }  
    },
    onLoad(options){
        let beforePagePermission=''
        const eventChannel = this.getOpenerEventChannel();
        // 监听上个页面传来的已经选择的权限
        eventChannel.on('hasPermissionData', (data) =>{
            beforePagePermission=data.data
            this.getList(beforePagePermission)
        })
    },
    methods: {
        handleSelect(index){
            this.list[index].selected=!this.list[index].selected
        },

        async getList(arr){
            const hasArr=arr.split(',')||[]
            const res=await apiGetPermissionList()
            if(res.code===200){
                this.list=res.data.map(item=>{
                    let obj={...item,selected:false}
                    if(hasArr.find((e)=>e===item.name)){
                        obj.selected=true
                    }
                    return obj
                })
            }
        },

        handleConfirm(){
            let arr=[]
            this.list.forEach(item=>{
                if(item.selected){
                    arr.push(item.name)
                }
            })
            uni.$emit('selectPermission',{permissionList:arr})
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss">
.variety-list{
    padding: 50rpx 68rpx;
    justify-content: space-between;
    flex-wrap: wrap;
    text-decoration: none;
    .variety-item{
        margin-bottom: 30rpx;
        position: relative;
        width: 188rpx;
    }
    .variety-img{
        width: 188rpx;
        height: 188rpx;
        background-color: $global-bg-color-grey;
        border-radius: 8rpx;
    }
    .variety-name{
        text-align: center;
    }
    // 使用伪类 补充一个元素
    &::after{
        content: "";
        height: 0;
        width: 188rpx;
    }

    .variety-radio{
        position: absolute;
        top: 12rpx;
        right: 12rpx;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #fff;
    }
    .variety-radio-s{
        background-image: url('./static/radio-s.png');
        background-size: cover;
        border: none;
        background-color: #fff;
    }
}
.btn{
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    width: 614rpx;
    margin-left: auto;
    margin-right: auto;
}
</style>