<template>
|
<div class="shop_work_box">
|
<div>
|
<div class="lines">
|
<h6>慈善公益添加</h6>
|
<div class="demo_form">
|
<section>
|
<p class="label" data-require>标题：</p>
|
<article>
|
<el-input
|
type="text"
|
class="m_inp"
|
placeholder="请输入标题"
|
maxlength="35"
|
v-model="os.title"
|
/>
|
</article>
|
</section>
|
|
<section>
|
<p class="label" data-require>封面：</p>
|
<article>
|
<UploadImg
|
:multiple="true"
|
:imgNum="1"
|
:imgShow="os.coverImgUrl"
|
@fileHandle="fileHandle"
|
/>
|
</article>
|
</section>
|
|
<section>
|
<p class="label" data-require>简语：</p>
|
<article>
|
<el-input
|
type="text"
|
class="m_inp"
|
placeholder="请输入简语"
|
maxlength="35"
|
v-model="os.simpleStatement"
|
/>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>标签：</p>
|
<article>
|
<el-input
|
type="text"
|
class="m_inp"
|
placeholder="请输入标签"
|
maxlength="35"
|
v-model="os.label"
|
/>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label">项目详情：</p>
|
<article>
|
<div class="edit">
|
<quill-editor
|
@editorContext="change"
|
:contentText="os.content"
|
></quill-editor>
|
</div>
|
</article>
|
</section>
|
|
<section>
|
<p class="label" data-require>收款二维码：</p>
|
<article>
|
<UploadImg
|
:multiple="true"
|
:imgNum="1"
|
:imgShow="os.qrCodeUrl"
|
@fileHandle="fileHandle1"
|
/>
|
</article>
|
</section>
|
</div>
|
</div>
|
</div>
|
|
<div class="sub">
|
<button class="m_btn bgc_primary small" @click="sub">提交</button>
|
<button class="m_btn small" @click="$router.back()">取消</button>
|
</div>
|
<div class="end"></div>
|
</div>
|
</template>
|
|
<script>
|
import vE from "com/editor/editor";
|
import vM from "com/map/map";
|
import $map from "js/map";
|
import home from "../../../form/Home";
|
import UploadImg from "../../../../components/upload/uploadImg.vue";
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
|
export default {
|
props: {
|
edit: { type: Boolean, default: false }
|
},
|
components: { vE, vM, home, UploadImg, QuillEditor },
|
data() {
|
return {
|
trs: [
|
{ text: "序号", val: "btn", width: "50px", slot: "id" },
|
{ text: "材料名称", val: "btn", slot: "name" }
|
],
|
tds: [],
|
mapValue: "",
|
os: {
|
content: "",
|
title: "",
|
label: "",
|
simpleStatement: "",
|
qrCodeUrl: "",
|
coverImgUrl: ""
|
},
|
content: "",
|
id: "",
|
maps: null,
|
mapSearch: 0,
|
$map: null,
|
isSearch: false,
|
map: null,
|
citys: [],
|
fromData: [],
|
list: [],
|
checkImgList: []
|
};
|
},
|
watch: {},
|
methods: {
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
fileHandle({ type, val }) {
|
if (type == "list") {
|
this.os.coverImgUrl = val;
|
}
|
},
|
fileHandle1({ type, val }) {
|
if (type == "list") {
|
this.os.qrCodeUrl = val;
|
}
|
},
|
// 提交
|
sub() {
|
if (!this.os.title) return demo.toast("请输入标题");
|
if (!this.os.coverImgUrl) return demo.toast("请选择封面");
|
|
if (!this.os.simpleStatement) return demo.toast("请输入简语");
|
if (!this.os.label) return demo.toast("请输入标签");
|
|
if (!this.os.qrCodeUrl) return demo.toast("请选择二维码");
|
if (!this.os.content) return demo.toast("请输入内容");
|
let ts = this;
|
|
if (ts.edit) {
|
ts.os.id = ts.id;
|
ts.$api.post("Jinhui/editCharityData", ts.os, e => {
|
demo.toast("编辑成功");
|
this.onGetEditDetail();
|
this.$router.back();
|
});
|
return 0;
|
}
|
ts.$api.post("Jinhui/addCharityData", ts.os, () => {
|
demo.toast("添加成功");
|
setTimeout(() => {
|
ts.$router.back();
|
}, 800);
|
});
|
},
|
// 富文本
|
onInputMessage(v) {
|
this.os.content = v.html;
|
},
|
|
onGetEditDetail() {
|
this.$api.get("Jinhui/getCharityDetails", { id: this.id }, e => {
|
if (e.id) {
|
this.os = {
|
title: e.title,
|
content: e.content,
|
label: e.label,
|
simpleStatement: e.simpleStatement,
|
qrCodeUrl: e.qrCodeUrl,
|
coverImgUrl: e.coverImgUrl
|
};
|
}
|
});
|
}
|
},
|
mounted() {
|
if (this.edit) {
|
this.id = this.$route.params.id;
|
this.onGetEditDetail();
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.shop_work_box {
|
overflow-y: auto;
|
.sub {
|
display: flex;
|
margin: 20px 0 0;
|
.m_btn {
|
min-width: 80px;
|
margin-right: 10px;
|
}
|
}
|
.texts {
|
display: block;
|
width: 100%;
|
}
|
.end {
|
height: 100px;
|
}
|
.map {
|
height: 400px;
|
background-color: #eee;
|
margin: 5px 0 0;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.edit {
|
height: 400px;
|
margin-bottom: 90px;
|
}
|
.lines {
|
max-width: 700px;
|
position: relative;
|
margin-bottom: 18px;
|
h6 {
|
font-size: 16px;
|
padding: 10px 0;
|
}
|
}
|
.all_line {
|
word-break: break-all;
|
white-space: pre-wrap;
|
line-height: 1.2;
|
}
|
|
.nav-title {
|
width: 100%;
|
height: 50px;
|
line-height: 65px;
|
padding-bottom: 15px;
|
border-bottom: 1px #e6e6e6 solid;
|
margin-bottom: 30px;
|
.left-tab {
|
float: left;
|
span {
|
margin-right: 35px;
|
cursor: pointer;
|
color: #606266;
|
}
|
.active {
|
color: #409eff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
.right-tab {
|
float: right;
|
}
|
}
|
.update-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 260px;
|
height: 154px;
|
border: 1px dashed #999;
|
}
|
.fz-15 {
|
font-size: 30px;
|
}
|
.img-shwo-item {
|
cursor: pointer;
|
width: 260px;
|
height: 154px;
|
}
|
.img-list-item {
|
margin-bottom: 10px;
|
width: 260px;
|
height: 154px;
|
position: relative;
|
border: 1px dashed #fff;
|
}
|
.check-img {
|
cursor: pointer;
|
z-index: 999;
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
}
|
.fl-f {
|
display: flex;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.mr-r-10 {
|
margin-right: 10px;
|
}
|
}
|
</style>
|
