我要一个微信小程序商城订单页面的代码
时间: 2023-12-14 12:04:43 浏览: 37
以下是一个简单的微信小程序商城订单页面示例代码:
```
<view class="order-page">
<view class="order-status">
<image src="/images/order-status.png" class="status-icon"></image>
<text class="status-text">待付款</text>
</view>
<view class="order-detail">
<view class="order-item" wx:for="{{orderList}}" wx:key="index">
<image src="{{item.image}}" class="item-image"></image>
<view class="item-info">
<text class="item-title">{{item.title}}</text>
<text class="item-price">¥{{item.price}}</text>
<text class="item-count">x{{item.count}}</text>
</view>
</view>
<view class="order-summary">
<text class="summary-text">共{{totalCount}}件商品,合计:</text>
<text class="summary-price">¥{{totalPrice}}</text>
</view>
</view>
<view class="order-actions">
<button class="action-btn cancel-btn">取消订单</button>
<button class="action-btn pay-btn">立即支付</button>
</view>
</view>
```
其中,order-status 类用于设置订单状态样式,order-detail 用于设置订单详情样式,order-item 和 order-summary 分别用于设置订单中每个商品和订单总价的样式,order-actions 用于设置订单操作按钮的样式。
在 JavaScript 中,可以通过设置 orderList、totalCount 和 totalPrice 变量来动态渲染订单内容,同时可以通过绑定 cancel-btn 和 pay-btn 方法来处理取消订单和支付订单的点击事件。
订单页面的样式可以在 CSS 中进行设置,例如:
```
.order-page {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
background-color: #f5f5f5;
}
.order-status {
display: flex;
align-items: center;
height: 50px;
padding: 0 16px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.status-icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.status-text {
font-size: 14px;
color: #333;
}
.order-detail {
flex: 1;
margin-top: 8px;
background-color: #fff;
padding: 16px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.order-item {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.item-image {
width: 80px;
height: 80px;
margin-right: 16px;
}
.item-info {
flex: 1;
}
.item-title {
font-size: 14px;
color: #333;
margin-bottom: 8px;
}
.item-price {
font-size: 14px;
color: #ff5722;
margin-bottom: 4px;
}
.item-count {
font-size: 12px;
color: #999;
}
.order-summary {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.summary-text {
font-size: 14px;
color: #333;
margin-right: 8px;
}
.summary-price {
font-size: 16px;
color: #ff5722;
}
.order-actions {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 16px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.action-btn {
font-size: 14px;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
}
.cancel-btn {
background-color: #999;
}
.pay-btn {
background-color: #ff5722;
}
```
通过设置 flex 布局和样式属性,可以灵活地调整订单页面的样式。