购物车商品列表显示实现

// 导入request请求工具类
import {
    getBaseUrl,
    requestUtil
  } from '../../utils/requestUtil.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address:{},
    baseUrl:'',
    cart:[]
  },
  handleChooseAddress(){ 
      console.log("handleChooseAddress")
    wx.chooseAddress({
        success:(result)=>{
            console.log(result)
            wx.setStorageSync('address', result)
        },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     const baseUrl = getBaseUrl();
     this.setData({
         baseUrl
     })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("show")
    const address=wx.getStorageSync('address')
    const cart=wx.getStorageSync('cart')||[]
    this.setData({
        address,
        cart
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

{
  "usingComponents": {},
  "navigationBarTitleText": "购物车"
}

.recevie_address_row{
    .address_btn{
      padding: 20rpx;
      button{
        width: 60%;
      }
    }
  
    .user_info_row{
      display: flex;
      padding: 20rpx;
      .user_info{
        flex:5;
      }
      .change_address_btn{
        flex:3;
        text-align: right;
        button{
          border: 1px solid gray;
          font-weight: normal;
        }
      }
    }
  }
  
  
  .cart_content{
    background-color: #F5F5F5;
    .cart_main{
      padding: 2rpx 10rpx 10rpx 10rpx;
      .cart_item{
        display: flex;
        background-color: white;
        border-radius: 10px;
        margin: 20rpx;
        padding-right: 20rpx;
        .cart_chk_wrap{
          flex:1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx;
        }
        .cart_img_wrap{
          flex:2;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #F5F5F5;
          margin: 20rpx;
          border-radius: 10px;
          image{
            width: 80%;
          }
        }
        .cart_info_wrap{
          flex:4;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .goods_name{
            font-weight: bolder;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .goods_price_wrap{
            display: flex;
            justify-content: space-between;
            .goods_price{
              color: var(--themeColor);
              font-size: 34rpx;
            }
            .cart_num_tool{
              display: flex;
              .num_edit{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 55rpx;
                height: 55rpx;
              }
              .goods_num{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 85rpx;
                height: 55rpx;
                background-color: #F5F5F5;
              }
            }
          }
        }
      }
    }
  }

<!-- 收货地址 开始 -->
<view class="recevie_address_row">
  <view class="address_btn" wx:if="{{!address}}">
    <button type="warn" plain bindtap="handleChooseAddress" >获取收货地址</button>
  </view>

  <view wx:else class="user_info_row">
    <view class="user_info">
      <view>收货人：{{address.userName}},{{address.telNumber}}</view>
      <view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
    </view>

    <view class="change_address_btn">
      <button size="mini" plain>更换地址</button>
    </view>
  </view>
</view>
<!-- 收货地址 结束 -->

<!-- 购物车清单 开始 -->
<view class="cart_content">
  <view class="cart_main">
    <view class="cart_item"
      wx:for="{{cart}}"
      wx:key="id"
    >
      <!-- 复选框 开始 -->
      <view class="cart_chk_wrap">
        <checkbox-group>
          <checkbox></checkbox>
        </checkbox-group>
      </view>
      <!-- 复选框 结束 -->

      <!-- 商品图片 开始 -->
      <navigator class="cart_img_wrap" url="/pages/product_detail/index?id={{item.id}}">
        <image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
      </navigator>
      <!-- 商品图片 结束 -->

      <!-- 商品信息 开始 -->
      <view class="cart_info_wrap">
        <navigator url="/pages/product_detail/index?id={{item.id}}">
          <view class="goods_name">{{item.name}}</view>
        </navigator>
        <view class="goods_price_wrap">
          <view class="goods_price">
            ¥{{item.price}}
          </view>
          <view class="cart_num_tool">
            <view class="num_edit">-</view>
            <view class="goods_num">{{item.num}}</view>
            <view class="num_edit">+</view>
          </view>
        </view>
      </view>
      <!-- 商品信息 结束 -->
    </view>
  </view>
</view>
<!-- 购物车清单 结束 -->