设置页面骨架屏

src/pages/settings/index.scss

@@ -10,5 +10,16 @@ page {
     flex: 1;
     overflow: scroll;
 }
+.skeleton-avatar .nut-skeleton-content__line {
+    visibility: hidden !important;
+    display: none !important;
+}
+.skeleton-avatar .nut-skeleton .nut-skeleton-content .avatarClass {
+    margin-right: 0 !important;
+}
+.skeleton-single-line .nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle {
+    width: 100%;
+}
+
 
 

src/pages/settings/index.vue

@@ -1,17 +1,44 @@
 <script setup>
 import './index.scss'
 import Taro from "@tarojs/taro";
-import {Route, Session} from "../../utils";
+import {Route, Session, weappAuth} from "../../utils";
 import { Router } from "tarojs-router-next";
 
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 
 const params = Router.getParams()
 const data = Router.getData()
 
+const state = reactive<{
+  isPageDataLoading: boolean,
+  isAuthError: boolean,
+}>({
+  isPageDataLoading: true,
+  isAuthError: false
+})
+
 console.log("data", data)
 const isBackendErrorShowed = ref(false)
 
+init()
+
+function init() {
+  state.isPageDataLoading = true
+  state.isAuthError = false
+  weappAuth().then(r => {
+    state.isPageDataLoading = false
+    console.log(r)
+  }).catch(e => {
+    console.log("error", e)
+    state.isPageDataLoading = false
+    state.isAuthError = true
+  })
+}
+
+const onAuthErrorRefresh = () => {
+  init()
+}
+
 const onExitLoginButtonClicked = () => {
   isBackendErrorShowed.value = false
   console.log("isBackendErrorShowed taped")
@@ -50,7 +77,32 @@ const onAboutUsClicked = () => {
   <view class="h-100 d-flex flex-column">
     <BackgroundBasic/>
     <NutNavbar title=""></NutNavbar>
-    <View class="w-100" style="overflow-x: hidden">
+
+    <View v-if="state.isAuthError">
+      <nut-empty description="连接出现问题，请稍后重试">
+        <div style="margin-top: 10px">
+          <nut-button type="default" @tap="onAuthErrorRefresh">刷新</nut-button>
+        </div>
+      </nut-empty>
+    </View>
+    <view v-else-if="state.isPageDataLoading">
+      <View class="skeleton">
+        <view class="d-flex justify-content-center skeleton-avatar">
+          <NutSkeleton class="pt-4" height="20px" animated avatar avatar-size="80px" row="0"/>
+        </view>
+        <view class="d-flex justify-content-center skeleton-single-line">
+          <nut-skeleton class="p-2" height="30px" animated row="0"></nut-skeleton>
+        </view>
+        <view class="d-flex justify-content-center skeleton-single-line">
+          <nut-skeleton class="p-1" width="150px" height="20px" animated row="0"></nut-skeleton>
+        </view>
+        <View class="p-2"></View>
+        <view class="p-3 d-flex flex-column justify-content-center skeleton-single-line">
+          <nut-skeleton  v-for="_ in 2" class="p-1" width="90vw" height="40px" animated row="0"></nut-skeleton>
+        </view>
+      </View>
+    </view>
+    <View v-else class="w-100" style="overflow-x: hidden">
       <View class="d-flex justify-content-center pt-5 pb-3">
         <NutAvatar size="large" class="overflow-hidden">
           <img :src="Session.get('staff').avatar" />