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" @click="handClick">
            <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, exit, getImageUrl, getUrlParams, getUserInfo, setStorageObj } 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();
      });
    },
    // 单击或双击
    handClick(index) {
      let _this = this;
      let curTime = new Date().getTime();
      let lastTime = _this.lastTapDiffTime;
      _this.lastTapDiffTime = curTime;
      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      if (diff < 300) {
        console.log('双击');
        //_this.handleVideo('screen',index)自定义事件
        clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
        exit();
        authLogin();
      } else {
        // 单击事件延时300毫秒执行
        _this.lastTapTimeoutFunc = setTimeout(function () {
          console.log('单击');
          //_this.handleVideo('playOrStop',index)自定义事件
        }, 300);
      }
    },
    onItemClick(item) {
      if (item.url) {
        const reqs = getUrlParams(item.url);
        if (reqs && reqs.storage) {
          setStorageObj(reqs.storage, reqs);
        }
        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: '',
    };
  },
};
</script>

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