parent
ccc30e06ad
commit
831b4a1cd8
22 changed files with 833 additions and 384 deletions
|
After Width: | Height: | Size: 460 KiB |
@ -0,0 +1,131 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="actions"> |
||||||
|
<p class="page-name">页面设置/首页</p> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="preview">预览</el-button> |
||||||
|
<el-button @click="save(0)">保存为草稿</el-button> |
||||||
|
<el-button type="primary" @click="save(1)">发布</el-button> |
||||||
|
<el-button @click="back">放弃编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modules"> |
||||||
|
<div class="relative"> |
||||||
|
<el-carousel height="500px" |
||||||
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
||||||
|
<template v-for="(item, i) in modules[0].list"> |
||||||
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
||||||
|
<img width="100%" height="100%" :src="item.pic" alt=""> |
||||||
|
</el-carousel-item> |
||||||
|
</template> |
||||||
|
</el-carousel> |
||||||
|
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul class="intro c-wrap m-t-20"> |
||||||
|
<template v-for="(item, i) in modules[1].list"> |
||||||
|
<li v-if="item.isEnable" :key="i"> |
||||||
|
<img :src="item.pic" alt=""> |
||||||
|
<div class="text"> |
||||||
|
<h6>{{ item.title }}</h6> |
||||||
|
<p class="desc">{{ item.des }}</p> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
<div class="cover" @click="toSet(1)">点击更改图片、标题、链接与描述</div> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import mixins from '@/mixins/page' |
||||||
|
import Modules from '@/const/modules' |
||||||
|
export default { |
||||||
|
mixins: [mixins], |
||||||
|
data () { |
||||||
|
return { |
||||||
|
modules: Modules.shop |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$store.commit('user/setCrumbs', [ |
||||||
|
{ |
||||||
|
name: '站点管理', |
||||||
|
route: '/site' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '内容管理', |
||||||
|
route: '/column' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '栏目管理', |
||||||
|
route: '/column' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '产品中心' |
||||||
|
} |
||||||
|
]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import '../../../styles/page/page.scss'; |
||||||
|
|
||||||
|
.intro { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 43px 0; |
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
li { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
transition: 0.3s; |
||||||
|
|
||||||
|
&.active { |
||||||
|
|
||||||
|
h6, |
||||||
|
.desc { |
||||||
|
color: #006eff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
margin-top: -15px; |
||||||
|
|
||||||
|
h6, |
||||||
|
.desc { |
||||||
|
color: #006eff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 50px; |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
margin-bottom: 5px; |
||||||
|
font-size: 16px; |
||||||
|
color: #0b1d30; |
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
.desc { |
||||||
|
font-size: 13px; |
||||||
|
color: #757f92; |
||||||
|
transition: 0.5s; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<el-form ref="form" label-width="100px"> |
||||||
|
<el-form-item label="标题"> |
||||||
|
<el-input v-model="form.title" ref="account" placeholder="请输入标题" style="width: 400px"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="图标"> |
||||||
|
<el-upload accept=".jpg,.png,.jpeg" :action="this.api.upload" :on-remove="handleRemove" :on-error="uploadError" |
||||||
|
:before-remove="beforeRemove" :headers="headers" :show-file-list="false" :on-success="uploadSuccess"> |
||||||
|
<div style="text-align: left;"> |
||||||
|
<el-button size="small" type="primary">上传logo</el-button> |
||||||
|
<div class="m-t-10"> |
||||||
|
<img v-if="form.logoUrl" :src="form.logoUrl" class="logo"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div slot="tip" class="el-upload__tip"> |
||||||
|
<p>只能上传jpg/png文件，请上传120*40左右的logo</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="save">{{ form.id ? "更新" : "创建" }}</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Util from "@/libs/util" |
||||||
|
import Setting from "@/setting" |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
siteId: this.$store.state.content.site.id, |
||||||
|
headers: { |
||||||
|
token: Util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
coverUrl: '', |
||||||
|
uploadList: [], |
||||||
|
form: { |
||||||
|
id: '', |
||||||
|
title: '', |
||||||
|
logoUrl: '', |
||||||
|
siteId: this.$store.state.content.site.id, |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async getData () { |
||||||
|
const res = await this.$post(`${this.api.findLogo}?siteId=${this.siteId}`) |
||||||
|
if (res.data) { |
||||||
|
this.form = res.data |
||||||
|
this.uploadList.push({ |
||||||
|
name: 'logo.jpg', |
||||||
|
url: res.data.logoUrl |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleExceed () { // 上传文件 |
||||||
|
Util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！") |
||||||
|
}, |
||||||
|
// 附件上传成功 |
||||||
|
uploadSuccess (data) { |
||||||
|
if (data.code === 401) { |
||||||
|
Util.errorMsg("登录过期，请重新登录") |
||||||
|
setTimeout(() => { |
||||||
|
this.$store.dispatch('user/logout') |
||||||
|
}, 1000) |
||||||
|
return false |
||||||
|
} |
||||||
|
this.form.logoUrl = data.url |
||||||
|
}, |
||||||
|
uploadError (err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove (file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove () { |
||||||
|
this.coverUrl = '' |
||||||
|
}, |
||||||
|
async save () { |
||||||
|
const { form } = this |
||||||
|
if (!form.logoUrl) return Util.errorMsg('请上传logo！') |
||||||
|
await this.$post(this.api.saveLogo, this.form) |
||||||
|
Util.successMsg('更新成功') |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.logo { |
||||||
|
max-height: 50px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import BasicLayout from '@/layouts/home' |
||||||
|
|
||||||
|
const meta = {} |
||||||
|
|
||||||
|
export default { |
||||||
|
path: '/logo', |
||||||
|
meta, |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: `/logo`, |
||||||
|
component: () => import('@/pages/logo'), |
||||||
|
meta: { title: '网站logo设置' } |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
Loading…
Reference in new issue