增加添加地址页面

src/views/address/addAddress.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <h1 class="list-title">添加地址</h1>
+    <el-form :model="addAddressRuleForm" :rules="rules" ref="addAddressRuleForm" label-width="100px"
+      class="demo-addAddressRuleForm">
+      <el-form-item label="地址名称" prop="addressname">
+        <el-input v-model="addAddressRuleForm.addressname" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="地址经度" prop="longitude">
+        <el-input v-model="addAddressRuleForm.longitude" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="地址纬度" prop="latitude">
+        <el-input v-model="addAddressRuleForm.latitude" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('addAddressRuleForm')">提交</el-button>
+        <el-button @click="resetForm('addAddressRuleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { addAddress } from '@/api/address'
+
+export default {
+  data() {
+    return {
+      addAddressRuleForm: {
+        addressname: '',
+        longitude: '',
+        latitude: ''
+      },
+      rules: {
+        addressname: [
+          { required: true, message: '地址名称不能为空' }
+        ],
+        longitude: [
+          { required: true, message: '地址经度不能为空' }
+        ],
+        latitude: [
+          { required: true, message: '地址纬度不能为空' }
+        ]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addAddress({
+            address: this.addAddressRuleForm.addressname,
+            longitude: this.addAddressRuleForm.longitude,
+            latitude: this.addAddressRuleForm.latitude,
+          }).then(res => {
+            if (res.code == 101) {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({
+                path: '/address/addressList'
+              })
+            } else {
+              this.$message.error(res.message);
+            }
+          }).catch(err => {
+            this.$message.error(err.message);
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.demo-addAddressRuleForm {
+  margin: 50px auto 0;
+  transform: translateX(-50px);
+  width: 700px;
+}
+</style>