workbench.vue 2.56 KB
<template>
  <view>
    <Navbar title="工作台" canBack></Navbar>
    <view class="container flex flex-direction align-center justify-center">
      <view class="insightCss margin-tb-xl padding flex justify-between align-center" @click="handleClick('insight')">
        <u-image width="60rpx" height="60rpx" src="/static/images/icon/insight.png" shape="circle"></u-image>
        <view class="text-xxl text-bold text-white">市场洞察平台</view>
        <u-icon name="arrow-right" color="#fff"></u-icon>
      </view>
      <view class="chargeCss margin-tb-xl padding flex justify-between align-center" v-if="hasPermission"
        @click="handleClick('charge')">
        <u-image width="60rpx" height="60rpx" src="/static/images/icon/charge.png" shape="circle"></u-image>
        <view class="text-xxl text-bold text-white">市场化收费工具</view>
        <u-icon name="arrow-right" color="#fff"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        toolPermissions: ['schsf:mcVisit:list', 'schsf:mcIgnition:list', 'schsf:mcConstruction:list']
      }
    },
    onShow() {

    },
    onLoad() {
      this.$store.dispatch('GetInfo').then(()=>{
        console.log("getters",this.$store.getters);
        const hasPermission =  this.hasPermission;
        console.log("是否有工具权限",hasPermission);
        if (!hasPermission) {
          this.handleClick('insight');
        }
      })
    },
    computed: {
      hasPermission() {
        return this.toolPermissions.some(permission => {
          return this.$checkPermi([permission]);
        });
      }
    },
    methods: {
      // 验证是否需要显示工具菜单
      handleClick(workName) {
        console.log(workName);
        this.$store.dispatch('setTab', {
          data: workName
        }).then(() => {
          let tabList = this.$store.state.tabbar.list
          let urls = tabList[0].pagePath
          console.log("跳转", urls);
          setTimeout(() => {
            uni.switchTab({
              url: `/${urls}`
            })
            console.log(this.$store.state);
          }, 300)
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    height: calc(100vh - 100rpx);
  }

  .insightCss {
    width: 80%;
    height: 150rpx;
    background: linear-gradient(to right, #6DE6CE, #5566E2);
    border-radius: 80rpx;
  }

  .chargeCss {
    width: 80%;
    height: 150rpx;
    background: linear-gradient(to right, #FFCE02, #EE6202);
    border-radius: 80rpx;
  }
</style>