<template>
|
<div class="basicSet">
|
<p class="basicTip">小贴士：标题栏图片建议尺寸为 750*200 像素，背景图片宽度建议为 750 像素，长度有足够空间</p>
|
<div>
|
<el-form-item label="标题栏图片：" :required="true">
|
<custom-upload-img @handle-success="handleTitleSuccess" @handle-remove="handleTitleRemove"
|
:fileList="fileTitleList">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="标题栏底色：" :required="true">
|
<el-color-picker v-model="titleColor" @change="handleChange"></el-color-picker>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="背景图片：" :required="true">
|
<custom-upload-img :limitNumber="28" @handle-success="handleBgSuccess"
|
@handle-remove="handleBgRemove" :fileList="fileBgList"
|
@handle-file-data="handleFileData" :multiple="true" :draggable="true">
|
</custom-upload-img>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations, mapState } from 'vuex'
|
export default {
|
props: ['form'],
|
data () {
|
return {
|
fileTitleList: [],
|
titleColor: null,
|
fileBgList: []
|
}
|
},
|
watch: {
|
diyListFirst: {
|
handler (newValue, oldvalue) {
|
this.fileTitleList = newValue.titleImg ? [{ url: newValue.titleImg, id: newValue.id }] : []
|
this.titleColor = newValue.titleColor
|
newValue.bgImg.forEach(item => {
|
this.fileBgList.push(item)
|
})
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
...mapState(['diyList']),
|
diyListFirst () {
|
return this.diyList[0]
|
}
|
},
|
methods: {
|
...mapMutations(['updateDiylistById']),
|
// 数组更新时重新获取数据
|
handleFileData (arr) {
|
this.updateDiylistById({ id: 'basicSet', update: { bgImg: arr } })
|
this.fileBgList = arr
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleTitleSuccess (data) {
|
this.updateDiylistById({ id: 'basicSet', update: { titleImg: data.url } })
|
this.fileTitleList.push({
|
url: data.url
|
})
|
},
|
// 移除文件数组
|
removeFile (arr, data) {
|
return arr.filter(v => {
|
return v.id !== data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleTitleRemove (data) {
|
this.updateDiylistById({ id: 'basicSet', update: { titleImg: '' } })
|
this.fileTitleList = []
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleBgSuccess (data) {
|
const arr = JSON.parse(JSON.stringify(this.diyList[0].bgImg))
|
arr.push({
|
id: data.id,
|
url: data.url
|
})
|
this.updateDiylistById({ id: 'basicSet', update: { bgImg: arr } })
|
this.fileBgList.push({
|
url: data.url,
|
id: data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleBgRemove (data) {
|
const arr = JSON.parse(JSON.stringify(this.diyList[0].bgImg))
|
this.updateDiylistById({
|
id: 'basicSet',
|
update: {
|
bgImg: this.removeFile(arr, data)
|
}
|
})
|
this.fileBgList = this.removeFile(this.fileBgList, data)
|
},
|
handleChange (val) {
|
this.updateDiylistById({ id: 'basicSet', update: { titleColor: val } })
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.basicSet {
|
}
|
</style>
|
