dgtis-uniapp/pages/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> -->
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <image :src="avatar" class="cu-avatar lg round" mode="widthFix">
          </image>
          <view class="user-info">
            <view class="u_title">
              {{ name }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>
    <view class="grid-body">
      <uni-grid :column="3" :showBorder="false" @change="changeGrid">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-badge class="uni-badge-left-margin" :text="todoCount" absolute="rightTop" :offset="[-3, -3]"
              size="small">
              <img class="step-image"
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAJGElEQVR42u2de2wcRx3HDZRWKEB5hD6AgpN7NG0FRUSteEmUVKJIQKWqQlCglUgTKf2TVqFRQ8BSS8vd2rF9cYTSlkqpSpXYxHFjx484TZvYcUB9qbFdvxMnkSAVSiEutW9mdu/Hb+72Dt86l5s77+3t3fy+0lc+z83OjOczO7vz24drakgkEolEIpFIJBKJRCKRSCQSqWrUeAyujw2Z65sGzd2x4+Zr+PNfzYNWXFp+ttN2yzwyL/VYlahlCO5sHjB70GbzoAlKlnlxG7kt9WCFaucJuAlhHlGGnttHZFnUoxWk2HF4CMEtuAA/7YXYcesh6lmfq64OPoywWlwE73SLrIN62qdqPm7tKiH8lLEO6mkfqmnA2lJy+LZlXdTjftrzh8S3EIzwagAk68I6qef9cNx/Ba7Atfywh/BtW8OybiJQ7r1/EDYUPIUPmgx/Ho0NWrul5Wc7rcBBABuIQDkF8CEEOFXAXvvv2ID1aOxv8ElnUX/sh6vldzKPanmybtkGAlGu9f4x8V11+GIM4wMBhRhCQOZVHgTYBiJRtoCP1awI6vzOo3CDchQR88ptlAYAtoFIlG8AnFSCNAT3FVw2bqM4AE4SiXKc/bfClSpLPwQ0DUUcp+U2uP2MypJQtoWIeKyWAQirnfGLxqKDS7itSh0NA/EwEfF6+h/ityue+W8qfolpbVI7xPDbiYjH2nECvq0Wuzfvv3knfHx1Pb8taJi/DETZ48EofyYYZXtCUXYwEOX9+Hl/0ODPo3cEjfjDIcP8YWB7PNg0YD6gUodsCxHxegb4O9yaO1ZvwuaDAn72Fw5rY+wfCFigoVDfsp2zH/yZw4Y2Dn94WeSeAbAtRMTrAfAmfM4Joq5fwE8R+teaCoedzzhbwB27GGxq59BwzDEAsC1EpAzCzr8gAWztFXDXs9x16Ln8lUYG9+/hYLyanBUuEIkyaVu/2fl9D8EvPUQwOeO8XvMT+AjR8DQIAFcEImwrntB9UC74WTbYm+EIrQQ80ar6hS/jWfyQL8BnG080xRa6OFRChaLxHyH8Cz6Ev3g26P3SU/BpouWyAgbfiPCFr+FnzEcCT8zfQNTcgh9lv8UgTaIy4Gd8NlwPa4jecuFH4o9UGPjFPifPWYhi0Xu++QB2YqKCBwDg7DWOM8FKolmggg38G9iBvJLh///EkL9S00qxAmV9cTt8BjvuTFXAT88EEfYEkVXd+6Oso5rg27YCxsI6opt3ucfuqUL46UPBRDAGVxHlHLrWgBVy+VS1AyDl3xHpXFO/wX5f5fCl52ujcB3RdujGCHzC92Fet+4tMJhBxJee+G3RAb59LvB+uH6OYgMZ4UsXNDj2O5aF8c0E3tbqiLhTJ/i2h4l8ZvrnuzUcAPKq4deJfmr6f0/LARARdRT4qedr9dz75YUifkz7ARAyxGZdBwCaXWucX6H38T/C2jQeADgLCL2fKsJOOKnzAAhGFh7U/QRwQfMZIKJz+PfzWu/9KbdqOwDC9WwNDQDWo28EUD6yrf0A4IP6xgAMsU73ARCK8rf1jQFE2b00A7Bpna8BbKABwP6p7yFAPvGj+wAw+EV9ZwBD7yig/eCIqXMUcJoOATgIDLhGO/i10f9eV+mPfbl3GBDf1HAJKB/3Jvip6wHsFxoOANZF8DV9VmBNC3wWl4ALBD7jA5oFgMRvCHpWOPi9Gm3+HV3qEvApgp7tcIMmbxsNG+Y9BPySK4GHNdn7+UkCfsnDwBvVf+w3zJ8T6NxeZbCvVi38m+vgSgz9ThHoy14XaKjedT++2pUg5/Vc8MkqfPN4qDG+Wj4XT4CVHhZpqsaLPj0EV9nxNU9BbTXd9LGeoBbxWrlqCAwFo/EADoA5glrEvYIRtq2y6eOLEfEPOUEwi3/9vLxptnLP+qPicYK47MvE71fks4PBSPxunPotguhKhPCifG1uxcBf/WQ8jA3/D4FzdWn4QSjCf+V7+PiO349hg0cIWslWB8+u3QUf9fFdPoKifSW/gVRs9edxfzvcIm9xJkilv41c9rX/BoDBnyZAnh0KnvZjuJfu8vHOp/w4AOIExrvrBX6M+b9LYDyLDbzrx+v9dJ+/d/9+pst/1/zpWX8PXyrB7vXrdf8+AlTyu4d7fRsIqm2ET4WM+ACBKtU/mogPyD72dThYhirxJOXXGLA4TdBcC/6cln3q6zDwpXSjAavk5cygsXDHcrzjNev8n96woJIs27zcv1v2nezDGt318rnE0cNnE7DYmJZ05neHDxdpZ7mq+Zz1HzkHr9aQ3NHhc7CrHzs1y2dSTgPoz+cz2c61XSbdkb/Q+mWbiZxL6j8DGw9hZ1/KaRDO353pqi50u9z1w0Yi59Yh4CwEDs1iB6P7Zq08TiSdK3/uchJZPpTDqvXLNhM5F9U3C2N9p7FzM7aS7s3jPodV8y9NT4Bq/TgAxoiYy+qdhcd6TlnglnsddrVsbCsRc30lAF/oPmUxZ2d3pz2T8pLv7fR0viXb5XCuevLVL9so20rESqCeaeuZTEfbPrhMdy/TS8rENhKpUg2A01DbNWPNd02b2NEpd9k+6HBXxpZtU8lLt1fLl/wd2ybbSKRKqO5pa1vnlAlpd9nuLNC5tiu0vMX5u6dhGxEq9QCYgqs6J623DkyaIJ0Gkfnd4QMF2lmeav7OKest2TYi5IE6ZyB0YNK6+NKECRlPZjsNKCvPxKL0tB3p+ewsL7WtdVG2ich4qK4puAsBso4JAZezE5Zq/nzlvJRME3IQMdkWIlIG7Z807+sYN8X+cQGFusPh4srAurENRKKM6piCH7ePi/n2MQHS+x1udzhXeq58zvyZtHFzXtZNBPwwE4zB2n1j5sy+dwQU6vaxYmzOyDqp532k1hm4un3cfA6hJva9w+Gvo7YRcsrcYUe6nV9uuy/re9vJ70QC4T8n66Ie96naR8V3ENRQGwK7nNPAVdNlmbJs6uFKGQjjYl3bqOhoGxGsdYSDqttsJz+PCibLkGVRj1aoXpyYW7l3lK/fO8xfQKiz6ETrMIe9Dsu05HeYR+ZFr3/x9bmV1INVpuffhhV7Rvite0fE91pHzbul5WeZJr+jHiKRSCQSiUQikUgkEolEIpFI1af/ATNY/+DKfZRrAAAAAElFTkSuQmCC"
                alt="">
            </uni-badge>

            <text class="text">我的待办</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <img class="step-image"
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACFlBMVEUAAAAAAP8A//8AgP8Aqv+qqv8AgP+Av/8Amf+ZzP8qgP8ggP+fv/+Oxv8agP8Xi/8ui+iL0f8VgOoqlf8niesnif+Stu0gj/8eh/+Oxv+PwvUnif8mhPYkifYiiPciiP8hjP8oh/coj/+Pw/gjjvgiivghifgkjPkji/mRxfmQyP8kh/okjfokivqRw/qQw/okifoki/Yki/sjiPsjjfsjivsijPuQw/sljPuQwfski/cki/sli/sljPuTxPySw/wkifgjifwlivkjiPkmi/mSw/wkifojivojjPojivolivqQxPqQwvokifqRw/qSxPojivokivgki/ski/uQw/uRw/uSxPskivkjifkli/kkifkki/uRwvmRxPuTxPskivsjivkli/kjivgjivokivoki/okivoki/qQw/oki/iRw/okivokivkkivqRxPwli/kki/kkivmRwvskivkkivkkivmSwvskivmRw/skivmRw/skifkkivkkivojivokivgkivoki/oki/oji/okivoki/okivokivokifkki/kki/ojivokivkkivkkivokivkkivkkivkjifkkivkkivkkivkkivkkivkjivkkifokivokivgkivokifgkivoli/ojivokivokivokivkkivoki/ojivojivkkivkkivkkivokivkkivokivkjivkkivkki/okivmSNfP3AAAAsXRSTlMAAQECAwMEBAUFBggICQoLCwsMDA0NDhAREhkaGxweHh8gICIkJScqLCwuMTEyMzc4OTk6Ojs8PD4+QEBERUlNTlBTWFhZXV5fYGBjZWprbG1xcnd4e36BgoSGhoaGhoeJipCQlJWWlpqcnKSlpaWnqaqsr7CxsbKys7O2t7q7vr+/wcPExcbP0NDQ0dLT09fa3t/h4uPk5efo6Onp6urt7u7v8fHx9fb29/f4+Pr8/v7IYf4CAAACFElEQVRYw2NgGAWjYBQMGsCq5xMaG4cXhPlZ8hJtnn5GFTEgz55I81wrqogEIezEmGdXRTzwJ8I8ySISDKzSImygNynmVcUQNjCLJAPLxAiZx1NFGtAkZKAUiQaaEzKQU5k0IDgM8jGXqpkVscBCXYCQcRq5SzaSAtbU2OAzjjF83UaSQT4fbgPTNpIDmrhwmee+kTyQjMM87mlkGrhWBbuBjhvJBRHYDUwh28A27AaWkm3gVOwGNpBt4FLsBjYSqX1KyzxqGrjAgYGBzXct1QxcbQJWG0gtAze4Q9PsMioZGA9TPIE6BpYwM1DVhV1CMLXUCcOZ8jClJqvJM3DhImTeKiOYSoVZZKXDDkMGBoN2RAS7wRQKd5OVsCeLgwSFamH8aJg65lLysl4QtNIqgHCLmWDqEsjMy7YwB6WDeJ38MGUeG8g00BMuEbFx4ww5GMd0NbmlTQvcjwwBKwxgTMU55BdfqQgTZWEMkR5KysMcDnQlzOWUFbDV6HV4IqUldqsEigovyquAPmkkBWarqVCnTFKFyyvNpUolNVsXKi3aS6Vab7E1JIIrqVaNrnQBZelMatbLzVFJE2lY0Q+cgXVkGzgfu4HZZBvYj93AYLINLMBuoNp6cg10xtHILiDXxyw4DJSZTpZ5q41x9lN0yDFxuROerpRMAcnh2KyNv7OnFpxT10gsqC+MNBgdNhsFo2AwAAAtOPG9B304zAAAAABJRU5ErkJggg=="
              alt="">
            <text class="text">我处理的</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <img class="step-image"
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAABGlBMVEUAAAAAAP8AgP8Aqv8AgP8zmf8qgP8ggP8Xi/8qlf8iiP8gj/8cgPEdif8kif8ikP8hjPchjP8ni/cjh/gjjvgmjPkji/kiiPkijv8jjPoiifoki/sjivgjiPgki/gkifgjifwlivkkjPwkifolivwji/oljPolivojivski/skifkki/kjjPkli/kkivokivokifglivolifkli/oki/oki/kkivskivklivkki/kjivoli/ojivojifgji/gji/okivokivkkivkkivkkivkkivkkivkki/okivkkivkkivkkivgkivgkivkjivkkivokivokifkkivojivkkivkkivokivkkivojivkjivkkivkkivkki/okivmdXVYCAAAAXXRSTlMAAQIDBAUGCAsMDxASGhweHx8hJCQoLC0tMzQ5SElNTlBTVF1gZWZvdHmAhomKjI6PkqCgoaKqrK64u8HCw8PDxMjL09TW19vi4+Tq6+3v7/Dz9Pb39/r6/P39/v7dYDghAAACJElEQVRYw+2YWTMDQRSF7zDELrGMMIg1CGaQCCJ2IvYlCYlx///f8KB40Hd6breOKlU5r3Pqq5ma7nMXgJZa+ifqijuu68S7TLB6Un6hHCAiIgblgp/q+Q2tN12s4w/Vi+leTdxotoakatlRDdxwvoGhauSHFXGxTBWlqmZiKrxkCSNVSvJ5ixVkqLLIxFkeMuVZHJ6dQ7ZyNuP9tlFBueh39FBJXuT/QEVF/JlkRRVYkZ6eWAmVVZKd8AxqKCO5v1UdYDX8XudRS/nQvGroARthaZal3I9LE/NnEcRsSD6TeToJAPbykxRYozM8TXmvP58N7EiJaRJ4SFnPv55OXkqARbK+1aVAaYjXqVqYQjkQYGQvlJgigH4kEGDuKgToE8ACAwjd3itpKxDAMgcIMHZE2cpE/xLwgGAt3Ii2QOx7EsgEAvTtir6E4HL4QGi7EHyOYHIVgLAm+NzfAbcYQJVPHn9mfHKcD5x7FH1x/WPTufnOOjbcgz10yjzYvKsHM/fsq8cJhw4/4IdDdHzB4IlKfEUFLMD0nVLAQlEOtNcDtRJAF6lv4MCxcpEiy+gXcOpWvYyShf7BAgBoX33TKPR0KzIPAP37eq0I2Sy9bMyu3Go2S+bbOeMNp/mW2HjTbn6sMD/4gJVT4TFGM7AVhr1txvBofrw1P4A3YUVgfolhfs3ShEXQ56rqQFxVHWivqpqwTPvuexKO6zoJI+u+llr6C30AImnPnDDxrmkAAAAASUVORK5CYII="
              alt="">
            <text class="text">我发起的</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <view v-for="(item, index) in appList" :key="index">
      <uni-section :title="item.name" type="line"></uni-section>
      <!-- 宫格组件 -->
      <view class="grid-body">
        <uni-grid :column="4" :showBorder="false" @change="changeGrid">
          <uni-grid-item v-for="(childItem, index) in item.children" :key="index">
            <view class="grid-item-box">
              <svg-icon :id="childItem.icon" :name="childItem.icon" :width="30" :height="30"></svg-icon>
			  <!-- <svg-icon id="yingtao" name="yingtao" :width="30" :height="30"></svg-icon> -->
              <!-- <uni-icons type="person-filled" size="30"></uni-icons> -->
              <text class="text">{{ childItem.name }}</text>
            </view>
          </uni-grid-item>
          <!-- <uni-grid-item>
          <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>
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">菜单管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <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>
          <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>
          <view class="grid-item-box">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">字典管理</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <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>
          <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>
          <view class="grid-item-box">
            <uni-icons type="wallet-filled" size="30"></uni-icons>
            <text class="text">日志管理</text>
          </view>
        </uni-grid-item> -->
        </uni-grid>
      </view>
    </view>

  </view>
</template>

<script>
import { appList, getTodoCount } from "@/api/index"
export default {
  data() {
    return {
      todoCount: 0,
      name: this.$store.state.user.name,
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/banner/banner01.jpg'
      },
      {
        image: '/static/images/banner/banner02.jpg'
      },
      {
        image: '/static/images/banner/banner03.jpg'
      }
      ],
      appList: [

      ],
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar
    },
  },
  created(){
    this.getAppList();
    this.setTodoCount();
  },
  methods: {
    getAppList() {
      appList().then(res => {
        let appDataList = [];
        res.data.map((item) => {
          if (item.name == 'OA') {
          appDataList.push(item);
          }
        });
        this.appList = appDataList;
      })
    },
    //获取我的待办任务数量
    setTodoCount() {
      getTodoCount().then(response => {
        this.todoCount = response.data;
      });
    },
    handleToInfo() {
      this.$tab.switchTab('/pages/mine/index')
    },
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      this.$modal.showToast('模块建设中~')
    }
  }
}
</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;
}

.header-section {
  // margin: 15px 0px 0px 0px;
  background-color: #3c96f3;
  color: white;

  .login-tip {
    font-size: 18px;
    margin-left: 10px;
  }

  .cu-avatar {
    border: 2px solid #eaeaea;

    .icon {
      font-size: 40px;
    }
  }

  .user-info {
    margin-left: 15px;

    .u_title {
      font-size: 18px;
      line-height: 30px;
    }
  }
}

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

.step-image {
  height: 40px;
  width: 40px;
}

.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>