<template>
|
<div class="pz">
|
<div class="pz_head">基本信息</div>
|
<div class="pz_item">
|
<div class="pz_item_label">内容范围尺寸：</div>
|
<div class="pz_item_ipt">
|
<el-input v-model="from.rangeSize" placeholder="支持750px-1200px"></el-input>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">主色色值：</div>
|
<div class="pz_item_ipt">
|
<el-color-picker v-model="from.mainColor"></el-color-picker>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">背景图：</div>
|
<div class="pz_item_ipt">
|
<el-upload
|
:action="action"
|
:data="{ folder: 'web_param' }"
|
list-type="picture-card"
|
:limit="1"
|
:on-exceed="exceed"
|
:file-list="fileList1"
|
:on-success="fileSuccess1"
|
:on-remove="handleRemove1">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">顶部宣传图：</div>
|
<div class="pz_item_ipt">
|
<el-upload
|
:action="action"
|
:data="{ folder: 'web_param' }"
|
list-type="picture-card"
|
:on-exceed="exceed"
|
:limit="1"
|
:file-list="fileList2"
|
:on-success="fileSuccess2"
|
:on-remove="handleRemove2">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">PK台图：</div>
|
<div class="pz_item_ipt">
|
<el-upload
|
:action="action"
|
:data="{ folder: 'web_param' }"
|
list-type="picture-card"
|
:on-exceed="exceed"
|
:limit="1"
|
:file-list="fileList3"
|
:on-success="fileSuccess3"
|
:on-remove="handleRemove3">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
</div>
|
<div class="pz_footer">
|
<el-button type="primary" @click="submit">保存</el-button>
|
<el-button>返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getByLogin, renew } from '@/api/business/page.js'
|
|
export default {
|
data() {
|
return {
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
from: {
|
rangeSize: '',
|
mainColor: '',
|
bgImg: '',
|
topImg: '',
|
pkImg: ''
|
},
|
fileList1: [],
|
fileList2: [],
|
fileList3: []
|
}
|
},
|
created() {
|
this.getDesc()
|
},
|
methods: {
|
submit() {
|
renew(this.from)
|
.then(res => {
|
this.$message.success({ message: '保存成功' })
|
})
|
},
|
getDesc() {
|
getByLogin({})
|
.then(res => {
|
if (res) {
|
this.from.rangeSize = res.rangeSize
|
this.from.mainColor = res.mainColor
|
if (res.bgImg) {
|
this.from.bgImg = res.bgImg
|
this.fileList1 = [{ name: res.bgImg, url: res.resourcePath + res.bgImg }]
|
}
|
if (res.topImg) {
|
this.fileList2 = []
|
this.from.topImg = res.topImg
|
let arr = res.topImg.split(',').map(item => item)
|
arr.forEach(item => {
|
this.fileList2.push({ name: item, url: res.resourcePath + item })
|
})
|
}
|
if (res.pkImg) {
|
this.fileList3 = []
|
this.from.pkImg = res.pkImg
|
let arr = res.pkImg.split(',').map(item => item)
|
arr.forEach(item => {
|
this.fileList3.push({ name: item, url: res.resourcePath + item })
|
})
|
}
|
}
|
})
|
},
|
exceed() {
|
this.$message.warning({ message: '只能上传一张图片' })
|
},
|
|
handleRemove1(file, fileList) {
|
this.fileList1 = []
|
this.from.bgImg = ''
|
},
|
fileSuccess1(response) {
|
this.fileList1.push({ name: response.data.imgaddr, url: response.data.url })
|
this.from.bgImg = response.data.imgaddr
|
},
|
|
handleRemove2(file, fileList) {
|
this.fileList2.forEach((item, index) => {
|
if (file.name === item.name) {
|
this.fileList2.splice(index, 1)
|
}
|
})
|
let arr = this.fileList2.map(item => item.name)
|
this.from.topImg = arr.join(',')
|
},
|
fileSuccess2(response) {
|
this.fileList2.push({ name: response.data.imgaddr, url: response.data.url })
|
let arr = this.fileList2.map(item => item.name)
|
this.from.topImg = arr.join(',')
|
},
|
|
handleRemove3(file, fileList) {
|
this.fileList3.forEach((item, index) => {
|
if (file.name === item.name) {
|
this.fileList3.splice(index, 1)
|
}
|
})
|
let arr = this.fileList3.map(item => item.name)
|
this.from.pkImg = arr.join(',')
|
},
|
fileSuccess3(response) {
|
this.fileList3.push({ name: response.data.imgaddr, url: response.data.url })
|
let arr = this.fileList3.map(item => item.name)
|
this.from.pkImg = arr.join(',')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pz {
|
width: 100%;
|
padding: 30px;
|
box-sizing: border-box;
|
background-color: #fff;
|
.pz_head {
|
font-size: 20px;
|
margin-bottom: 30px;
|
font-weight: bold;
|
}
|
.pz_item {
|
width: 750px;
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 30px;
|
.pz_item_label {
|
width: 140px;
|
flex-shrink: 0;
|
font-size: 16px;
|
text-align: right;
|
}
|
.pz_item_ipt {
|
flex: 1;
|
}
|
}
|
.pz_footer {
|
width: 100%;
|
padding-left: 140px;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
