itsm-wx-handle/pages/my/my.vue

<template>
  <view class="mine">
    <scroll-view scroll-y class="body">
      <view class="top">
        <view class="top_name">Hi,{{loginUserStore.loginUser.user.name}}</view>
        <view class="top_count">
          <view class="top_count_item" @click="toIncident('todoingAll', 1543)">
            <view class="name">待接单</view>
            <view class="value">{{dataInfo.todo}}</view>
          </view>
          <view class="top_count_item" @click="toIncident('todoingAll', 1544)">
            <view class="name">处理中</view>
            <view class="value">{{dataInfo.doing}}</view>
          </view>
          <view class="top_count_item" @click="toIncident('owns', 0)">
            <view class="name">与我关联</view>
            <view class="value">{{dataInfo.owns}}</view>
          </view>
          <view class="top_count_item" @click="toIncident('resolve', 0)">
            <view class="name">由我解决</view>
            <view class="value">{{dataInfo.resolve}}</view>
          </view>
        </view>
      </view>
      
      <view class="bottom">
        <view class="bottom_name">个人信息</view>
        <view class="bottom_list">
          <view class="bottom_list_item">
            <view class="name">工号</view>
            <view class="value">{{loginUserStore.loginUser.user.account}}</view>
          </view>
          <view class="bottom_list_item">
            <view class="name">手机号</view>
            <view class="value" @click="makePhoneCall(loginUserStore.loginUser.user.phone)"><uni-icons type="phone-filled" class="phone-filled" :size="18" :color="primaryColor"></uni-icons>{{loginUserStore.loginUser.user.phone}}</view>
          </view>
          <view class="bottom_list_item">
            <view class="name">部门</view>
            <view class="value">{{loginUserStore.loginUser.user.duty ? loginUserStore.loginUser.user.duty.dept : '无'}}</view>
          </view>
          <view class="bottom_list_item">
            <view class="name">工作组</view>
            <view class="value">{{(loginUserStore.loginUser.user.group && loginUserStore.loginUser.user.group.length) ? loginUserStore.loginUser.user.group.map(v => v.groupName).join('/') : '无'}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="foot_common_btns">
			<button @click="repository" type="default" class="primaryButton btn"><text class="newicon newicon-zhishiku"></text>知识库</button>
      <button @click="toBuildIncident" type="default" class="primaryButton btn"><text class="newicon newicon-xinjian2"></text>新建事件</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { onLoad, onTabItemTap } from '@dcloudio/uni-app'
  import { api_incident_count } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useMakePhoneCall } from '@/share/useMakePhoneCall.js'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { useIncidentNumStore } from '@/stores/incidentNum'
  import { repositoryListSearchStore } from '@/stores/repositorySearch'
  import { useSetTabbar } from '@/share/useSetTabbar.js'
	
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const incidentNumStore = useIncidentNumStore();
  const { makePhoneCall }  = useMakePhoneCall();
  const repositorySearchStore = repositoryListSearchStore();
  const { setTabbar }  = useSetTabbar();
	
  // 主题颜色
  const primaryColor = ref(defaultColor)
  
  // 数据
  const dataInfo = reactive({
    todo: 0,
    doing: 0,
    owns: 0,
    resolve: 0,
  })
  
  // 获取列表数量
  function getCount(){
    uni.showLoading({
      title: "加载中",
    });
    let postData = {
      incidentList: [
        {
          "queryTask": "todo",
          "assignee": loginUserStore.loginUser.user.id,
          "candidateGroups": loginUserStore.loginUser.user.group.map(v => v.id).toString()
        },
        {
          "queryTask": "doing",
          "assignee": loginUserStore.loginUser.user.id,
        },
        {
          "queryTask": "owns",
          "assignee": loginUserStore.loginUser.user.id,
          "candidateGroups": loginUserStore.loginUser.user.group.map(v => v.id).toString()
        },
        {
          "queryTask": "resolve",
          "assignee": loginUserStore.loginUser.user.id,
        },
      ],
    }
    
    api_incident_count(postData).then(res => {
      uni.hideLoading();
      if(res.state == 200){
        dataInfo.todo = res.data.todo;
        dataInfo.doing = res.data.doing;
        dataInfo.owns = res.data.owns;
        dataInfo.resolve = res.data.resolve;
      }else{
        uni.showToast({
          icon: 'none',
          title: res.msg || '请求数据失败！'
        });
      }
    })
  }
  
	// 知识库
	function repository(){
		repositorySearchStore.clearRepositoryListSearchData()
		uni.navigateTo({
		  url: `/pages/repository/repository?type=view`
		})
	}
	
  // 新建事件
  function toBuildIncident(){
    uni.navigateTo({
      url: '/pages/buildIncident/buildIncident'
    })
  }
  
  // 点击数量跳转
  function toIncident(queryTask, statusId){
    incidentNumStore.setIncidentNumData({
      queryTask,
      statusId,
    })
    uni.reLaunch({
      url: '/pages/incidentList/incidentList'
    })
  }
  
  // 初始化
  function onLoadFn(){
    getCount();
  }
  
  onLoad((option) => {
    for(let i = 0; i<5; i++){
    	setTabbar(i)
    }
    onLoadFn();
  })
  
  onTabItemTap(e => {
    onLoadFn();
  })
</script>

<style lang="scss" scoped>
page{
  height: calc(100vh - var(--window-bottom));
  background-color: #EBEBEB;
}
.mine{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .phone-filled{
    margin-right: 5rpx;
  }
  .newicon-xinjian2,
	.newicon-zhishiku{
    margin-right: 10rpx;
  }
  .body{
    width: 714rpx;
    height: 100%;
    margin: 16rpx auto var(--window-bottom) auto;
    box-sizing: border-box;
    border-radius: 8rpx;
    .top{
      padding: 30rpx;
      background-color: #fff;
      .top_name{
        font-size: 28rpx;
        font-weight: bold;
      }
      .top_count{
        margin-top: 45rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top_count_item{
          text-align: center;
          .name{
            color: #949494;
            font-size: 22rpx;
          }
          .value{
            font-size: 50rpx;
            font-weight: bold;
            margin-top: 15rpx;
          }
        }
      }
    }
    
    .bottom{
      background-color: #fff;
      margin-top: 15rpx;
      .bottom_name{
        font-size: 26rpx;
        color: $uni-primary;
        padding: 21rpx 24rpx;
      }
      .bottom_list{
        .bottom_list_item{
          border-top: 1rpx solid #DEDEDE;
          padding: 30rpx 30rpx 30rpx 47rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          .value{
            max-width: 380rpx;
            color: #555555;
            display: flex;
            align-items: center;
            text-align: justify;
          }
        }
      }
    }
  }
}
</style>