OfficeApp/pages/oaHome/oaHome.vue

<template>
  <view class="oa_home" style="oaColor">
    <!-- <image class="header_bg" src="../../static/img/home/head-bg.png"></image> -->

    <view class="home_header" :class="!ApproveList.length>0?'home_header_no_data':''">
      <!-- #ifdef APP-PLUS||H5 -->
      <view style="height: var(--status-bar-height);"></view>
      <view style="height: 100rpx"></view>
      <!-- #endif -->
      <view class="my_info flex_a_c">
        <view class="">
          <u--image :showLoading="true" :src="myOaInfo.avatar||'../../static/img/public/avatar.png'" width="130.28rpx"
            height="130.28rpx" shape="circle"></u--image>
        </view>
        <view v-if="!$store.state.app.token" @click="login" class="mesg_box">
          <view class="name">
            <text class="nickname">立即登录</text>
          </view>
          <view class="duty">
            登录后可查看更多
          </view>
        </view>
        <view v-else class="mesg_box">
          <view class="name">
            <text class="nickname">姓名:{{ myOaInfo.nickname }}</text>
            <text>（{{ myOaInfo.admin_id?'超级管理员':'普通用户'}}）</text>
          </view>
          <view class="duty">
            <!-- ({{ myOaInfo.did_name }}){{myOaInfo.label_name}} -->
            电话:{{myOaInfo.account}}<br />
            公司:<text v-if="myOaInfo.company">{{ myOaInfo.company.company_name }}</text><br />
            公司类型:<text v-if="myOaInfo.company">{{ myOaInfo.company.company_type_name }}</text><br />
          </view>
        </view>
      </view>

      <!-- 占位 -->
      <view style="height: 130rpx;"></view>
      <!-- 任务状态 -->
      <!-- <view class="task_panel">
        <block v-for="(item,index) in assessData" :key="index">
          <view class="task_item">
            <view class="plan">{{ item.num }}</view>
            <view class="">{{ item.name }}</view>
          </view>
        </block>
      </view> -->

      <view class="backlog" :class="!ApproveList.length>0?'backlog_no_data':''">
        <view class="head_title flex_a_c_j_sb">
          <view class="title">公告列表</view>
          <view class="flex_a_c" @click="navTo('/subpkg/noticeList/noticeList')">更多 <view class="iconfont icon-you">
              <uni-icons type="forward"></uni-icons>
            </view>
          </view>
        </view>
        <block v-if="ApproveList.length>0">
          <view class="backlog_item flex_a_c_j_sb" v-for="(item,index) in ApproveList.slice(0,2)" :key="index"
            @click="clickNotice(item.id)">
            <view class="text">{{ item.title }}</view>
            <i class="iconfont icon-you"><uni-icons type="forward"></uni-icons></i>
          </view>
        </block>
        <view v-else class="backlog_no flex_a_c_j_sb">
          <view class="text">暂无更多消息</view>
          <i class="iconfont icon-you"><uni-icons type="forward"></uni-icons></i>
        </view>
      </view>
    </view>

    <view class="fast_track">
      <block v-for="(item,index) in oaHomeData" :key="index">
        <view class="track_item" @click="navTwo(item.url,index)">
          <u--image :showLoading="true" :src="item.icon" width="77.19rpx" height="77.19rpx"></u--image>
          <view class="title">{{ item.text }}</view>
        </view>
      </block>
    </view>

    <view class="my_task">
      <view class="task_title flex_a_c_j_sb">
        <view class="title">配送信息</view>
        <view class="flex_a_c" @click='goOrderList'>更多 <view class="iconfont icon-you">
            <uni-icons type="forward"></uni-icons>
          </view>
        </view>
      </view>

      <!-- <block v-if="myTaskList.length>0">
   		<taskCard></taskCard>
   	</block> -->
      <view v-if="orderList.length>0">
        <logistiBriefCard v-for="(item,index) in orderList" :key="index" :goodsInfo='item'>
        </logistiBriefCard>

      </view>

      <view v-else class="no_task">
        <view class="title">暂无配送信息</view>
        <view class="tips" v-if="!$store.state.app.token">登录后查看配送信息详情</view>
      </view>
      <!-- <view class="head_title flex_a_c_j_sb">
        <view class="">我的任务</view>
        <view class="flex_a_c" @click="test">更多 <view class="iconfont icon-you"></view>
        </view>
      </view>
      <block v-for="(item,index) in myTaskList" :key="index">
        <view class="task_list" @click="naviTaskDetails(item.id)">
          <view class="title flex_a_c_j_sb">
            <view class="flex_a_c">
              <view v-if="item.priority==4" class="tag">{{ item.priority_name }}</view>
              <view v-else class="tag1">{{ item.priority_name }}</view>
              <view class="text">{{ item.title }}</view>
            </view>
            <view v-if="item.flow_status==1" class="if_take take1">{{ item.flow_name }}</view>
            <view v-else-if="item.flow_status==2" class="if_take take2">{{ item.flow_name }}</view>
            <view v-else="item.flow_status==3" class="if_take take3">{{ item.flow_name }}</view>
          </view>
          <view class="describe">{{ item.content }}</view>
          <view class="task_deta flex_a_c_j_sb">
            <view class="">任务性质：{{ item.is_bug }}</view>
            <view class="">计划完成日期：{{ item.end_time }}</view>
          </view>
        </view>
      </block> -->
    </view>

    <view class="no_login" @click="login" v-if="!$store.state.app.token">
      <view class="view">
        <view class="text">登录里海OA,开启线上便捷办公</view>
        <button class="btn">立即登录</button>
      </view>
    </view>
    <!-- <tabbar></tabbar> -->
  </view>
</template>

<script>
  import {
    getList
  } from "@/api/logistics.js"
  import {
    Toast
  } from '@/libs/uniApi.js'
  import {
    oaHomeData
  } from '@/static/server/server.js'
  import {
    noticeList
  } from "@/api/notice.js"
  // import tabbar from '../components/tabbar'
  import {
    getIndexListAPI,
    getTaskListAPI,
    getMyTaskListAPI,
    getApproveListAPI,
    getUserIndexAPI
  } from '@/api/oaApi.js'
  export default {
    components: {
      // tabbar
    },
    data() {
      return {
        orderList: [],
        oaHomeData: [],
        src: 'https://cdn.uviewui.com/uview/album/1.jpg',
        assessData: [{
            num: '0',
            name: '任务'
          },
          {
            num: '0',
            name: '已完成'
          },
          {
            num: '0',
            name: '未完成'
          },
          {
            num: '0%',
            name: '完成率'
          },
        ],
        project: {},
        task: {},
        page: 1,
        myTaskList: [],
        flowState: '#47B347', // 任务状态
        priority: '', // 任务紧急度
        myOaInfo: {
          avatar: '',
          nickname: '',
          mobile: '',
          did_name: '',
          label_name: '',
        },
        ApproveList: []
      }
    },
    onReady() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#3175f9'
      })
    },
    onLoad() {},
    onShow() {
      // this.getUserIndex()
      // this.getIndexList()
      this.getApproveList()
      this.initUserInfo()
      this.showToask()
      this.initOaHomeDada()
    },
    computed: {},
    methods: {
      // test() {
      //   wx.chooseMessageFile({
      //     count: 1, //限制选择的文件数量
      //     type: 'all', //非图片和视频的文件,不选默认为all
      //     //type:'video',//视频
      //     //type:'image',//图片
      //     success(res) {
      //       const tempFilePaths = res.tempFiles
      //       console.log(res);
      //     }
      //   })
      // },
      async getOrderList() {
        let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
        console.log(id)
        let res = await getList({
          courier_id: id
          // courier_id: 167
        })
        this.orderList = res.data.data

      },
      goOrderList() {
        uni.navigateTo({
          url: "/pages/logistics/index"
        })
      },
      initUserInfo() {
        this.$store.state.app.userInfo ? this.myOaInfo = this.$store.state.app.userInfo : this.myOaInfo.avatar =
          '';
      },
      initOaHomeDada() {
        if (this.$store.state.app.userInfo.admin_id == 0) { // 如果用户不是管理员
          let arr = oaHomeData.filter(item => !item.admin); //过滤掉管理员专属页面
          this.oaHomeData = arr;
        } else {
          // this.oaHomeData = oaHomeData;
          let arr = oaHomeData.filter(item => !item.captain); //过滤掉普通用户专属页面
          this.oaHomeData = arr;
        }
        if (this.$store.state.app.userInfo?.company?.company_type_name == '平台公司') {
          this.oaHomeData = this.oaHomeData.filter(item => {
            return item.text == '人员管理' ? false : true;
          })
        }
        // 判断是否需要显示更多按钮
        if (this.oaHomeData >= 8) {
          this.oaHomeData[7] = this.oaHomeData[this.oaHomeData.length - 1];
        } else {
          this.oaHomeData.splice(this.oaHomeData.length - 1, 1)
        }
      },
      async getApproveList() {
        const res = await noticeList({
          keyword: '',
          page_no: 1,
          page_size: 2
        })
        this.ApproveList = res.data.lists
      },
      async getIndexList() {
        const {
          project,
          task
        } = await getIndexListAPI()
        console.log(task, '222');
        this.assessData[0].num = project.count
        this.assessData[1].num = project.count_ok
        this.assessData[2].num = project.count_no
        this.assessData[3].num = project.count_lv + '%'
        this.assessData[4].num = task.count
        this.assessData[5].num = task.count_ok
        this.assessData[6].num = task.count_no
        this.assessData[7].num = task.count_lv + '%'
        this.myTaskList = task.list
      },
      async getMyTask() {
        let data = {
          page: this.page,
          limit: 10
        }
        const res = getMyTaskListAPI(data)
      },
      naviTaskDetails(id) {
        uni.navigateTo({
          url: `/pages/views/task_details?id=${id}`
        })
      },
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url,
            fail() {
              uni.switchTab({
                url: url
              })
            }
          }) : Toast('暂未开放')
      },
      navTwo(url, key) {
        let role_id = this.$store.state.app?.userInfo?.admin?.role_id || null;
        var arr = [3, 6];

        if (role_id && role_id[0] == 9) {
          if (arr.indexOf(key) == -1) {
            Toast('请先成立公司后开放')
            return false
          }
        }
        this.navTo(url);
      },
      // 点击公告
      clickNotice(e) {
        uni.navigateTo({
          url: `/pages/oaNews/oaNews?id=${e}`
        })
      },
      // 判断当前是否登录,显示任务及完成率
      showToask() {
        if (!this.$store.state.app.token) {
          this.assessData = this.assessData.map(item => {
            item.num = '*';
            return item;
          })
        } else {
          // 新增接口后要替换为接口
          this.assessData = this.assessData.map(item => {
            item.num = '0';
            return item;
          })
        }
      },
      login() {
        uni.navigateTo({
          url: '/pages/oaLogin/oaLogin'
        })
      },
      async getUserIndex() {
        const res = await getUserIndexAPI()
        this.myOaInfo = res
      }
    },
    onPullDownRefresh() {
      // this.getIndexList()
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .oa_home {
    padding-bottom: 120rpx;
  }

  .header_bg {
    position: absolute;
    width: 100%;
    // z-index: -1;
  }

  .home_header {
    position: relative;
    padding: 28rpx;
    // height: 607.02rpx;
    // height: 480.02rpx;
    width: 100%;
    // background-color: $theme-oa-color;
    margin-bottom: 133.33rpx;
    background-image: url('../../static/img/home/home_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .my_info {
      .mesg_box {
        color: #fff;
        margin-left: 31.58rpx;

        .nickname {
          font-size: 32rpx;
          font-weight: 500;
          margin-right: 30rpx;
        }

        .duty {
          margin-top: 10.53rpx;
        }
      }
    }

    .task_panel {
      color: #fff;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      text-align: center;
      padding-bottom: 110rpx;

      .task_item {
        margin-top: 42.11rpx;

        .plan {
          width: 173.68rpx;
          font-size: 38.6rpx;
          margin-bottom: 21.05rpx;
        }
      }
    }

    .backlog {
      position: absolute;
      left: 50%;
      bottom: -101.75rpx;
      transform: translate(-50%);
      width: 694.74rpx;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 28.07rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 25rpx;
      font-weight: 400;

      .title {
        font-size: 32rpx;
        font-weight: 500;
      }

      &_item {
        margin-top: 19.3rpx;
        color: #666666;

        .text {
          font-size: 28.04rpx;
          white-space: nowrap;
          /* 禁止换行 */
          overflow: hidden;
          /* 溢出隐藏 */
          text-overflow: ellipsis;
          /* 使用省略号代表被截断的文本 */
          width: 580rpx;
          /* 设置元素宽度，根据需要进行调整 */

          &::before {
            content: '公告';
            display: inline-block;
            color: #FF8C1A;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #FF8C1A;
            margin-right: 14.04rpx;
          }
        }
      }

      &_no {
        margin-top: 19.3rpx;
        color: #666666;

        .text {
          font-size: 28.04rpx;
          white-space: nowrap;
          /* 禁止换行 */
          overflow: hidden;
          /* 溢出隐藏 */
          text-overflow: ellipsis;
          /* 使用省略号代表被截断的文本 */
          width: 580rpx;
          /* 设置元素宽度，根据需要进行调整 */

          &::before {
            content: none;
          }
        }
      }
    }

    .backlog_no_data {
      bottom: -70rpx;
    }
  }

  .home_header_no_data {
    margin-bottom: 93.33rpx;
  }

  .fast_track {
    width: 694rpx;
    // height: 331rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-content: space-between;
    margin: 0 auto;
    padding: 15rpx 38.6rpx;
    background-color: #fff;
    border-radius: 12px;

    .track_item {
      width: 154.39rpx;
      font-size: 24.56rpx;
      margin: 25rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        margin-top: 14.04rpx;
      }
    }
  }

  .my_task {
    width: 694.74rpx;
    margin: 0 auto;
    // margin-top: 31.58rpx;
    // background-color: #fff;
    border-radius: 12px;
    // padding: 28.07rpx;

    .no_task {
      width: 694rpx;
      height: 140rpx;
      padding: 28rpx;
      background: #FFFFFF;
      border-radius: 21rpx 21rpx 21rpx 21rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #000000CC;
        line-height: 35rpx;
      }

      .tips {
        font-size: 25rpx;
        font-weight: 400;
        color: #333333FF;
        line-height: 35rpx;
      }
    }


    .task_title {
      font-size: 25rpx;
      font-weight: 400;
      padding: 28rpx;

      .title {
        font-size: 32rpx;
        font-weight: 500;
      }
    }



    .task_list {
      height: 196.49rpx;
      border-bottom: 1px solid #CCCCCC;
      padding: 21.05rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        .tag {
          color: #F24848;
          font-size: 24.56rpx;
          padding: 0 7.02rpx;
          margin-right: 14.04rpx;
          background: #FFE4E4;
          border-radius: 4px;
        }

        .tag1 {
          color: #3274F9;
          font-size: 24.56rpx;
          padding: 0 7.02rpx;
          margin-right: 14.04rpx;
          background: #E4EDFF;
          border-radius: 4px;
        }

        .text {
          font-size: 28.07rpx;
          width: 403.51rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .if_take {
          font-size: 28.07rpx;
          text-align: center;
          line-height: 49.12rpx;
          width: 115.79rpx;
          height: 49.12rpx;
          border-radius: 100px;
        }

        .take1 {
          color: #47B347;
          background: #DFFCDF;
        }

        .take2 {
          color: #3274F9;
          background: #E4EDFF;
        }

        .take3 {
          color: #999999;
          background: #F5F5F5;
        }
      }

      .describe {
        font-size: 24.56rpx;
      }

      .task_deta {
        color: #999;
        font-size: 24.56rpx;
      }
    }
  }

  .no_login {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 112rpx;
    /* #ifdef H5 */
    height: 212rpx;
    /* #endif */
    background: rgba(#333333, 0.4);
    border-radius: 14rpx 14rpx 0rpx 0rpx;
    padding: 28rpx 28rpx;

    .view {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        font-size: 28rpx;
        font-weight: 500;
        color: #FFFFFF;
      }

      .btn {
        width: 158rpx;
        height: 60rpx;
        background: #3274F9;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>