lilishop-ui/buyer/src/components/addressManage/index.vue

<template>
  <div>
    <Modal v-model="showAddr" width="800" title="收件人地址">
      <Form
        :model="formData"
        ref="form"
        label-position="left"
        :label-width="100"
        :rules="ruleInline"
      >
        <FormItem label="收件人" prop="name">
          <i-input v-model="formData.name" style="width: 600px"></i-input>
        </FormItem>
        <FormItem label="收件地区" prop="address">
          <i-input
            v-model="formData.address"
            disabled
            style="width: 600px"
          ></i-input>
          <Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
        </FormItem>
        <FormItem label="详细地址" prop="detail">
          <i-input v-model="formData.detail" style="width: 600px"></i-input>
        </FormItem>
        <FormItem label="手机号码" prop="mobile">
          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
        </FormItem>
        <FormItem label="地址别名">
          <i-input
            v-model="formData.alias"
            length
            :maxlength="4"
            placeholder="请输入地址别名，例如公司"
            style="width: 600px"
          ></i-input>
        </FormItem>
        <FormItem label="默认地址">
          <i-switch v-model="formData.isDefault" />
        </FormItem>
      </Form>
      <div class="mt_20" slot="footer">
        <Button @click="hide">取消</Button>
        <Button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</Button>
      </div>
    </Modal>
    <lili-map ref="map" @getAddress="getAddress"></lili-map>
  </div>
</template>

<script>
import liliMap from '@/components/map';
import {
  newMemberAddress,
  editMemberAddress,
  getAddrDetail
} from '@/api/address';
export default {
  name: 'addressManage',
  props: {
    id: {
      defalut: '',
      type: String
    }
  },
  data () {
    return {
      showAddr: false, // 控制模态框显隐
      formData: { // 表单数据
        isDefault: false
      },
      ruleInline: { // 验证规则
        name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
        detail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            type: 'string',
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            message: '手机号格式出错',
            trigger: 'blur'
          }
        ]
      },
      loading: false, // 提交的加载状态
      mapMsg: {} // 地图信息
    };
  },
  methods: {
    save () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData));
          params.consigneeAddressPath = params.address.replace(/\s/g, ',');
          delete params.address;
          this.loading = true;
          if (this.id) {
            editMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.code === 200) {
                this.$Message.success('编辑地址成功');
                this.$emit('change', true);
                this.hide();
              }
            }).catch(() => { this.loading = false; });
          } else {
            newMemberAddress(params).then((res) => {
              this.loading = false;
              if (res.code === 200) {
                this.$Message.success('新增地址成功');
                this.$emit('change', true);
                this.hide();
              }
            }).catch(() => { this.loading = false; });
          }
        }
      });
    },
    getAddrById (id) {
      // 获取地址详情
      getAddrDetail(id).then((res) => {
        if (res.code === 200) {
          console.log(res);
          const data = res.result;
          data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
          this.formData = data;
        }
      });
    },
    getAddress (item) {
      // 获取地图选择信息
      console.log(item);
      this.mapMsg = item;
      this.$set(this.formData, 'address', item.addr);
      this.$set(this.formData, 'consigneeAddressIdPath', item.addrId);
      this.$set(this.formData, 'detail', item.detail);
      this.formData.lat = item.position.lat;
      this.formData.lon = item.position.lng;
    },
    show () {
      this.showAddr = true;
    },
    hide () {
      this.showAddr = false;
    }
  },
  watch: {
    id: {
      immediate: true,
      handler: function (v) {
        console.log(v);
        if (v) {
          this.getAddrById(v);
        } else {
          this.formData = {}
          this.$refs.form.resetFields();
        }
      }
    }
  },
  components: {
    liliMap
  }
};
</script>

<style scoped lang="scss">
.add-box {
  margin: 40px 0;
}
</style>