Merge pull request #46 from j10ccc/perf-applist

chore(*): release v2.4.0

src/app.ts

@@ -15,7 +15,7 @@ dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
 const App = createApp({
-  onShow() {
+  mounted() {
     SystemService.getGeneralInfo();
     SystemService.getAppList();
     LoginByTaro();

src/components/AppList/AppListItem/index.scss

@@ -5,23 +5,27 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 4Px;
 
-  .applist-bg {
+  .icon-wrapper {
     border-radius: 0.5rem;
-    height: 120px;
-    width: 120px;
+    height: 60Px;
+    width: 60Px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
-  .label {
-    font-size: 0.75rem;
+  .iconfont {
+    color: var(--wjh-color-white);
+    font-size: 32Px;
   }
 
-  .applist-item-icon {
-    width: 100%;
-    height: 100%;
+  .label {
+    font-size: 0.75rem;
   }
 
   .disabled {
     background-color: var(--wjh-color-week);
   }
-}
+}

src/components/AppList/AppListItem/index.vue

@@ -1,11 +1,9 @@
 <template>
   <view class="applist-item" @tap="appTaped">
-    <view class="applist-bg" :style="backgroundColor">
-      <image class="applist-item-icon" :src="require('@/assets/icons/applist/' + iconUrl)" />
+    <view class="icon-wrapper" :style="backgroundColor">
+      <view :class="['iconfont', `icon-${icon}`]"> </view>
     </view>
-    <text class="label" data-test="label">
-      {{ label }}
-    </text>
+    <text class="label"> {{ label }} </text>
   </view>
 </template>
 
@@ -17,14 +15,14 @@ import "./index.scss";
 
 const props = defineProps<{
   label: string,
-  iconUrl: string,
+  icon: string,
   url: string,
   bg: string,
   require: string,
 }>();
 const { require: requireActive, bg = ref("green"), label, url } = toRefs(props);
 
-let isDisabled = ref(false);
+const isDisabled = ref(false);
 if (requireActive.value === "zf" && !serviceStore.user.isBindZF)
   isDisabled.value = true;
 if (requireActive.value === "library" && !serviceStore.user.isBindLibrary)
@@ -34,8 +32,8 @@ if (requireActive.value === "yxy" && !serviceStore.user.isBindYXY)
 
 async function appTaped() {
   if (isDisabled.value) {
-    await Taro.navigateTo({ url: "/pages/bind/index" });  //保留当前页面，跳转到url界面
-    Taro.showToast({  //显示消息提示框
+    await Taro.navigateTo({ url: "/pages/bind/index" });
+    Taro.showToast({
       icon: "none",
       title: "请绑定相关账号"
     });

src/components/AppList/index.scss

@@ -1,9 +1,13 @@
+$nav-bar-height: 49Px;
+$nav-bar-padding-top: 8Px;
+$applit-padding-top: .8rem;
+
 .applist {
   display: grid;
   justify-content: center;
   grid-template-columns: repeat(4, 25%);
   width: 90%;
   margin: 0 auto;
-  padding-bottom: 4rem;
-  padding-top: 0.8rem;
+  padding-bottom: calc($nav-bar-height + $nav-bar-padding-top + $applit-padding-top);
+  padding-top: $applit-padding-top;
 }

src/components/AppList/index.vue

@@ -1,21 +1,14 @@
 <template>
   <view class="applist" v-if="applist">
-    <app-list-item
-      v-for="(item, index) in applist"
-      :key="index"
-      :label="item.title"
-      :url="item.route"
-      :icon-url="getIconPath(item.route)"
-      :bg="item.backgroundColor"
-      :require="item.require"
-    />
+    <app-list-item v-for="(item, index) in applist" :key="index" :label="item.title" :url="item.route"
+      :icon="item.route.split('/')[2]" :bg="item.backgroundColor" :require="item.require" />
   </view>
   <card v-else> 无可用服务 </card>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import AppListItem  from "./AppListItem/index.vue";
+import AppListItem from "./AppListItem/index.vue";
 import Card from "../Card/index.vue";
 import { serviceStore } from "@/store";
 import "./index.scss";
@@ -24,9 +17,4 @@ const applist = computed(() => {
   return serviceStore.appList;
 });
 
-const getIconPath = (route: string) => {
-  const alias = route.split("/")[2];
-  return `${alias}.svg`;
-};
-
 </script>

src/components/Button/index.scss

@@ -46,7 +46,7 @@ button:after {
 }
 
 .wjh-button-disable {
-  background-color: var(--wjh-color-gray) !important;
+  background-color: var(--wjh-color-week) !important;
 }
 
 .wjh-button-shape-rounded {

src/constants/updateInfo.ts

@@ -17,7 +17,7 @@ type UpdateInfoType = {
 }
 
 export const updateInfo: UpdateInfoType = {
-  version: "2.3.0",
+  version: "2.4.0",
   title: "微精弘更新公告",
   content: `微精弘小程序更新[电费查询]，注册绑定一卡通以体验！
   > 更新内容

src/pages/bind/YXY/index.vue

@@ -96,6 +96,15 @@ const handleLoginYXY = () => {
   }
 };
 
+const handleClickTutorial = () => {
+  store.commit("setTempUrl", {
+    url: "https://mp.weixin.qq.com/s/uFdF37XSznzPMOe_IfjrEQ"
+  });
+  Taro.navigateTo({
+    url: "/pages/webview/index"
+  });
+};
+
 onMounted(() => {
   getGraphAPI();
 });
@@ -148,7 +157,7 @@ onMounted(() => {
         <text style="color: var(--wjh-color-red); font-size: .9rem;">
           tips:验证码获取存在一定的不稳定性，如果无法获取成功，请再不同时间段进行尝试
         </text>
-        <text style="color: var(--wjh-color-blue); font-size: .9rem;">
+        <text style="color: var(--wjh-color-blue); font-size: .9rem;" @tap="handleClickTutorial">
           🔗 如何绑定
         </text>
         <w-button block @tap="handleLoginYXY">确认绑定</w-button>

src/pages/score/index.scss

@@ -46,14 +46,17 @@
 .score-icon-wrapper {
   border-radius: 8Px;
   background-color: var(--wjh-color-primary);
-
   width: 50Px;
   height: 50Px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .score-icon {
-    width: 100%;
-    height: 100%;
+  .iconfont {
+    font-size: 1.8rem;
+    color: var(--wjh-color-white);
   }
+
 }
 
 .score-list-collapse {
@@ -71,7 +74,7 @@
     flex: auto;
   }
 
-  .score-list-collapse-extra {
+  .score-list-collapse-item-extra {
     flex: 0 0 10%;
   }