feat:订单地址

components/BsAddress.vue

@@ -1,20 +1,130 @@
 <template>
   <div>
-    <div class="address"></div>
+    <div class="address flex flex-middle" v-if="!isEdit">
+      <article class="address__msg">
+        <div class="address__msg-line flex flex-middle">
+          <img src="@/static/images/goods/point.png" alt="收货地址" />
+          <span class="address__msg-line--txt">默认地址</span>
+          <UiButton type="yellow_panel">修改</UiButton>
+        </div>
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">收货地址:</span>
+          <span class="address__msg-line--txt"
+            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
+          >
+        </div>
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">收 货 人 :</span>
+          <span class="address__msg-line--txt"
+            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
+          >
+        </div>
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">手机号码:</span>
+          <span class="address__msg-line--txt"
+            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
+          >
+        </div>
+      </article>
+      <div class="hr"></div>
+      <div class="address__operation flex flex-column flex-middle">
+        <UiButton type="grey" class="flex flex-middle"
+          ><img
+            class="icon"
+            src="@/static/images/goods/switch.png"
+            alt="切换地址"
+          />
+          切换地址</UiButton
+        >
+        <UiButton type="grey" class="flex flex-middle"
+          ><img
+            class="icon"
+            src="@/static/images/goods/add.png"
+            alt="切换地址"
+          />
+          新建地址</UiButton
+        >
+      </div>
+    </div>
+    <div class="address flex flex-middle" v-else>
+      <article class="address__msg"></article>
+      <div class="hr"></div>
+      <div class="address__operation"></div>
+    </div>
   </div>
 </template>
 <script>
+import UiButton from "@/components/UiButton.vue";
 export default {
+  components: { UiButton },
   data() {
-    return {};
+    return {
+      isEdit: false,
+    };
   },
   methods: {},
 };
 </script>
 <style lang="scss" scoped>
 .address {
-  width: 1200px;
-  height: 189px;
+  @include layout-box;
+  min-height: 189px;
   border: 1px solid #dddddd;
+  padding: 28px 34px 8px;
+  &__msg {
+    width: 776px;
+    &-line {
+      margin-bottom: 20px;
+      img {
+        width: 20px;
+        height: 24px;
+        margin-right: 14px;
+      }
+      &--type {
+        width: 70px;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #999999;
+      }
+      &--txt {
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #333333;
+      }
+      /deep/.ui-button__yellow_panel {
+        width: 62px;
+        height: 30px;
+        color: #ff875b;
+        background: rgba(255, 135, 91, 0.1);
+        border-radius: 4px 4px 4px 4px;
+        margin-left: 54px;
+      }
+    }
+  }
+  .hr {
+    width: 2px;
+    height: 107px;
+    background: #eeeeee;
+  }
+  &__operation {
+    flex: 1;
+    /deep/.ui-button__grey {
+      width: 114px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #666666;
+      &:nth-child(1) {
+        margin-bottom: 30px;
+      }
+    }
+    .icon {
+      width: 18px;
+      height: 18px;
+      margin-right: 10px;
+    }
+  }
 }
 </style>

pages/goods/detail/_id.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <BsAddress></BsAddress>
     <nav class="nav flex flex-middle flex-center">
       <p class="nav__crumbs">
         全部商品
@@ -119,6 +120,7 @@
   </div>
 </template>
 <script>
+import BsAddress from '@/components/BsAddress.vue'
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import {
@@ -128,7 +130,7 @@ import {
 } from "@/plugins/api/goods";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem },
+  componetns: { UiMoney, UiButton, UiGoodsItem,BsAddress },
   data() {
     return {
       curBuyNum: 1,
@@ -301,8 +303,7 @@ export default {
   }
 }
 .main {
-  width: 1200px;
-  margin: 0 auto;
+  @include layout-box;
   &__preview {
     width: 456px;
     margin-right: 30px;

pages/goods/list/index.vue

@@ -144,8 +144,7 @@ export default {
 }
 
 .main {
-  width: 1200px;
-  margin: 0 auto;
+  @include layout-box;
   padding-top: 14px;
   padding-bottom: 60px;