添加地址列表页面

src/views/address/addressList.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <h1 class="list-title">地址列表</h1>
+    <hr>
+    <div v-show="isShow">
+      <el-table :data="tableData" style="width: 700px" max-height="250" class="list-table">
+        <el-table-column fixed prop="addressid" label="地址ID" width="150">
+        </el-table-column>
+        <el-table-column prop="addressname" label="地址名称" width="120">
+        </el-table-column>
+        <el-table-column prop="longitude" label="地址经度" width="120">
+        </el-table-column>
+        <el-table-column prop="latitude" label="地址纬度" width="120">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-show="!isShow">
+      <p>暂时没有地址</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAddressList, deleteAddress } from '@/api/address';
+
+export default {
+  methods: {
+    deleteRow(row) {
+      deleteAddress({
+        addressid: row.addressid
+      }).then(res => {
+        if (res.code == 101) {
+          this.$message({
+            message: res.message,
+            type: 'success'
+          })
+          this.showAddressList()
+        }else {
+          this.$message.error(res.message);
+        }
+      }).catch(err => {
+        this.$message.error(err.message);
+      })
+    },
+    showAddressList() {
+      getAddressList().then(res => {
+        if (res.code == 101) {
+          this.tableData = res.data
+        } else {
+          this.isShow = false  
+        }
+      }).catch(err => {
+        console.log('err', err)
+      })
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      isShow: true
+    }
+  },
+  created() {
+    this.showAddressList()
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.list-table {
+  margin: 0 auto;
+}
+</style>