devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：空白诗007 | 2024-07-15 22:49:38

赞

踩

微信小程序 实现订单列表页面

目录

一、购物车页面

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 数组，为每个列表项生成一个视图。
  1. <view class="cartList-container" wx:if="{{cartList.length}}">  
  2.   <view class="cartList-container-cell" wx:for="{{cartList}}" wx:key="index">  
  3.     <!-- 购物车列表项的结构 -->  
  4.   </view>  
  5. </view>

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

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

2.购物车列表项结构

  • van-swipe-cell：Vant Weapp 的滑动单元格组件，允许用户向左或向右滑动以显示额外的操作。
  • slot="left" 和 slot="right"：定义滑动时显示的内容，这里左侧为空，右侧为“删除”。
  • van-cell-group :其他视图组件：用于展示商品信息，如图片、名称、价格等。
  1. <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">  
  2.   <!-- 左侧滑动内容 -->  
  3.   <view slot="left" class="van-swipe-cell__left"></view>  
  4.     
  5.   <!-- 商品信息 -->  
  6.   <van-cell-group>  
  7.     <!-- 商品图片、名称、价格、数量等 -->  
  8.   </van-cell-group>  
  9.     
  10.   <!-- 右侧滑动内容 -->  
  11.   <view slot="right" class="van-swipe-cell__right">删除</view>  
  12. </van-swipe-cell>

如下图所示： 

3.购物车为空的情况

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

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

如下图所示： 

 

 4.底部提交订单栏

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

二、我的页面

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

1.顶部背景图

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

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

2.未登录面板

  1. <view class="user-container">  
  2.   <view class="avatar-container">  
  3. //未登录头像
  4.     <image src="../../assets/images/avatar.png" mode="" class="avatar" />  
  5.   </view>  
  6. //提示用户未登录的文本区域
  7.   <view class="no-login">  
  8.     <text>未登录</text>  
  9.     <text>点击授权登录</text>  
  10.   </view>  
  11. </view>

3.订单面板

分为标题和内容两部分。

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

  1. <view class="order">  
  2.   <!-- 订单面板标题部分 -->  
  3.   <view class="order-title">  
  4.     <text class="title">我的订单</text>  
  5.     <text class="more">查看更多></text>  
  6.   </view>  
  7.   
  8.   <!-- 订单面板内容部分 -->  
  9.   <view class="order-content">  
  10.     <view class="order-content-item" wx:for="{{orderItem}}" wx:key="index">  
  11.       <navigator url="/pages/orders/orders">  
  12.         <view class="iconfont {{ item.iconfont }}"></view>  
  13.         <text>{{ item.title }}</text>  
  14.       </navigator>  
  15.     </view>  
  16.   </view>  
  17. </view>

4.商品售后面板

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

  1. <view class="after-scale section">  
  2.   <!-- 标题 -->  
  3.   <view class="order-title-wrap">  
  4.     <text class="title">关于售前售后服务</text>  
  5.   </view>  
  6.   <!-- 售后项目列表 -->  
  7.   <view class="after-scale-item">  
  8.     <!-- 具体的售后信息 -->  
  9.   </view>  
  10.   <!-- 其他售后项目 -->  
  11. </view>

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

三、商品订单页

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

1.结构代码：

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

  1. <!-- 订单列表页面 -->  
  2. <view class="order-container container">  
  3.   <!-- 订单容器 -->  
  4.   <view class="order-list" wx:if="{{orderList.length}}">  
  5.     <!-- 订单列表，只有当 orderList 数组有元素时才显示 -->  
  6.     <view class="order-item" wx:for="{{orderList}}" wx:key="index">  
  7.       <!-- 订单项，循环遍历 orderList 数组 -->  
  8.       <!-- 订单信息 -->  
  9.       <view class="order-item-header list-flex">  
  10.         <!-- 订单项顶部 -->  
  11.         <view class="orderno">订单号1000888081777<text></text></view>  
  12.         <!-- 订单号 -->  
  13.         <view class="order-status"> 已支付</view>  
  14.         <!-- 订单状态 -->  
  15.       </view>  
  16.   
  17.       <!-- 图片信息和商品信息 -->  
  18.       <view class="goods-item list-flex">  
  19.         <!-- 商品项，使用弹性布局 -->  
  20.         <view class="left">  
  21.           <image src="../../assets/images/floor-img.jpg" mode="widthFix" class="img" />  
  22.         </view>  
  23.         <!-- 左侧图片 -->  
  24.         <view class="mid">  
  25.           <view class="goods-name">不变的承诺</view>  
  26.           <!-- 商品名称 -->  
  27.           <view class="goods-blessing">不变的承诺</view>  
  28.           <!-- 商品祝福语（同上，应从数据中获取） -->  
  29.         </view>  
  30.         <!-- 中间部分，包括商品名称和祝福语 -->  
  31.         <!-- 现价 -->  
  32.         <view class="right">  
  33.           <!-- 商品现价-->  
  34.           <view class="goods-price">¥399</view>  
  35.            <!-- 商品数量 -->
  36.           <view class="goods-count">x1</view>  
  37.         </view>  
  38.    
  39.       </view>  
  40.   
  41.       <!-- 原价 -->  
  42.       <view class="order-item-footer">  
  43.         <!-- 订单项底部 -->  
  44.         <view class="total-amount list-flex">  
  45.           <!-- 订单总价 -->  
  46.           <text class="text">实付</text>   
  47.           <text class="price"><text>¥</text>599</text>  
  48.           <!-- 订单实付金额 -->  
  49.         </view>  
  50.       </view>  
  51.   
  52.     </view>  
  53.   </view>  
  54. </view>

2.样式代码 

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

a.总背景：

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

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

b.订单列表项

  1. .list-flex {
  2.   display: flex;
  3.   background-color: white;
  4. }
  5.  
  6. .order-item {
  7.   margin-top: 21rpx;
  8.   padding: 24rpx 32rpx 24rpx;
  9.   background-color:white;
  10.   border-radius: 14rpx;
  11. }
  12. // 链接符号&表示当前标签
  13. //  :first-child 表示伪选择器
  14.  // 在指定元素前添加内容
  15.   &:first-child {
  16.     margin: 0rpx;
  17.   }
  18.  
  19.   .order-item-header {
  20.     align-items: center;
  21.     justify-content: space-between;
  22.     margin-bottom: 24rpx;
  23.   }

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

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

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

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

四、鲜花列表页

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

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

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

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

  1. {
  2.   "component": true,
  3.   "usingComponents": {
  4.     "goods-card": "../../components/goods-card/goods-card"
  5.   },
  6.   "navigationBarTitleText": "鲜花列表"
  7. }

在list.wxml编写结构：

  1. <view class="container">
  2. <!-- 商品列表组件-->
  3. <view class="goods-list">
  4.   <!-- 列表区域-->
  5.   <block>
  6.     <goods-card></goods-card>
  7.     <goods-card></goods-card>
  8.     <goods-card></goods-card>
  9.     <goods-card></goods-card>
  10.   </block>
  11. </view>
  12.  
  13. <!-- 文字区域 -->
  14. <!-- hidden属性控制 根据isfinish来判断文字的显示与隐藏 -->
  15. <!-- 当数据加载完毕 ！isfinish为true，！isfinish为false，则这句话不隐藏，用户能看到这句话 -->
  16. <view class="finish" hidden="{{!isfinish}}">数据加载完毕!</view>
  17. </view>

 样式完成后效果图如下：

五、商品详情页

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

在details.wxml文件中编写结构

1.页面布局

  • 页面整体被包在一个 view 标签中，设置类名为 container，作为页面的容器。
  • 页面顶部是一个图片区域（.banner-img），展示商品的主图。
  • 接下来是商品的基本信息展示区域（.content），包括价格、标题和详细信息。
  • 紧接着是图片信息展示区域（.datails），展示了商品的多张图片。
  • 页面底部是底部导航栏和商品操作按钮区域，使用了 Vant 组件库的 van-goods-action 组件。
  • 商品的基本信息（价格、标题、详细信息）分别通过嵌套的 view 标签来展示，
  1. <view class="container">
  2.   <view class="banner-img">
  3.     <!-- 图片 -->
  4.     <image src="../../assets/images/floor.jpg" mode="widthFix" />
  5.   </view>
  6.   <!-- 基本信息 -->
  7.   <view class="content">
  8.     <!-- 商品价钱 -->
  9.     <view class="price">
  10.       <view class="price-num">￥399</view>
  11.       <view class="price-origin-num">￥599</view>
  12.     </view>
  13.     <!-- 商品标题 -->
  14.     <view class="title">
  15.       红玫瑰/情人节/9999支
  16.     </view>
  17.     <!-- 详细信息 -->
  18.     <view class="info">
  19.       用最温暖的最有情的心意/情人节精选款/99999999999999支
  20.     </view>
  21.   </view>
  22.  
  23.  
  24.   <!-- 图片信息 -->
  25.   <view class="details">
  26.     <image src="../../assets/images/floor-img.jpg" mode="widthFix" />
  27.     <image src="../../assets/images/floor.jpg" mode="widthFix" />
  28.     <image src="../../assets/images/floor.jpg" mode="widthFix" />
  29.   </view>
  30.

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

  • 底部导航栏使用了 <navigator> 标签来实现页面间的跳转。
  • 导航栏包含了三个导航项：“首页”、“购物车”和“客服”，每个导航项都使用了 Vant 组件库的 van-goods-action-icon 组件来展示图标和文本。
  • 通过 open-type="switchTab" 属性，这些导航项实现了 tab 切换的跳转方式。
  • 页面底部还有两个商品操作按钮：“加入购物车”和“立即购买”。 Vant 组件库的 van-goods-action-button 组件，并绑定了 bindtap 事件处理函数 handelSheet。
  • 当用户点击这些按钮时，会触发 handelSheet 函数，用于弹出某种面板或执行相关操作。
  1. <-- 如果没法跳转 那么加个open-type="switchTab -->
  2.     <navigator url="/pages/index/index" open-type="switchTab">
  3.       <van-goods-action-icon icon="home-o" text="首页" />
  4.     </navigator>
  5.     <navigator url="/pages/cart/cart" open-type="switchTab">
  6.       <van-goods-action-icon icon="cart-o" text="购物车" info="" />
  7.     </navigator>
  8.     <navigator url="/pages/my/my" open-type="switchTab">
  9.       <van-goods-action-icon icon="chat-o" text="客服" />
  10.     </navigator>
  11. <!-- handelsheel为点击按钮事件 -->
  12.     <van-goods-action-button text="加入购物车" type="warning" bindtap="handelSheet" />
  13.     <van-goods-action-button text="立即购买" bindtap="handelSheet" />
  14.   </van-goods-action>

 编写完样式效果图如下：

3.自定义弹出面板

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

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

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

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

b.商品信息展示

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

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

c.购买数量选择：

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

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

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

  1.  
  2. <!-- 商品祝福语区域 -->
  3.     <view class="zhufu">
  4.       <text>祝福语</text>
  5.     </view>
  6.     <!-- 设置多行文本框textarea 文字占位符：placeholder -->
  7.     <view class="tip" >
  8.     <textarea value="" placeholder="必填，写上您的祝福语！（请勿填写特殊符号或表情符号" />
  9.     </view>
  10.  
  11.  
  12.  
  13.     <view class="button">
  14.       <van-button type="primary" round size="large">确定</van-button>
  15.     </view>
  16.   </view>
  17.   </van-action-sheet>

在datails.js中编写逻辑：

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

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

  1.  // 点击按钮事件
  2.   handelSheet(){
  3.      this.setData({
  4.        show:true
  5.      })
  6.   },
  7.   onClose(){
  8.     this.setData({
  9.       show:false
  10.     })
  11.   },

效果图如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/831265
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号