com.kasite.client.uniapp.patient/pagesPatient/st1/business/queue/queueList/queueList.vue

<template>
  <view class="container">
    <view class="userInfoTopFixe">
      <userInfo :userInfo="currentUser" type="card" bgClass="bgLinGra"></userInfo>
    </view>
    <view class="main_box">
      <view v-if="queueList.length == 0" class="noData">
        <noData :value="noDataValue"></noData>
      </view>
      <view
        class="container_box"
        v-if="queueList.length > 0"
        v-for="(item, index) in queueList"
        :key="index"
      >
        <view class="topTime_box border-bottom">
          <view class="time_box">
            <text>{{ item.RegisterDate }} {{ item.startTime }}</text>
          </view>
          <text class="state_box">已签到</text>
        </view>
        <view class="queueItem_box">
          <queueItem :orderInfo="item" :currentUser="currentUser"></queueItem>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useOnShow } from '@dcloudio/uni-app';
import { common } from '@/utils';
import { getQueueInfo } from '@/pagesPatient/service/queue';
import userInfo from '@/pagesPersonal/st1/components/userInfo/userInfo.vue';
import queueItem from '@/pagesPatient/st1/components/queueItem/queueItem.vue';
import noData from '@/pages/st1/components/noData/noData.vue';

const app = getApp();

const currentUser = ref<any>({});
const showNoData = ref(false);
const noDataValue = ref('暂无候诊记录');
const queueList = ref<any[]>([]);
const pageConfig = ref<any>({});

useOnShow(() => {
  let config = common.deepCopy(
    app.globalData.config.pageConfiguration.signInList_config
  );
  pageConfig.value = config;
  currentUser.value = app.globalData.currentUser;
  main();
});

const main = async () => {
  let list: any[] = [];
  let show = true;
  let queryData = {
    CardNo: currentUser.value.cardNo,
    MemberId: currentUser.value.memberId,
    CardType: currentUser.value.cardType,
    HosId: app.globalData.districtId || app.globalData.hosId,
    // 后端表示诊室名称,在此用于区分是否走星网
    ClinicRoom: pageConfig.value.signReason,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore,
    },
  };
  
  let resp = await getQueueInfo(queryData);
  if (!common.isEmpty(resp)) {
    resp.map((item: any) => {
      item.week = common.dateFormat(new Date(item.RegisterDate)).week;
    });
    list = resp;
    show = false;
  }
  
  queueList.value = list;
  showNoData.value = show;
};
</script>

<style lang="scss">
.noData {
  width: 100%;
  padding-top: 0 !important;
  position: absolute;
  top: 50%;
  margin-top: -100upx;
}

.top_menu {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: white;
  padding-bottom: 15upx;
}

.main_box {
  width: 100%;
  height: 100%;
  padding: 220upx 30upx 0 30upx;
  box-sizing: border-box;
  overflow: auto;
}

.container {
  overflow: auto;
}

.container_box {
  width: 100%;
  padding-bottom: 30upx;
  box-sizing: border-box;
  border-radius: 24upx;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 30upx;
}

.topTime_box {
  padding: 23upx;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.topTime_box text {
  width: 156upx;
  line-height: 60upx;
  font-size: 28upx;
  color: #999;
  text-align: center;
  border-radius: 60upx;
}

.time_box {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.time_box text {
  display: inline-block !important;
  width: 95% !important;
  font-size: 32upx !important;
  color: #333 !important;
  text-align: left !important;
  margin-left: 16upx !important;
}

.state_box {
  position: relative;
  z-index: 0;
}
.state_box::after {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: solid 1px #e6e6e6;
  border-radius: 66px;
  box-sizing: border-box;
}
.queueItem_box {
  padding: 0 30upx;
}

.public_dialog {
  z-index: 11;
}
</style>