From 08c5478bf13e2015de295219335b51f93148b777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=BE=81?= <zhangz@163.com>
Date: Tue, 10 May 2022 15:05:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AE=A2=E5=8D=95=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsAddress.vue       | 118 +++++++++++++++++++++++++++++++--
 pages/goods/detail/_id.vue     |   7 +-
 pages/goods/list/index.vue     |   3 +-
 static/images/goods/add.png    | Bin 0 -> 653 bytes
 static/images/goods/point.png  | Bin 0 -> 928 bytes
 static/images/goods/switch.png | Bin 0 -> 540 bytes
 6 files changed, 119 insertions(+), 9 deletions(-)
 create mode 100644 static/images/goods/add.png
 create mode 100644 static/images/goods/point.png
 create mode 100644 static/images/goods/switch.png

diff --git a/components/BsAddress.vue b/components/BsAddress.vue
index 8f0db1d..7b81097 100644
--- a/components/BsAddress.vue
+++ b/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>
diff --git a/pages/goods/detail/_id.vue b/pages/goods/detail/_id.vue
index 68bf1f5..a9b4f40 100644
--- a/pages/goods/detail/_id.vue
+++ b/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;
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index 85c191f..0669bc2 100644
--- a/pages/goods/list/index.vue
+++ b/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;
 
