269 lines
6.7 KiB
Vue
269 lines
6.7 KiB
Vue
<template>
|
|
<scroll-view class="divForm" :style="{height}" scroll-y show-scrollbar>
|
|
<uni-forms ref="formRef" :model="formData" :label-width="100">
|
|
<uni-forms-item label="站点名称" name="name" required :rules="[{'required': true,errorMessage: '请填写站点名称'}]">
|
|
<uni-easyinput v-model="formData.name" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点类型:" name="zdlx" required :rules="[{'required': true,errorMessage: '请选择站点类型'}]">
|
|
<uni-data-select v-model="formData.zdlx" :localdata="arrZDLX" />
|
|
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点级别:" name="zdjb" required :rules="[{'required': true,errorMessage: '请选择站点级别'}]">
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.zdjb" :localdata="arrZDJB" />
|
|
</div>
|
|
</uni-forms-item>
|
|
<!-- <uni-forms-item label="调度投放:" name="ddtf" required :rules="[{'required': true,errorMessage: '请选择调度投放'}]">
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.ddtf" :localdata="arrDDTF" />
|
|
</div>
|
|
|
|
</uni-forms-item>
|
|
<uni-forms-item label="用户端显示:" name="zdxs" required :rules="[{'required': true,errorMessage: '请选择用户端显示'}]">
|
|
<div class="divRow">
|
|
<uni-data-checkbox v-model="formData.zdxs" :localdata="arrZDXS" />
|
|
<label style="margin-left: 10px;" @click="showTip('开启后在用户端小程序地图上不会显示站点,但不影响用户在该站点范围内还车')">
|
|
<uni-icons type="info" size="20" color="#5892E3" /></label>
|
|
</div>
|
|
</uni-forms-item>-->
|
|
<uni-forms-item label="可停车辆:" name="ktcl" required :rules="[{'required': true,errorMessage: '请填写可停车辆'}]">
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.ktcl" />
|
|
<label>辆</label>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="最大可停:" name="zdkt" required :rules="[{'required': true,errorMessage: '请填写最大可停'}]">
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.zdkt" />
|
|
<label>辆</label>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="还车半径:" >
|
|
<div class="divRow">
|
|
<uni-easyinput v-model="formData.hcbj" />
|
|
<label>米</label>
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点图片:">
|
|
<div>
|
|
<div class="divFontColor" style="margin: 10px 0px;">最多3张</div>
|
|
<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="3" />
|
|
</div>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点描述:">
|
|
<uni-easyinput type="textarea" v-model="formData.zdms" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="站点标签:">
|
|
<uni-data-checkbox mode="button" multiple v-model="formData.zdbq" :localdata="arrZDBQ" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
|
|
</scroll-view>
|
|
<div class="divBottom">
|
|
<div class="b-btn-white divtBtn" v-if="opentype=='edit'" @click="openMap">重新绘制</div>
|
|
<div class="b-btn-white divtBtn" v-if="opentype=='add'" @click="openMap">返回绘制</div>
|
|
<div class="b-btn-blue divtBtn" style="margin-left: 10px;" @click="SaveData">确认{{opentype=='add'?"新建":"保存"}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
showModelMessage,
|
|
getScreenHeightNoTabBar
|
|
} from "@/utils/tools.js";
|
|
import {
|
|
ref
|
|
} from "vue";
|
|
import * as map from "@/utils/map.js";
|
|
import QQMapWX from "@/utils/qqmap-wx-jssdk.js";
|
|
|
|
var qqmapsdk = new QQMapWX({
|
|
key: map.sdkKey
|
|
});
|
|
|
|
const formRef = ref("formRef");
|
|
let height = ref("100%");
|
|
const opentype = ref("add");
|
|
|
|
const arrZDLX = ref([{
|
|
text: "停车站点",
|
|
value: 1
|
|
}, {
|
|
text: "禁停站点",
|
|
value: 2
|
|
}]);
|
|
|
|
const arrZDJB = ref([{
|
|
text: "一级",
|
|
value: 1
|
|
}, {
|
|
text: "二级",
|
|
value: 2
|
|
}, {
|
|
text: "三级",
|
|
value: 3
|
|
}]);
|
|
|
|
const arrDDTF = ref([{
|
|
text: "开启",
|
|
value: 1
|
|
}, {
|
|
text: "关闭",
|
|
value: 2
|
|
}]);
|
|
|
|
const arrZDXS = ref([{
|
|
text: "隐藏",
|
|
value: 1
|
|
}, {
|
|
text: "显示",
|
|
value: 2
|
|
}]);
|
|
|
|
const arrZDBQ = ref([{
|
|
text: "早高峰",
|
|
value: 1
|
|
}, {
|
|
text: "午高峰",
|
|
value: 2
|
|
}, {
|
|
text: "晚高峰",
|
|
value: 2
|
|
}]);
|
|
|
|
let arrPoint = [];
|
|
let radius = null;
|
|
const formData = ref({
|
|
name: "站点名称",
|
|
zdlx: 1,
|
|
zdjb: 1,
|
|
ktcl: 10,
|
|
zdkt: 20,
|
|
hcbj: 10,
|
|
zdms: "站点描述",
|
|
zdbq: [1],
|
|
zdtf: 1,
|
|
zdxs: 1
|
|
});
|
|
|
|
function openMap() {
|
|
const type = opentype.value;
|
|
if (type == "add") {
|
|
uni.navigateBack();
|
|
return;
|
|
}
|
|
if (type == "edit") {
|
|
const id = formData.value.id;
|
|
//const points = JSON.stringify(arrPoint);
|
|
const points='[{"latitude":30.571833529690217,"longitude":104.06370857334673},{"latitude":30.571476489584985,"longitude":104.06382896516845},{"latitude":30.571211588676054,"longitude":104.0681363214153},{"latitude":30.571845047283958,"longitude":104.06805606033697},{"latitude":30.571833529690217,"longitude":104.06370857334673}]';
|
|
uni.navigateTo({
|
|
url: `/pages/map/map-bikesite?type=edit&id=${id}&points=${points}&k=${Date.now()}`
|
|
})
|
|
}
|
|
}
|
|
|
|
function SaveData() {
|
|
formRef.value.validate().then(res=>{
|
|
console.log("66666666666666666666666666666",res);
|
|
}).catch(res=>{
|
|
console.log("7777777777777777777777",res);
|
|
})
|
|
}
|
|
|
|
function showTip(title) {
|
|
showModelMessage(title);
|
|
}
|
|
onLoad(options => {
|
|
const {
|
|
id,
|
|
points,
|
|
radius: r,
|
|
type
|
|
} = options;
|
|
console.log("111111111111111111111",options)
|
|
opentype.value = type;
|
|
|
|
let title = "";
|
|
switch (type) {
|
|
case "add":
|
|
title = "新建站点";
|
|
break;
|
|
case "edit":
|
|
title = "编辑站点";
|
|
break;
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title
|
|
});
|
|
getScreenHeightNoTabBar(res => {
|
|
height.value = (res - 60) + "px";
|
|
});
|
|
if (points) {
|
|
arrPoint = JSON.parse(points);
|
|
radius = r;
|
|
const {
|
|
latitude,
|
|
longitude
|
|
} = arrPoint[0];
|
|
if (type == "add") {
|
|
map.reverseGeocoder(qqmapsdk, longitude, latitude, (res) => {
|
|
console.log("3333333333333","reverseGeocoder",longitude, latitude,res)
|
|
const {
|
|
formatted_addresses: {
|
|
recommend
|
|
}
|
|
} = res;
|
|
formData.value.name = recommend;
|
|
}, (res) => {
|
|
console.log("fail", res);
|
|
})
|
|
}
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.divForm {
|
|
width: 100vw;
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
/* .divForm /deep/ .uni-forms-item {
|
|
margin-bottom: 10px !important;
|
|
} */
|
|
|
|
.divFontColor {
|
|
color: #606266;
|
|
}
|
|
|
|
.divRow {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
height: 36px;
|
|
}
|
|
|
|
.divRow label {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.divBottom {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
background-color: white;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 100vw;
|
|
}
|
|
|
|
.divBottom .divtBtn {
|
|
width: 100vw;
|
|
text-align: center;
|
|
}
|
|
</style> |