|
|
@@ -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>
|
