Skip to content

P
pptist
Commit 807e4736 authored by zhengke's avatar zhengke
Browse files
Options

logo 上传

parent a71da248
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 72 deletions
package.json
View file @ 807e4736
......@@ -64,6 +64,7 @@
"tippy.js": "^6.3.7",
"vue": "^3.4.21",
"vue-konva": "^3.0.2",
"vue-picture-cropper": "^0.7.0",
"vue-router": "^4.0.13",
"vue-waterfall-plugin-next": "^2.4.3",
"vue-waypoint": "^4.3.0",
......
src/views/Editor/Thumbnails/index.vue
View file @ 807e4736
......@@ -554,7 +554,7 @@ const getColorShade = async (newSlides:any) => {
let dark = false
let day = 0
// 根据集团渲染logo
if((tempDatas.value.GId!=userInfo.value.gid&&!searchData.value.isTeamManage)||userInfo.value.IsEnableLogo){
if(tempDatas.value.GId!=userInfo.value.gid&&!searchData.value.isTeamManage){
for(let j=0;j<colorList.value.length;j++){
if (getRgbLevel(colorList.value[j].Color) > 50) dark = true
}
......@@ -611,7 +611,7 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da
let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
let scale = parseInt(y.width/y.height)
let url = ''
if(userInfo.value.IsEnableLogo){
if(userInfo.value.IsEnableLogo&&userInfo.value.GroupLogoList&&userInfo.value.GroupLogoList.length>0){
let LOGOS = userInfo.value.GroupLogoList
if(scale>=1&&scale<3&&!day) url = dark==true?LOGOS[0].FilePath:LOGOS[3].FilePath
if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
......
src/views/Preview/PreviewCover.vue
View file @ 807e4736
......@@ -174,12 +174,23 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da
let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
let scale = parseInt(y.width/y.height)
let url = ''
if(scale>=1&&scale<3&&!day) url = dark==true?acquiesceLogo.value[0]:acquiesceLogo.value[3]
if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4]
if(scale>=5) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
if(scale>=3&&scale<5&&!day) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
if(scale>=3&&scale<5&&day) url = acquiesceLogo.value[2]
// if(userInfo.value.IsEnableLogo&&userInfo.value.GroupLogoList&&userInfo.value.GroupLogoList.length>0){
// let LOGOS = userInfo.value.GroupLogoList
// if(scale>=1&&scale<3&&!day) url = dark==true?LOGOS[0].FilePath:LOGOS[3].FilePath
// if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
// if(scale<1) url = dark==true?LOGOS[1].FilePath:LOGOS[4].FilePath
// if(scale>=5) url = dark==true?LOGOS[2].FilePath:LOGOS[5].FilePath
// if(scale>=3&&scale<5&&!day) url = dark==true?LOGOS[2].FilePath:LOGOS[5].FilePath
// if(scale>=3&&scale<5&&day) url = LOGOS[2].FilePath
// }else{
// }
if(scale>=1&&scale<3&&!day) url = dark==true?acquiesceLogo.value[0]:acquiesceLogo.value[3]
if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4]
if(scale>=5) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
if(scale>=3&&scale<5&&!day) url = dark==true?acquiesceLogo.value[2]:acquiesceLogo.value[5]
if(scale>=3&&scale<5&&day) url = acquiesceLogo.value[2]
let newTempSize = await FileService.getImageSizeWithoutDownloading(url)
let width = 0
let height = 0
......
src/views/TeamCenter/Layout.vue
View file @ 807e4736
......@@ -42,9 +42,10 @@
<script lang="ts" setup>
import UserCard from "@/components/User/UserCard.vue";
import { useMenuStore } from "@/store";
import { useMenuStore, useUserStore } from "@/store";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
const router = useRouter()
const useMenu = useMenuStore();
......@@ -52,6 +53,7 @@ const menus = ref(useMenu.getTeamMenu);
const activeIndex = ref('0')
const path = ref('')
path.value = router.currentRoute.value.path
const { userInfo } =storeToRefs(useUserStore())
const forwardSpace = () => router.push('/space')
if(menus.value.length==0){
router.push({
......@@ -60,7 +62,9 @@ if(menus.value.length==0){
}
watch(() => router.currentRoute.value.path, (toPath) => {
menus.value = useMenu.getTeamMenu
if(userInfo.value.isp){
menus.value = useMenu.getUserMenu.filter(x=> {return x.url!='/a/l'})
} else menus.value = useMenu.getTeamMenu
if(!menus.value) return
menus.value.forEach((x,i)=>{
if(x.url==router.currentRoute.value.path){
......
src/views/TeamCenter/LogoDisposition.vue
View file @ 807e4736
......@@ -13,7 +13,7 @@
<div class="borders-light q-pa-lg rounded q-mt-xl row" style="width:600px;">
<div class="col">
<div class="text-dark text-weight-bold">行程LOGO设置</div>
<div class="text-grey-8 f14 q-mt-md">LOGO开启后，行程可以快速使用团队/企业的专属LOGO</div>
<div class="text-grey-8 f14 q-mt-md">LOGO开启后，系统将会根据尺寸自动替换行程模版中的Logo图片</div>
</div>
<div>
<el-button type="info" class="ppt-button text-weight-bolder"
......@@ -37,9 +37,12 @@
:inactive-value="Number(0)"/>
</div>
</div>
<div class="tip q-pt-md" style="color: #8c85e6;">
注意：请按照显示的尺寸大小进行上传LOGO
</div>
</template>
<div class="column" v-loading="loading">
<div class="fz16" style="color: #564bec;">浅色LOGO</div>
<div class="fz16" style="/*color: #564bec;*/">浅色LOGO</div>
<div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==1" style="position: relative;">
......@@ -56,18 +59,18 @@
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)">
<el-dropdown-item icon="Upload">上传LOGO</el-dropdown-item>
<el-dropdown-item v-if="!item.FilePath" icon="Upload">企业LOGO</el-dropdown-item>
<el-dropdown-item v-else icon="EditPen">企业LOGO</el-dropdown-item>
</FileInput>
<!-- <el-dropdown-item icon="Delete">删除LOGO</el-dropdown-item> -->
<el-dropdown-item icon="View" @click="seeLogo(index)">默认LOGO</el-dropdown-item>
<el-dropdown-item v-if="item.FilePath" icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
<el-dropdown-item icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</div>
<div class="fz16" style="color: #564bec;">深色LOGO</div>
<div class="fz16 q-pt-lg" style="/*color: #564bec;*/">深色LOGO</div>
<div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==2" style="position: relative;">
......@@ -84,11 +87,11 @@
<template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)">
<el-dropdown-item icon="Upload">上传LOGO</el-dropdown-item>
<el-dropdown-item v-if="!item.FilePath" icon="Upload">企业LOGO</el-dropdown-item>
<el-dropdown-item v-else icon="EditPen">企业LOGO</el-dropdown-item>
</FileInput>
<!-- <el-dropdown-item icon="Delete">删除LOGO</el-dropdown-item> -->
<el-dropdown-item v-if="!item.FilePath" icon="View" @click="seeLogo(index)">查看LOGO</el-dropdown-item>
<el-dropdown-item v-if="item.FilePath" icon="View" @click="seeLogo(index,1)">查看LOGO</el-dropdown-item>
<el-dropdown-item icon="View" @click="seeLogo(index)">默认LOGO</el-dropdown-item>
<el-dropdown-item icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -108,52 +111,48 @@
:initial-index="currentImg"
:url-list="srcList"></el-image-viewer>
<el-dialog v-model="isShowModal"
:show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false">
<template #header>
<div class="row items-center">
<div class="text-dark col" style="font-size: 18px;">图片裁剪</div>
<div>
<el-button class="btn" @click="isShowModal = false">
取消
</el-button>
<!-- <el-button @click="clear">
清除
</el-button>
<el-button @click="reset">
重置
</el-button> -->
<el-button type="primary" class="ppt-button" @click="getResult">
裁剪
</el-button>
<div v-if="isShowModal" class="modal-wrap">
<div class="modal-mask"></div>
<div class="modal-scroll-view">
<div class="modal">
<div class="row items-center">
<div class="text-dark col" style="font-size: 18px;">图片裁剪</div>
<div>
<el-button class="btn" @click="isShowModal = false">
取消
</el-button>
<el-button type="primary" class="ppt-button" @click="getResult">
裁剪
</el-button>
</div>
</div>
<div class="modal-content q-pt-lg">
<VuePictureCropper
:boxStyle="{
width: '100%',
height: '100%',
backgroundColor: '#f8f8f8',
margin: 'auto',
}"
:img="pic"
:fixedNumber="[opt.width,opt.height]"
:options="{
viewMode: 1,
dragMode: 'move',
cropBoxResizable: false,
}"
:presetMode="{
mode: 'fixedSize',
width: opt.width,
height: opt.height,
}"
@ready="ready"
/>
</div>
</div>
</template>
<div class="modal-content">
<VuePictureCropper
:boxStyle="{
width: '100%',
height: '100%',
backgroundColor: '#f8f8f8',
margin: 'auto',
}"
:img="pic"
:options="{
viewMode: 1,
dragMode: 'crop',
cropBoxResizable: false,
}"
:presetMode="{
mode: 'fixedSize',
width: opt.width,
height: opt.height,
}"
@ready="ready"
/>
</div>
</el-dialog>
</div>
</template>
......@@ -213,6 +212,10 @@
const opt = reactive({
width: '',
height: '',
minWidth: '',
minHeight: '',
maxWidth: '',
minHeight: '',
})
const fileName = ref('')
const loadingInstance = ref<any>(null)
......@@ -329,19 +332,19 @@
console.log('Cropper is ready.')
}
const insertImageElement = async (files: FileList,index:number) => {
const loadingObj = ElLoading.service({
text:'正在上传图',
lock:true
})
let fileType = files[0].name.split('.')
fileName.value = fileType[0]+".png"
currentData.value = index
pic.value = URL.createObjectURL(files[0])
isShowModal.value = true
opt.width = acquiesceIMG.value[index].width
opt.height = acquiesceIMG.value[index].height
loadingObj.close()
let x = acquiesceIMG.value[index]
let newSize = await FileService.getImageSizeWithoutDownloading(pic.value)
let scale = parseInt(newSize.width/newSize.height)
if(newSize&&newSize.width&&(newSize.width<x.width&&newSize.height<x.height)){
return ElMessage.error({message:`请选择${x.FileSize}、或大于${x.FileSize}的LOGO`})
}
isShowModal.value = true
}
const uoloadFileToService = async (base64:any,index:number)=>{
if(base64.indexOf('data:image/png;base64')==-1) return
......@@ -388,6 +391,7 @@
}
}
}
getSize()
</script>
<style lang="scss" scoped>
......@@ -397,7 +401,7 @@
}
.CloudDisk-R-Box{
width: 147px;
margin-bottom: 24px;
/* margin-bottom: 24px; */
position: relative;
}
.CloudDisk-R-Box.active .CloudDisk-R-Img{
......@@ -429,7 +433,7 @@
.CloudDisk-R-Img{
width: 147px;
height: 147px;
margin-bottom: 9px;
/* margin-bottom: 9px; */
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 13px 0px #eee;
......@@ -471,5 +475,48 @@
.cloudDownTextLin{
border-bottom: 1px solid #F0F0F0;
}
.tip {
font-size: 12px;
color: #aaa;
}
.modal-wrap {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 2032
}
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(101, 108, 133, 0.8);
z-index: 0;
}
.modal-scroll-view {
position: absolute;
left: 0;
right: 0;
z-index: 2;
}
.modal {
width: 560px;
background: #fff;
border-radius: 6px;
margin: 100px auto 200px;
box-sizing: border-box;
padding: 20px;
}
.modal-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment