pco/app/pages/index/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-if="checkPer(indexItem.id)||indexItem.customer">
        <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: [{
        auth: false,
        icon: '../../static/home-icon-01.png',
        text: '企业注册',
        url: '/pages/enterprise-reg/enterprise-reg',
        customer: true
      }
      ],
      code: '',
      state: '',
      userType: 1,
      partnerList: [
        {
          id: 'tb-business-item',
          auth: true,
          icon: '../../static/home-icon-03.png',
          text: '作业订单',
          url: '/pages/business-order/partner-business-item',
        },
        {
          auth: false,
          icon: '../../static/home-icon-06.jpg',
          text: '业务管理',
          url: '/pages/onely-disinfect/Index',
          customer: true
        },
        {
          id: 'admin-list',
          auth: true,
          icon: '../../static/home-icon-04.png',
          text: '用户管理',
          url: '/pages/user/user-index',
        }
      ],
      customerList: [{
        id: 'tb-costomer-account',
        auth: true,
        icon: '../../static/home-icon-charge.png',
        text: '充值',
        url: '/pages/account/account-redirect',
      },
        {
          id: 'tb-declare',
          auth: false,
          icon: '../../static/home-icon-07.jpg',
          text: '申报录入',
          url: '/pages/declare/add',
        },
        {
          id: 'tb-disinfect',
          auth: false,
          icon: '../../static/home-icon-06.jpg',
          text: '消杀申报',
          url: '/pages/disinfect/addDisinfect',
        },
        // {
        // 	id: 'tb-business',
        // 	auth: true,
        // 	icon: '../../static/home-icon-02.png',
        // 	text: '录入整车',
        // 	url: '/pages/business-entering/business-entering',
        // },
        // {
        // 	id: 'tb-business',
        // 	auth: true,
        // 	icon: '../../static/home-icon-03.png',
        // 	text: '整车业务',
        // 	url: '/pages/business-order/business-order',
        // },
        {
          auth: false,
          icon: '../../static/home-icon-03.png',
          text: '业务管理',
          url: '/pages/onely-disinfect/Index',
          customer: true
        },
        {
          id: 'tb-business-car',
          auth: true,
          icon: '../../static/home-icon-05.png',
          text: '放行记录',
          url: '/pages/inout-record/inout-record',
        },
        {
          id: 'admin-list',
          auth: true,
          icon: '../../static/home-icon-04.png',
          text: '用户管理',
          url: '/pages/user/user-index',
        }
      ],
      adminList: [
        // {
        // 	id: 'tb-business-add',
        // 	auth: true,
        // 	icon: '../../static/home-icon-02.png',
        // 	text: '录入整车',
        // 	url: '/pages/business-entering/business-entering',

        // },
        {
          id: 'tb-declare',
          auth: false,
          icon: '../../static/home-icon-07.jpg',
          text: '申报录入',
          url: '/pages/declare/add',
        },
        {
          id: 'tb-disinfect',
          auth: false,
          icon: '../../static/home-icon-06.jpg',
          text: '消杀申报',
          url: '/pages/disinfect/addDisinfect',
        },
        {
          auth: false,
          icon: '../../static/home-icon-03.png',
          text: '业务管理',
          url: '/pages/onely-disinfect/Index',
          customer: true
        },
        // {
        // 	id: 'tb-business-list',
        // 	auth: true,
        // 	icon: '../../static/home-icon-03.png',
        // 	text: '整车业务',
        // 	url: '/pages/business-order/business-order',
        // },
        {
          id: 'tb-business-car',
          auth: true,
          icon: '../../static/home-icon-05.png',
          text: '放行记录',
          url: '/pages/inout-record/inout-record',
        },
        {
          id: 'admin-list',
          auth: true,
          icon: '../../static/home-icon-04.png',
          text: '用户管理',
          url: '/pages/user/user-index',
        },
      ]
    }
  },
  onLoad(options) {
    this.code = options.code;
    this.state = options.state;
    this.getOpenidByCode();

  },
  onShow() {
    this.loginByOpenid();
    this.checkUserType();
  },
  onBackPress() {
    return true;
  },
  methods: {
    checkPer(code) {
      return this.$common.isAuth(code);
    },
    getOpenidByCode() {
      if (!this.code) {
        this.$common.to('/pages/home/home')
        return;
      }
      let storeOpenid = uni.getStorageSync('openid');
      this.$api.getOpenidByCode({
        code: this.code,
        openid: storeOpenid
      }).then(resp => {
        this.success = resp.code == 200 && resp.data ? 1 : 0
        if (resp.code == 200 && resp.data) {
          this.success = 1;
        } else {
          this.success = 0
        }
        let openid = resp.data;
        this.openid = openid;
        if (openid) {
          uni.setStorageSync('openid', openid)
        }
        this.loginByOpenid(openid)

      })
    },
    getStoreInfo() {
      let info = uni.getStorageSync('userInfo');
      if (info) {
        this.isLogin = true;
        this.userName = info.name;
        this.customerId = info.customerId;
      }
    },
    loginByOpenid() {
      let storeOpenid = uni.getStorageSync('openid');
      if (!storeOpenid) {
        return;
      }
      this.$api.doLoginByOpenid({
        openid: storeOpenid
      }).then(resp => {
        if (resp.code == 404) {
          return;
        }
        this.isLogin = true;
        let data = resp.data;
        this.userName = data.admin.name;
        this.customerId = data.admin.customerId;
        if (data.tokenInfo) {
          uni.setStorageSync('token', data.tokenInfo.tokenValue);
          uni.setStorageSync('customerId', data.admin.customerId)
          uni.setStorageSync('userInfo', data.admin)
          uni.setStorageSync('perList', data.per_list)
          this.checkUserType()
        } else {
          this.$common.toast(resp.msg);
        }
      })
    },
    checkUserType() {
      let token = uni.getStorageSync('token');
      if (token) {
        this.$nextTick(function () {
          this.$api.checkUserType().then(resp => {
            let userType = resp.data;
            if (userType == 3) {
              this.indexItemList = this.partnerList;
            } else if (userType == 2) { //客户
              this.indexItemList = this.customerList
            } else if (userType == 1) {
              this.indexItemList = this.adminList
            }
          })
        })
      }
    },
    toAccount() {
      if (this.customerId !== '1') {
        this.$common.to('/pages/customer-management/customer-list')
      }
    },
    getStoreInfo() {
      let info = uni.getStorageSync('userInfo');
      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('userInfo')
      uni.removeStorageSync('customerId')
      uni.removeStorageSync('perList')
      let storeOpenid = uni.getStorageSync('openid');
      uni.setStorageSync('login_openid', storeOpenid);
      uni.removeStorageSync('openid')
      this.isLogin = false;
      this.userName = '';
      this.companyName = ''
      this.indexItemList = [
        {
          auth: false,
          icon: '../../static/home-icon-01.png',
          text: '企业注册',
          url: '/pages/enterprise-reg/enterprise-reg',
          customer: true
        }
      ]
    },
    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: 25%;
    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>