🎈 perf: 角色判断使用常量，快捷访问传参优化

hookehuyr
Commit 08dd074c57c4b34ff5b83331a9683c864d5fd751 08dd074c 1 parent fcdb0daa
Showing 8 changed files with 66 additions and 65 deletions
src/components/BookCard/index.vue
src/composables/useShortcutBar.js
src/views/business/index.vue
src/views/business/me.vue
src/views/client/bookDetail.vue
src/views/client/chooseBook.vue
src/views/client/donateCertificate.vue
src/views/client/finishUpload.vue
--- a/src/components/BookCard/index.vue
View file @08dd074
+++ b/src/components/BookCard/index.vue
View file @08dd074
@@ -3,18 +3,18 @@
     <van-row>
       <van-col span="8">
         <van-image width="7rem" height="7rem" :src="item.cover" fit="contain" lazy-load style="text-align: center;">
-          <template #:loading>
+          <template #loading>
             <van-loading type="spinner" size="20" />
           </template>
         </van-image>
       </van-col>
       <van-col class="wrapper" span="16">
         <p class="title van-multi-ellipsis--l2">{{ item.name }}</p>
-        <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">{{ item.note }}</div>
+        <div v-if="type === USER_ROLE.CLIENT" class="van-multi-ellipsis--l2 content">{{ item.note }}</div>
         <div class="sub">
           <van-icon :name="icon_video" />&nbsp;&nbsp;<span>{{ item.prod_num }}个作品</span>
         </div>
-        <div v-if="type === 'B'" class="upload" @click="onUpload(item)">上传视频</div>
+        <div v-if="type === USER_ROLE.BUSINESS" class="upload" @click="onUpload(item)">上传视频</div>
       </van-col>
     </van-row>
   </div>
@@ -29,10 +29,10 @@
 <script setup>
 import icon_video from '@images/video.png'
