hongze_yb_xcx/pages-user/permissionList.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">
              <image class="variety-img" :src="item.pic_url" mode="aspectFill"></image>
              <view class="variety-name">{{item.name}}</view>
          </view>
      </view>
  </view>
</template>

<script>
import {apiGetPermissionList} from '@/api/common'
export default {
    computed: {
        list(){
            let hasArr=[]
            this.userInfo.permission_list&&this.userInfo.permission_list.forEach(item=>{
                item.permission_list.forEach(item2=>{
                    hasArr.push(item2.name)
                })
            })
            let arr=this.reslist.filter(item=>{
                if(hasArr.find((e)=>e===item.permission_name)) return item
            })

            return arr
        }
    },
    data () {
        return {
            reslist:[]
        }
    },
    
    onLoad(options){
        this.getList()
    },
    methods: {
        async getList(){
            const res=await apiGetPermissionList()
            if(res.code===200){
                this.reslist=res.data
                // let hasArr=[]
                // this.$store.state.user.userInfo.permissiom_list&&this.$store.state.user.userInfo.permissiom_list.forEach(item=>{
                //     console.log(item);
                //     item.permission_list.forEach(item2=>{
                //         console.log(item2.name);
                //         hasArr.push(item2.name)
                //     })
                // })
                // console.log(hasArr);
                // this.list=res.data.filter(item=>{
                //     if(hasArr.find((e)=>e===item.name)) return item
                // })
            }
        },

        
    }
}
</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;
    }
}
</style>