目录
一、购物车页面
在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
})
},
效果图如下：
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
