wangyifang
/
dangxingjiaoyujidi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ditu

Browse Source
master
lion 3 years ago
parent e9162e795a
commit 18f67a9850
5 changed files with 44 additions and 84 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -14,6 +14,8 @@
"test:ci": "npm run lint && npm run test:unit" "test:ci": "npm run lint && npm run test:unit"
}, },
"dependencies": { "dependencies": {
"@smallwei/avue": "^2.9.12",
"avue-plugin-map": "^1.0.1",
"axios": "0.18.1", "axios": "0.18.1",
"core-js": "3.6.5", "core-js": "3.6.5",
"echarts": "^4.2.1", "echarts": "^4.2.1",

11
public/index.html
Unescape View File

@ -6,9 +6,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script> <!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script> <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=4VBBZ-HAA3X-QKI46-7GAL2-LQEOT-BEBKN"></script>
<script src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> <script src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> -->
<script>
window._AMapSecurityConfig = {
securityJsCode: 'dbc95be996393c8c69e3958bb945ea08',
}
</script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=53919608dd142b8d4498b43bfdef0792&plugin=AMap.PlaceSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

7
src/main.js
Unescape View File

@ -23,6 +23,13 @@ Vue.prototype.base = base;
import '@/icons' // icon import '@/icons' // icon
import '@/permission' // permission control import '@/permission' // permission control
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
// import AvueMap from 'avue-plugin-map'
// Vue.use(AvueMap);
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
* you want to use MockJs for mock api * you want to use MockJs for mock api

100
src/views/active/activity.vue
Unescape View File

@ -93,7 +93,8 @@
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="地址" prop="address"> <el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请填写活动地址" autocomplete="off"></el-input> <avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform" ></avue-input-map>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" :offset="4"> <el-col :span="10" :offset="4">
@ -103,39 +104,15 @@
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="地址经度" prop="longitude"> <el-form-item label="地址经度" prop="longitude">
<el-input v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input> <el-input disabled="" v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" :offset="4"> <el-col :span="10" :offset="4">
<el-form-item label="地址纬度" prop="latitude"> <el-form-item label="地址纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input> <el-input disabled="" v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="20" :offset="2">
<div id="containers" style="width:100%;height:300px;margin-bottom:20px"></div>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="开始时间" prop="start_time">
<el-date-picker style="width:100%" v-model="form.start_time" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动开始时间" @change="isShowTime">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="结束时间" prop="end_time">
<el-time-select style="width:100%" placeholder="结束时间" value-format="HH:mm:ss" v-model="form.end_time"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
minTime: showTime
}">
</el-time-select>
</el-form-item>
</el-col> -->
<el-col :span="8"> <el-col :span="8">
<el-form-item label="总人数" prop="total"> <el-form-item label="总人数" prop="total">
<el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input> <el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
@ -234,6 +211,7 @@
<script> <script>
import LxHeader from "@/components/LxHeader/index.vue"; import LxHeader from "@/components/LxHeader/index.vue";
import Tinymce from '@/components/Tinymce' import Tinymce from '@/components/Tinymce'
import AvueMap from 'avue-plugin-map'
import { import {
getToken getToken
} from '@/utils/auth' } from '@/utils/auth'
@ -249,6 +227,7 @@
components: { components: {
LxHeader, LxHeader,
Tinymce, Tinymce,
AvueMap
}, },
data() { data() {
return { return {
@ -314,7 +293,10 @@
value: "不限" value: "不限"
}] }]
}, },
mapparams:{
zoom: 11,
},
mapform:[] ,
form: { form: {
name: "", name: "",
area: "", area: "",
@ -430,58 +412,15 @@
}, },
watch: { watch: {
dialogFormVisible(newVal, oldVal) {
if (newVal == true) { mapform(newVal, oldVal) {
let that = this; this.form.longitude = newVal[0];
that.markerLayer = new TMap.MultiMarker({}); this.form.latitude = newVal[1];
that.initMap(); this.form.address = newVal[2];
}
} }
}, },
methods: { methods: {
initMap() {
//如果地图存在，就销毁，下面会重新创建一个
if (this.map!=null) {
this.map.destroy()
}
this.$nextTick(() => {
let that = this;
console.log(window); // 通过window获取
var center = new window.TMap.LatLng(31.302377, 120.625826)
//初始化地图
var map = new window.TMap.Map("containers", {
zoom: 18, //设置地图缩放级别
center: center, //设置地图中心点坐标
});
this.map = map;
map.on("click", (e) => {
this.markerLayer.setGeometries([]);
const position = e.latLng;
that.form.longitude = position.lng,
that.form.latitude = position.lat,
this.addImgMarker(position);
});
})
},
addImgMarker(data) {
this.markerLayer = new TMap.MultiMarker({
map: this.map,
//样式定义
styles: {
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
myStyle: new TMap.MarkerStyle({
width: 25, // 点标记样式宽度（像素）
height: 35, // 点标记样式高度（像素）
src: this.imgsrc, //图片路径
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
anchor: {
x: 16,
y: 32
},
}),
},
});
},
initLoad() { initLoad() {
var that = this; var that = this;
var clientHeight = document.documentElement.clientHeight var clientHeight = document.documentElement.clientHeight
@ -512,6 +451,7 @@
let result = Object.assign(that.form, res); let result = Object.assign(that.form, res);
that.form = result; that.form = result;
that.dateRange = [result.start_time, result.end_time]; that.dateRange = [result.start_time, result.end_time];
that.mapform = [result.longitude,result.latitude,result.address]
console.log(that.dateRange); console.log(that.dateRange);
// that.showTime = result.start_time.substring(11, result.start_time.length); // that.showTime = result.start_time.substring(11, result.start_time.length);
// that.form.end_time = result.end_time.substring(11, result.end_time.length); // that.form.end_time = result.end_time.substring(11, result.end_time.length);
@ -540,12 +480,12 @@
that.info(obj); that.info(obj);
} else { } else {
this.dateRange=[]; this.dateRange=[];
this.mapform = ['','',''];
} }
this.dialogFormVisible = true; this.dialogFormVisible = true;
}, },
compareDate (d1, d2) { compareDate (d1, d2) {
  let reg = new RegExp('-', 'g')   let reg = new RegExp('-', 'g')
  return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))   return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
@ -555,6 +495,10 @@
var that = this; var that = this;
that.form.start_time = this.dateRange[0]; that.form.start_time = this.dateRange[0];
that.form.end_time = this.dateRange[1]; that.form.end_time = this.dateRange[1];
if(!that.form.start_time||!that.form.end_time){
that.$message.error('请选择活动时间');
return false;
}
//比较预约截止不能大于活动开始时间 //比较预约截止不能大于活动开始时间
let checktime = that.compareDate(that.form.start_time,that.form.end_plan); let checktime = that.compareDate(that.form.start_time,that.form.end_plan);
if(!checktime){ if(!checktime){

Write Preview
Loading…
Cancel
Save