<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.coverUrl"
|
@fileHandle="fileHandle"
|
/>
|
</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>
|
</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: "",
|
coverUrl: ""
|
},
|
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.coverUrl = val;
|
}
|
},
|
isNulls(v, msg) {
|
if (this.os[v] === "") {
|
demo.toast(msg);
|
return !1;
|
}
|
return !0;
|
},
|
// 提交
|
sub() {
|
if (!this.os.title) return demo.toast("请输入标题");
|
if (!this.os.coverUrl) 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/articleEditData", ts.os, e => {
|
demo.toast("编辑成功");
|
this.onGetEditDetail();
|
this.$router.back();
|
});
|
return 0;
|
}
|
ts.$api.post("Jinhui/articleAddData", ts.os, () => {
|
demo.toast("添加成功");
|
setTimeout(() => {
|
ts.$router.back();
|
}, 800);
|
});
|
},
|
// 富文本
|
onInputMessage(v) {
|
this.os.content = v.html;
|
},
|
// 点击地图
|
onMapClick(v) {
|
this.os.lon = v.lng;
|
this.os.lat = v.lat;
|
this.os.address = v.geo.formattedAddress;
|
},
|
// 点击小点
|
onMapClickDot(v) {
|
this.os.address = v.address;
|
this.os.lon = v.lng;
|
this.os.lat = v.lat;
|
},
|
onGetEditDetail() {
|
this.$api.get("Jinhui/articleGetDetails", { id: this.id }, e => {
|
if (e.id) {
|
this.os = {
|
title: e.title,
|
content: e.content,
|
coverUrl: e.coverUrl
|
};
|
}
|
});
|
}
|
},
|
mounted() {
|
this.api = this.$js.api.upload;
|
|
if (this.edit) {
|
this.id = this.$route.params.id;
|
this.onGetEditDetail();
|
}
|
this.getStatus();
|
let ts = this;
|
|
ts.map = $map.init("com-map-data");
|
$map.click(ts.map, e => {
|
ts.os.lat = e.lat;
|
ts.os.lon = e.lng;
|
var geocoder = new AMap.Geocoder({
|
//地址逆向编码
|
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
});
|
var lnglat = [e.lng, e.lat];
|
|
geocoder.getAddress(lnglat, function(status, result) {
|
console.log(result.regeocode.formattedAddress);
|
ts.os.address = result.regeocode.formattedAddress;
|
if (status === "complete" && result.info === "OK") {
|
// result为对应的地理位置详细信息
|
}
|
});
|
});
|
$map.setCity("攀枝花", ts.map);
|
}
|
};
|
</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>
|
