commit message

buyer/src/pages/home/orderCenter/AddAddress.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <card _Title="收货地址" />
+    <div class="add-box">
+      <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>
+    <div class="mt_20">
+      <Button type="primary" class="mr_10" :loading="loading" @click="save"
+        >保存收货地址</Button
+      >
+      <Button @click="$router.back()">返回</Button>
+    </div>
+    <lili-map ref="map" @getAddress="getAddress"></lili-map>
+  </div>
+</template>
+
+<script>
+import card from '@/components/card';
+import liliMap from '@/components/map';
+import {
+  newMemberAddress,
+  editMemberAddress,
+  getAddrDetail
+} from '@/api/address';
+export default {
+  name: 'AddAddress',
+  data () {
+    return {
+      formData: { // 添加地址表单
+        isDefault: false
+      },
+      ruleInline: { // 验证规则
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
+        detail: [
+          { required: true, message: '请输入详细地址', trigger: 'blur' }
+        ],
+        mobile: [
+        ]
+      },
+      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.$route.query.id) {
+            editMemberAddress(params).then((res) => {
+              if (res.code === 200) {
+                this.loading = false;
+                this.$router.push('/home/MyAddress');
+              }
+            }).catch(() => { this.loading = false; });
+          } else {
+            newMemberAddress(params).then((res) => {
+              if (res.code === 200) {
+                this.loading = false;
+                this.$router.push('/home/MyAddress');
+              }
+            }).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;
+    }
+  },
+  mounted () {
+    const id = this.$route.query.id;
+    if (id) this.getAddrById(id);
+  },
+  components: {
+    card,
+    liliMap
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.add-box {
+  margin: 40px 0;
+}
+</style>