<template>
|
<div class="status_add">
|
<v-header :title="add ? '新增' : '编辑'"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label" data-require>商家名称：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.name"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section>
|
|
<!-- <section class="sec">
|
<p class="label" data-require>商家电话：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.phone"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section> -->
|
<section class="sec">
|
<!-- 联系方式 -->
|
<p class="label">联系方式：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.phone"
|
maxlength="50"
|
@change="serviceCallChange"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">管理员姓名：</p>
|
|
<article>
|
<!-- <el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.title"
|
maxlength="50"
|
></el-input> -->
|
<el-select
|
style=" width: 300px;"
|
v-model="merchantLinkman"
|
:placeholder="'输入联系电话后选择'"
|
size="small"
|
@change="changeTypes($event, i)"
|
>
|
<el-option
|
v-for="item in managerList"
|
:key="item.value"
|
:label="item.label"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label" data-require>商家地址：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请选择商家地址"
|
v-model="os.address"
|
@focus="onSelectAddress"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label"></p>
|
<article>
|
<div class="map" id="com-map-data"></div>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label" data-require>商家状态：</p>
|
<article class="unmountType">
|
<el-radio v-model="os.status" label="1">启用</el-radio>
|
<el-radio v-model="os.status" label="2">禁用</el-radio>
|
</article>
|
</section>
|
</div>
|
|
<div class="btn">
|
<el-button type="primary" size="small" @click="sub">
|
{{ "立即发布" }}
|
</el-button>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
import $map from "js/map";
|
import vU from "com/upload/upload";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: "" },
|
categoryIdEdit: { type: [String, Number], default: "" }
|
},
|
components: { EditorBar, vU, QuillEditor },
|
data() {
|
return {
|
checked: false,
|
checked1: false, //定时
|
isClear: false,
|
detail: "",
|
categoryId: "",
|
managerList: [],
|
merchantLinkman: {},
|
os: {
|
name: "", //商品名称
|
phone: "", //商品积分
|
status: "", //上架状态 0下架 1上架
|
lat: "",
|
lon: "",
|
address: "" //详情
|
},
|
queryDynamiclist: {},
|
expireTimeOption: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate() - 1));
|
return time < nowData;
|
}
|
},
|
expireTimeOption2: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate()));
|
return time > nowData;
|
}
|
},
|
maps: null,
|
mapSearch: 0,
|
$map: null,
|
isSearch: false,
|
map: null,
|
citys: []
|
};
|
},
|
watch: {
|
aid() {
|
this.getDetail();
|
},
|
categoryIdEdit(val) {
|
this.categoryId = val;
|
}
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.coverImgUrl = "";
|
},
|
onPath(v) {
|
this.os.coverImgUrl = v;
|
},
|
sub() {
|
let o = demo.copy(this.os);
|
if (!o.name) {
|
demo.toast("请输入商家名称");
|
return 0;
|
}
|
if (!o.phone) {
|
demo.toast("请输入商家电话");
|
return 0;
|
}
|
|
if (!this.merchantLinkman) {
|
return demo.toast("请选择联系人");
|
}
|
o.userId = this.merchantLinkman.userId;
|
|
if (!o.address) {
|
demo.toast("请输入商家地址");
|
return 0;
|
}
|
|
let method = "post";
|
let url = "StriveFor/addMerchantData";
|
if (!this.add) {
|
o.id = this.aid;
|
method = "post";
|
url = "StriveFor/editMerchantData";
|
}
|
|
let user = demo.$session.get("user") || {};
|
if (user.communityId) {
|
o.communityId = user.communityId;
|
}
|
|
this.$api[method](url, o, e => {
|
demo.toast((this.add ? "发布" : "编辑") + "成功");
|
this.reset();
|
this.$router.go(-1);
|
});
|
},
|
reset() {
|
for (let k in this.os) {
|
this.os[k] = "";
|
}
|
this.volunteerStyle = "";
|
this.checked = false;
|
},
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
// 点击地图
|
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;
|
},
|
getDetail() {
|
if (this.aid) {
|
this.$api.get(
|
"StriveFor/selectMerchantById",
|
{ merchantId: this.aid },
|
e => {
|
this.setCity();
|
// certificateUrl: "",
|
// name: "", //商品名称
|
// commodityValue: "",//商品价值
|
// phone: "",//商品积分
|
// status: "", //上架状态 0下架 1上架
|
// coverImgUrl: "",//封面
|
// content: ""//详情
|
this.os.name = e.name;
|
this.os.phone = e.phone;
|
// this.os.creationTime = e.creationTime;
|
this.os.status = e.status;
|
this.os.address = e.address;
|
if (e.lat && e.lon && !isNaN(e.lat) && !isNaN(e.lon)) {
|
console.log("setmap");
|
this.maps.setCenter([e.lon, e.lat]);
|
this.$map.dot(this.maps, { lng: e.lon, lat: e.lat });
|
}
|
this.serviceCallChange(e.phone);
|
}
|
);
|
}
|
},
|
serviceCallChange(val) {
|
this.$api.get("StriveFor/selectUserList", { phoneOrname: val }, data => {
|
this.managerList = data.map(d => {
|
return {
|
label: (d.name || "") + "(" + d.nickName + ")",
|
value: (d.name || "") + "(" + d.nickName + ")",
|
userId: d.userId
|
};
|
});
|
});
|
},
|
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) {
|
console.log("1111");
|
this.searchMap(v, true);
|
},
|
searchMap(v, flg) {
|
let ts = this;
|
console.log(v);
|
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;
|
}
|
},
|
mounted() {
|
this.categoryId = this.$route.query.id;
|
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);
|
|
if (!this.add) {
|
this.getDetail();
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.image-box2 {
|
position: relative;
|
/*overflow: hidden;*/
|
width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.status_add {
|
overflow-y: auto;
|
.edit,
|
.zd,
|
.btn {
|
margin-bottom: 10px;
|
margin-top: 30px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
article {
|
max-width: 500px;
|
}
|
|
.unmountType {
|
display: flex;
|
align-items: center;
|
}
|
.article-maxwidth {
|
.el-radio {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.map {
|
height: 400px;
|
background-color: #eee;
|
margin: 5px 0 0;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
