5.4

1.学习html5(虽然知道可能以后使用的话不兼容，可是现阶段已经用了，不想改了

 /utils/request

import store from '@/store'
import config from '@/config'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { toast, showConfirm, tansParams } from '@/utils/common'

let timeout = 10000
const baseUrl = config.baseUrl

const request = config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  // get请求映射params参数
  if (config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.url = url
  }
  return new Promise((resolve, reject) => {
    uni.request({
        method: config.method || 'get',
        timeout: config.timeout ||  timeout,
        url: config.baseUrl || baseUrl + config.url,
        data: config.data,
        header: config.header,
        dataType: 'json'
      }).then(response => {
        let [error, res] = response
        if (error) {
          toast('后端接口连接异常')
          reject('后端接口连接异常')
          return
        }
        const code = res.data.code?res.data.code:res.statusCode || 200 //shiro返回错误码res.statusCode
        const msg = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
          showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
            if (res.confirm) {
              store.dispatch('LogOut').then(res => {
                uni.reLaunch({ url: '/pages/login' })
              })
            }
          })
          reject('无效的会话，或者会话已过期，请重新登录。')
        } else if (code === 500) {
          toast(msg)
          reject('500')
        } else if (code !== 200) {
          toast(msg)
          reject(code)
        }
        resolve(res.data)
      })
      .catch(error => {
        let { message } = error
        if (message === 'Network Error') {
          message = '后端接口连接异常'
        } else if (message.includes('timeout')) {
          message = '系统接口请求超时'
        } else if (message.includes('Request failed with status code')) {
          message = '系统接口' + message.substr(message.length - 3) + '异常'
        }
        toast(message)
        reject(error)
      })
  })
}

export default request

page/user/index.vue

<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="系统管理" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item :index="0" v-if="checkPermi(['system:user:list'])" >
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">用户管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="1" v-if="checkPermi(['system:role:list'])" >
          <view class="grid-item-box">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">角色管理</text>
          </view>
        </uni-grid-item >
        <uni-grid-item :index="2" v-if="checkPermi(['system:menu:list'])" >
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">菜单管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="3" v-if="checkPermi(['system:dept:list'])" >
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">部门管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="4" v-if="checkPermi(['system:post:list'])" >
          <view class="grid-item-box">
            <uni-icons type="heart-filled" size="30"></uni-icons>
            <text class="text">岗位管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="5" v-if="checkPermi(['system:dict:list'])" >
          <view class="grid-item-box">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">字典管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="6" v-if="checkPermi(['system:config:list'])" >
          <view class="grid-item-box">
            <uni-icons type="gear-filled" size="30"></uni-icons>
            <text class="text">参数设置</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="7" v-if="checkPermi(['monitor:logininfor:list'])" >
          <view class="grid-item-box">
            <uni-icons type="chat-filled" size="30"></uni-icons>
            <text class="text">登录日志</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="8" v-if="checkPermi(['monitor:operlog:list'])" >
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">操作日志</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="9" v-if="checkPermi(['tool:upload:upload-demo'])" >
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">上传演示</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="10" v-if="checkPermi(['system:beijingsubway:index'])" >
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">起点-终点</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="11" v-if="checkPermi(['system:lines:index'])" >
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">地铁线</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="12" v-if="checkPermi(['system:stations:index'])" >
          <view class="grid-item-box">
            <uni-icons type="heart-filled" size="30"></uni-icons>
            <text class="text">地铁站点</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>
    
<script>
  import { getRouters } from "@/api/menu";
  import {checkPermi}  from "@/utils/permission";// 权限工具类
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [
            // {
   //          image: '/static/images/banner/banner01.jpg'
   //        },
          {
            image: '/static/images/banner/banner02.jpg'
          },
          {
            image: '/static/images/banner/banner03.jpg'
          }
        ]
      }
    },
    onLoad () {
    },
    methods: {
      checkPermi,
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(e) {
        // this.$modal.showToast('模块建设中~')
        const index = e.detail.index;
        switch (index) {
          case 0:
            this.$tab.navigateTo('/pages/work/user/index');
            break;
          case 1:
            this.$tab.navigateTo('/pages/work/role/index');
            break;
          case 2:
            this.$tab.navigateTo('/pages/work/menu/index');
            break;
          case 3:
            this.$tab.navigateTo('/pages/work/dept/index');
            break;
          case 4:
            this.$tab.navigateTo('/pages/work/post/index');
            break;
          case 5:
            this.$tab.navigateTo('/pages/work/dict/index');
            break;
          case 6:
            this.$tab.navigateTo('/pages/work/config/index');
            break;
          case 7:
            this.$tab.navigateTo('/pages/work/loginLog/index');
            break;
          case 8:
            this.$tab.navigateTo('/pages/work/operlog/index');
            break;
          case 9:
            this.$tab.navigateTo('/pages/work/uploadDemo/index');
            break;
          case 10:
            this.$tab.navigateTo('/pages/work/beijingsubway/index');
            break;
          case 11:
            this.$tab.navigateTo('/pages/work/lines/index');
            break;
          case 12:
            this.$tab.navigateTo('/pages/work/stations/index');
            break;
          default:
            console.log("常规日期");
        }
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>