通行记录空页面

src/pages/notifications/index.vue

@@ -48,38 +48,11 @@ function init() {
 const onAuthErrorRefresh = () => {
   init()
 }
-// const onPullDownRefresh = () => {
-//   console.log("onPullDownRefresh")
-//   state.isRefresherTriggered = false
-// }
 function onPullDownRefresh (e) {
   console.log("onPullDownRefresh", e)
-  // state.isRefresherTriggered = false
 }
 
 
-  //
-  //
-  // const show = ref(false);
-  //
-  // const state = reactive({
-  //   msg: '欢迎使用 NutUI4.0 开发小程序',
-  //   msg2: '你成功了～',
-  //   isVisible1: false,
-  //   val: ''
-  // })
-  //
-  // const handleClick = msg => {
-  //   state.msg = msg
-  // }
-  //
-  // useDidShow(() => {
-  //   console.log("did show is run xxxxxxx.")
-  // })
-  //
-  // useLoad(() => {
-  //   console.log("use load  is run xxxxxxx.")
-  // })
 
 </script>
 
@@ -112,19 +85,37 @@ function onPullDownRefresh (e) {
     </View>
     <View class="scroll 100vh" v-else>
       <view class="scroll 100vh" v-if="!state.isPageDataLoading">
-        <Scroll-View style="height: 100vh" :scrollY="true">
-          <Notification v-for="item in state.groupedPassRecords" :item="item"/>
-
-          <view class="container pt-5 pb-3">
-            <view class="row">
-              <view class="col"/>
-              <view class="col text-center text-black-50">
-                <nut-divider> 没有更多了 </nut-divider>
+
+        <View v-if="state.groupedPassRecords.length === 0">
+
+          <View class="d-flex flex-column p-3">
+            <View class="d-flex justify-content-center p-3">
+              <Image :src="require('../index/invite.jpeg')" class="p-3" mode='heightFix' style="height: 25vh"/>
+            </View>
+            <View class="d-flex justify-content-center p-3">
+              <View class="h4 text-muted">没有最近的来访记录</View>
+            </View>
+            <View class="d-flex justify-content-center">
+              <View class="text-muted" >数字人见到访客时将会记录访客来访</View>
+            </View>
+          </View>
+
+        </View>
+        <View v-else>
+          <Scroll-View style="height: 100vh" :scrollY="true">
+            <Notification v-for="item in state.groupedPassRecords" :item="item"/>
+
+            <view class="container pt-5 pb-3">
+              <view class="row">
+                <view class="col"/>
+                <view class="col text-center text-black-50">
+                  <nut-divider> 没有更多了 </nut-divider>
+                </view>
+                <view class="col"/>
               </view>
-              <view class="col"/>
             </view>
-          </view>
-        </Scroll-View>
+          </Scroll-View>
+        </View>
       </view>
       <View v-else class="skeleton">
           <NutSkeleton v-for="_ in 10" class="pl-4 pt-4 pb-4 pr-5" height="20px" width="60vw" animated avatar avatar-size="50px" row="2"/>
@@ -134,36 +125,6 @@ function onPullDownRefresh (e) {
 
 
 
-
-<!--    <view class="p-4">-->
-<!--    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">使用电话号码登录</button>-->
-<!--    </view>-->
-
-
-    <!--  <Counter/>-->
-
-
-<!--  <nut-cell title="展示弹出层" is-link @click="show = true"></nut-cell>-->
-<!--  <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">正文</nut-popup>-->
-<!--  <View><Text>{{state.msg}}</Text></View>-->
-<!--  <nut-button type="primary" @click="handleClick(state.msg2)">点我</nut-button>-->
-<!--  <Add color="red" />-->
-<!--  <div class="alert alert-primary" role="alert">-->
-<!--    A simple primary alert—check it out!-->
-<!--  </div>-->
-<!--  <h1>Example heading <span class="badge bg-secondary">New</span></h1>-->
-<!--  <button type="button" class="btn btn-primary">-->
-<!--    Notifications <span class="badge text-bg-secondary">4</span>-->
-<!--  </button>-->
-<!--  <button type="button" class="btn btn-primary position-relative">-->
-<!--    Inbox-->
-<!--    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">-->
-<!--    99+-->
-<!--    <span class="visually-hidden">unread messages</span>-->
-<!--  </span>-->
-<!--  </button>-->
-
-<!--  </view>-->
 </template>