visitor/src/views/visitorRecord.vue

<template>
  <div class='box'>
    <header class="tabbar">
      <div @click="onClickTabbar(item)" v-for="item in statusTabs" class="tabbar-li" :key="item.value"
           :class="query.status === item.value ? 'active' : ''">
        {{ item.label }}
        <img v-if="query.status === item.value" src="../assets/maomaochong.png" alt="">
      </div>

    </header>
    <div v-if="recordArr.length" class="content">
      <div @click="onClickItem(item)" v-for="item in recordArr" class="wait-list" :key="item.id">
        <h5>被拜访人：{{ item.visitingName }}</h5>
        <h5>拜访时间：{{ item.hours }}</h5>
        <div class="apply-box">
          <p><span>访客姓名：</span><span>{{ item.name }}</span></p>
          <p><span>联系方式：</span><span>{{ item.phone }}</span></p>
          <p><span>随行人数：</span><span>{{ item.visitingNum }} </span></p>
          <p><span>来访事由：</span><span>{{ item.reason }}</span></p>
        </div>
        <!-- 显示完整状态 -->
        <div class="status" :class="getStatusInfo(item.status).className">{{ getStatusInfo(item.status).statusName }}</div>
      </div>
    </div>
    <div v-if="isLoading && recordArr.length === 0" class="content">
      <div class="no-have">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, computed} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useStore} from 'vuex'
import dd from 'dingtalk-jsapi'
import {Toast, ImagePreview} from 'vant';

import {rulesForm, resetForm, rulesPhone} from '@/com/index'
import {getToken, getVisitorRecord} from '@/api/admin.js'

/* @data */
const router = useRouter()
const route = useRoute()
const store = useStore()
const statusTabs = computed(() => store.state.statusTabs)
const recordArr = ref([])
const isLoading = ref(false)

// 获取状态信息
const getStatusInfo = (status) => {
  return store.getters.getStatusInfo(status)
}

const query = reactive({
  status: -1, // 默认待处理（父状态）
  size: -1,
  current: 1,
})

console.log(route)
/* @setup */

/* @method */
const onClickItem = (item) => {
  // window.location.href = item.instanceUrl
  // window.open(item.instanceUrl, '审批详情');
  // 检查instanceUrl是否存在且非空
  let instanceUrl;

  if (item.instanceUrl && item.instanceUrl.trim() !== '') {
    instanceUrl = item.instanceUrl;
  }else{
    instanceUrl = `https://aflow.dingtalk.com/dingtalk/mobile/homepage.htm?corpid=ding03f8e88dde9b426835c2f4657eb6378f&dd_share=false&showmenu=false&dd_progress=false&back=native&procInstId=${item.instanceId}&taskId=&swfrom=isv&dinghash=approval&dtaction=os&dd_from=corp#approval`;
  }
  dd.openLink({
    url: instanceUrl,
    success: () => {
    },
    fail: () => {
    },
    complete: () => {
    },
  });
}

const onClickTabbar = (item) => {
  if (query.status !== item.value) {
    query.status = item.value
    recordArr.value = []
    visitorList()
  }

}
const visitorList = () => {
  Toast.loading({duration: 0, forbidClick: true, message: '加载中',});
  getVisitorRecord(query).then(res => {
    isLoading.value = true
    recordArr.value = res.data
  }).catch(err => {
    isLoading.value = true
  })
}
visitorList()

</script>

<style lang='scss' scoped>
.box {
  background: #F9FBFC;;
  display: flex;
  flex-direction: column;

  .tabbar {
    height: 1.8933rem /* 142/75 */
  ;
    line-height: .6133rem /* 46/75 */
  ;
    display: flex;
    font-size: $md-size;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    padding: .56rem /* 42/75 */
    .4rem /* 30/75 */
    0;
    box-sizing: border-box;

    .tabbar-li {
      position: relative;
      flex: 1;
      text-align: center;

      img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: .48rem /* 36/75 */
      ;
        width: .6133rem /* 46/75 */
      ;
        height: .2667rem /* 20/75 */
      ;
      }
    }

    .active {
      font-size: $size30;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #222222;
    }
  }

  .content {
    width: 100%;
    flex: 1;
    padding: 0 .4rem /* 30/75 */
  ;
    box-sizing: border-box;
    overflow: auto;

    .wait-list {
      position: relative;
      width: 100%;
      // height: 470px;
      background: #FFFFFF;
      border-radius: .2667rem /* 20/75 */
    ;
      padding: .48rem /* 36/75 */
    ;
      box-sizing: border-box;
      margin-bottom: .2667rem /* 20/75 */
    ;

      h5 {
        height: .6667rem /* 50/75 */
      ;
        font-size: $md-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #222222;
      }

      .apply-box {

        width: 100%;
        padding: .4rem /* 30/75 */
        .3733rem /* 28/75 */
        .5067rem /* 38/75 */
      ;
        box-sizing: border-box;
        border-radius: .1333rem /* 10/75 */
      ;
        font-size: $md-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        line-height: .72rem /* 54/75 */
      ;
        background: #F5F7F9;

        span:last-child {
          color: #5F6583;
        }
      }

      .status {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.52rem /* 114/75 */
      ;
        height: .6667rem /* 50/75 */
      ;
        line-height: .6667rem /* 50/75 */
      ;
        background: #FFE9E4;
        border-radius: 0px .2667rem /* 20/75 */
        0px .1333rem /* 10/75 */
      ;
        color: #FF6643;
        font-size: $sm-size;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #FF6643;
        text-align: center;

      }

      .refuse {
        color: #5F6583;
        background: #EAEEF6;
      }

      .pass {
        color: #30BF78;
        background: #E7F8F5;
      }

      // 新增状态样式
      .wait {
        color: #E6A23C;
        background: #FFF7CC;
      }

      .cancel {
        color: #909399;
        background: #F4F4F5;
      }

      .pending {
        color: #409EFF;
        background: #ECF5FF;
      }

      .visited {
        color: #67C23A;
        background: #F0F9EB;
      }

      .overdue {
        color: #E6A23C;
        background: #FEF0F0;
      }

      .not-visited {
        color: #909399;
        background: #F4F4F5;
      }

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

      .default {
        color: #666666;
        background: #F5F5F5;
      }
    }
  }
}
</style>