admin/src/pages/system/caseManger/caseInfo/editCase/index.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>案场名称：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入内容"
                v-model="postData.name"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场地址：</span>
          <div class="flex-item">
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 5}"
                placeholder="请填写详细地址"
                v-model="postData.address">
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场头像：</span>
          <div class="flex-item">
            <div>
              <a class="formImg">
                <img src="" class="centerLabel contain" alt="">
                <i class="iconfont icon-quxiao"></i>
              </a>
              <el-button type="success" size="mini">上传图片</el-button>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场负责人：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="真实姓名，可包含汉字、英文"
                v-model="postData.leaderName"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>负责人手机号：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="限中国地区有效手机号"
                v-model="postData.leaderPhone"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>左击地图获取经纬度：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder=""
                v-model="postData.atitudeAndLongitude"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="map flex-v">
          <div class="search">
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          </div>
          <div class="flex-item">
            <div>
              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
                <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
              </el-amap>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    var _self = this
    return {
      postData: {
        name: '', // 案场名称
        address: '', // 案场地址
        leaderName: '', // 负责人
        leaderPhone: '', // 负责人手机号
        atitudeAndLongitude: '',
      },
      markers: [],
      searchOption: {
        city: '南京',
        citylimit: false
      },
      mapCenter: [118.789509, 32.019989],
      events: {
        click: (e) => {
          _self.postData.atitudeAndLongitude = e.lnglat.lat + ',' + e.lnglat.lng
        }
      },
    }
  },
  components: {},
  methods: {
    onSearchResult (pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let { lng, lat } = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    },
    submit () {
      console.log(this.postData)
    },
    cancel () {
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>