招生

src/views/recruit/recruitstudentsignup/showMap.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-dialog
+    title="家庭地址地图选点"
+    append-to-body
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    width="90%" heigth="90%"
+  >
+    <div style="height: 100%;width:100%">
+      <el-form :model="form" :rules="rules" ref="form" label-width="120px"
+               class="demo-ruleForm">
+
+        <el-form-item label="家庭地址" prop="homeAddressDetail">
+          <el-input v-model="form.homeAddressDetail" style="width: 100%"></el-input>
+        </el-form-item>
+
+      </el-form>
+      <div id="container2"></div>
+    </div>
+<!--    <span slot="footer" class="dialog-footer">-->
+<!--        <el-button type="primary" @click="dataFormSubmit">确定</el-button>-->
+<!--        <el-button @click="visible = false">取消</el-button>-->
+<!--      </span>-->
+  </el-dialog>
+</template>
+<script>
+import {BMPGL, changeMajor} from "@/api/recruit/recruitstudentsignup";
+import {putItemObj} from "@/api/admin/dict";
+import {getTypeValue} from "@/api/admin/dict";
+
+export default {
+  data() {
+    return {
+      ak: "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7", // 百度的地图密钥
+      visible: false,
+      canSubmit: false,
+      circleShow: false,
+      circle: "",
+      // 地址信息
+      address: null,
+      center: {lng: 0, lat: 0},
+      form: {
+        id: "",
+        homeAddressDetail: "",
+      },
+      dictId: "",
+      rules: {
+        homeAddressDetail: [
+          {required: true, message: '家庭地址不能为空', trigger: ["blur", "change"]}
+        ],
+      },
+      circleArr: [],
+
+    };
+  },
+  watch: {},
+  methods: {
+    init(row) {
+      let _this = this;
+      this.visible = true;
+      this.canSubmit = true;
+      this.circleShow = true;
+      this.form.id = row.id;
+      this.form.homeAddressDetail = row.homeAddressDetail;
+      this.$nextTick(() => {
+        getTypeValue("dorm_jw").then(data => {
+          let arr = data.data.data;
+          arr.forEach(e => {
+            if (e.label == 'bj') {
+              _this.form.raidus = e.value;
+              _this.dictId = e.id;
+            } else if (e.label == 'lng') {
+              _this.center.lng = e.value;
+            } else if (e.label == 'lat') {
+              _this.center.lat = e.value;
+            }
+          });
+          BMPGL(_this.ak).then((BMapGL) => {
+            // 创建地图实例
+            let map = new BMapGL.Map("container2");
+            // 创建点坐标 axios => res 获取的初始化定位坐标
+            let point = new BMapGL.Point(_this.center.lng, _this.center.lat)
+            // 初始化地图，设置中心点坐标和地图级别
+            map.centerAndZoom(point, 13)
+            //开启鼠标滚轮缩放
+            map.enableScrollWheelZoom(true)
+            //创建地址解析器实例
+            var myGeo = new BMapGL.Geocoder();
+            myGeo.getPoint(_this.form.homeAddressDetail, function(point){
+              if(point){
+                map.centerAndZoom(point, 16);
+                map.addOverlay(new BMapGL.Marker(point, {title: _this.form.homeAddressDetail}))
+              }else{
+                alert('您选择的地址没有解析到结果！');
+              }
+            }, '北京市')
+
+          })
+        })
+
+
+      });
+
+
+    },
+    // 表单提交
+    dataFormSubmit() {
+      let _this = this;
+      this.$confirm("是否确认保存住宿半径", '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function () {
+        _this.$refs['form'].validate((valid) => {
+          if (valid) {
+            _this.canSubmit = false;
+            putItemObj({id: _this.dictId, value: _this.form.raidus}).then(() => {
+              _this.$message({
+                showClose: true,
+                message: '修改成功',
+                type: 'success'
+              })
+              _this.visible = false
+              _this.canSubmit = true;
+            })
+
+          }
+        })
+      }).then(data => {
+
+      }).catch(function (err) {
+      })
+    }
+  },
+};
+</script>
+<style scoped>
+
+#container2 {
+  overflow: hidden;
+  width: 100%;
+  height: 700px;
+  margin: 0;
+  font-family: "微软雅黑";
+}
+
+ul li {
+  list-style: none;
+}
+
+</style>