收货地址的两种状态

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>