uni-app之旅-day08-购物车-收货地址

最新推荐文章于 2025-06-15 11:45:49 发布

原创

最新推荐文章于 2025-06-15 11:45:49 发布 · 1.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

9.2 收货地址区域
9.3 结算区域

9.2 收货地址区域

9.2.1 创建收货地址组件

🥞🥞🥞在 components 目录上鼠标右键，选择新建组件，并填写组件相关的信息
渲染收货地址组件的基本结构

<view>

  <!-- 选择收货地址的盒子 -->
  <view class="address-choose-box">
    <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
  </view>

  <!-- 渲染收货信息的盒子 -->
  <view class="address-info-box">
    <view class="row1">
      <view class="row1-left">
        <view class="username">收货人：<text>escook</text></view>
      </view>
      <view class="row1-right">
        <view class="phone">电话：<text>138XXXX5555</text></view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <view class="row2">
      <view class="row2-left">收货地址：</view>
      <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx </view>
    </view>
  </view>

  <!-- 底部的边框线 -->
  <image src="/static/[email protected]" class="address-border"></image>
</view>

添加样式

// 底部边框线的样式
.address-border {
   
   
  display: block;
  width: 100%;
  height: 5px;
}

// 选择收货地址的盒子
.address-choose-box {
   
   
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 渲染收货信息的盒子
.address-info-box {
   
   
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;

  // 第一行
  .row1 {
   
   
    display: flex;
    justify-content: space-between;

    .row1-right {
   
   
      display: flex;
      align-items: center;

      .phone {
   
   
        margin-right: 5px;
      }
    }
  }

  // 第二行
  .row2 {
   
   
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
   
   
      white-space: nowrap;
    }
  }
}

9.2.2 实现收货地址区域的按需展示

在 data 中定义收货地址的信息对象

export default{
   
   
	data(){
   
   
		address:[] 
	}
}

使用 v-if 和 v-else 实现按需展示

<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
</view>

<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else>
  <!-- 省略其它代码 -->
</view>

9.2.3 实现选择收货地址的功能

🍔🥟🍔为请选择收货地址+ 的 button 按钮绑定点击事件处理函数

<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size

最低0.47元/天解锁文章

200万优质内容无限畅学