8 changed files with 816 additions and 2000 deletions
|
Before Width: | Height: | Size: 255 B After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large
@ -0,0 +1,29 @@ |
|||||
|
export async function convertIcoToPng(file) { |
||||
|
// 1. 创建ICO的Blob URL
|
||||
|
const icoUrl = URL.createObjectURL(file) |
||||
|
|
||||
|
// 2. 加载到Image对象
|
||||
|
const img = await new Promise((resolve, reject) => { |
||||
|
const img = new Image() |
||||
|
img.onload = () => resolve(img) |
||||
|
img.onerror = reject |
||||
|
img.src = icoUrl |
||||
|
}) |
||||
|
|
||||
|
// 3. 绘制到Canvas
|
||||
|
const canvas = document.createElement('canvas') |
||||
|
canvas.width = img.width |
||||
|
canvas.height = img.height |
||||
|
const ctx = canvas.getContext('2d') |
||||
|
ctx.drawImage(img, 0, 0) |
||||
|
|
||||
|
// 4. 转换为PNG
|
||||
|
const pngDataUrl = canvas.toDataURL('image/png') |
||||
|
URL.revokeObjectURL(icoUrl) // 释放内存
|
||||
|
|
||||
|
return { |
||||
|
dataUrl: pngDataUrl, |
||||
|
width: img.width, |
||||
|
height: img.height |
||||
|
} |
||||
|
} |
||||
@ -1,125 +1,479 @@ |
|||||
<template> |
<template> |
||||
<div class="main-content12"> |
<div class="main-content12 siteTem-wrap"> |
||||
<div class="pageTemplete-wrap"> |
<div class="content"> |
||||
<div class=" flex-common" id=""> |
<div class="pageTemplete-wrap"> |
||||
<h3>模板选择</h3> |
<div class=" flex-common" id=""> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
<h3>模板选择</h3> |
||||
<el-tab-pane label="混合（AI+查重）" name="1"> |
<div class="templeteImgs flex" v-if="templeteList.length"> |
||||
<div class="templeteImgs"> |
<div class="templeteImgs-item column" v-for="(item, index) in templeteList" :key="item.tpl_id" |
||||
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id"> |
@click="chooseTemplate(item)"> |
||||
<img :src="item.img" alt=""> |
<div class="outImg_tem"> |
||||
<span class="look">预览</span> |
<img :src="item.picture" alt="" preview class="tem_img"> |
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
|
||||
<p>{{ item.list }}</p> |
|
||||
</div> |
</div> |
||||
|
<span class="look" @click.stop="previewImg(item, index)">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" v-if="tpl_id == item.id" alt=""> |
||||
|
<p>{{ item.name }}</p> |
||||
</div> |
</div> |
||||
</el-tab-pane> |
</div> |
||||
<el-tab-pane label="仅查重" name="2"> |
</div> |
||||
<div class="templeteImgs"> |
<div class="flex-common flex-between mt12"> |
||||
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id"> |
<div class="uploadLeft"> |
||||
<img :src="require(item.img)" alt=""> |
<div class="uploadwrap"> |
||||
<span class="look">预览</span> |
<label class="flex upload-title">站点ICO<img class="ml-4" |
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
src="@/assets/form_qua_ic.svg" /></label> |
||||
<p>{{ item.list }}</p> |
<!-- <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false" |
||||
</div> |
:limit="Number(1)" ref="avatorUpload" :auto-upload="false" accept=".ico"> |
||||
|
<GuipButton class="upload-button" slot="trigger" type="ignore" |
||||
|
:btnstyle="{ width: '118px' }"> |
||||
|
<i class="bgImg"></i>选择文件 |
||||
|
</GuipButton> |
||||
|
<div slot="tip" class="el-upload__tip">浏览器标题前面的图片，必须是ico格式，尺寸32PX*32PX</div> |
||||
|
</el-upload> --> |
||||
|
<input type="file" accept=".ico" @change="handleAvatarChange" ref="fileInput" |
||||
|
style="display: none"> |
||||
|
<GuipButton class="upload-button mt12" slot="trigger" type="ignore" |
||||
|
:btnstyle="{ width: '118px' }" @click="$refs.fileInput.click()"> |
||||
|
<i class="bgImg"></i>选择文件 |
||||
|
</GuipButton> |
||||
|
<p class="desc mt12">浏览器标题前面的图片，必须是ico格式，尺寸32PX</p> |
||||
</div> |
</div> |
||||
|
<div class="uploadwrap mt24"> |
||||
</el-tab-pane> |
<label class="flex upload-title">站点首页Logo<img class="ml-4" |
||||
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane> |
src="@/assets/form_qua_ic.svg" /></label> |
||||
<div class="templeteImgs"> |
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false" |
||||
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id"> |
:limit="Number(1)" ref="avatorUpload" :auto-upload="false"> |
||||
<img :src="require(item.img)" alt=""> |
<GuipButton class="upload-button" slot="trigger" type="ignore" |
||||
<span class="look">预览</span> |
:btnstyle="{ width: '118px' }"> |
||||
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
<i class="bgImg"></i>选择文件 |
||||
<p>{{ item.list }}</p> |
</GuipButton> |
||||
|
<div slot="tip" class="el-upload__tip">站点左上角logo样式，高度建议不超过60PX，文件仅支持PNG格式</div> |
||||
|
</el-upload> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</el-tabs> |
<div class="previewRight"> |
||||
|
<h4>实时预览</h4> |
||||
|
<img :src="logoUrl" alt="" class="logo"> |
||||
|
<img :src="icoUrl" alt="" class="ico"> |
||||
|
<div class="img-preview" v-if="pictureUrl"> |
||||
|
<img :src="pictureUrl" alt="" class="preview-img"> |
||||
|
<img :src="previewLogo" v-if="previewLogo" alt="Logo预览" class="preview-logo"> |
||||
|
<img :src="previewIco" v-if="previewIco" alt="ico预览" class="preview-ico"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<Footer></Footer> |
||||
|
<div v-if="previewVisible" class="preview-modal" @click="previewVisible = false"> |
||||
|
<img :src="currentImage" class="preview-image"> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
<div class="register-btns center"> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpCancle">取消 |
||||
|
</GuipButton> |
||||
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="update_site_tpl">保存 |
||||
|
</GuipButton> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
|
import GuipButton from '@/components/GuipButton.vue' |
||||
|
import Footer from '@/components/Footer.vue' |
||||
|
// import Viewer from 'v-viewer' |
||||
|
// import Vue from 'vue' |
||||
|
// import LightBox from 'vue-image-lightbox' |
||||
|
// import 'vue-image-lightbox/dist/vue-image-lightbox.min.css' |
||||
|
// import VueEasyLightbox from 'vue-easy-lightbox' |
||||
|
import { convertIcoToPng } from '@/utils/icoConverter' |
||||
export default { |
export default { |
||||
// 站点设置 |
// 站点设置 |
||||
name: '', |
name: '', |
||||
components: { |
components: { |
||||
// GuipInput, |
// GuipInput, |
||||
// GuipButton, |
GuipButton, |
||||
|
Footer |
||||
|
// VueEasyLightbox |
||||
|
// LightBox |
||||
// GuipSwitch, |
// GuipSwitch, |
||||
// GroupFormBtns |
// GroupFormBtns |
||||
}, |
}, |
||||
|
|
||||
data() { |
data() { |
||||
return { |
return { |
||||
activeName: '1', |
activeName: '1', |
||||
|
tpl_id: '', |
||||
|
logoUrl: '', |
||||
|
previewLogo: '', |
||||
|
previewIco: '', |
||||
|
icoUrl: '', |
||||
|
// media: [], |
||||
|
pictureUrl: '', |
||||
addImgList: { |
addImgList: { |
||||
'万方': require('@/assets/register/wanfang.png'), |
'万方': require('@/assets/register/wanfang.png'), |
||||
'维普': require('@/assets/register/weipu.svg'), |
'维普': require('@/assets/register/weipu.svg'), |
||||
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
||||
}, |
}, |
||||
templeteList:[ |
templeteList: [], |
||||
{ |
formData: new FormData(), |
||||
name:'清新科技蓝', |
showLightbox: false, |
||||
type:1, |
imageIndex: 0, |
||||
tpl_id:'1', |
previewVisible: false, |
||||
img:require('@/assets/site/temImg.png') |
} |
||||
}, |
}, |
||||
{ |
mounted() { |
||||
name:'清新科技蓝1', |
this.get_site_tpl_list(); |
||||
type:0, |
}, |
||||
tpl_id:'11', |
computed: { |
||||
img:require('@/assets/site/temImg.png') |
// 转换数据格式为lightbox需要的格式 |
||||
}, |
media() { |
||||
{ |
return this.templeteList.map(item => ({ |
||||
name:'清新科技蓝2', |
src: item.picture, |
||||
tpl_id:'12', |
type: this.getImageType(item.picture), |
||||
type:0, |
thumb: item.thumbnail, |
||||
img:require('@/assets/site/temImg.png') |
caption: item.name // 可选，显示标题 |
||||
}, |
})) |
||||
{ |
|
||||
name:'清新科技蓝3', |
|
||||
tpl_id:'16', |
|
||||
type:0, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝4', |
|
||||
tpl_id:'13', |
|
||||
type:1, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝5', |
|
||||
tpl_id:'14', |
|
||||
type:1, |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
{ |
|
||||
name:'清新科技蓝6', |
|
||||
type:1, |
|
||||
tpl_id:'15', |
|
||||
img:require('@/assets/site/temImg.png') |
|
||||
}, |
|
||||
] |
|
||||
} |
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
handleClick() { |
// 初始化 |
||||
|
get_site_tpl_list() { |
||||
|
this.$http('POST', '/agentnew/ajax_get_site_tpl_list', { |
||||
|
uid: this.$route.query?.uid, |
||||
|
}, { |
||||
|
headers: { |
||||
|
'Auth': this.$token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if(response.data.length >0){ |
||||
|
this.templeteList = [...response.data] |
||||
|
this.pictureUrl = response.data[0].picture; |
||||
|
this.tpl_id = response.data[0].id; |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
// 从URL获取图片类型 |
||||
|
getImageType(url) { |
||||
|
const ext = url.split('.').pop().toLowerCase() |
||||
|
switch (ext) { |
||||
|
case 'png': return 'image/png' |
||||
|
case 'jpg': |
||||
|
case 'jpeg': return 'image/jpeg' |
||||
|
case 'gif': return 'image/gif' |
||||
|
default: return 'image/jpeg' // 默认类型 |
||||
|
} |
||||
|
}, |
||||
|
jumpCancle(){ |
||||
|
console.log('object'); |
||||
|
this.$router.go(-1) |
||||
|
}, |
||||
|
update_site_tpl() { |
||||
|
this.formData.set('uid', this.$route.query.uid) |
||||
|
this.formData.set('tpl_id', this.tpl_id) |
||||
|
this.formData.set('is_public_tpl', 1) |
||||
|
|
||||
|
this.$http('POST', '/agentnew/ajax_update_site_tpl', |
||||
|
this.formData |
||||
|
, { |
||||
|
headers: { |
||||
|
'Auth': this.$token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
this.$Message.success(response.info) |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
chooseTemplate(item) { |
||||
|
console.log('---11'); |
||||
|
this.tpl_id = item.id; |
||||
|
this.pictureUrl = item.picture |
||||
|
}, |
||||
|
previewImg(item, index) { |
||||
|
console.log('222---11'); |
||||
|
this.imageIndex = index |
||||
|
this.currentImage = item.picture |
||||
|
this.previewVisible = true |
||||
|
}, |
||||
|
hide() { |
||||
|
this.previewVisible = false |
||||
|
}, |
||||
|
handleAvatarChange1(file, fileList) { |
||||
|
console.log(file, fileList, 'pictureUrl====') |
||||
|
// 验证文件类型 |
||||
|
if (file.raw.type !== 'image/png') { |
||||
|
this.$message.error('只能上传PNG格式的图片!') |
||||
|
return false |
||||
|
} |
||||
|
// 验证文件类型 |
||||
|
if (file.raw.type !== 'image/png') { |
||||
|
this.$message.error('只能上传PNG格式的图片!') |
||||
|
return false |
||||
|
} |
||||
|
let fileObj = file.raw |
||||
|
this.formData.set('logo', fileObj); |
||||
|
const reader = new FileReader() |
||||
|
reader.onload = (e) => { |
||||
|
this.previewLogo = e.target.result |
||||
|
} |
||||
|
reader.readAsDataURL(file.raw) |
||||
|
}, |
||||
|
async handleAvatarChange(event) { |
||||
|
const file = event.target.files[0] |
||||
|
// console.log(file,'file=='); |
||||
|
if (!file) return |
||||
|
this.formData.set('ico', file); |
||||
|
try { |
||||
|
let previewImages = [await convertIcoToPng(file)] |
||||
|
this.previewIco = previewImages[0].dataUrl |
||||
|
} catch (err) { |
||||
|
console.error('转换失败:', err) |
||||
|
alert('ICO文件解析失败') |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
|
.siteTem-wrap{ |
||||
|
padding: 12px 12px 0; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.content{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.register-btns { |
||||
|
// position: absolute; |
||||
|
// left: 0; |
||||
|
// bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 78px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
background: #FFFFFF; |
||||
|
padding: 16px 0px; |
||||
|
/* 蓝色阴影_常规 */ |
||||
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
||||
|
z-index: 999; |
||||
|
|
||||
|
button:nth-child(1) { |
||||
|
margin-right: 56px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
.pageTemplete-wrap { |
.pageTemplete-wrap { |
||||
width: 100%; |
width: 100%; |
||||
letter-spacing: 0.08em; |
letter-spacing: 0.08em; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
} |
} |
||||
|
|
||||
|
.uploadLeft { |
||||
|
width: 43%; |
||||
|
} |
||||
|
|
||||
|
.thumbnail { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
cursor: pointer; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
|
||||
|
.preview-modal { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(0, 0, 0, 0.8); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.preview-image { |
||||
|
max-width: 80%; |
||||
|
max-height: 80%; |
||||
|
} |
||||
|
|
||||
|
.previewRight { |
||||
|
width: 55%; |
||||
|
border-radius: 4px; |
||||
|
background: #FAFAFA; |
||||
|
padding: 24px 22px; |
||||
|
gap: 20px; |
||||
|
height: 297px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0; |
||||
|
height: 18px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.preview-img{ |
||||
|
width: 1400px; |
||||
|
} |
||||
|
.img-preview { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
|
||||
|
.preview-logo { |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
height: 50px; |
||||
|
left: 20px; |
||||
|
} |
||||
|
|
||||
|
.preview-ico { |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
height: 32px; |
||||
|
width: 32px; |
||||
|
left: 200px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ico { |
||||
|
position: absolute; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.outImg_tem { |
||||
|
height: 110px; |
||||
|
overflow: hidden; |
||||
|
border-radius: 8px; |
||||
|
border: 2px solid #E8E9EA; |
||||
|
} |
||||
|
|
||||
::v-deep .el-tabs__nav-wrap { |
::v-deep .el-tabs__nav-wrap { |
||||
border-width: 0px 0px 1px 0px; |
border-width: 0px 0px 1px 0px; |
||||
border-style: solid; |
border-style: solid; |
||||
border-color: #DFE2E6; |
border-color: #DFE2E6; |
||||
} |
} |
||||
|
|
||||
|
.uploadwrap { |
||||
|
text-align: left; |
||||
|
|
||||
|
lable { |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1E2226; |
||||
|
} |
||||
|
|
||||
|
.upload-demo { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.upload-button { |
||||
|
border-radius: 4px; |
||||
|
background: #F2F3F5; |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid #BABDC2; |
||||
|
|
||||
|
.bgImg { |
||||
|
width: 20px; |
||||
|
height: 16px; |
||||
|
margin-right: 6px; |
||||
|
background-image: url(@/assets/site/uploadIcon.svg); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.bgImg { |
||||
|
background-image: url(@/assets/site/uploadIcon_light.svg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #23242B; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.templeteImgs { |
||||
|
max-width: 100%; |
||||
|
justify-content: flex-start; |
||||
|
white-space: nowrap; |
||||
|
overflow-x: auto; |
||||
|
gap: 13px; |
||||
|
|
||||
|
.templeteImgs-item { |
||||
|
position: relative; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.tem_img { |
||||
|
width: 176px; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
display: inline-block; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
margin-top: 6px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #626573; |
||||
|
} |
||||
|
|
||||
|
.tem-active { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 2px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
|
||||
|
.look { |
||||
|
// display: none; |
||||
|
transition: all .3s; |
||||
|
position: absolute; |
||||
|
right: 2px; |
||||
|
bottom: 26px; |
||||
|
width: 73px; |
||||
|
height: 30px; |
||||
|
background: rgba(0, 0, 0, 0.61); |
||||
|
backdrop-filter: blur(3px); |
||||
|
line-height: 18px; |
||||
|
line-height: 30px; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
border-radius: 0 0 6px 0; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.look { |
||||
|
display: block; |
||||
|
transition: all .3s; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue