🦄 refactor: 用户类型使用常量编码，优化代码

hookehuyr
Commit 63ce343cef00eafbe18678aacda71f3032d4d109 63ce343c 1 parent fccdaf8d
Showing 3 changed files with 57 additions and 54 deletions
src/components/DonateBar/index.vue
src/constant.js
src/views/client/chooseBook.vue
--- a/src/components/DonateBar/index.vue
View file @63ce343
+++ b/src/components/DonateBar/index.vue
View file @63ce343
@@ -2,67 +2,59 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 18:32:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-07 16:33:09
+ * @LastEditTime: 2022-06-08 21:21:09
  * @FilePath: /tswj/src/components/DonateBar/index.vue
  * @Description: 爱心助力底部固定栏
 -->
 <template>
   <div class="fix-btn">
-    <div class="text" @click="toDonate"><slot /></div>
+    <div class="text" @click="showDonate=true">
+      <slot />
     </div>
-  <donate-flower :user-type="donateType" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
+  </div>
+  <donate-flower 
+    :user-type="donateType" 
+    :show-popup="showDonate" 
+    :item="donateInfo" 
+    @on-close="showDonate=false"
+  />
 </template>
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
-//import { } from '@/utils/generateModules.js'
-//import { } from '@/utils/generateIcons.js'
-//import { } from '@/composables'
 import { DonateFlower } from '@/utils/generateModules'
 import { prepareDonateAPI } from '@/api/C/donate.js'
+import { USER_TYPE } from '@/constant'
 const $route = useRoute();
-useTitle($route.meta.title);
-
 const props = defineProps({
   donateType: {
     type: String,
     default: (value) => value,
     validator: value => {
-      return ['C', 'V', 'K'].includes(value);  // type: C | V | K， 儿童｜访客｜幼儿园
+      return [
+      USER_TYPE.CHILDREN, 
+      USER_TYPE.VISIT, 
+      USER_TYPE.KINDERGARTEN
+      ].includes(value);
     }
   }
 })
-// 捐钱-游客 type: V
+// 查询参数
-// 捐钱-幼儿园 type: K
-// 捐钱-指定儿童 type: C
-const donateInfo = ref({})
 let params = {};
-if (props.donateType === 'C') { // 助力TA
+if (props.donateType === USER_TYPE.CHILDREN) params = { perf_id: $route.query.perf_id };
-  params = { perf_id: $route.query.perf_id }
+if (props.donateType === USER_TYPE.KINDERGARTEN) params = { kg_id: $route.query.kg_id };
-} else if (props.donateType === 'K') {
+
-  params = { kg_id: $route.query.kg_id }
+const donateInfo = ref({})
-}
 onMounted(async () => {
   const { data } = await prepareDonateAPI(params);
   donateInfo.value = data;
 })
-// 弹出捐赠弹框模块
 const showDonate = ref(false);
-
-const toDonate = () => {
-  showDonate.value = true;
-}
-
-const closeDonate = (v) => {
-  showDonate.value = v;
-}
-
 </script>
 <style lang="less" scoped>
--- a/src/constant.js
View file @63ce343
+++ b/src/constant.js
View file @63ce343
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-25 18:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-02 21:14:14
+ * @LastEditTime: 2022-06-08 21:07:19
  * @FilePath: /tswj/src/constant.js
  * @Description: 
  */
@@ -17,3 +17,25 @@ export const styleColor = {
   baseColor: '#11D2B1',
   baseFontColor: '#FFFFFF'
 }
+
+/**
+ * 客户端类型
+ * @param CLIENT 家长端
+ * @param BUSINESS 老师端
+ */
+export const USER_ROLE = {
+  CLIENT: 'C',
+  BUSINESS: 'B',
+}
+
+/**
+ * 用户身份
+ * @param CHILDREN 儿童
+ * @param VISIT 访客
+ * @param KINDERGARTEN 幼儿园
+ */
+export const USER_TYPE = {
+  CHILDREN: 'C',
+  VISIT: 'V',
+  KINDERGARTEN: 'K',
+}
--- a/src/views/client/chooseBook.vue
View file @63ce343
+++ b/src/views/client/chooseBook.vue
View file @63ce343
@@ -5,24 +5,8 @@
     <div v-if="kg_id" :class="[kgInfo.multi_name ? 'height3rem' : 'height3rem', 'belong-school']">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%)">
         <van-col span="2">
-          <van-image
+          <van-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo"
-            v-if="kgInfo.logo" round width="3rem" height="3rem" lazy-load
+            style="vertical-align: text-bottom" />
-            :src="kgInfo.logo"
-            style="vertical-align: text-bottom"
-          >
-            <template #error>
-              加载失败
-            </template>
-          </van-image>
-          <van-image
-            v-else round width="3rem" height="3rem" lazy-load
-            :src="icon_logo"
-            style="vertical-align: text-bottom"
-          >
-            <template #error>
-              加载失败
-            </template>
-          </van-image>
         </van-col>
         <van-col span="22">
           <div v-if="kgInfo.multi_name" class="title">
@@ -54,13 +38,13 @@
     </div>
     <div class="book-list">
       <template v-for="(item, key) in kgInfo.book_list" :key="key">
-        <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id, kg_id })" />
+        <book-card :type="USER_ROLE.CLIENT" :item="item" @on-click="go('/client/bookDetail', { id: item.id, kg_id })" />
       </template>
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
     </div>
     <div style="height: 5rem" />
     <donate-bar :donate-type="donateType">爱心助力</donate-bar>
-    <shortcut-fixed type="C" :item="shortcutItem" />
+    <shortcut-fixed :type="USER_ROLE.CLIENT" :item="shortcutItem" />
   </div>
 </template>
@@ -71,11 +55,12 @@ import { styleObject3 } from '@/settings/designSetting.js';
 import { useBookList, useShortcutBar } from '@/composables';
 import { useGo } from '@/hooks/useGo';
 import { killPages, store } from '@/hooks/useKeepAlive';
-import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+import { Cookies } from '@/utils/generatePackage.js'
 import { DonateBar } from '@/utils/generateModules.js'
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
-const go = useGo();
+import { USER_ROLE, USER_TYPE } from '@/constant'
+const go = useGo();
 // 删除所有的 keep-alive 缓存
 killPages();
 // 清空记录位置
@@ -87,7 +72,7 @@ const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
 const userType = Cookies.get('userType')
 // 判断是访客进入还是幼儿园进入
 const donateType = computed(() => {
-  return userType === 'client' ? 'K' : 'V';
+  return userType === 'client' ? USER_TYPE.KINDERGARTEN : USER_TYPE.VISIT;
 })
 </script>
@@ -103,6 +88,7 @@ const donateType = computed(() => {
 .choose-book-page {
   .belong-school {
     padding: 1.5rem;
+
     .title {
       color: #222222;
       display: inline-block;
@@ -110,9 +96,11 @@ const donateType = computed(() => {
       margin-left: 2rem;
     }
   }
+
   .height3rem {
     height: 3rem;
   }
+
   .height6rem {
     height: 6rem;
   }
@@ -145,6 +133,7 @@ const donateType = computed(() => {
       right: 8rem;
     }
   }
+
   .fix-btn {
     position: fixed;
     bottom: 0;