You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
17 KiB
528 lines
17 KiB
<template>
|
|
<div class="main-content12 siteTem-wrap">
|
|
<div class="content">
|
|
<div class="pageTemplete-wrap">
|
|
<div class=" flex-common" id="">
|
|
<h3>模板选择</h3>
|
|
<div class="templeteImgs flex" v-if="templeteList.length">
|
|
<div class="templeteImgs-item column" v-for="(item, index) in templeteList" :key="item.tpl_id"
|
|
@click="chooseTemplate(item)">
|
|
<div class="outImg_tem" :class="tpl_id === item.id?'outImg_tem_active':''">
|
|
<img :src="item.picture" alt="" preview class="tem_img">
|
|
</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 class="templeteImgs-item column" v-if="tpl_customize" @click="choosePrivTemplate()">
|
|
<div class="outImg_tem" :class="is_public_tpl === 0?'outImg_tem_active':''">
|
|
<img src="@/assets/site/tpl_customize.svg" alt="" class="tem_img">
|
|
</div>
|
|
<img src="@/assets/site/tem-active.svg" v-if="is_public_tpl === 0" class="tem-active" alt="">
|
|
<p>自定义模板</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-common flex-between mt12" v-if="is_public_tpl === 1">
|
|
<div class="uploadLeft">
|
|
<div class="uploadwrap">
|
|
<label class="flex upload-title gap8">
|
|
站点ICO<img class="ml-4" src="@/assets/form_qua_ic.svg" />
|
|
</label>
|
|
<el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
|
|
: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 class="uploadwrap mt24">
|
|
<label class="flex upload-title gap8">
|
|
站点首页Logo<img class="ml-4" src="@/assets/form_qua_ic.svg" />
|
|
</label>
|
|
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
|
|
:limit="Number(1)" ref="avatorUpload1" :auto-upload="false" accept=".png">
|
|
<GuipButton class="upload-button" slot="trigger" type="ignore"
|
|
:btnstyle="{ width: '118px' }">
|
|
<i class="bgImg"></i>选择文件
|
|
</GuipButton>
|
|
<div slot="tip" class="el-upload__tip">站点左上角logo样式，高度建议不超过60PX，文件仅支持PNG格式</div>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
<div class="previewRight">
|
|
<h4>实时预览</h4>
|
|
<div class="img-preview" v-if="previewUrl">
|
|
<img :src="previewUrl" 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 class="flex-common mt12" v-if="is_public_tpl === 0">
|
|
<PromptText text="自定义模板·注意事项" :type="1" class="add-info">
|
|
<template #desc>
|
|
<div class="alert-more-info mt12">
|
|
<div class="flex mb10 gap10"><span>1.</span>按开发文档书写自定义网站，并压缩上传后，可生成自定义首页，此模板完全由你设定</div>
|
|
<div class="flex gap10">
|
|
2.<a href="#" class="link flex gap10" target="_blank">
|
|
<img src="@/assets/site/form_linkActive.svg" alt="">下载开发文档</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</PromptText>
|
|
|
|
<div class="uploadwrap mt32">
|
|
<el-upload class="upload-demo" :on-change="handleAvatarChange2" action="#" :multiple="false"
|
|
:limit="Number(1)" ref="avatorUpload2" :auto-upload="false" accept=".zip">
|
|
<div class="flex gap12">
|
|
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
|
|
<i class="bgImg"></i><span v-if="!priv_down_url">选择文件</span><span v-else>重新上传</span>
|
|
</GuipButton>
|
|
<a v-if="priv_down_url" :href="priv_down_url" target="_blank" class="link flex gap10"><img src="@/assets/site/form_linkActive.svg" alt="">导出网页模板</a>
|
|
</div>
|
|
<div slot="tip" class="el-upload__tip">根据开发文档的提示，将内容压缩成zip包上传</div>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer class="pb100"></Footer>
|
|
<div v-if="previewVisible" class="preview-modal" @click="previewVisible = false">
|
|
<img :src="currentImage" class="preview-image">
|
|
</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>
|
|
</template>
|
|
<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'
|
|
import PromptText from "@/components/PromptText.vue";
|
|
import db from '@/utils/indexedDBUtil'
|
|
export default {
|
|
// 站点设置
|
|
name: '',
|
|
components: {
|
|
PromptText,
|
|
// GuipInput,
|
|
GuipButton,
|
|
Footer
|
|
// VueEasyLightbox
|
|
// LightBox
|
|
// GuipSwitch,
|
|
// GroupFormBtns
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
tpl_id: '',
|
|
tpl_name: '',
|
|
is_public_tpl: '',
|
|
priv_down_url: '',
|
|
tpl_customize: '',
|
|
previewLogo: '',
|
|
previewIco: '',
|
|
previewUrl: '',
|
|
pictureUrl: '',
|
|
templeteList: [],
|
|
formData: new FormData(),
|
|
previewVisible: false,
|
|
currentImage: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
if(!this.$route.query.uid && !this.$route.query.site_type){
|
|
this.$message.error('未知错误');
|
|
this.$router.push('/')
|
|
return false;
|
|
}
|
|
this.get_site_tpl_list();
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
get_site_tpl_list() {
|
|
let obj = {}
|
|
if(this.$route.query.site_type) obj.site_type = this.$route.query.site_type;
|
|
if(this.$route.query.uid) obj.uid = this.$route.query.uid;
|
|
|
|
this.$http('POST', '/agentnew/ajax_get_site_tpl_list', obj).then(response => {
|
|
if(response.status) {
|
|
this.$nextTick(() => {
|
|
this.tpl_id = response.data.tpl_data.tpl_id
|
|
this.pictureUrl = response.data.tpl_data.picture
|
|
this.previewUrl = response.data.tpl_data.thumbnail
|
|
this.tpl_customize = response.data.tpl_data.tpl_customize
|
|
this.is_public_tpl = response.data.tpl_data.is_public_tpl
|
|
this.priv_down_url = response.data.tpl_data.priv_down_url
|
|
this.previewLogo = response.data.tpl_data.site_tpl_logo
|
|
this.previewIco = response.data.tpl_data.site_tpl_ico
|
|
|
|
this.templeteList = [...response.data.list]
|
|
})
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
jumpCancle(){
|
|
this.$router.go(-1)
|
|
},
|
|
update_site_tpl() {
|
|
//站点不存在只保存选择的模板id到
|
|
if(!this.$route.query.uid){
|
|
let site_tpl_info = {
|
|
site_tpl: this.tpl_id,
|
|
site_tpl_name: this.tpl_name,
|
|
picture: this.pictureUrl,
|
|
}
|
|
localStorage.setItem('site_tpl_info', JSON.stringify(site_tpl_info))
|
|
this.$router.go(-1)
|
|
return true;
|
|
}
|
|
|
|
this.formData.set('uid', this.$route.query.uid)
|
|
this.formData.set('tpl_id', this.tpl_id)
|
|
this.formData.set('is_public_tpl', this.is_public_tpl)
|
|
this.$http('POST', '/agentnew/ajax_update_site_tpl', this.formData).then(response => {
|
|
if(response.status){
|
|
this.$Message.success(response.info)
|
|
this.$router.go(-1)
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
return true;
|
|
},
|
|
chooseTemplate(item) {
|
|
this.is_public_tpl = 1
|
|
this.tpl_id = item.id;
|
|
this.tpl_name = item.name;
|
|
this.pictureUrl = item.picture;
|
|
this.previewUrl = item.thumbnail;
|
|
this.$Message.info(item.introduce)
|
|
},
|
|
choosePrivTemplate(){
|
|
this.is_public_tpl = 0
|
|
this.tpl_id = ''
|
|
this.tpl_name = '';
|
|
},
|
|
previewImg(item) {
|
|
this.currentImage = item.picture
|
|
this.previewVisible = true
|
|
},
|
|
hide() {
|
|
this.previewVisible = false
|
|
},
|
|
handleAvatarChange2(file) {
|
|
let fileObj = file.raw
|
|
this.formData.set('zip_tpl', fileObj);
|
|
},
|
|
async handleAvatarChange1(file) {
|
|
let fileObj = file.raw
|
|
this.formData.set('logo', fileObj);
|
|
await db.set('logo', fileObj)
|
|
//预览
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
this.previewLogo = e.target.result
|
|
}
|
|
reader.readAsDataURL(file.raw)
|
|
},
|
|
async handleAvatarChange(file) {
|
|
let fileObj = file.raw
|
|
this.formData.set('ico', fileObj);
|
|
await db.set('ico', fileObj)
|
|
//预览
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
this.previewIco = e.target.result
|
|
}
|
|
reader.readAsDataURL(file.raw)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.pb100{
|
|
padding-bottom: 100px;
|
|
}
|
|
.mb10{
|
|
margin-bottom: 10px;
|
|
}
|
|
.link{
|
|
text-decoration: none;
|
|
color: #006AFF;
|
|
}
|
|
.add-info{
|
|
padding: 20px 14px;
|
|
letter-spacing: 0.08em;
|
|
::v-deep .prompt-desc{
|
|
color: #1E2226;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.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 {
|
|
width: 100%;
|
|
letter-spacing: 0.08em;
|
|
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: 100%;
|
|
}
|
|
.img-preview {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.preview-logo {
|
|
position: absolute;
|
|
top: 67px;
|
|
height: 35px;
|
|
left: 40px;
|
|
}
|
|
|
|
.preview-ico {
|
|
position: absolute;
|
|
top: 20px;
|
|
height: 25px;
|
|
width: 25px;
|
|
left: 189px;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
}
|
|
|
|
.ico {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.outImg_tem {
|
|
height: 110px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 2px solid #E8E9EA;
|
|
}
|
|
|
|
.outImg_tem_active{
|
|
border: 2px solid #006AFF;
|
|
}
|
|
|
|
::v-deep .el-tabs__nav-wrap {
|
|
border-width: 0px 0px 1px 0px;
|
|
border-style: solid;
|
|
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;
|
|
flex-wrap: wrap;
|
|
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: 30px;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 0 0 6px 0;
|
|
}
|
|
|
|
&:hover {
|
|
.look {
|
|
display: block;
|
|
transition: all .3s;
|
|
}
|
|
.outImg_tem{
|
|
border: 2px solid #006AFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|