快捷访问组件传参方式调整

hookehuyr
Commit 568df7a2789a3052f2cc4a24d8d2855d5b9bd278 568df7a2 1 parent dcabf696
Showing 5 changed files with 69 additions and 65 deletions
src/composables/index.js
src/composables/useShortcutBar.js
src/views/business/index.vue
src/views/client/chooseBook.vue
src/views/client/donateCertificate.vue
--- a/src/composables/index.js
View file @568df7a
+++ b/src/composables/index.js
View file @568df7a
@@ -3,11 +3,13 @@ import { onMounted, onUnmounted } from 'vue'
 import { useVideoList } from '@/composables/useVideoList.js'
 import { useDefaultPerf } from '@/composables/useDefaultPerf.js'
 import { useBookList } from '@/composables/useBookList.js'
+import { useShortcutBar } from '@/composables/useShortcutBar.js'
 export {
   useVideoList,
   useDefaultPerf,
-  useBookList
+  useBookList,
+  useShortcutBar
 }
 /**
--- a/src/composables/useShortcutBar.js 0 → 100644
View file @568df7a
+++ b/src/composables/useShortcutBar.js 0 → 100644
View file @568df7a
+import { useRoute } from 'vue-router';
+import { ref } from 'vue';
+import { Cookies } from '@/utils/generatePackage'
+
+export const useShortcutBar = (item) => {
+  const $route = useRoute();
+  const path = $route.path;
+  const isClient = Cookies.get('userType') === 'client' ? true : false; // 判断C端入口位置，访客/客户
+  const case1 = ['home', 'me'];
+  const case2 = ['home'];
+  const case3 = ['me'];
+  const shortcutItem = ref([]);
+
+  // 配置快捷跳转条
+  if (item) {
+    shortcutItem.value = item;
+  } else {
+    if (path === '/client/chooseBook') { // 爱心捐书页面
+      if (isClient) {
+        shortcutItem.value = case1
+      } else {
+        shortcutItem.value = case3
+      }
+    }
+
+    if (path === '/client/donateCertificate') {
+      shortcutItem.value = case2
+    }
+
+    if (path === '/business/index') {
+      shortcutItem.value = case3
+    }
+  }
+
+  return {
+    shortcutItem
+  }
+}
--- a/src/views/business/index.vue
View file @568df7a
+++ b/src/views/business/index.vue
View file @568df7a
@@ -66,7 +66,7 @@
         </van-row>
       </div>
       <template v-for="(item, key) in kgInfo.book" :key="key">
-        <book-card :item="item" type="B" :user_id="kgInfo.user_id" @on-click="onClick(item)"></book-card>
+        <book-card :item="item" type="B" :user_id="kgInfo.user_id"></book-card>
       </template>
       <van-empty v-if="emptyStatus"
         class="custom-image"
@@ -75,36 +75,20 @@
       />
     </div>
     <div style="height: 1rem;"></div>
-    <shortcut-fixed type="B" :item="['me']"></shortcut-fixed>
+    <shortcut-fixed type="B" :item="shortcutItem"></shortcut-fixed>
   </div>
 </template>
 <script setup>
-import icon_avatar from '@images/que-logo@2x.png'
+import { no_image, icon_avatar, icon_book } from '@/utils/generateIcons'
-import no_image from '@images/que-shuju@2x.png'
+import { ShortcutFixed, BookCard } from '@/utils/generateModules'
-import icon_book from '@images/shu@2x.png'
+import { ref } from 'vue'
-import BookCard from '@/components/BookCard/index.vue'
-import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
-
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
+import { useShortcutBar } from '@/composables';
-const $route = useRoute();
+const { shortcutItem } = useShortcutBar(['home']); // 配置快捷跳转条
-const $router = useRouter();
-
-const items = reactive([])
-const onClick = (item) => {
-  // 调整书籍详情页
-  $router.push({
-    path: '/client/bookDetail',
-    query: {
-      id: item.id
-    }
-  });
-}
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
--- a/src/views/client/chooseBook.vue
View file @568df7a
+++ b/src/views/client/chooseBook.vue
View file @568df7a
@@ -4,10 +4,12 @@
     <div class="belong-school" v-if="kg_id">
       <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 v-if="kgInfo.logo" round width="3rem" height="3rem" lazy-load :src="kgInfo.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;">
+          <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>
@@ -23,7 +25,7 @@
         <van-row>
           <van-col span="4"></van-col>
           <van-col span="16">
-            <my-button type="custom" :custom-style="styleObject">幼儿园爱心书籍</my-button>
+            <my-button type="custom" :custom-style="styleObject3">幼儿园爱心书籍</my-button>
           </van-col>
           <van-col span="4"></van-col>
         </van-row>
@@ -32,13 +34,9 @@
     </div>
     <div class="book-list">
       <template v-for="(item, key) in kgInfo.book_list" :key="key">
-        <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
+        <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id })"></book-card>
       </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>
     <shortcut-fixed type="C" :item="shortcutItem"></shortcut-fixed>
@@ -46,17 +44,14 @@
 </template>
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { _, mainStore } from '@/utils/generatePackage'
-import { useRoute } from 'vue-router'
-
-import { Cookies, _, axios, mainStore, Toast, useTitle } from '@/utils/generatePackage'
 import { no_image, icon_avatar } from '@/utils/generateIcons'
 import { MyButton, ShortcutFixed, BookCard } from '@/utils/generateModules'
-
+import { styleObject3 } from '@/settings/designSetting.js'
-import { useBookList } from '@/composables';
+import { useBookList, useShortcutBar } from '@/composables';
 import { useGo } from '@/hooks/useGo'
+
 const go = useGo()
-const $route = useRoute();
 // 删除所有的 keep-alive 缓存
 const store = mainStore()
@@ -64,40 +59,24 @@ store.changeKeepPages();
 // 清空记录位置
 store.changeScrollTop(0);
-const { kg_id, kgInfo, emptyStatus } = useBookList($route)
+const { kg_id, kgInfo, emptyStatus } = useBookList();
-
+const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
-// 配置快捷跳转条
-const shortcutItem = ref([]);
-if (Cookies.get('userType') === 'client') {
-  shortcutItem.value = ['home', 'me']
-} else {
-  shortcutItem.value = ['me']
-}
-
-// 自定义按钮颜色样式
-const styleObject = reactive({
-  backgroundColor: '#F4675A',
-  color: '#FFFFFF',
-  borderColor: '#F4675A'
-})
-
-// 跳转书籍详情页
-const onClick = (item) => {
-  go('/client/bookDetail', { id: item.id })
-}
 </script>
 <style lang="less" scoped>
 @import url('@css/content-bg.less');
+
 :global(.custom-image .van-empty__image) {
   // margin-top: 15vh;
   width: 10rem;
   height: 10rem;
 }
+
 .choose-book-page {
   .belong-school {
     padding: 1.5rem;
     height: 3rem;
+
     .title {
       color: #222222;
       display: inline-block;
--- a/src/views/client/donateCertificate.vue
View file @568df7a
+++ b/src/views/client/donateCertificate.vue
View file @568df7a
@@ -9,16 +9,17 @@
 import DonateCert from '@/components/DonateCert/index'
 import ShortcutFixed from '@/components/ShortcutFixed/index'
-import { ref, reactive, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
-import $ from 'jquery'
 import { Toast } from 'vant';
+import { useShortcutBar } from '@/composables';
+
 const $route = useRoute();
-const $router = useRouter();
 // 配置快捷跳转条
-const shortcutItem = ref(['home']);
+// const shortcutItem = ref(['home']);
+const { shortcutItem } = useShortcutBar(['home']); // 配置快捷跳转条
 const certItem = ref('')
 // 捐款成功后，查询生成捐赠证书