yunyubang-web/src/views/business/component/addStore.vue

<!--新增门店-->
<template>
  <div>
    <xy-dialog :is-show.sync="isShow" title="新增门店" type="form" :form="form" :rules="rules">
      <template v-slot:belongsMerchant>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商家：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable placeholder="请选择所属商家" v-model="form.belongsMerchant" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写活动名称" v-model="form.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:password>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>密码：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写密码" v-model="form.password" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item" style="margin-bottom: 20px;">
          <div class="xy-table-item-label">
            地址选择
          </div>
          <div class="xy-table-item-content">
            <avue-map placeholder="请选择地址" :option="option" v-model="map" @mapClick="mapClick"></avue-map>
          </div>
        </div>

        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>地址：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写地址" v-model="form.address" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:contact>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系人：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写联系人" v-model="form.contact" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:contactNumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系电话：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写联系电话" v-model="form.contactNumber" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:lng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>经度：
          </div>
          <div class="xy-table-item-content">
            <el-input disabled clearable placeholder="请填写经度" v-model="form.lng" style="width: 120px;"/>
          </div>
        </div>
      </template>
      <template v-slot:lat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>纬度：
          </div>
          <div class="xy-table-item-content">
            <el-input disabled  clearable placeholder="请填写纬度" v-model="form.lat" style="width: 120px;"/>
          </div>
        </div>
      </template>
      <template v-slot:extraFormBottom>

      </template>
    </xy-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:false,

      form:{
        belongsMerchant:'',
        name:'',
        password:'',
        contact:'',
        contactNumber:'',
        address:'',
        lng:'',//经度
        lat:'',//纬度
      },
      rules:{
        belongsMerchant:[
          {required:true,message:'请选择所属商家'}
        ],
        name:[
          {required:true,message:'请填写名称'}
        ],
        password:[
          {required:true,message:'请填写密码'}
        ],
        contact:[
          {required:true,message:'请填写联系人'}
        ],
        contactNumber:[
          {required:true,message:'请填写联系电话'}
        ],
        address:[
          {required:true,message:'请填写地址'}
        ],
        lng:[
          {required:true,message:'请选择定位'}
        ],
        lat:[
          {required:true,message:'请选择定位'}
        ]
      },
      map:{

      },

      option: {
        column: [
          {
            label: '坐标',
            prop: 'map',
            type: 'map',
            //高德初始化参数
            params:{
              zoom: 10,
              // zoomEnable: false,
              // dragEnable: false,
            }
          }]
      }
    }
  },
  methods: {
    //地图点击
    mapClick(r,p){
      this.$nextTick(()=>{
        this.form.lat = p
        this.form.lng = r
      })
    }
  },
  watch:{
    map(newVal){
      this.form.lat = newVal?.location?.lat
      this.form.lng = newVal?.location?.lng
      this.form.address = newVal?.formattedAddress
    }
  },
  mounted() {

  }

}
</script>

<style scoped lang="scss">
</style>