Skip to content

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

logo 上传

parent a71da248
Show whitespace changes
Inline Side-by-side
Showing with 135 additions and 72 deletions
package.json
View file @ 807e4736
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
"tippy.js": "^6.3.7", "tippy.js": "^6.3.7",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-konva": "^3.0.2", "vue-konva": "^3.0.2",
"vue-picture-cropper": "^0.7.0",
"vue-router": "^4.0.13", "vue-router": "^4.0.13",
"vue-waterfall-plugin-next": "^2.4.3", "vue-waterfall-plugin-next": "^2.4.3",
"vue-waypoint": "^4.3.0", "vue-waypoint": "^4.3.0",
......
src/views/Editor/Thumbnails/index.vue
View file @ 807e4736
...@@ -554,7 +554,7 @@ const getColorShade = async (newSlides:any) => { ...@@ -554,7 +554,7 @@ const getColorShade = async (newSlides:any) => {
let dark = false let dark = false
let day = 0 let day = 0
// 根据集团渲染logo // 根据集团渲染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++){ for(let j=0;j<colorList.value.length;j++){
if (getRgbLevel(colorList.value[j].Color) > 50) dark = true if (getRgbLevel(colorList.value[j].Color) > 50) dark = true
} }
...@@ -611,7 +611,7 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da ...@@ -611,7 +611,7 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da
let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src) let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
let scale = parseInt(y.width/y.height) let scale = parseInt(y.width/y.height)
let url = '' let url = ''
if(userInfo.value.IsEnableLogo){ if(userInfo.value.IsEnableLogo&&userInfo.value.GroupLogoList&&userInfo.value.GroupLogoList.length>0){
let LOGOS = userInfo.value.GroupLogoList 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 = dark==true?LOGOS[0].FilePath:LOGOS[3].FilePath
if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6] if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
......
src/views/Preview/PreviewCover.vue
View file @ 807e4736
...@@ -174,6 +174,17 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da ...@@ -174,6 +174,17 @@ const ResolveTripLogoHandler = async (items:any, slideIndex:number,dark:false,da
let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src) let tempSize = await FileService.getImageSizeWithoutDownloading(templateObj[i].src)
let scale = parseInt(y.width/y.height) let scale = parseInt(y.width/y.height)
let url = '' let url = ''
// 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 = dark==true?acquiesceLogo.value[0]:acquiesceLogo.value[3]
if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6] if(scale>=1&&scale<3&&day) url = acquiesceLogo.value[6]
if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4] if(scale<1) url = dark==true?acquiesceLogo.value[1]:acquiesceLogo.value[4]
......
src/views/TeamCenter/Layout.vue
View file @ 807e4736
...@@ -42,9 +42,10 @@ ...@@ -42,9 +42,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import UserCard from "@/components/User/UserCard.vue"; import UserCard from "@/components/User/UserCard.vue";
import { useMenuStore } from "@/store"; import { useMenuStore, useUserStore } from "@/store";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
const router = useRouter() const router = useRouter()
const useMenu = useMenuStore(); const useMenu = useMenuStore();
...@@ -52,6 +53,7 @@ const menus = ref(useMenu.getTeamMenu); ...@@ -52,6 +53,7 @@ const menus = ref(useMenu.getTeamMenu);
const activeIndex = ref('0') const activeIndex = ref('0')
const path = ref('') const path = ref('')
path.value = router.currentRoute.value.path path.value = router.currentRoute.value.path
const { userInfo } =storeToRefs(useUserStore())
const forwardSpace = () => router.push('/space') const forwardSpace = () => router.push('/space')
if(menus.value.length==0){ if(menus.value.length==0){
router.push({ router.push({
...@@ -60,7 +62,9 @@ if(menus.value.length==0){ ...@@ -60,7 +62,9 @@ if(menus.value.length==0){
} }
watch(() => router.currentRoute.value.path, (toPath) => { 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 if(!menus.value) return
menus.value.forEach((x,i)=>{ menus.value.forEach((x,i)=>{
if(x.url==router.currentRoute.value.path){ if(x.url==router.currentRoute.value.path){
......
src/views/TeamCenter/LogoDisposition.vue
View file @ 807e4736
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="borders-light q-pa-lg rounded q-mt-xl row" style="width:600px;"> <div class="borders-light q-pa-lg rounded q-mt-xl row" style="width:600px;">
<div class="col"> <div class="col">
<div class="text-dark text-weight-bold">行程LOGO设置</div> <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>
<div> <div>
<el-button type="info" class="ppt-button text-weight-bolder" <el-button type="info" class="ppt-button text-weight-bolder"
...@@ -37,9 +37,12 @@ ...@@ -37,9 +37,12 @@
:inactive-value="Number(0)"/> :inactive-value="Number(0)"/>
</div> </div>
</div> </div>
<div class="tip q-pt-md" style="color: #8c85e6;">
注意：请按照显示的尺寸大小进行上传LOGO
</div>
</template> </template>
<div class="column" v-loading="loading"> <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"> <div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG"> <template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==1" style="position: relative;"> <div v-if="item.FileType==1" style="position: relative;">
...@@ -56,18 +59,18 @@ ...@@ -56,18 +59,18 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft"> <el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)"> <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> </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 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> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
</div> </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"> <div class="CloudDisk-R-Center row flex-between">
<template v-for="(item,index) in acquiesceIMG"> <template v-for="(item,index) in acquiesceIMG">
<div v-if="item.FileType==2" style="position: relative;"> <div v-if="item.FileType==2" style="position: relative;">
...@@ -84,11 +87,11 @@ ...@@ -84,11 +87,11 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="q-pa-md microsoft"> <el-dropdown-menu class="q-pa-md microsoft">
<FileInput @change="files => insertImageElement(files,index)"> <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> </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)">查看LOGO</el-dropdown-item> <el-dropdown-item icon="View" @click="seeLogo(index,1)">企业LOGO</el-dropdown-item>
<el-dropdown-item v-if="item.FilePath" icon="View" @click="seeLogo(index,1)">查看LOGO</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
...@@ -108,30 +111,22 @@ ...@@ -108,30 +111,22 @@
:initial-index="currentImg" :initial-index="currentImg"
:url-list="srcList"></el-image-viewer> :url-list="srcList"></el-image-viewer>
<el-dialog v-model="isShowModal" <div v-if="isShowModal" class="modal-wrap">
:show-close="false" <div class="modal-mask"></div>
:close-on-click-modal="false" :close-on-press-escape="false"> <div class="modal-scroll-view">
<template #header> <div class="modal">
<div class="row items-center"> <div class="row items-center">
<div class="text-dark col" style="font-size: 18px;">图片裁剪</div> <div class="text-dark col" style="font-size: 18px;">图片裁剪</div>
<div> <div>
<el-button class="btn" @click="isShowModal = false"> <el-button class="btn" @click="isShowModal = false">
取消 取消
</el-button> </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 type="primary" class="ppt-button" @click="getResult">
裁剪 裁剪
</el-button> </el-button>
</div> </div>
</div> </div>
</template> <div class="modal-content q-pt-lg">
<div class="modal-content">
<VuePictureCropper <VuePictureCropper
:boxStyle="{ :boxStyle="{
width: '100%', width: '100%',
...@@ -140,9 +135,10 @@ ...@@ -140,9 +135,10 @@
margin: 'auto', margin: 'auto',
}" }"
:img="pic" :img="pic"
:fixedNumber="[opt.width,opt.height]"
:options="{ :options="{
viewMode: 1, viewMode: 1,
dragMode: 'crop', dragMode: 'move',
cropBoxResizable: false, cropBoxResizable: false,
}" }"
:presetMode="{ :presetMode="{
...@@ -153,7 +149,10 @@ ...@@ -153,7 +149,10 @@
@ready="ready" @ready="ready"
/> />
</div> </div>
</el-dialog> </div>
</div>
</div>
</template> </template>
...@@ -213,6 +212,10 @@ ...@@ -213,6 +212,10 @@
const opt = reactive({ const opt = reactive({
width: '', width: '',
height: '', height: '',
minWidth: '',
minHeight: '',
maxWidth: '',
minHeight: '',
}) })
const fileName = ref('') const fileName = ref('')
const loadingInstance = ref<any>(null) const loadingInstance = ref<any>(null)
...@@ -329,19 +332,19 @@ ...@@ -329,19 +332,19 @@
console.log('Cropper is ready.') console.log('Cropper is ready.')
} }
const insertImageElement = async (files: FileList,index:number) => { const insertImageElement = async (files: FileList,index:number) => {
const loadingObj = ElLoading.service({
text:'正在上传图',
lock:true
})
let fileType = files[0].name.split('.') let fileType = files[0].name.split('.')
fileName.value = fileType[0]+".png" fileName.value = fileType[0]+".png"
currentData.value = index currentData.value = index
pic.value = URL.createObjectURL(files[0]) pic.value = URL.createObjectURL(files[0])
isShowModal.value = true
opt.width = acquiesceIMG.value[index].width opt.width = acquiesceIMG.value[index].width
opt.height = acquiesceIMG.value[index].height 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)=>{ const uoloadFileToService = async (base64:any,index:number)=>{
if(base64.indexOf('data:image/png;base64')==-1) return if(base64.indexOf('data:image/png;base64')==-1) return
...@@ -388,6 +391,7 @@ ...@@ -388,6 +391,7 @@
} }
} }
} }
getSize()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -397,7 +401,7 @@ ...@@ -397,7 +401,7 @@
} }
.CloudDisk-R-Box{ .CloudDisk-R-Box{
width: 147px; width: 147px;
margin-bottom: 24px; /* margin-bottom: 24px; */
position: relative; position: relative;
} }
.CloudDisk-R-Box.active .CloudDisk-R-Img{ .CloudDisk-R-Box.active .CloudDisk-R-Img{
...@@ -429,7 +433,7 @@ ...@@ -429,7 +433,7 @@
.CloudDisk-R-Img{ .CloudDisk-R-Img{
width: 147px; width: 147px;
height: 147px; height: 147px;
margin-bottom: 9px; /* margin-bottom: 9px; */
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0px 0px 13px 0px #eee; box-shadow: 0px 0px 13px 0px #eee;
...@@ -471,5 +475,48 @@ ...@@ -471,5 +475,48 @@
.cloudDownTextLin{ .cloudDownTextLin{
border-bottom: 1px solid #F0F0F0; 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> </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