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