feat:个人中心收货地址

components/BsAddress.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="address flex flex-middle" v-if="!isEdit">
+    <div class="address flex flex-middle" v-if="!isOperation && !isAccount">
       <article class="address__msg">
         <div class="address__msg-line flex flex-middle">
           <img src="@/assets/img/goods/point.png" alt="收货地址" />
@@ -39,13 +39,21 @@
           />
           切换地址
         </UiButton>
-        <UiButton type="grey" @click="isEdit = true" class="flex flex-middle">
+        <UiButton
+          type="grey"
+          @click="isOperation = true"
+          class="flex flex-middle"
+        >
           <img class="icon" src="@/assets/img/goods/add.png" alt="新建地址" />
           新建地址
         </UiButton>
       </div>
     </div>
-    <div class="address flex flex-middle" v-else>
+    <div
+      class="address"
+      :class="isAccount ? 'account' : 'flex flex-middle'"
+      v-else
+    >
       <article class="address__msg">
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">所在区域</span>
@@ -71,14 +79,17 @@
           ></el-input>
         </div>
       </article>
-      <div class="hr"></div>
+      <div class="hr" v-if="!isAccount"></div>
-      <div class="address__operation flex flex-column flex-middle">
+      <div
+        class="address__operation flex flex-middle"
+        :class="!isAccount ? 'flex-column' : ''"
+      >
         <el-checkbox v-model="defaultAddress">设为默认地址</el-checkbox>
         <div>
           <UiButton
-            v-if="addressList && addressList.length"
+            v-if="addressList && addressList.length && !isAccount"
             type="grey"
-            @click="isEdit = false"
+            @click="isOperation = false"
             >取消</UiButton
           >
           <UiButton type="yellow_panel" @click="onAddAddress"
@@ -115,8 +126,12 @@
 </template>
 <script>
 import UiButton from "@/components/UiButton.vue";
-
+import { IsPhone } from "@/plugins/utils/index.js";
-import { ApiGetAddress, ApiPostAddress } from "@/plugins/api/base";
+import {
+  ApiGetAddress,
+  ApiPostAddress,
+  ApiPutAddress,
+} from "@/plugins/api/base";
 export default {
   components: { UiButton },
   props: {
@@ -124,6 +139,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    isAccount: {
+      type: Boolean,
+      default: false,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
   },
   model: {
     prop: "addressData",
@@ -131,7 +154,7 @@ export default {
   },
   data() {
     return {
-      isEdit: false,
+      isOperation: false,
       dialogVisible: false,
       detailAddress: "",
       addressUser: "",
@@ -150,17 +173,21 @@ export default {
       let vm = this;
       let res = await ApiGetAddress();
       if (res.result && res.result.length) {
-        vm.isEdit = false;
+        vm.isOperation = false;
         vm.addressList = res.result;
-        let curIndex = vm.addressList.findIndex((item) => item.id == 3);
+        let curIndex = vm.addressList.findIndex((item) => item.isDefault);
         vm.curAddressListItem =
           curIndex > -1 ? vm.addressList[curIndex] : vm.addressList[0];
+        vm.$emit("getList", vm.addressList);
         vm.$emit("emitAddress", vm.curAddressListItem);
       } else {
-        vm.isEdit = true;
+        vm.isOperation = true;
       }
       console.log("获取收货地址", res);
     },
+    setAddressData(i) {
+      let vm = this;
+    },
     onSwtich() {
       this.dialogVisible = true;
     },
@@ -185,7 +212,7 @@ export default {
         vm.$message.error("请输入收货人~");
         return;
       }
-      if (!vm.addressPhone) {
+      if (!IsPhone(vm.addressPhone)) {
         vm.$message.error("请输入收货人手机号码~");
         return;
       }
@@ -201,7 +228,12 @@ export default {
         province: vm.selectData.province.value,
         provinceCode: vm.selectData.province.code,
       };
-      let res = await ApiPostAddress(params);
+      let res;
+      if (vm.isEdit) {
+        res = await ApiPutAddress(params);
+      } else {
+        res = await ApiPostAddress(params);
+      }
       if (!res.error) {
         vm.$message.success("添加成功!");
         vm.getAddressData();
@@ -355,4 +387,8 @@ export default {
     padding: 0;
   }
 }
+
+.account {
+  width: 1000px;
+}
 </style>

pages/account/index/address.vue

@@ -7,17 +7,82 @@
 -->
 
 <template>
-	<div>我是地址管理页面</div>
+  <div>
+    <div class="title">收货地址</div>
+    <BsAddress
+      ref="bsaddress"
+      @getList="getList"
+      :isAccount="true"
+      :isEdit="isEdit"
+    ></BsAddress>
+    <el-table :data="addressList" style="width: 100%">
+      <el-table-column prop="name" label="收货人" width="130px">
+      </el-table-column>
+      <el-table-column prop="phone" label="手机号码" width="140px">
+      </el-table-column>
+      <el-table-column label="收货地址" width="430px">
+        <template slot-scope="scope">
+          {{
+            scope.row.area +
+            scope.row.city +
+            scope.row.province +
+            scope.row.detailAddress
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <div class="btns">
+            <span @click="editItem(scope.$index)">编辑</span>
+            <span @click="deleteItem(scope.row)">删除</span>
+            <span v-if="scope.row.isDefault" class="default">默认地址</span>
+            <span v-else @click="setItem(scope.row)">设为默认地址</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
+import BsAddress from "@/components/BsAddress.vue";
+import UiButton from "@/components/UiButton.vue";
 export default {
-	data(){
+  components: { BsAddress, UiButton },
+  data() {
     return {
-			
+      isEdit: false,
+      addressList: [],
+    };
+  },
+  methods: {
+    getList(list) {
+      this.addressList = list || [];
+    },
+    editItem(i) {
+      console.log(i)
+      this.$refs.bsaddress.setAddressData(i)
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.btns {
+  span {
+    cursor: pointer;
+    margin-right: 40px;
+    &:hover {
+      color: #ff875b;
+    }
   }
+  .default {
+    display: inline-block;
+    width: 84px;
+    height: 30px;
+    border-radius: 4px;
+    border: 1px solid #ff875b;
+    color: #ff875b;
+    text-align: center;
+    line-height: 30px;
   }
 }
-</script>
-<style lang="scss" scoped>
-
 </style>

pages/goods/detail/_id.vue

@@ -119,7 +119,6 @@
   </div>
 </template>
 <script>
-import BsAddress from "@/components/BsAddress.vue";
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
@@ -129,7 +128,7 @@ import {
   ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem, BsAddress },
+  componetns: { UiMoney, UiButton, UiGoodsItem },
   data() {
     return {
       curBuyNum: 1,