parent
a34c73f98c
commit
67a59a24e5
19 changed files with 661 additions and 44 deletions
@ -0,0 +1,269 @@ |
||||
<template> |
||||
<!-- 内容 --> |
||||
<div> |
||||
<el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close"> |
||||
<el-table class="module-table" :data="data.list" header-align="center" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column label="图片" min-width="140" align="center"> |
||||
<template slot-scope="scope"> |
||||
<img v-if="scope.row.pic" :src="scope.row.pic" class="upload-pic"> |
||||
<div class="upload-none" v-else> |
||||
<i class="el-icon-picture-outline"></i> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="title" label="标题" min-width="140" align="center"></el-table-column> |
||||
<el-table-column label="链接" min-width="140" align="center"> |
||||
<template slot-scope="scope"> |
||||
<div class="link-wrap"> |
||||
<span>{{ scope.row.link.linkName }}</span> |
||||
<el-button v-if="data.type === 'banner'" class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="des" label="描述" min-width="240" align="center"></el-table-column> |
||||
<el-table-column label="操作" width="100" align="center"> |
||||
<template slot-scope="scope"> |
||||
<div class="flex a-center"> |
||||
<el-switch |
||||
v-model="scope.row.isEnable" |
||||
:active-value="1" |
||||
:inactive-value="0"> |
||||
</el-switch> |
||||
<i v-if="data.type === 'introduce'" class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i> |
||||
<i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="$emit('update:visible', false)">取消</el-button> |
||||
<el-button type="primary" @click="contentSubmit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" /> |
||||
|
||||
<!-- 剪裁组件弹窗 --> |
||||
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
||||
<Cropper |
||||
ref="cropper" |
||||
:img-file.sync="file" |
||||
:is-upload="isUpload" |
||||
:fixed="fixed" |
||||
:fixedNumber.sync="fixedNumber" |
||||
@upload="customUpload" /> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Link from '@/components/modules/link' |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Cropper from '@/components/img-upload/Cropper' |
||||
import Axios from 'axios' |
||||
export default { |
||||
props: ['data', 'visible'], |
||||
components: { |
||||
Link, |
||||
Cropper |
||||
}, |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: Util.local.get(Setting.tokenKey) |
||||
}, |
||||
rules: {}, |
||||
linkVisible: false, |
||||
linkForm: {}, |
||||
curIndex: 0, |
||||
cropperModel: false, |
||||
isUpload: false, |
||||
file: {}, // 当前被选择的图片文件 |
||||
fileId: '', |
||||
curForm: {}, |
||||
fixed: false, |
||||
fixedNumber: [0.88, 1] |
||||
}; |
||||
}, |
||||
watch: { |
||||
visible(open) { |
||||
// 每次打开的时候处理参数 |
||||
open && this.handleForm() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.handleForm() |
||||
}, |
||||
methods: { |
||||
// 处理form表单参数 |
||||
handleForm() { |
||||
const { forms, type } = this.data |
||||
// 这两张类型的模块才需要处理参数 |
||||
if (type === 'form' || type === 'introduce') { |
||||
forms.map(e => { |
||||
if (e.type === 'upload') { |
||||
if (e.fixedNumber) { |
||||
this.fixed = true |
||||
this.fixedNumber = e.fixedNumber |
||||
} else { |
||||
this.fixed = false |
||||
} |
||||
} |
||||
if (e.required) { |
||||
this.rules[e.prop] = [ |
||||
{ |
||||
required: true, |
||||
message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`, |
||||
trigger: e.type === 'input' ? 'blur' : 'change' |
||||
} |
||||
] |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
close() { |
||||
this.$emit('update:visible', false) |
||||
}, |
||||
// 图片裁剪上传事件 |
||||
customUpload(data) { |
||||
const formData = new FormData() |
||||
formData.append('file', data, this.file.name) |
||||
this.imgUpload(formData) |
||||
}, |
||||
// 压缩图片 |
||||
compress(img) { |
||||
const canvas = document.createElement('canvas') |
||||
const ctx = canvas.getContext('2d') |
||||
// let initSize = img.src.length; |
||||
const width = img.width |
||||
const height = img.height |
||||
canvas.width = width |
||||
canvas.height = height |
||||
// 铺底色 |
||||
ctx.fillStyle = '#fff' |
||||
ctx.fillRect(0, 0, canvas.width, canvas.height) |
||||
ctx.drawImage(img, 0, 0, width, height) |
||||
// 进行压缩 |
||||
const ndata = canvas.toDataURL('image/jpeg', 0.8) |
||||
return ndata |
||||
}, |
||||
// base64转成bolb对象 |
||||
dataURItoBlob(base64Data) { |
||||
let byteString |
||||
if (base64Data.split(',')[0].indexOf('base64') >= 0) { |
||||
byteString = atob(base64Data.split(',')[1]) |
||||
} else { |
||||
byteString = unescape(base64Data.split(',')[1]) |
||||
} |
||||
const mimeString = base64Data |
||||
.split(',')[0] |
||||
.split(':')[1] |
||||
.split(';')[0] |
||||
const ia = new Uint8Array(byteString.length) |
||||
for (let i = 0; i < byteString.length; i++) { |
||||
ia[i] = byteString.charCodeAt(i) |
||||
} |
||||
return new Blob([ia], { |
||||
type: mimeString |
||||
}) |
||||
}, |
||||
// 图片上传到服务器 |
||||
imgUpload(formData) { |
||||
this.isUpload = true |
||||
Axios({ |
||||
method: 'post', |
||||
url: this.api.upload, |
||||
data: formData, |
||||
headers: { |
||||
'Content-Type': 'multipart/form-data', |
||||
token: Util.local.get(Setting.tokenKey) |
||||
}, |
||||
}).then(({ data }) => { |
||||
this.$set(this.curForm, 'pic', data.url) |
||||
}).catch(res => {}) |
||||
this.$refs.cropper.isDisabled = false |
||||
this.isUpload = false |
||||
this.cropperModel = false |
||||
}, |
||||
// 图片改变钩子 |
||||
changeFile(file, form) { |
||||
const { size, name } = file |
||||
const ext = name.substring(name.lastIndexOf('.') + 1) |
||||
if (!Util.isImg(ext)) { |
||||
this.$message.error('请上传图片！') |
||||
return false |
||||
} |
||||
if (size / 1024 / 1024 > 5) { |
||||
this.$message.error('请上传5M以内的图片！') |
||||
return false |
||||
} |
||||
this.file = file |
||||
this.curForm = form |
||||
this.cropperModel = true |
||||
this.$nextTick(() => { |
||||
this.$refs.cropper.updateImg({ |
||||
url: window.URL.createObjectURL(file.raw), |
||||
size: file.size |
||||
}) |
||||
}) |
||||
}, |
||||
// 上传成功 |
||||
uploadSuccess(res, row) { |
||||
this.$set(row, 'pic', res.url) |
||||
}, |
||||
// 展示链接设置 |
||||
toLink(row, i = 0) { |
||||
this.linkVisible = true |
||||
this.curIndex = i |
||||
this.linkForm = row.link |
||||
}, |
||||
// 链接设置提交 |
||||
linkSubmit() { |
||||
const el = this.$refs.link |
||||
const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link |
||||
let name |
||||
// 站内链接 |
||||
if (data.connectionType === 1) { |
||||
if (!data.columnId.length) return Util.errorMsg('请选择站内链接') |
||||
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
||||
if (data.articleId) { |
||||
const item = el.articles.find(e => e.id == data.articleId) |
||||
name = item ? item.title : '' |
||||
} else { |
||||
name = el.$refs.column.getCheckedNodes()[0].pathLabels.join('/') |
||||
} |
||||
} else if (data.connectionType === 3) { // 其他站点链接 |
||||
if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目') |
||||
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
||||
if (data.otherArticleId) { |
||||
const item = el.articles.find(e => e.id == data.otherArticleId) |
||||
name = item ? item.title : '' |
||||
} else { |
||||
name = el.$refs.otherColumn.getCheckedNodes()[0].pathLabels.join('/') |
||||
} |
||||
} else { // 站外链接 |
||||
if (!data.linkAddress) return Util.errorMsg('请输入站外链接') |
||||
name = data.linkAddress |
||||
} |
||||
data.linkName = name |
||||
this.linkVisible = false |
||||
}, |
||||
// 模块设置提交 |
||||
contentSubmit() { |
||||
this.$emit('contentSubmit') |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.radio-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
.el-input { |
||||
width: 200px; |
||||
margin-left: -40px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,228 @@ |
||||
<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="single-banner single-banner-overview"> |
||||
<img class="banner-img" :src="modules[0].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="tabs wow fadeInLeft"> |
||||
<template v-for="(item, i) in tabs"> |
||||
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||
</template> |
||||
</ul> |
||||
|
||||
<div class="block history"> |
||||
<div class="inner c-wrap"> |
||||
<h2 class="wow fadeInLeft">发展历程</h2> |
||||
<p class="en">DEVELOPMENT HISTORY</p> |
||||
|
||||
<div class="event"> |
||||
<ul class="time"> |
||||
<li class="active">2022</li> |
||||
<li>2021</li> |
||||
<li>2020</li> |
||||
</ul> |
||||
<div class="right"> |
||||
<h6 class="year">2022</h6> |
||||
<ul class="list"> |
||||
<li> |
||||
<div class="texts"> |
||||
<p class="date">10月11日</p> |
||||
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
||||
</div> |
||||
<img src="@/assets/images/about-bg.png" alt="" class="pic"> |
||||
</li> |
||||
<li> |
||||
<div class="texts"> |
||||
<p class="date">10月11日</p> |
||||
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="cover" style="min-height: 300px;" @click="toSet(1)">点击配置历程</div> |
||||
</div> |
||||
</div> |
||||
</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.overviewDevHistory, |
||||
active: 0, |
||||
tabs: ['发展历程'] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '站点管理', |
||||
route: '/site' |
||||
}, |
||||
{ |
||||
name: '内容管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '栏目管理', |
||||
route: '/column' |
||||
}, |
||||
{ |
||||
name: '概况-发展历程' |
||||
} |
||||
]) |
||||
}, |
||||
methods: { |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.active = i |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.wrap { |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat, |
||||
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat; |
||||
background-color: #fff; |
||||
} |
||||
.tabs { |
||||
display: flex; |
||||
justify-content: center; |
||||
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); |
||||
li { |
||||
padding: 25px 19px; |
||||
margin: 0 10px; |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
border-bottom: 4px solid transparent; |
||||
text-shadow: 0px 2px 14px rgba(167,167,167,0.26); |
||||
cursor: pointer; |
||||
&.active { |
||||
color: #1583FF; |
||||
border-bottom-color: #1583FF; |
||||
} |
||||
} |
||||
} |
||||
.history { |
||||
h2 { |
||||
position: relative; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #1C1C1C; |
||||
} |
||||
.en { |
||||
margin: -15px 0 40px; |
||||
font-size: 2.2rem; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #E3E3E3; |
||||
} |
||||
} |
||||
.event { |
||||
display: flex; |
||||
justify-content: center; |
||||
.time { |
||||
padding-right: 10px; |
||||
margin-right: 20px; |
||||
border-right: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
width: 190px; |
||||
padding-right: 45px; |
||||
line-height: 60px; |
||||
font-size: 1.4rem; |
||||
font-weight: 600; |
||||
font-family: SFProDisplay-Semibold, SFProDisplay; |
||||
color: #666; |
||||
box-shadow: inset 0px -1px 0px 0px #DDDDDD; |
||||
cursor: pointer; |
||||
&.active { |
||||
font-weight: 800; |
||||
color: #1A81F4; |
||||
background: linear-gradient(90deg, #FFFFFF 0%, #F3F8FF 100%); |
||||
&:before { |
||||
content: ''; |
||||
width: 18px; |
||||
height: 18px; |
||||
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat; |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.year { |
||||
margin: 0 0 20px 20px; |
||||
font-size: 3.8rem; |
||||
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
||||
font-weight: 800; |
||||
color: #1A81F4; |
||||
} |
||||
.list { |
||||
border-top: 1px solid #ddd; |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 30px; |
||||
border-bottom: 1px solid #ddd; |
||||
} |
||||
.texts { |
||||
width: 500px; |
||||
margin-right: 100px; |
||||
} |
||||
.date { |
||||
margin-bottom: 15px; |
||||
font-size: 1.2rem; |
||||
font-family: PingFangSC-Semibold, PingFang SC; |
||||
font-weight: 600; |
||||
color: #333; |
||||
} |
||||
.text { |
||||
font-size: 1.1rem; |
||||
color: #333; |
||||
@include mul-ellipsis(3); |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 7px; |
||||
height: 7px; |
||||
margin: 0 10px; |
||||
background-color: #666; |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
.pic { |
||||
width: 350px; |
||||
height: 195px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue