traffic-eff-app/pages/tabbar/my/index.vue

<template>
  <view class="fui-wrap">
      <view class="user-info-bg">
      </view>
      <view class="ctl-container">
        <view class="user-info-content">
          <view class="user-info-img">
            <u-avatar :src=" userInfo && userInfo.avatarUrl || ''" shape="circle" :size="60"></u-avatar>
          </view>
          <view class="user-info" @click="$u.throttle(onHeadClick,500)">
            <view>
              {{ userInfo.usrName || '点击登录' }}
            </view>
            <view>
              {{ userInfo.tel || '' }}
            </view>
          </view>
        </view>

        <view class="ctl-panel">
          <u-grid
              :border="false"
              :col="3"
          >
            <u-grid-item
                v-for="(baseListItem,baseListIndex) in baseList"
                :key="baseListIndex"
                @click="$u.throttle(()=>onItemClick(baseListItem), 500)"
            >
              <view class="grid-item-icon" :style="[baseListItem.style]">
                <image :src="baseListItem.icon"></image>
              </view>
              <text class="grid-text">{{ baseListItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
</template>

<script>

import { fetchViewCfgList } from '@/common/api';
import { COMP_CODE } from '@/common/EnumConst';
import AuthWrap from '@/components/AuthComp/index.vue';
import { authLogin, getImageUrl, getUserInfo } from '@/util';

export default {
  components: { AuthWrap },
  data() {
    return {
      userInfo: {},
      baseList: [],
      src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
    };
  },
  onLoad() {
  },
  onShow() {
    this.userInfo = getUserInfo();
    this.viewCfg();
  },
  methods: {
    onHeadClick() {
      if (this.userInfo) {
        return;
      }
      authLogin(() => {
        this.userInfo = getUserInfo();
      });
    },
    onItemClick(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    async viewCfg() {
      const res = await fetchViewCfgList({
        pageNum: 1,
        pageSize: 99,
        compCode: COMP_CODE.my,
      });
      if (res.rows.length > 0) {
        this.baseList = res.rows.map(item => {
          return {
            icon: getImageUrl(item.iconUri),
            style: JSON.parse(item.style),
            title: item.labelTxt,
            url: item.url,
          };
        });
      }
    },
  },
  onShareAppMessage() {
    return {
      title: 'First UI组件库',
    };
  },
};
</script>

<style lang="scss" src="./index.scss">
</style>