From 6f621bc3289c6b540c00234262a9a5eb5f6db349 Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Fri, 5 Mar 2021 19:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E8=B4=A7=E5=9C=B0=E5=9D=80=E7=9A=84?=
 =?UTF-8?q?=E4=B8=A4=E7=A7=8D=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/pay/pay.vue | 89 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 86 insertions(+), 3 deletions(-)

diff --git a/src/pages/pay/pay.vue b/src/pages/pay/pay.vue
index 3ef1d6f..5090168 100644
--- a/src/pages/pay/pay.vue
+++ b/src/pages/pay/pay.vue
@@ -1,13 +1,96 @@
 <template>
-  <view>支付页面</view>
+  <view clang="pay">
+    <!-- 1. 假设本地能拿到收货地址 -->
+    <view v-if="address.userName" class="address" @tap="getAddressHandle">
+      <view class="address_detail">{{addressDetail}}</view>
+      <view class="address_info">
+        <text class="address_text">{{address.userName}}</text>
+        <text class="address_text">{{address.telNumber}}</text>
+      </view>
+    </view>
+    <!-- 2. 本地拿不到收货地址 -->
+    <view v-else class="address_empty">
+      <view @tap="getAddressHandle" class="address_empty_button">选择收货地址</view>
+    </view>
+
+  </view>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      address: {}
+    }
+  },
+  onLoad(){
+    this.address = uni.getStorageSync("address") || {}
+  },
+  methods: {
+    // 获取收货地址
+    getAddressHandle(){
+      uni.chooseAddress({
+        success: (res) => {
+          uni.setStorageSync("address", res)
+          console.log(res)
+          this.address = res
+        }
+      })
+    }
+  },
+  computed: {
+    // 拼接收货地址
+    addressDetail (){
+      const {detailInfo, countyName, cityName, provinceName} = this.address
+      return provinceName + cityName + countyName + detailInfo
+    }
+  },
 }
 </script>
 
 <style lang="scss">
-
+page {
+  background-color: #f9f9f9;
+}
+// 有收货地址的状态
+.address {
+  background-color: #fff;
+  border-radius: 5rpx;
+  margin: 20rpx;
+  height: 188rpx;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .address_detail {
+    font-size: 30rpx;
+  }
+  .address_info {
+    font-size: 26rpx;
+    .address_text {
+      margin-right: 40rpx;
+    }
+  }
+}
+.address_empty {
+  background-color: #fff;
+  border-radius: 5rpx;
+  margin: 20rpx;
+  height: 188rpx;
+  padding: 20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .address_empty_button {
+    width: 300rpx;
+    height: 90rpx;
+    border-radius: 45rpx;
+    color: #eb4450;
+    border: 2rpx solid #eb4450;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30rpx;
+  }
+}
 </style>
\ No newline at end of file