结算商品列表

src/pages/pay/pay.vue

@@ -1,7 +1,11 @@
 <template>
   <view clang="pay">
     <!-- 1. 假设本地能拿到收货地址 -->
-    <view v-if="address.userName" class="address" @tap="getAddressHandle">
+    <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>
@@ -9,10 +13,33 @@
       </view>
     </view>
     <!-- 2. 本地拿不到收货地址 -->
-    <view v-else class="address_empty">
+    <view
-      <view @tap="getAddressHandle" class="address_empty_button">选择收货地址</view>
+      v-else
+      class="address_empty"
+    >
+      <view
+        @tap="getAddressHandle"
+        class="address_empty_button"
+      >选择收货地址</view>
     </view>
 
+    <!-- 3. 商品列表 -->
+    <view class="goods">
+      <view class="goods_title">已选商品</view>
+      <view class="goods_list">
+        <view
+          class="goods_item"
+          v-for="item in cartList"
+          :key="item.goods_id"
+        >
+          <goodsItem
+            :item="item"
+            v-if="item.goods_select"
+          />
+          <text class="goods_count">x{{ item.goods_count }}</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -20,11 +47,14 @@
 export default {
   data() {
     return {
-      address: {}
+      address: {},
+      cartList: []
     }
   },
   onLoad(){
     this.address = uni.getStorageSync("address") || {}
+    this.cartList = uni.getStorageSync("cartList") || [];
+
   },
   methods: {
     // 获取收货地址
@@ -49,48 +79,71 @@ export default {
 </script>
 
 <style lang="scss">
-page {
+  page {
-  background-color: #f9f9f9;
+    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 {
-    .address_text {
+    background-color: #fff;
-      margin-right: 40rpx;
+    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 {
-.address_empty {
+    background-color: #fff;
-  background-color: #fff;
+    border-radius: 5rpx;
-  border-radius: 5rpx;
+    margin: 20rpx;
-  margin: 20rpx;
+    height: 188rpx;
-  height: 188rpx;
+    padding: 20rpx;
-  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;
+    .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;
+    }
+  }
+
+  .goods {
+  background-color: #fff;
+  border-radius: 5rpx;
+  margin: 20rpx;
+  padding: 20rpx;
+  .goods_title {
+    line-height: 60rpx;
     font-size: 30rpx;
+    font-weight: bold;
+  }
+
+  .goods_list {
+    .goods_item {
+      position: relative;
+      .goods_count {
+        position: absolute;
+        right: 20rpx;
+        bottom: 20rpx;
+      }
+    }
   }
 }
 </style>