<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>
|
<el-select v-model="classifyId" filterable placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>管理员：</p>
|
<article>
|
<el-input
|
type="text"
|
class="m_inp"
|
placeholder="请输入管理员"
|
maxlength="35"
|
v-model="os.intendant"
|
/>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>管理员电话：</p>
|
<article>
|
<el-input
|
type="text"
|
class="m_inp"
|
placeholder="请输入管理员电话"
|
maxlength="35"
|
v-model="os.intendantPhone"
|
/>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>空间介绍：</p>
|
<article>
|
<el-input
|
style="height:100px;"
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 4 }"
|
class="m_inp"
|
placeholder="请输入空间介绍"
|
v-model="os.content"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>空间地址：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请选择空间地址"
|
v-model="os.address"
|
@input="onSelectAddress"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label"></p>
|
<article>
|
<div class="map" id="com-map-data"></div>
|
</article>
|
</section>
|
|
<section>
|
<p class="label" data-require>空间图片：</p>
|
<article>
|
<UploadImg
|
:multiple="true"
|
:imgNum="9"
|
:imgShow="os.imgUrl"
|
@fileHandle="fileHandle"
|
/>
|
</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";
|
|
export default {
|
props: {
|
edit: { type: Boolean, default: false }
|
},
|
components: { vE, vM, home, UploadImg },
|
data() {
|
return {
|
trs: [
|
{ text: "序号", val: "btn", width: "50px", slot: "id" },
|
{ text: "材料名称", val: "btn", slot: "name" }
|
],
|
tds: [],
|
mapValue: "",
|
os: {
|
address: "",
|
content: "",
|
lat: "",
|
lon: "",
|
intendantPhone: "",
|
intendant: "",
|
title: ""
|
},
|
options: [],
|
classifyId: "",
|
api: "",
|
content: "",
|
id: "",
|
maps: null,
|
mapSearch: 0,
|
$map: null,
|
isSearch: false,
|
map: null,
|
citys: [],
|
fromData: [],
|
list: [],
|
checkImgList: []
|
};
|
},
|
watch: {},
|
methods: {
|
fileHandle({ type, val }) {
|
if (type == "list") {
|
this.os.imgUrl = val;
|
}
|
},
|
|
setCity() {
|
//解决编辑时所在地无法显示问题 注意不是 $map.setCity
|
let ts = this;
|
let v = ts.citys.filter(r => {
|
return r.districtName === ts.detail.areaName;
|
});
|
if (v[0]) {
|
ts.city = ["1", "2", v[0].id];
|
ts.$nextTick(() => {
|
$map.clearDot(ts.map);
|
$map.clickDot = $map.dot(ts.map, ts.detail);
|
ts.isSearch = false;
|
setTimeout(() => {
|
ts.map.setCenter([ts.detail.lng, ts.detail.lat]);
|
}, 300);
|
});
|
}
|
},
|
onSelectAddress(v) {
|
this.searchMap(v, true);
|
},
|
searchMap(v, flg) {
|
let ts = this;
|
if (ts.isSearch) return 0;
|
$map.search(
|
v,
|
e => {
|
if (e.code === 1000) {
|
ts.os.lat = e.e.lat;
|
ts.os.lon = e.e.lng;
|
if (flg) {
|
ts.os.address = e.e.address;
|
}
|
$map.clearDot(ts.map);
|
$map.clickDot = $map.dot(ts.map, e.e);
|
}
|
},
|
true,
|
ts.map
|
);
|
},
|
onMapInit(v) {
|
this.maps = v.event;
|
this.$map = v.map;
|
},
|
isNulls(v, msg) {
|
if (this.os[v] === "") {
|
demo.toast(msg);
|
return !1;
|
}
|
return !0;
|
},
|
// 提交
|
sub() {
|
if (!this.os.title) return demo.toast("请输入空间名称");
|
if (!this.classifyId) return demo.toast("请选择空间分类");
|
if (!this.os.intendant) return demo.toast("请输入管理员");
|
if (!this.os.intendantPhone) return demo.toast("请输入管理员电话");
|
if (!this.os.content) return demo.toast("请输入空间介绍");
|
if (!this.os.lat) return demo.toast("请选择空间地址");
|
if (!this.os.lon) return demo.toast("请选择空间地址");
|
if (!this.os.imgUrl) return demo.toast("请选择空间图片");
|
let ts = this;
|
ts.os.intendantType = this.classifyId;
|
|
console.log("ts.os+++", JSON.stringify(ts.os));
|
if (ts.edit) {
|
ts.os.id = ts.id;
|
ts.$api.post("Jinhui/interspaceEditData", ts.os, e => {
|
demo.toast("编辑成功");
|
this.onGetEditDetail();
|
this.$router.back();
|
});
|
return 0;
|
}
|
ts.$api.post("Jinhui/interspaceAddData", 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/interspaceGetDetails", { id: this.id }, e => {
|
if (e.id) {
|
this.setCity();
|
|
this.os = {
|
address: e.address,
|
content: e.content,
|
lat: e.lat,
|
lon: e.lon,
|
intendantPhone: e.intendantPhone,
|
intendant: e.intendant,
|
title: e.title,
|
imgUrl: e.imgUrl,
|
timeAt: e.timeAt
|
};
|
(this.classifyId = e.intendantType), (this.content = e.content);
|
this.mapSearch++;
|
// this.$nextTick(() => {
|
// this.mapValue = e.address;
|
// });
|
|
if (e.lat && e.lon && this.maps && !isNaN(e.lat) && !isNaN(e.lon)) {
|
this.maps.setCenter([e.lon, e.lat]);
|
this.$map.dot(this.maps, { lng: e.lon, lat: e.lat });
|
}
|
}
|
});
|
},
|
getStatus() {
|
this.$api.get(
|
"Jinhui/interspaceTypeGetList",
|
{
|
pageNum: 1,
|
pageSize: 50
|
},
|
e => {
|
this.options = e.records.map(d => {
|
return {
|
value: d.id,
|
label: d.intendantName
|
};
|
});
|
}
|
);
|
}
|
},
|
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>
|
