Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
08dd074c 1 parent fcdb0daa

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

Inline Side-by-side
Showing 8 changed files with 71 additions and 70 deletions
......@@ -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 { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'
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)
}
}
......
......@@ -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 case2 = ['home'];
const case3 = ['me'];
// const case1 = ['home', 'me', 'rank'];
// const case2 = ['home'];
// 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']
}
}
......
<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;" >
<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-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo" style="vertical-align: text-bottom;" />
</van-col>
<van-col span="22">
<p class="title">{{ kgInfo.name }}</p>
......@@ -17,21 +12,22 @@
</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>
</div>
<span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{
kgInfo.mission_target }}</span></span>
</div>
</van-col>
<van-col span="12">
<div class="text-box">
<span class="text bg-gradient">作品总数</span>
<span class="number">&nbsp;{{ kgInfo.prod_num }}</span>
</div>
</div>
</van-col>
</van-row>
<van-row>
......@@ -39,18 +35,18 @@
<div class="text-box">
<span class="text bg-gradient">捐书金额</span>
<span class="number">&nbsp;¥&nbsp;{{ kgInfo.donate_amt }}</span>
</div>
</div>
</van-col>
<van-col span="12">
<div class="text-box">
<span class="text bg-gradient">参与人数</span>
<span class="number">&nbsp;{{ kgInfo.perf_num }}</span>
</div>
</div>
</van-col>
</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,37 +54,31 @@
<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>
</van-col>
</van-col>
</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"
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="B" :item="shortcutItem"></shortcut-fixed>
<div style="height: 1rem;" />
<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);
......
<template>
<div class="top-content">
<van-image v-if="myKgInfo.logo" round width="4rem" height="4rem" :src="myKgInfo.logo" />
<van-image v-else round width="4rem" height="4rem" :src="icon_avatar" />
<van-image round width="4rem" height="4rem" :src="myKgInfo.logo ? myKgInfo.logo : icon_logo" />
<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>
<van-icon name="arrow" /></van-col>
<span v-else>
<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>
<shortcut-fixed type="B" :item="['home']"></shortcut-fixed>
<div class="exit-btn" @click="exitLogin">退出登录</div>
<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 { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { icon_logo } from '@/utils/generateIcons';
import { USER_ROLE } from '@/constant'
import { ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();
const myKgInfo = ref({});
......
......@@ -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 });
......
......@@ -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')
// 判断是访客进入还是幼儿园进入
......
<!--
* @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', {
......
......@@ -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 });
......