-import { ref, reactive, onMounted } from 'vue'
+import { ref } from 'vue'
-import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
+import { onBeforeRouteLeave } from 'vue-router'
-import { JSJ_FORM_B } from '@/constant'
+import { JSJ_FORM_B, USER_ROLE } from '@/constant'
 const props = defineProps({
   item: Object,
@@ -41,7 +41,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['on-click']);
 const handle = () => {
-  if (props.type === 'C') { // 类型是客户端时，才能查看
+  if (props.type === USER_ROLE.CLIENT) { // 类型是客户端时，才能查看
     emit('on-click', props.item)
   }
 }
--- a/src/composables/useShortcutBar.js
View file @08dd074
+++ b/src/composables/useShortcutBar.js
View file @08dd074
@@ -6,9 +6,9 @@ export const useShortcutBar = (item) => {
   const $route = useRoute();
   const path = $route.path;
   const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置，访客/客户
-  const case1 = ['home', 'me', 'rank'];
+  // const case1 = ['home', 'me', 'rank'];
-  const case2 = ['home'];
+  // const case2 = ['home'];
-  const case3 = ['me'];
+  // const case3 = ['me'];
   const shortcutItem = ref([]);
   // 配置快捷跳转条
@@ -17,18 +17,18 @@ export const useShortcutBar = (item) => {
   } else {
     if (path === '/client/chooseBook') { // 爱心捐书页面
       if (isClient) {
-        shortcutItem.value = case1
+        shortcutItem.value = ['home', 'me', 'rank']
       } else {
-        shortcutItem.value = case3
+        shortcutItem.value = ['me']
       }
     }
     if (path === '/client/donateCertificate') {
-      shortcutItem.value = case2
+      shortcutItem.value = ['home']
     }
     if (path === '/business/index') {
-      shortcutItem.value = case3
+      shortcutItem.value = ['me']
     }
   }
--- a/src/views/business/index.vue
View file @08dd074
+++ b/src/views/business/index.vue
View file @08dd074
 <template>
   <div class="all-book-page content-bg">
-    <div class="modify-top"></div>
+    <div class="modify-top" />
     <div class="belong-school">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
         <van-col span="2">
-          <van-image v-if="kgInfo.logo" round width="3rem" height="3rem" lazy-load :src="kgInfo.logo" style="vertical-align: text-bottom;" >
+          <van-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo" style="vertical-align: text-bottom;" />
-            <template v-slot:error>加载失败</template>
-          </van-image>
-          <van-image v-else round width="3rem" height="3rem" lazy-load :src="icon_avatar" style="vertical-align: text-bottom;" >
-            <template v-slot:error>加载失败</template>
-          </van-image>
         </van-col>
         <van-col span="22">
           <p class="title">{{ kgInfo.name }}</p>
@@ -17,14 +12,15 @@
       </van-row>
     </div>
     <div class="summary">
-      <div class="ding left"></div>
+      <div class="ding left" />
       <div class="wrapper">
         <div class="content-box">
           <van-row class="van-hairline--bottom">
             <van-col span="12" class="van-hairline--right">
               <div class="text-box">
                 <span class="text bg-gradient">视频上传</span>
-                <span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{ kgInfo.mission_target }}</span></span>
+                <span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{
+                kgInfo.mission_target }}</span></span>
               </div>
             </van-col>
             <van-col span="12">
@@ -50,7 +46,7 @@
           </van-row>
         </div>
       </div>
-      <div class="ding right"></div>
+      <div class="ding right" />
     </div>
     <div class="book-list">
       <div class="header van-hairline--bottom">
@@ -58,7 +54,7 @@
           <van-col span="8" class="left">
             <span class="text bg-gradient">所有书籍</span>
           </van-col>
-          <van-col span="8"></van-col>
+          <van-col span="8" />
           <van-col span="8" class="right">
             <van-icon :name="icon_book" size="0.8rem" style="vertical-align: middle;" />
             &nbsp;<span style="vertical-align: middle;">共 {{ kgInfo.book_num }} 种</span>
@@ -66,29 +62,23 @@
         </van-row>
       </div>
       <template v-for="(item, key) in kgInfo.book" :key="key">
-        <book-card :item="item" type="B" :user_id="kgInfo.user_id"></book-card>
+        <book-card :item="item" :type="USER_ROLE.BUSINESS" :user_id="kgInfo.user_id" />
       </template>
-      <van-empty v-if="emptyStatus"
+      <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍" />
-        class="custom-image"
-        :image="no_image"
-        description="暂无书籍"
-      />
     </div>
-    <div style="height: 1rem;"></div>
+    <div style="height: 1rem;" />
-    <shortcut-fixed type="B" :item="shortcutItem"></shortcut-fixed>
+    <shortcut-fixed :type="USER_ROLE.BUSINESS" :item="['me']" />
   </div>
 </template>
 <script setup>
-import { no_image, icon_avatar, icon_book } from '@/utils/generateIcons'
+import { no_image, icon_logo, icon_book } from '@/utils/generateIcons'
 import { ShortcutFixed, BookCard } from '@/utils/generateModules'
+import { USER_ROLE } from '@/constant'
 import { ref } from 'vue'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
-import { useShortcutBar } from '@/composables';
-
-const { shortcutItem } = useShortcutBar(['me']); // 配置快捷跳转条
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
--- a/src/views/business/me.vue
View file @08dd074
+++ b/src/views/business/me.vue
View file @08dd074
 <template>
   <div class="top-content">
-    <van-image v-if="myKgInfo.logo" round width="4rem" height="4rem" :src="myKgInfo.logo" />
+    <van-image round width="4rem" height="4rem" :src="myKgInfo.logo ? myKgInfo.logo : icon_logo" />
-    <van-image v-else round width="4rem" height="4rem" :src="icon_avatar" />
     <p style="margin-top: 1rem; font-size: 1.05rem; font-weight: bold;">{{ myKgInfo.name }}</p>
   </div>
   <template v-for="(item, key) in itemList" :key="key">
@@ -10,24 +9,26 @@
         <van-col span="12">{{ item.name }}</van-col>
         <van-col span="12" style="text-align: right; color: #777777;">
           <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
-          <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span>
+          <span v-else>
-        <van-icon name="arrow" /></van-col>
+            <van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;
+          </span>
+          <van-icon name="arrow" />
+        </van-col>
       </van-row>
     </div>
   </template>
-  <div @click="exitLogin" class="exit-btn">退出登录</div>
+  <div class="exit-btn" @click="exitLogin">退出登录</div>
-  <shortcut-fixed type="B" :item="['home']"></shortcut-fixed>
+  <shortcut-fixed :type="USER_ROLE.BUSINESS" :item="['home']" />
 </template>
 <script setup>
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
-import icon_avatar from '@images/que-logo@2x.png'
+import { icon_logo } from '@/utils/generateIcons';
-
+import { USER_ROLE } from '@/constant'
-import { ref, reactive, onMounted } from 'vue'
+import { ref} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
-const $route = useRoute();
 const $router = useRouter();
 const myKgInfo = ref({});
--- a/src/views/client/bookDetail.vue
View file @08dd074
+++ b/src/views/client/bookDetail.vue
View file @08dd074
@@ -97,7 +97,7 @@
         <my-button type="primary" @on-click="toDonate">爱心助力</my-button>
       </div>
     </div>
-    <shortcut-fixed type="C" :item="shortcutItem" />
+    <shortcut-fixed :type="USER_ROLE.CLIENT" :item="['home', 'me']" />
   </div>
   <!-- 上传时，如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
@@ -123,11 +123,11 @@ import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/
 import { MyButton, VideoCard, NoticeOverlay, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
 import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
 import { JSJ_FORM_C } from '@/constant'
-import { useVideoList, useDefaultPerf, useShortcutBar, useScrollTop } from '@/composables';
+import { useVideoList, useDefaultPerf, useScrollTop } from '@/composables';
 import { addSubscribeAPI } from '@/api/C/book.js'
 import { prepareDonateAPI } from '@/api/C/donate.js'
+import { USER_ROLE, USER_TYPE } from '@/constant'
-const { shortcutItem } = useShortcutBar(['home', 'me']); // 配置快捷跳转条
 const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
 resetScrollTop('scrollTop');
@@ -141,7 +141,7 @@ const donateInfo = ref({})
 const userType = Cookies.get('userType')
 // 判断是访客进入还是幼儿园进入
 const donateType = computed(() => {
-  return userType === 'client' ? 'K' : 'V';
+  return userType === 'client' ? USER_TYPE.KINDERGARTEN : USER_TYPE.VISIT;
 })
 onMounted(async () => {
   const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });
--- a/src/views/client/chooseBook.vue
View file @08dd074
+++ b/src/views/client/chooseBook.vue
View file @08dd074
@@ -52,12 +52,12 @@
 import { no_image, icon_logo } from '@/utils/generateIcons';
 import { MyButton, ShortcutFixed, BookCard } from '@/utils/generateModules';
 import { styleObject3 } from '@/settings/designSetting.js';
-import { useBookList, useShortcutBar } from '@/composables';
+import { useBookList } from '@/composables';
 import { useGo } from '@/hooks/useGo';
 import { killPages, store } from '@/hooks/useKeepAlive';
 import { Cookies } from '@/utils/generatePackage.js'
 import { DonateBar } from '@/utils/generateModules.js'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { USER_ROLE, USER_TYPE } from '@/constant'
 const go = useGo();
@@ -67,7 +67,14 @@ killPages();
 store.changeScrollTop(0);
 const { kg_id, kgInfo, emptyStatus } = useBookList();
-const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
+// 配置快捷访问
+const shortcutItem = ref([])
+const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置，访客/客户
+if (isClient) {
+  shortcutItem.value = ['home', 'me', 'rank']
+} else {
+  shortcutItem.value = ['me']
+}
 const userType = Cookies.get('userType')
 // 判断是访客进入还是幼儿园进入
--- a/src/views/client/donateCertificate.vue
View file @08dd074
+++ b/src/views/client/donateCertificate.vue
View file @08dd074
+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-04-27 10:23:05
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-09 01:38:37
+ * @FilePath: /tswj/src/views/client/donateCertificate.vue
+ * @Description: 捐赠成功后显示证书页面
+-->
 <template>
   <div class="donate-certificate-page content-bg">
     <donate-cert :item="certItem" />
   </div>
-  <shortcut-fixed type="C" :item="shortcutItem" />
+  <shortcut-fixed :type="USER_ROLE.CLIENT" :item="['home']" />
 </template>
 <script setup>
 import DonateCert from '@/components/DonateCert/index'
 import ShortcutFixed from '@/components/ShortcutFixed/index'
-
+import { USER_ROLE } from '@/constant'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
-import { useShortcutBar } from '@/composables';
 const $route = useRoute();
-// 配置快捷跳转条
-// const shortcutItem = ref(['home']);
-const { shortcutItem } = useShortcutBar(['home']); // 配置快捷跳转条
-
 const certItem = ref('')
 // 捐款成功后，查询生成捐赠证书
 axios.get('/srv/?a=one_cert', {
--- a/src/views/client/finishUpload.vue
View file @08dd074
+++ b/src/views/client/finishUpload.vue
View file @08dd074
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-04-26 16:06:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-07 14:04:30
+ * @LastEditTime: 2022-06-09 01:52:33
  * @FilePath: /tswj/src/views/client/finishUpload.vue
  * @Description: 作品上传成功提示页面
 -->
@@ -31,7 +31,7 @@
 <script setup>
 import icon_success from '@images/que-sucess@2x.png'
-
+import { USER_TYPE } from '@/constant'
 import MyButton from '@/components/MyButton/index.vue'
 import DonateFlower from '@/components/DonateFlower/index.vue'
@@ -57,7 +57,7 @@ const donateInfo = ref({})
 const userType = Cookies.get('userType')
 // 判断是访客进入还是幼儿园进入
 const donateType = computed(() => {
-  return userType === 'client' ? 'K' : 'V';
+  return userType === 'client' ? USER_TYPE.KINDERGARTEN : USER_TYPE.VISIT;
 })
 onMounted(async () => {
   const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });