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

目录

一、购物车页面

1.购物车列表结构：

2.购物车列表项结构

3.购物车为空的情况

 4.底部提交订单栏

二、我的页面

1.顶部背景图

2.未登录面板

3.订单面板

4.商品售后面板

三、商品订单页

1.结构代码：

2.样式代码 

a.总背景：

b.订单列表项

四、鲜花列表页

五、商品详情页

1.页面布局

2.底部导航栏和商品操作按钮

3.自定义弹出面板

a.自定义面板的显示与关闭

b.商品信息展示

c.购买数量选择：

d.祝福语输入和确定按钮

---

一、购物车页面

在cart.xwml中完成购物车页面，展示购物车列表，其中包括购物车列表、购物车为空时的提示、以及底部的提交订单栏。

1.购物车列表结构：

• wx:if="{{cartList.length}}"：只有当 cartList 数组有长度（即非空）时，才显示购物车列表。
• wx：for="{{cartList}}" 、 wx:key="index"：用于遍历 cartList 数组，为每个列表项生成一个视图。

<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>

3.订单面板

分为标题和内容两部分。

内容部分使用了 wx:for 循环来遍历 orderItem 数组，为每个订单项生成一个视图。每个订单项都包含一个图标和一个标题文本，并且是一个导航器，点击后会跳转到 /pages/orders/orders 页面。

<view class="order">  
  <!-- 订单面板标题部分 -->  
  <view class="order-title">  
    <text class="title">我的订单</text>  
    <text class="more">查看更多></text>  
  </view>  
  
  <!-- 订单面板内容部分 -->  
  <view class="order-content">  
    <view class="order-content-item" wx:for="{{orderItem}}" wx:key="index">  
      <navigator url="/pages/orders/orders">  
        <view class="iconfont {{ item.iconfont }}"></view>  
        <text>{{ item.title }}</text>  
      </navigator>  
    </view>  
  </view>  
</view>

4.商品售后面板

是售前售后服务的展示面板。它包含一个标题和多个售后服务项目的列表。每个项目都包含一个图标和一条文本描述。

<view class="after-scale section">  
  <!-- 标题 -->  
  <view class="order-title-wrap">  
    <text class="title">关于售前售后服务</text>  
  </view>  
  <!-- 售后项目列表 -->  
  <view class="after-scale-item">  
    <!-- 具体的售后信息 -->  
  </view>  
  <!-- 其他售后项目 -->  
</view>

在my.scss中编写样式，完成后如下图所示： 

---

三、商品订单页

新建一个orders文件，再单击右键新建pages，描述订单列表页面的结构。

1.结构代码：

在orders.wxml中编写结构代码：

<!-- 订单列表页面 -->  
<view class="order-container container">  
  <!-- 订单容器 -->  
  <view class="order-list" wx:if="{{orderList.length}}">  
    <!-- 订单列表，只有当 orderList 数组有元素时才显示 -->  
    <view class="order-item" wx:for="{{orderList}}" wx:key="index">  
      <!-- 订单项，循环遍历 orderList 数组 -->  
      <!-- 订单信息 -->  
      <view class="order-item-header list-flex">  
        <!-- 订单项顶部 -->  
        <view class="orderno">订单号1000888081777<text></text></view>  
        <!-- 订单号 -->  
        <view class="order-status"> 已支付</view>  
        <!-- 订单状态 -->  
      </view>  
  
      <!-- 图片信息和商品信息 -->  
      <view class="goods-item list-flex">  
        <!-- 商品项，使用弹性布局 -->  
        <view class="left">  
          <image src="../../assets/images/floor-img.jpg" mode="widthFix" class="img" />  
        </view>  
        <!-- 左侧图片 -->  
        <view class="mid">  
          <view class="goods-name">不变的承诺</view>  
          <!-- 商品名称 -->  
          <view class="goods-blessing">不变的承诺</view>  
          <!-- 商品祝福语（同上，应从数据中获取） -->  
        </view>  
        <!-- 中间部分，包括商品名称和祝福语 -->  
        <!-- 现价 -->  
        <view class="right">  
          <!-- 商品现价-->  
          <view class="goods-price">¥399</view>  
           <!-- 商品数量 -->
          <view class="goods-count">x1</view>  
        </view>  
   
      </view>  
  
      <!-- 原价 -->  
      <view class="order-item-footer">  
        <!-- 订单项底部 -->  
        <view class="total-amount list-flex">  
          <!-- 订单总价 -->  
          <text class="text">实付</text>   
          <text class="price"><text>¥</text>599</text>  
          <!-- 订单实付金额 -->  
        </view>  
      </view>  
  
    </view>  
  </view>  
</view>

2.样式代码 

在oders.scss中编写订单列表页面的样式，包括订单项、订单信息、商品信息和订单底部信息的显示方式，

a.总背景：

.order-container{
  background-color: whitesmoke;}

.order-container 设置了页面的大背景颜色为 whitesmoke。

b.订单列表项

.list-flex {
  display: flex;
  background-color: white;
}
 
.order-item {
  margin-top: 21rpx;
  padding: 24rpx 32rpx 24rpx;
  background-color:white;
  border-radius: 14rpx;
}
// 链接符号&表示当前标签
//  :first-child 表示伪选择器
 // 在指定元素前添加内容
  &:first-child {
    margin: 0rpx;
  }
 
  .order-item-header {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
  }

.list-flex 使用了 flex 布局，并设置了白色背景。

.order-item 是订单列表中的单个订单项，设置了上边距、内边距、背景色和圆角。对于列表中的第一个订单项，它移除了上边距。

.order-item-header 是订单项的头部，包含订单号和订单状态，使用了 flex 布局来对齐内容。

完成样式代码效果图如下图所示：

---

四、鲜花列表页

新建list文件夹，在list.json中配置页面文件，

1.当component设置为true时，自定义组件的入口配置文件。

2.usingComponents:用于声明当前页面或组件所使用的其他自定义组件，引用一个用于展示商品卡片的组件。

在list.json中引入goods-card全局组件

{
  "component": true,
  "usingComponents": {
    "goods-card": "../../components/goods-card/goods-card"
  },
  "navigationBarTitleText": "鲜花列表"
}

在list.wxml编写结构：

<view class="container">
<!-- 商品列表组件-->
<view class="goods-list">
  <!-- 列表区域-->
  <block>
    <goods-card></goods-card>
    <goods-card></goods-card>
    <goods-card></goods-card>
    <goods-card></goods-card>
  </block>
</view>
 
<!-- 文字区域 -->
<!-- hidden属性控制 根据isfinish来判断文字的显示与隐藏 -->
<!-- 当数据加载完毕 ！isfinish为true，！isfinish为false，则这句话不隐藏，用户能看到这句话 -->
<view class="finish" hidden="{{!isfinish}}">数据加载完毕!</view>
</view>

 样式完成后效果图如下：

---

五、商品详情页

新建一个details文件，能商品详情页面的基本布局和交互功能

在details.wxml文件中编写结构

1.页面布局

• 页面整体被包在一个 view 标签中，设置类名为 container，作为页面的容器。
• 页面顶部是一个图片区域（.banner-img），展示商品的主图。
• 接下来是商品的基本信息展示区域（.content），包括价格、标题和详细信息。
• 紧接着是图片信息展示区域（.datails），展示了商品的多张图片。
• 页面底部是底部导航栏和商品操作按钮区域，使用了 Vant 组件库的 van-goods-action 组件。
• 商品的基本信息（价格、标题、详细信息）分别通过嵌套的 view 标签来展示，

<view class="container">
  <view class="banner-img">
    <!-- 图片 -->
    <image src="../../assets/images/floor.jpg" mode="widthFix" />
  </view>
  <!-- 基本信息 -->
  <view class="content">
    <!-- 商品价钱 -->
    <view class="price">
      <view class="price-num">￥399</view>
      <view class="price-origin-num">￥599</view>
    </view>
    <!-- 商品标题 -->
    <view class="title">
      红玫瑰/情人节/9999支
    </view>
    <!-- 详细信息 -->
    <view class="info">
      用最温暖的最有情的心意/情人节精选款/99999999999999支
    </view>
  </view>
 
 
  <!-- 图片信息 -->
  <view class="details">
    <image src="../../assets/images/floor-img.jpg" mode="widthFix" />
    <image src="../../assets/images/floor.jpg" mode="widthFix" />
    <image src="../../assets/images/floor.jpg" mode="widthFix" />
  </view>
 

2.底部导航栏和商品操作按钮

• 底部导航栏使用了 <navigator> 标签来实现页面间的跳转。
• 导航栏包含了三个导航项：“首页”、“购物车”和“客服”，每个导航项都使用了 Vant 组件库的 van-goods-action-icon 组件来展示图标和文本。
• 通过 open-type="switchTab" 属性，这些导航项实现了 tab 切换的跳转方式。
• 页面底部还有两个商品操作按钮：“加入购物车”和“立即购买”。 Vant 组件库的 van-goods-action-button 组件，并绑定了 bindtap 事件处理函数 handelSheet。
• 当用户点击这些按钮时，会触发 handelSheet 函数，用于弹出某种面板或执行相关操作。

<-- 如果没法跳转 那么加个open-type="switchTab -->
    <navigator url="/pages/index/index" open-type="switchTab">
      <van-goods-action-icon icon="home-o" text="首页" />
    </navigator>
    <navigator url="/pages/cart/cart" open-type="switchTab">
      <van-goods-action-icon icon="cart-o" text="购物车" info="" />
    </navigator>
    <navigator url="/pages/my/my" open-type="switchTab">
      <van-goods-action-icon icon="chat-o" text="客服" />
    </navigator>
<!-- handelsheel为点击按钮事件 -->
    <van-goods-action-button text="加入购物车" type="warning" bindtap="handelSheet" />
    <van-goods-action-button text="立即购买" bindtap="handelSheet" />
  </van-goods-action>

 编写完样式效果图如下：

3.自定义弹出面板

使用了 Vant 组件库中的 van-action-sheet 组件来创建一个弹出式的操作面板。这个面板包含了商品的基本信息、祝福语输入区域以及确认按钮。 

在details.wxml中继续编写弹出面板: 用于展示商品信息、选择购买数量、输入祝福语，并最终通过确定按钮完成购买或提交操作。

a.自定义面板的显示与关闭

<!-- bind:close为面板关闭事件-->
//面板的显示与隐藏通过 show 属性来控制。当 show 为 true 时，面板显示；为 false 时，面板隐藏。
//面板关闭事件通过 bind:close 绑定到 onClose 函数。当面板关闭时，会触发 onClose 函数。
  <van-action-sheet show="{{ show }}" bind:close="onClose">

b.商品信息展示

编写了一个商品信息的展示区域，分为图片区域和基本信息区域。 

<view class="mianban">
    <view class="good-info">
    <!-- 图片区域 -->
      <view class="left">
        <image src="../../assets/images/floor-img.jpg" mode="widthFix" />
      </view>
<!-- 商品基本信息区域 -->
      <view class="right">
        <view class="title">9999支红玫瑰/情人节</view>
        <view class="buy">
          <view class="price">￥399</view>

c.购买数量选择：

 
          <view class="buy-btn">
//van-stepper 组件的 value 属性设置为 1，表示初始购买数量为 1。
//当用户改变购买数量时，会触发 bind:change 事件，并调用 onChange 函数。
            <van-stepper value="{{ 1 }}" bind:change="onChange" />
          </view>
        </view>
      </view>

d.祝福语输入和确定按钮

在面板的底部，有一个确定按钮，使用了 van-button 组件来实现。按钮的 type 属性设置为primary，表示主要按钮样式；round 属性表示按钮为圆角样式；size 属性设置为 large，表示按钮为大尺寸

 
<!-- 商品祝福语区域 -->
    <view class="zhufu">
      <text>祝福语</text>
    </view>
    <!-- 设置多行文本框textarea 文字占位符：placeholder -->
    <view class="tip" >
    <textarea value="" placeholder="必填，写上您的祝福语！（请勿填写特殊符号或表情符号" />
    </view>
 
 
 
    <view class="button">
      <van-button type="primary" round size="large">确定</van-button>
    </view>
  </view>
  </van-action-sheet>

在datails.js中编写逻辑：

handelSheet 和 onClose 是两个函数，分别用于处理点击按钮事件和面板关闭事件。这两个函数都是定义在JS 文件中，

与 datails.wxml 文件中对应的 bindtap="handelSheet" 和 bind:close="onClose" 事件绑定相匹配。

 // 点击按钮事件
  handelSheet(){
     this.setData({
       show:true
     })
  },
  onClose(){
    this.setData({
      show:false
    })
  },

效果图如下：