我的预约接口联调渲染，补充无数据ui

src/views/HomeView.vue

@@ -78,7 +78,12 @@ export default {
     },
     //跳转我的预约列表
     goMyBook() {
+      if(this.userInfo){
         this.$router.push({ name: 'MyExam' });
+      }
+      else{
+        this.getUserInfo();
+      }
     },
     testAlert() {
       lightAppJssdk.notification.alert({

src/views/myExam.vue

@@ -1,33 +1,38 @@
 <template>
-  <div class="my_exam">
+  <div class="my_exam" :style="{backgroundColor:examArr.length > 0?'#f9f9f9':'#fff'}">
+    <div class="exam_noresult" v-if="examArr.length < 1">
+      <img src="~@/assets/image/no_result.jpg"/>
+      <div class="no_title">查询无结果</div>
+      <div class="no_txt">暂无您的预约项目，请选择医院后进行预约</div>
+    </div>
     <div class="exam_box" v-for="item in examArr" :key="item.time">
-      <div class="time_box">{{ item.time }}</div>
-      <div class="pro_box" v-for="item1 in item.examData" :key="item1.name">
+      <div class="time_box">{{ doDateFormatter(item.apmTime) }}</div>
+      <div class="pro_box">
         <div class="pro_top">
           <div class="img_box">
-            <img v-if="item1.status !== 3" src="~@/assets/image/time.png" alt="" />
+            <img v-if="item.apmStatus !== 1" src="~@/assets/image/time.png" alt="" />
             <img v-else src="~@/assets/image/time_gray.png" alt="" />
           </div>
           <div class="time_box">
-            <div class="time_text">{{ item1.time }}</div>
-            <div class="date_txt">{{ item1.monment }}</div>
+            <div class="time_text">{{ doDateFormatter(item.apmTime) }}</div>
+            <div class="date_txt">{{ item.period + ' ' + item.timeFrame }}</div>
           </div>
         </div>
         <div class="pro_bottom">
           <div class="pro_left">
             <div class="img_box">
-              <img v-if="item1.status !== 3" src="~@/assets/image/pro.png" alt="" />
+              <img v-if="item.apmStatus !== 1" src="~@/assets/image/pro.png" alt="" />
               <img v-else src="~@/assets/image/pro_gray.png" alt="" />
             </div>
-            <div class="pro_name">{{ item1.name }}</div>
-            <div class="pro_pos" :class="item1.status == 1 ? 'tips' : item1.status == 3 ? 'cancel_tip' : ''">
-              {{ item1.tip }}</div>
+            <div class="pro_name">{{ item.project }}</div>
+            <div class="pro_pos" :class="item.apmStatus === 0 ? 'tips' : item.apmStatus == 1 ? 'cancel_tip' : ''">
+              {{ item.cuAddr }}</div>
           </div>
           <div class="pro_right">
-            <div class="cancel" @click="cancelRegisiter(item1)"
-              :class="item1.status == 2 ? 'finish' : item1.status == 3 ? 'cancel_item' : ''">{{
-                item1.status == 1 ?
-                  '取消预约' : item1.status == 2 ? '已完成' : item1.status == 3 ? '已取消' : ''
+            <div class="cancel" @click="cancelRegisiter(item)"
+              :class="item.apmStatus == 3 ? 'finish' : item.apmStatus == 1 ? 'cancel_item' : ''">{{
+  item.apmStatus == 1 ?
+    '已取消' : item.apmStatus == 2 ? '未报到' : item.apmStatus == 3 ? '已报到' : '取消预约'
               }}</div>
           </div>
         </div>
@@ -37,31 +42,14 @@
 </template>
 
 <script>
-import { myRecord,recordCancel } from "@/api/hospital";
+import { myRecord, recordCancel } from "@/api/hospital";
+import { dateFormat } from "@/utils/date";
 export default {
   data() {
     return {
       current: 1,
       size: 10,
-      examArr: [
-        {
-          time: '2023-02-08', examData: [
-            {
-              name: '单眼视力', monment: '上午 9:00-9:30', time: '2023-01-08', tip: '门诊楼3楼眼科门诊', status: 1
-            },
-            {
-              name: '听力', monment: '上午 9:00-9:30', time: '2023-01-08', tip: '门诊楼3楼耳科门诊', status: 2
-            }
-          ]
-        },
-        {
-          time: '2022-01-15', examData: [
-            {
-              name: '单眼视力', monment: '上午 9:00-9:30', time: '2022-01-15', tip: '门诊楼3楼眼科门诊', status: 3
-            },
-          ]
-        }
-      ],
+      examArr: [],
       userInfo: null
     }
   },
@@ -75,16 +63,23 @@ export default {
   methods: {
     //我的预约列表
     queryMyRecord() {
-      myRecord("",this.userInfo.papersnumber, this.current, this.size).then(res => {
-
+      myRecord("", this.userInfo.papersnumber, this.current, this.size).then(res => {
+        this.examArr = res.data.records;
       })
     },
+    //日期格式化
+    doDateFormatter(date) {
+      return dateFormat(new Date(date), 'yyyy-MM-dd');
+    },
     //取消预约
     cancelRegisiter(row) {
+      if(row.apmStatus !== 0) {
+        return;
+      }
       lightAppJssdk.notification.alert({
         message: "是否取消该体检项目",
         title: "提示",//可传空
-        buttonName: "收到",
+        buttonName: "确认",
         success: function (data) {
           //onSuccess将在点击button之后回调
           /*回调*/
@@ -111,6 +106,27 @@ export default {
   height: 100%;
   background: #f9f9f9;
   position: absolute;
+  .exam_noresult{
+    text-align: center;
+    padding-top: 2rem;
+    img{
+      width:2.56rem;
+      height:2.56rem;
+    }
+    .no_title{
+      color: #666;
+      font-size: 0.44rem;
+      font-weight: bold;
+      margin-bottom: 0.1rem;
+    }
+    .no_txt{
+      color: #999;
+      font-size: 0.24rem;
+      width:3rem;
+      line-height: 0.33rem;
+      margin:0 auto;
+    }
+  }
 
   .exam_box {
     background: #fff;