|
After Width: | Height: | Size: 673 KiB |
|
After Width: | Height: | Size: 182 KiB |
|
After Width: | Height: | Size: 304 KiB |
|
After Width: | Height: | Size: 551 KiB |
|
After Width: | Height: | Size: 495 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 318 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 305 KiB |
|
After Width: | Height: | Size: 245 KiB |
|
After Width: | Height: | Size: 883 B |
|
Before Width: | Height: | Size: 804 B After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 376 KiB |
@ -0,0 +1,92 @@ |
||||
import Module from '@/components/modules/module' |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
userId: +this.$store.state.user.userId, |
||||
site: this.$store.state.content.site, |
||||
id: '', |
||||
columnId: +this.$route.query.id, |
||||
diaVisible: false, |
||||
curModule: 0, |
||||
curData: {}, |
||||
} |
||||
}, |
||||
components: { |
||||
Module, |
||||
}, |
||||
mounted() { |
||||
this.getInfo() |
||||
}, |
||||
methods: { |
||||
// 获取详情
|
||||
getInfo() { |
||||
this.modules.map(e => { |
||||
const { type } = e |
||||
// 克隆一个原始row，方便添加
|
||||
if (type === 'banner' || type === 'introduce') { |
||||
const data = JSON.parse(JSON.stringify(e.list[0])) |
||||
data.pic = '' |
||||
e.originForm = data |
||||
} |
||||
}) |
||||
|
||||
// 查询页面详情
|
||||
this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => { |
||||
if (data.length) { |
||||
const json = data[0] |
||||
this.id = json.id |
||||
this.modules = JSON.parse(json[json.state ? 'theEditedJson' : 'jsonBeforeEditing']) |
||||
} |
||||
}).catch(err => {}) |
||||
}, |
||||
// 展开模块设置
|
||||
toSet(i) { |
||||
this.curModule = i |
||||
this.curData = JSON.parse(JSON.stringify(this.modules[i])) |
||||
this.diaVisible = true |
||||
}, |
||||
// 模块设置提交
|
||||
moduleSubmit() { |
||||
this.diaVisible = false |
||||
this.modules[this.curModule] = this.curData |
||||
console.log("🚀 ~ file: index.vue ~ line 520 ~ moduleSubmit ~ this.modules[this.curModule]", this.modules[this.curModule]) |
||||
}, |
||||
// 处理预览和保存的json
|
||||
handleJson() { |
||||
// const list = JSON.parse(JSON.stringify(this.modules))
|
||||
// list.map(e => {
|
||||
// if (e.type === 'form') delete e.forms
|
||||
// })
|
||||
return JSON.stringify(this.modules) |
||||
}, |
||||
// 预览
|
||||
preview() { |
||||
this.$post(this.api.saveRedisPage, { |
||||
columnId: this.columnId, |
||||
json: this.handleJson() |
||||
}).then(({ data }) => { |
||||
|
||||
}).catch(err => {}) |
||||
}, |
||||
// 保存
|
||||
save(state) { |
||||
const json = this.handleJson() |
||||
const data = { |
||||
id: this.id, |
||||
columnId: this.columnId, |
||||
state, |
||||
sort: 1, |
||||
founderId: this.userId, |
||||
editorId: this.userId, |
||||
jsonBeforeEditing: json |
||||
} |
||||
if (state) data.theEditedJson = json |
||||
this.$post(this.api[this.id ? 'updatePage' : 'savePage'], data).then(res => { |
||||
Util.successMsg((state ? '发布' : '保存') + '成功') |
||||
this.$router.back() |
||||
}).catch(err => {}) |
||||
} |
||||
} |
||||
}; |
||||
@ -1,8 +0,0 @@ |
||||
export default { |
||||
beforeCreate() { |
||||
document.querySelector("body").setAttribute("style", "background-color:#fff"); |
||||
}, |
||||
beforeDestroy() { |
||||
document.body.removeAttribute("style"); |
||||
} |
||||
}; |
||||
@ -1,29 +0,0 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
const pre = 'page-' |
||||
|
||||
export default { |
||||
path: '/page', |
||||
name: 'page', |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import('@/pages/page/list'), |
||||
meta: { title: '页面管理' } |
||||
}, |
||||
{ |
||||
name: `${pre}add`, |
||||
path: `add`, |
||||
component: () => import('@/pages/page/add/index.vue'), |
||||
meta: { title: '添加页面' } |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,157 @@ |
||||
.block { |
||||
padding: 118px 0; |
||||
.b-title { |
||||
position: relative; |
||||
margin-bottom: 50px; |
||||
font-size: 50px; |
||||
line-height: 59px; |
||||
text-align: center; |
||||
color: #1F1F1F; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 70px; |
||||
left: 50%; |
||||
width: 136px; |
||||
height: 4px; |
||||
transform: translateX(-50%); |
||||
background: #1583FF; |
||||
} |
||||
} |
||||
.intro { |
||||
margin-bottom: 80px; |
||||
font-size: 30px; |
||||
text-align: center; |
||||
color: #5B5B5E; |
||||
line-height: 40px; |
||||
} |
||||
} |
||||
.inner { |
||||
width: 1400px; |
||||
margin: 0 auto; |
||||
&.lg { |
||||
width: 1505px; |
||||
} |
||||
} |
||||
.gray { |
||||
background-color: #F2F6F8; |
||||
} |
||||
|
||||
.actions { |
||||
margin-bottom: 20px; |
||||
text-align: right; |
||||
} |
||||
.c-wrap { |
||||
position: relative; |
||||
} |
||||
.cover { |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
color: #fff; |
||||
background-color: rgba(0, 0, 0, .5); |
||||
cursor: pointer; |
||||
&:hover { |
||||
background-color: rgba(0, 0, 0, .7); |
||||
} |
||||
} |
||||
/deep/.module { |
||||
.el-table.module-table td { |
||||
.cell { |
||||
padding-top: 10px; |
||||
} |
||||
.link-wrap { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.set-link { |
||||
margin-left: 10px; |
||||
} |
||||
.del { |
||||
margin-left: 5px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.plus { |
||||
margin-top: 10px; |
||||
font-size: 20px; |
||||
text-align: center; |
||||
color: $main-color; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
$avatar-width: 140px; |
||||
$avatar-height: 80px; |
||||
/deep/.upload-pic, /deep/.upload-none { |
||||
width: $avatar-width; |
||||
height: $avatar-height; |
||||
margin-bottom: 10px; |
||||
} |
||||
/deep/.upload-none { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: rgba(0, 0, 0, 0.04); |
||||
i { |
||||
font-size: 20px; |
||||
color: #8c939d; |
||||
} |
||||
} |
||||
/deep/ .uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
&:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-height; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
.avatar { |
||||
display: block; |
||||
width: $avatar-width; |
||||
height: $avatar-height; |
||||
} |
||||
} |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||