admin

10_vuecli/bankpro/src/utils/request2.js

@@ -11,7 +11,6 @@ const service = axios.create({
 })
 
 
-
 // 响应拦截器 对响应数据进行处理
 service.interceptors.response.use(
   response => {

10_vuecli/bankpro/src/views/address/AddressAdd.vue

@@ -1,5 +1,94 @@
 <template>
-    <div>
-        <h1>添加地址</h1>
+    <div class="address-add">
+        <el-form :model="addressForm" :rules="rules" ref="addressForm" label-width="100px">
+            <el-form-item label="地址名称" prop="addressname">
+                <el-input v-model="addressForm.addressname"></el-input>
+            </el-form-item>
+            <el-form-item label="地址经度" prop="longitude">
+                <el-input type="number" v-model="addressForm.longitude"></el-input>
+            </el-form-item>
+            <el-form-item label="地址纬度" prop="latitude">
+                <el-input type="number" v-model="addressForm.latitude"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+                <!-- 提交按钮 -->
+                <el-button type="primary" @click="submitForm('addressForm')">立即创建</el-button>
+                <!-- 重置按钮 -->
+                <el-button @click="resetForm('addressForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
     </div>
-</template>
+</template>
+<script>
+    import { addAddress } from "@/api/address";
+    export default{
+        name:"AddressAdd",
+        data(){
+            return{
+                addressForm:{
+                    addressname:"",
+                    longitude:"",
+                    latitude:""
+                },
+                // 表单验证规则
+                rules:{
+                    addressname:[
+                        {required:true,message:"请输入地址名称",trigger:"blur"}
+                    ],
+                    longitude:[
+                        {required:true,message:"请输入地址经度",trigger:"blur"}
+                    ],
+                    latitude:[
+                        {required:true,message:"请输入地址纬度",trigger:"blur"}
+                    ]
+                }
+            }
+        },
+        methods:{
+            // 添加地址按钮
+            submitForm(formName){
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if(valid){
+                        // 发送请求添加地址
+                        addAddress(this.addressForm).then(()=>{
+                            // 弹框提示成功
+                            this.$message({
+                                message: '地址添加成功!',
+                                type: 'success'
+                            });
+                            // 重置表单
+                            this.resetForm("addressForm");
+                            // 跳转地址列表页面
+                            this.$router.push("/address/list")
+                        }).catch(()=>{
+                            // 弹框提示失败
+                            this.$message({
+                                message: '地址添加失败!',
+                                type: 'error'
+                            });
+                        })
+                    }else{
+                        // 验证失败
+                        this.$message({
+                            message: '请填写完整地址信息',
+                            type: 'warning'
+                        });
+                    }
+                })
+            },
+            // 重置表单
+            resetForm(formName){
+                // 重置表单数据
+                this.$refs[formName].resetFields();
+            }
+        }
+    }
+</script>
+<style scoped>
+    .address-add{
+        width: 600px;
+        margin: 100px auto;
+    }
+</style>