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

<!--新增门店-->
<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" :title="type === 'add' ? '新增门店' : '编辑门店'" type="form" :form="form" :rules="rules" @submit="submit">
      <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;">
              <el-option v-for="item in merchants" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </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 v-model="showPassword" show-password type="password" clearable placeholder="请填写密码"  style="width: 300px;" @input="e => form.password = e"/>
          </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-input-map style="width: 300px;"  :params="option" placeholder="请选择地图" v-model="map" ></avue-input-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>
import {show,save,store} from '@/api/shop'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      merchants:[
        {
          value:1,
          label:'测试商户1'
        },
        {
          value:2,
          label:'测试商户2'
        },
      ],
      //测试

      type:'add',
      id:null,
      isShow:false,
      showPassword:'',//展示的密码
      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:'请填写联系电话'},
          {pattern: /^[1][3-9][\d]{9}/,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: {
    submit(){
      if(this.type === 'add'){
        store({
          merchant_id:this.form.belongsMerchant,
          name:this.form.name,
          password:this.form.password,
          address:this.form.address,
          contact:this.form.contact,
          phone:this.form.contactNumber,
          longitude:this.form.lng,
          latitude:this.form.lat,
          state:1
        }).then(res => {
          Message({
            type:'success',
            message:'添加成功'
          })
          this.isShow = false
          this.showPassword = ''
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          merchant_id:this.form.belongsMerchant,
          name:this.form.name,
          password:this.form.password,
          address:this.form.address,
          contact:this.form.contact,
          phone:this.form.contactNumber,
          longitude:this.form.lng,
          latitude:this.form.lat,
          state:1
        }).then(res => {
          Message({
            type:'success',
            message:'编辑门店成功'
          })
          this.isShow = false
          this.showPassword = ''
          this.$emit('refresh')
        })
        return
      }
    }
  },
  watch:{
    map(newVal){
      if(!newVal) return
      this.form.lat = newVal[1]
      this.form.lng = newVal[0]
      this.form.address = newVal[2]
    },
    async isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          const res = await show({id:this.id})
          this.form.address = res.address
          this.form.contact = res.contact
          this.form.name = res.name
          this.form.password = res.password
          this.form.contactNumber = res.phone
          this.form.belongsMerchant = res.merchant_id
          this.form.lat = res.latitude
          this.form.lng = res.longitude
        }
      }else{
        this.$refs['dialog'].reset()
      }
    }
  },
  mounted() {

  }

}
</script>

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