<template>
|
<!--
|
作者：自定义
|
时间：2025-10-31
|
描述：插件中心-名片-名片设置-页面背景图
|
-->
|
<div class="test-wrap mt30">
|
<el-form size="small" ref="form" :model="form" label-width="200px">
|
<el-form-item label="名片详情跳转平台">
|
<el-button type="primary" plain icon="el-icon-upload" @click="openUpload(1)">上传图片</el-button>
|
<div v-if="form.digital_asset_1 != ''" class="img">
|
<img :src="form.digital_asset_1" width="200" />
|
</div>
|
<div class="tips">建议尺寸：根据实际需求上传</div>
|
</el-form-item>
|
<el-form-item label="名片详情跳转店铺">
|
<el-button type="primary" plain icon="el-icon-upload" @click="openUpload(2)">上传图片</el-button>
|
<div v-if="form.digital_asset_2 != ''" class="img">
|
<img :src="form.digital_asset_2" width="200" />
|
</div>
|
<div class="tips">建议尺寸：根据实际需求上传</div>
|
</el-form-item>
|
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
</div>
|
</el-form>
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
</div>
|
</template>
|
|
<script>
|
import Upload from '@/components/file/Upload.vue';
|
import BusinessApi from '@/api/business';
|
export default {
|
components: {
|
Upload
|
},
|
props: {
|
settingData: Object
|
},
|
data() {
|
return {
|
form: {
|
digital_asset_1: '',
|
digital_asset_2: ''
|
},
|
/*是否上传图片*/
|
isupload: false,
|
/*是否正在加载*/
|
loading: false,
|
/*图片类别*/
|
type: ''
|
};
|
},
|
watch: {
|
settingData: {
|
handler(val) {
|
if (val && val.background) {
|
this.form = val.background.values;
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
methods: {
|
/*上传*/
|
openUpload(e) {
|
this.type = e;
|
this.isupload = true;
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
if (e != null) {
|
if (this.type == 1) {
|
this.form.digital_asset_1 = e[0].file_path;
|
}
|
if (this.type == 2) {
|
this.form.digital_asset_2 = e[0].file_path;
|
}
|
}
|
this.isupload = false;
|
},
|
onSubmit() {
|
BusinessApi.settingBackground(this.form).then(res => {
|
this.$message.success(res.msg);
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.img {
|
margin-top: 10px;
|
}
|
.tips {
|
font-size: 12px;
|
color: #999;
|
margin-top: 5px;
|
}
|
</style>
|