diff --git a/static/images/goods/add.png b/static/images/goods/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b54677875a716ecda845116c78684a483bf123b
GIT binary patch
literal 653
zcmV;80&@L{P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px%M@d9MR5(wql)-BgK@`TnH`xRa9t?OaTD3t1MFnqC34)>^g4jR>!G+z~;6YSS
zqz5S;ya^%*CU16eZz_liA`}!F@elCOgC&U&!9x!o1TSStW@JJ(tm#TAIH%>Y@Atm<
zy*ESnPlxh2^?Ln?F~$XO7Qoc#pPn&hiHI7^{B1JtFOciH+ls~FBLMS4h;T3%ymuU@
zXOsH<{<IL{5&&BuY`5EYTCG+;1&%=$QYw``09XfbnVEm)sr7w-N(k}X81t*s>0C@<
zV~~{cDG|-I+wF7NN>a)TM6`>UpQPZC@?`)Yl~VU?d<c?K9tE&WM3qS;K@cojpO{%@
z6}qlFT`HAU27|$|D2lp6P!I&xmvv@dm~2N%xj;mFCqbh;WsF&~s#4Hbt@X7q3|l#%
z+eEZK4<w~LPegZ_c{T<87D60uG#b5ny?#Y&ePTQfBD)GZ0DQ_6Syf6s_B`)Up-_0o
z%zHL~eBVDMgqXDxC!)UA`XqpzLWtMK7zcnuM61na^JN}rMQeS1tF8IIKPQB^k!{VI
z4Q9Tz6|<$3&xokY%nydGd7d{@C=|YEtq+D__#+GZ*Z9+%BuOf99IuTRa<l@+lO#DE
z$Fbe+;R%A^j4@`nQc9(<TCKLdTrPhG@RphHj~CK@RI62|QmMSL#%itSqbT~GcSV9A
z*azU1F{Z1Os%^My8Q3Bb-30K$Ry4*8FD-xr0PNn(0eF}y$pxiB+rJRvDiKvP&xrMI
nDM^yZdNQdt_dUvMX|vcLB7+Jdc@iMK00000NkvXXu0mjf-mx13

literal 0
HcmV?d00001

diff --git a/static/images/goods/point.png b/static/images/goods/point.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6f09088408eeac2f6bd4904c0bf1570567c5db6
GIT binary patch
literal 928
zcmV;R17G}!P)<h;3K|Lk000e1NJLTq000yK000;W1^@s6`b*t*00001b5ch_0Itp)
z=>Px&T1iAfR7gvWl}~6LMI6V!-`yPgAcv4tsJB<B*v3OPGb<<xZ9yR(3Q7elMkuJ@
zMQlN#2SuTV9xPZv@StL#1tTJQC^X<f1x3M~VNb6W3w;L<1^XTa1DiwN{^YmJhGF{>
zoYU@aXFl`&{as?p>i7Hm=I7^60$2g?B!K;4+Z_PE0NC{2e+}SX_c*%-W6TQxJ|KB$
z+GVXxL~a6jCxCah#=se4%!ee;gs-;&tc%Fc0Q9h~LnMy^I1S){8bsuh_x|lx?GDfw
z^HB>Ek&EN;_}$@fxV=Y6&XasAf}Yjq2B>b5+z5wXbIyIfm%HsZW6Uba%K>^y-DgO^
zb&`Em7UcgQUbDwqdjY^X5gCrh<0CZ2yhQQ}fZL<d=wR&T($dl+X_}tXOq1Lekxi0o
z&N<C?vsBQ+!on?$sfes9@GFw109<s=X>gmhyu5sr<W-Wh9l3v3RrTm#FwmrRRc<Ko
zR&e(j@BL=9=`YQy)}4r~B}p<{*YyQ0ClT53-oF^da)snIb(_}O3cx-9N1Ssvg1S6O
zl0N`!PbQNG%d)(y_AJYerD^)3+MRQ~=<>q=uB%-Y{u|ud0p@vrOhokH9p~HwQx3v8
zw^MS~+6E{hTdGjWhehOs_x@^7GMA?5KLBP(zFHK;7y4|i{VWu9>6}}RE_xQgcK~jv
z!Y@gl7LiZ9_isd-&TDIh8oL?1Xu1QybI!T%qrIO3cwI!+RbfLHk-K$WA8g|l6e(1@
zVJ3hzmS?^9>n$wHvbiKlG_iAfQ4<GiZIe+Ex#GQlIW7}x?S2u-Np6isqoUi6#+b__
zSGC`ra}PDZC<*#{#yR(Kr}n14T5I0~a7jOsJYE#VPw{YgkL3H|W1EOwxp|(yA|g%C
zi-?Y~wdQPmBAPh&w0nx8_;wmG&-0U7+#1_3zM4sMA27u88vxI1P1SY1QkLbfF*M7v
zCz2%5o}TS?%v7M>YK*x?@+pNTNs<>u@n?wj!*yL30j9r!6W!myeZK%bxVX4D+w1jy
z0PvVjp~+<OxZ2Y+{Vh!D->a&6dN3Glbwe^07@!Awy`Hw8wpG*P?Q>OC$Kz=eLw5!0
zrYy_)kt#JcYRj@5?w0;Nfgwq%Q2SJuwp^=rD)T?l{+`;5u)-Sv0000<MNUMnLSTZi
CO~P>i

literal 0
HcmV?d00001

diff --git a/static/images/goods/switch.png b/static/images/goods/switch.png
new file mode 100644
index 0000000000000000000000000000000000000000..80caeb366d7837ba8ee59a9214246bd60bb6b7d6
GIT binary patch
literal 540
zcmV+%0^|LOP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px$)=5M`R5(wqRKHK#KoovY!4U(4BQbR7z>s8P$bdwp4p}>OC{bAuH`teSVBqh7
z0jW!Kw$+o`rAh}@re;8b0SP3w2t=wfR*DA(bdK+#7dcf#om35YI{D7u`+l7fp6S7P
zaT<-rQm50o8-G6+P^;BivDRK9qStP>zcJVds9vuxR4SGCh`5kVI95tsPqJkOrBdl#
z_HG#f_IXW2pOPfm9RYcs_Yx7mjF1ss09YIh25XblrIft?nuz+mkBI9TP;9MT`%4<L
zt5&Ng0C1s{^7*ioa+`<_h-fto!`n>S4FH@OV;WlPey&GCh!w|i&WY#^5&bR{3g-Z@
zrIb2k;7q14#)Mky`#&D#CFgnG`fxbBC>D#%jy>C%mGI2eq?8}o7h}w;@#JY>Q-PYz
z=365Anx<(D5tqX-JpFG*S&Ekcup7tmch_})0l;Pu1V<AdZTEV;cDLId=6aN+_5%R=
zN~tYA<omur#64?m?Qv>pnr=i<^m8Ol2=T&k9PSAhl6$li$8l}4N51cWX1@U7c5089
zMY&ww95>rqdmKg4)#GNnuDdaAHZ#l$sgor6@T9v&L_0wc=$SqG*Iz*h;cBhpC*A(M
eA#+K~19|`{>e>AiWLMY#0000<MNUMnLSTYVLh>R2

literal 0
HcmV?d00001