feat: 报告更新

pages.config.ts

@@ -52,16 +52,7 @@ export default defineUniPages({
       },
     ],
   },
-  pages: [
+  pages: [],
-    {
-      path: 'pages/home/index/index',
-      type: 'home',
-      style: {
-        navigationBarTitleText: '六维志愿',
-        navigationStyle: 'custom',
-      },
-    },
-  ],
   preloadRule: {
     'pages/home/index/index': {
       network: 'all',

src/components/home/HotRank.vue

@@ -18,11 +18,34 @@
       hover-class="none"
       :hover-stop-propagation="false"
     >
+      <!-- 骨架屏 -->
       <view
+        v-if="isLoading"
+        v-for="(_skeleton, index) in skeletonItems"
+        :key="'skeleton-' + index"
+        :class="`hot-rank-item flex-none skeleton-item`"
+        hover-class="none"
+        :hover-stop-propagation="false"
+      >
+        <view class="skeleton-text mx-[32rpx] mt-[32rpx] h-[40rpx] w-[120rpx] rounded"></view>
+
+        <view class="flex items-center justify-left mt-[30rpx] mx-[32rpx]" v-for="i in 3" :key="i">
+          <view class="skeleton-text w-[20rpx] h-[28rpx] mr-[10rpx] rounded"></view>
+          <view class="skeleton-image w-[80rpx] h-[80rpx] rounded-full flex-none mr-[16rpx]"></view>
+          <view class="flex flex-col w-full">
+            <view class="skeleton-text h-[28rpx] w-[120rpx] rounded"></view>
+            <view class="skeleton-text h-[22rpx] w-[100rpx] mt-[10rpx] rounded"></view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 真实数据 -->
+      <view
+        v-else
         :class="`hot-rank-item flex-none`"
         hover-class="none"
         :hover-stop-propagation="false"
-        v-for="(typeWrap, index) in universityTypeRankList"
+        v-for="typeWrap in universityTypeRankList"
         :key="typeWrap.type"
         @click="toSchool(typeWrap.type)"
         v-show="typeWrap.rows.length > 0"
@@ -69,28 +92,47 @@ const toSchool = (id: string) => {
 
 const { unSortTypeList } = useUnSortType()
 let universityTypeRankList = ref([])
+const isLoading = ref(true)
+
+// 创建默认的骨架屏数据
+const skeletonItems = ref([
+  { type: 'skeleton-1', name: '综合排名', rows: [] },
+  { type: 'skeleton-2', name: '理工排名', rows: [] },
+  { type: 'skeleton-3', name: '文科排名', rows: [] },
+  { type: 'skeleton-4', name: '医科排名', rows: [] },
+])
 
 watch(
   () => unSortTypeList.value,
   (newVal) => {
-    Promise.all(
+    if (newVal && newVal.length > 0) {
-      newVal.map((item) =>
+      Promise.all(
-        getUniversityRank({
+        newVal.map((item) =>
-          Year: 2023,
+          getUniversityRank({
-          Type: item.type,
+            Year: 2023,
-          PageIndex: 1,
+            Type: item.type,
-          PageSize: 3,
+            PageIndex: 1,
-        }),
+            PageSize: 3,
-      ),
+          }),
-    ).then((res) => {
+        ),
-      res.forEach((item, index) => {
+      )
-        universityTypeRankList.value.push({
+        .then((res) => {
-          ...newVal[index],
+          universityTypeRankList.value = []
-          rows: (item.result as { rows: any[] }).rows,
+          res.forEach((item, index) => {
+            universityTypeRankList.value.push({
+              ...newVal[index],
+              rows: (item.result as { rows: any[] }).rows,
+              loaded: true,
+            })
+          })
+          isLoading.value = false
         })
-      })
+        .catch(() => {
-    })
+          isLoading.value = false
+        })
+    }
   },
+  { immediate: true },
 )
 </script>
 
@@ -156,4 +198,26 @@ watch(
 .hot-rank-outer .hot-rank-item:nth-child(5) {
   background: linear-gradient(180deg, #e5ffc4 0%, rgba(213, 255, 196, 0) 23%, #fff 100%);
 }
+
+/* 骨架屏样式 */
+.skeleton-text,
+.skeleton-image {
+  background-color: #e0e0e0;
+  animation: pulse 1.5s infinite;
+}
+
+.skeleton-item {
+  background: linear-gradient(180deg, #eaeaea 0%, #f5f5f5 23%, #fff 100%);
+}
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
 </style>

src/components/home/SubMenu.vue

@@ -6,20 +6,33 @@
       class="flex items-center justify-center flex-col"
       @click="goPath(item.path, item.isTab)"
     >
-      <image :src="item.icon" class="w-[88rpx] h-[88rpx]" mode="widthFix"></image>
+      <view class="relative w-[88rpx] h-[88rpx]">
+        <image
+          class="skeleton w-[88rpx] h-[88rpx] rounded-full absolute"
+          :class="{ hidden: item.loaded }"
+        ></image>
+        <image
+          :src="item.icon"
+          class="w-[88rpx] h-[88rpx] absolute"
+          :class="{ 'opacity-0': !item.loaded }"
+          mode="widthFix"
+          @load="handleLoad(item)"
+        ></image>
+      </view>
       <view class="text-[24rpx] text-[#303030] mt-[8rpx]">{{ item.name }}</view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-const subMenus = [
+const subMenus = ref([
   {
     id: 1,
     name: '找大学',
     path: '/pages-sub/home/college/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/college.svg',
     isTab: false,
+    loaded: false,
   },
   {
     id: 2,
@@ -27,6 +40,7 @@ const subMenus = [
     path: '/pages-sub/home/major/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/major.svg',
     isTab: false,
+    loaded: false,
   },
   // 看职业
   {
@@ -35,6 +49,7 @@ const subMenus = [
     path: '/pages-sub/home/career/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/career.svg',
     isTab: false,
+    loaded: false,
   },
   // 批次线
   {
@@ -42,6 +57,8 @@ const subMenus = [
     name: '批次线',
     path: '/pages-sub/home/line/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/line.svg',
+    isTab: false,
+    loaded: false,
   },
   // 查位次
   {
@@ -50,6 +67,7 @@ const subMenus = [
     path: '/pages-evaluation-sub/rank/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/rank.svg',
     isTab: false,
+    loaded: false,
   },
   // 查扩缩招
   {
@@ -58,6 +76,7 @@ const subMenus = [
     path: '/pages-sub/home/expand/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/expand.svg',
     isTab: false,
+    loaded: false,
   },
   // 专业测评
   {
@@ -66,6 +85,7 @@ const subMenus = [
     path: '/pages/evaluation/index/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/evaluation.svg',
     isTab: true,
+    loaded: false,
   },
   // 大学甄别
   {
@@ -74,8 +94,9 @@ const subMenus = [
     path: '/pages-sub/home/distinguish/index',
     icon: 'https://api.static.ycymedu.com/src/images/home/distinguish.svg',
     isTab: false,
+    loaded: false,
   },
-]
+])
 
 const goPath = (path: string, isTab: boolean) => {
   if (isTab) {
@@ -88,4 +109,27 @@ const goPath = (path: string, isTab: boolean) => {
     })
   }
 }
+
+const handleLoad = (item: any) => {
+  item.loaded = true
+}
 </script>
+
+<style>
+.skeleton {
+  background-color: #e0e0e0; /* 骨架屏的背景色 */
+  animation: pulse 1.5s infinite; /* 添加动画效果 */
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+</style>

src/pages-sub/home/inputScore/useRules.ts

@@ -26,7 +26,7 @@ export const useRules = (callback?: any) => {
         return
       }
       splitSubject(requireSubjectList.value, optionalSubjectList.value)
-      callback()
+      callback ? callback() : false
     }
   })
 }

src/pages.json

@@ -53,8 +53,9 @@
       "path": "pages/home/index/index",
       "type": "home",
       "style": {
-        "navigationBarTitleText": "六维志愿",
+        "navigationStyle": "custom",
-        "navigationStyle": "custom"
+        "enableShareAppMessage": true,
+        "enableShareTimeline": true
       }
     },
     {

src/pages/home/index/index.vue

@@ -1,4 +1,4 @@
-<route lang="json5" type="page">
+<route lang="json5" type="home">
 {
   style: {
     navigationStyle: 'custom',