chongqing-app/src/pages/profileManage/index.vue

<template>
  <home-container :customStyle="{ background: 'none', backgroundColor: '#f5f5f5' }">
    <view class="profile-manage-container">
      <view class="grid-body">
        <uni-section title="画像管理" type="line" class="uni-section-custom"></uni-section>
        <uni-grid :column="3" :showBorder="false">
          <uni-grid-item v-for="(item, index) in items" :key="index">
            <view class="grid-item-box" @click="handleGridClick(item.appUrl)">
              <img alt="" :src="item.workbenchIcon">
              <text class="text">{{ item.appName }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
  </home-container>
</template>

<script>
import HomeContainer from '@/components/HomeContainer.vue'
import { getAppList } from '@/api/system/user'

const profileAppNames = ['全站综合信息', '部门画像', '班组画像', '小组画像', '员工画像']

export default {
  components: { HomeContainer },
  data() {
    return {
      appList: []
    }
  },
  computed: {
    items() {
      return this.appList.filter(item => profileAppNames.includes(item.appName))
    }
  },
  onLoad() {
    this.loadAppList()
  },
  methods: {
    async loadAppList() {
      try {
        const res = await getAppList({ homePage: 0 })
        if (res.code === 200) {
          this.appList = res.data || []
        }
      } catch (error) {
        console.error('获取画像应用列表失败:', error)
        this.appList = []
      }
    },
    handleGridClick(url) {
      if (!url) return
      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-manage-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.grid-body {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .uni-section-custom {
    ::v-deep .uni-section-header {
      padding: 12rpx 10rpx !important;
    }
  }
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;

  img {
    display: inline-block;
    width: 88rpx;
    height: 88rpx;
  }

  &:active {
    background-color: #f5f5f5;
    border-radius: 12rpx;
  }
}

.text {
  text-align: center;
  font-size: 25rpx;
  margin-top: 15rpx;
  color: #333;
}
</style>