<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" type="number" 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">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': from.bgImgUrl, 'imgurl': from.bgImg }"
|
:uploadData="{ folder: 'web_param' }"
|
tipsLabel=""
|
@uploadSuccess="uploadReverseSuccess"
|
/>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">顶部宣传图：</div>
|
<div class="pz_item_ipt">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': from.topImgUrl, 'imgurl': from.topImg }"
|
:uploadData="{ folder: 'web_param' }"
|
tipsLabel=""
|
@uploadSuccess="uploadReverseSuccess1"
|
/>
|
</div>
|
</div>
|
<div class="pz_item">
|
<div class="pz_item_label">PK台图：</div>
|
<div class="pz_item_ipt">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': from.pkImgUrl, 'imgurl': from.pkImg }"
|
:uploadData="{ folder: 'web_param' }"
|
tipsLabel=""
|
@uploadSuccess="uploadReverseSuccess2"
|
/>
|
</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'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue'
|
|
export default {
|
data() {
|
return {
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
from: {
|
rangeSize: '',
|
mainColor: '',
|
bgImg: '',
|
bgImgUrl: '',
|
topImg: '',
|
topImgUrl: '',
|
pkImg: '',
|
pkImgUrl: ''
|
}
|
}
|
},
|
components: { UploadAvatarImage },
|
created() {
|
this.getDesc()
|
},
|
methods: {
|
submit() {
|
if (this.from.rangeSize < 750) {
|
this.$message.warning({ message: '尺寸必须大于750' })
|
return
|
}
|
if (this.from.rangeSize > 1200) {
|
this.$message.warning({ message: '尺寸必须小于1200' })
|
return
|
}
|
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.from.bgImgUrl = res.resourcePath + res.bgImg
|
}
|
if (res.topImg) {
|
this.from.topImg = res.topImg
|
this.from.topImgUrl = res.resourcePath + res.topImg
|
}
|
if (res.pkImg) {
|
this.from.pkImg = res.pkImg
|
this.from.pkImgUrl = res.resourcePath + res.pkImg
|
}
|
}
|
})
|
},
|
exceed() {
|
this.$message.warning({ message: '只能上传一张图片' })
|
},
|
|
uploadReverseSuccess2(file) {
|
this.from.pkImg = file.imgurl;
|
this.from.pkImgUrl = file.imgurlfull;
|
},
|
uploadReverseSuccess1(file) {
|
this.from.topImg = file.imgurl;
|
this.from.topImgUrl = file.imgurlfull;
|
},
|
|
uploadReverseSuccess(file) {
|
this.from.bgImg = file.imgurl;
|
this.from.bgImgUrl = file.imgurlfull;
|
},
|
|
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>
|
