pco/app-ui/pages/partner/index.vue

<template>
  <view>
    <view class="top-nav">
      <view class="l">
        <block v-if="isLogin">
          <image class="user-img" src="../../static/user.png" @click="toAccount"></image>
          <view class="l-r">
            <text class="u-name">{{ userName }}</text>
            <text class="c-name" v-if="customerId!=='1'">{{ companyName }}</text>
          </view>
        </block>
        <block v-else>
          <view class="login-btn" @click="toLogin">登录</view>
        </block>
      </view>
      <view class="r" v-if="isLogin">
        <view class="l-out" @click="exitFn">
          退出登录
        </view>
      </view>
    </view>
    <view class="top-bg"></view>
    <view class="top">
      <text class="title">场站管理系统</text>
    </view>
    <view class="item-box">
      <view class="item" hover-class="hover-class" v-for="(indexItem,index) in indexItemList" :key="index"
            @click="navTo(indexItem)" v-show="indexItem.show">
        <image class="icon" :src="indexItem.icon"></image>
        <view class="text">
          <text v-if="indexItem.text=='企业管理'&&customerId!='1'">信息管理</text>
          <text v-else>{{ indexItem.text }}</text>
        </view>
      </view>
    </view>
    <view class="qrcode">
      <image class="qrcode" :src="qrcoderlc"></image>
      <text class="text">长按二维码保存分享</text>
    </view>
    <view style="text-align: center;font-size: 23rpx;">
      <a href="https://beian.miit.gov.cn/" target="_blank">桂ICP备12007573号-1</a>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, //是否登录状态
      userName: '',
      companyName: '',
      customerId: '',
      qrcoderlc: '../../static/qrcode.png',
      indexItemList: []
    }
  },
  onShow() {
    this.getStoreInfo();
    this.setList();
  },
  onBackPress() {
    return true;
  },
  methods: {
    setList() {
      this.indexItemList = [{
        auth: false,
        icon: '../../static/home-icon-01.png',
        text: '企业注册',
        url: '/pages/enterprise-reg/enterprise-reg',
        show: uni.getStorageSync('info') ? false : true
      },
        {
          auth: false,
          icon: '../../static/home-icon-07.jpg',
          text: '申报录入',
          url: '/pages/declare/add',
          show: true
        },
        {
          auth: false,
          icon: '../../static/home-icon-06.jpg',
          text: '消杀申报',
          url: '/pages/disinfect/addDisinfect',
          show: true
        },
        {
          auth: true,
          icon: '../../static/home-icon-02.png',
          text: '业务录入',
          url: '/pages/business-entering/business-entering',
          show: uni.getStorageSync('perList').indexOf('tb-business-add') !== -1
        },
        {
          auth: true,
          icon: '../../static/home-icon-03.png',
          text: '业务订单',
          url: '/pages/business-order/business-order',
          show: true
        },
        {
          auth: true,
          icon: '../../static/home-icon-04.png',
          text: '企业管理',
          url: '/pages/customer-management/customer-list',
          show: true
        },
        {
          auth: true,
          icon: '../../static/home-icon-05.png',
          text: '出入记录',
          url: '/pages/inout-record/inout-record',
          show: true
        },

        // {
        // 	auth: true,
        // 	icon: '../../static/home-icon-06.jpg',
        // 	text: '账户充值',
        // 	url: '/pages/account/index',
        // 	show:true
        // },

      ]
    },
    toAccount() {
      if (this.customerId !== '1') {
        this.$common.to('/pages/account/account-redirect')
      }
    },
    getStoreInfo() {
      let info = uni.getStorageSync('info');
      if (info) {
        this.isLogin = true;
        this.userName = info.name;
        this.customerId = info.customerId;
      }
    },
    toLogin() {
      this.$common.to('/pages/login/login')
    },
    exitFn() {
      uni.removeStorageSync('token')
      uni.removeStorageSync('info')
      this.isLogin = false;
      this.setList();
    },
    navTo(item) {
      let auth = item.auth;
      let token = uni.getStorageSync('token');
      if (!auth || token) {
        this.$common.to(item.url)
      } else {
        this.$common.to('/pages/login/login')
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  background-color: #0080ff;

  .l {
    display: flex;
    align-items: center;

    .login-btn {
      border: 1rpx solid #359aff;
      border-radius: 8rpx;
      color: #fff;
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      margin-left: 30rpx;
    }

    .user-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-left: 30rpx;
      margin: 20rpx;
    }

    .l-r {
      display: flex;
      flex-direction: column;

      .u-name {
        font-size: 30rpx;
        color: #fff;
        font-weight: bold;
      }

      .c-name {
        font-size: 24rpx;
        color: #fff;
      }
    }
  }

  .r {
    display: flex;
    align-items: center;

    .l-out {
      border: 1rpx solid #359aff;
      border-radius: 8rpx;
      color: #c8e4ff;
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      margin-right: 30rpx;
    }
  }
}

.top-bg {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  background-color: #0080ff;
  border-radius: 0 0 20rpx 20rpx;
}

.top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: 60rpx 0;
  margin-top: -400rpx;
  position: relative;
  z-index: 2;

  .title {
    font-size: 50rpx;
    font-weight: bold;
    color: #fff;
  }
}

.item-box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 40rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0 30rpx;
  border-radius: 20rpx;
  position: relative;
  z-index: 2;
  //height: calc(100vh - 170rpx - 500rpx);
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);

  .item {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;

    .icon {
      width: 90rpx;
      height: 90rpx;
    }

    .text {
      font-size: 28rpx;
      color: #191919;
      margin-top: 20rpx;
    }
  }
}

.qrcode {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30rpx 0;

  .qrcode {
    width: 350rpx;
    height: 350rpx;
    border: 1px solid #191919;
  }

  .text {
    color: #191919;
    font-size: 28rpx;
    margin-top: 5rpx;
  }
}
</style>