hookehuyr

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

......@@ -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
}
/**
......
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
}
}
......@@ -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 from '@images/que-shuju@2x.png'
import { no_image, icon_avatar, icon_book } from '@/utils/generateIcons'
import { ShortcutFixed, BookCard } from '@/utils/generateModules'
import icon_book from '@images/shu@2x.png'
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 { ref } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import { useShortcutBar } from '@/composables';
const $route = useRoute();
const $router = useRouter();
const items = reactive([])
const onClick = (item) => {
// 调整书籍详情页
$router.push({
path: '/client/bookDetail',
query: {
id: item.id
}
});
}
const { shortcutItem } = useShortcutBar(['home']); // 配置快捷跳转条
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);
......
......@@ -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"
class="custom-image"
:image="no_image"
description="暂无书籍信息"
/>
<van-empty v-if="emptyStatus" 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 { useRoute } from 'vue-router'
import { Cookies, _, axios, mainStore, Toast, useTitle } from '@/utils/generatePackage'
import { _, mainStore } from '@/utils/generatePackage'
import { no_image, icon_avatar } from '@/utils/generateIcons'
import { MyButton, ShortcutFixed, BookCard } from '@/utils/generateModules'
import { useBookList } from '@/composables';
import { styleObject3 } from '@/settings/designSetting.js'
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 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 })
}
const { kg_id, kgInfo, emptyStatus } = useBookList();
const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
</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;
......
......@@ -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('')
// 捐款成功后,查询生成捐赠证书
......