微信小程序综合训练--花店商城小程序购物车、我的、鲜花列表、商品查询...笔记（2）

<view class="cartList-container" wx:if="{
  
  {cartList.length}}">  
  <view class="cartList-container-cell" wx:for="{
  
  {cartList}}" wx:key="index">  
    <!-- 购物车列表项的结构 -->  
  </view>  
</view>

在cart.js data对象中，设置购物车中商品数量：

  data: {
   cartList:[1,2,3],
  },

2.购物车列表项结构

van-swipe-cell：Vant Weapp 的滑动单元格组件，允许用户向左或向右滑动以显示额外的操作。
slot="left" 和 slot="right"：定义滑动时显示的内容，这里左侧为空，右侧为“删除”。
van-cell-group :其他视图组件：用于展示商品信息，如图片、名称、价格等。

<van-swipe-cell right-width="{
  
  { 65 }}" left-width="{
  
  { 65 }}">  
  <!-- 左侧滑动内容 -->  
  <view slot="left" class="van-swipe-cell__left"></view>  
    
  <!-- 商品信息 -->  
  <van-cell-group>  
    <!-- 商品图片、名称、价格、数量等 -->  
  </van-cell-group>  
    
  <!-- 右侧滑动内容 -->  
  <view slot="right" class="van-swipe-cell__right">删除</view>  
</van-swipe-cell>

如下图所示：

3.购物车为空的情况

van-empty:空状态组件，用于展示购物车为空时的提示信息。

<van-empty description="还没有商品，快去添加吧！">  
  <!-- 提示用户去购物或登录的按钮 -->  
</van-empty>

如下图所示：

4.底部提交订单栏

van-submit-bar：提交订单栏组件，用于展示订单总价和提交按钮。
price="{ { 3050 }}"：设置订单的总价为 3050。
button-text="提交订单"：设置提交按钮的文本是“提交订单”。
bind:submit="onClickButton"：当提交按钮被点击时，触发 onClickButton 事件处理函数。
van-checkbox：Vant Weapp 的复选框组件，这里用于实现全选功能。

<van-submit-bar price="{
  
  { 3050 }}" button-text="提交订单" bind:submit="onClickButton" tip="{
  
  { true }}">  
  <van-checkbox value="{
  
  { true }}" bind:change="onChange" checked-color="#f3514f">全选</van-checkbox>  
</van-submit-bar>

二、我的页面

在my.wxml页面中完成我的页面，用于展示用户的个人信息、订单列表以及售后服务等相关信息。

1.顶部背景图

顶部展示区域，用于展示背景或广告图。设置了 mode="widthFix" 以保证图片宽度自适应，高度按比例缩放。

<view class="top-show">  
  <image src="../../assets/images/banner.jpg" mode="widthFix" class="top-show-img" />  
</view>

2.未登录面板

<view class="user-container">  
  <view class="avatar-container">  
//未登录头像
    <image src="../../assets/images/avatar.png" mode="" class="avatar" />  
  </view>  
//提示用户未登录的文本区域
  <view class="no-login">  
    <text>未登录</text>  
    <text>点击授权登录</text>  
  </view>  
</view>