hookehuyr

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

......@@ -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
params = { perf_id: $route.query.perf_id }
} else if (props.donateType === 'K') {
params = { kg_id: $route.query.kg_id }
}
if (props.donateType === USER_TYPE.CHILDREN) params = { perf_id: $route.query.perf_id };
if (props.donateType === USER_TYPE.KINDERGARTEN) 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>
......
......@@ -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',
}
......
......@@ -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
v-if="kgInfo.logo" round width="3rem" height="3rem" lazy-load
: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-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">
<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'
const go = useGo();
import { computed } from 'vue'
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;
......