徐飞洋
2 months ago
7 changed files with 295 additions and 1 deletions
@ -0,0 +1,57 @@ |
|||||
|
// pages/order/index.js
|
||||
|
Page({ |
||||
|
// 分享给朋友/群聊
|
||||
|
onShareAppMessage() { |
||||
|
return { |
||||
|
title: '鸡蛋贸易平台 - 我的订单', |
||||
|
path: '/pages/order/index', |
||||
|
imageUrl: '/images/你有好蛋.png' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 分享到朋友圈
|
||||
|
onShareTimeline() { |
||||
|
return { |
||||
|
title: '鸡蛋贸易平台 - 我的订单', |
||||
|
query: '', |
||||
|
imageUrl: '/images/你有好蛋.png' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data: { |
||||
|
userInfo: {}, |
||||
|
orders: [] |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// 页面加载时的初始化逻辑
|
||||
|
this.loadUserInfo(); |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
// 页面显示时的逻辑
|
||||
|
this.loadUserInfo(); |
||||
|
// 更新自定义tabBar状态
|
||||
|
if (typeof this.getTabBar === 'function' && this.getTabBar()) { |
||||
|
this.getTabBar().setData({ |
||||
|
selected: 4 // 保持与个人中心相同的选中状态
|
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载用户信息
|
||||
|
loadUserInfo() { |
||||
|
const app = getApp(); |
||||
|
if (app.globalData.userInfo) { |
||||
|
this.setData({ userInfo: app.globalData.userInfo }); |
||||
|
} else { |
||||
|
const localUserInfo = wx.getStorageSync('userInfo') || {}; |
||||
|
this.setData({ userInfo: localUserInfo }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
goBack() { |
||||
|
wx.navigateBack(); |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"usingComponents": {}, |
||||
|
"navigationBarTitleText": "我的订单", |
||||
|
"navigationBarBackgroundColor": "#fff", |
||||
|
"navigationBarTextStyle": "black" |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
<view class="order-page"> |
||||
|
<!-- 订单状态标签栏 --> |
||||
|
<view class="order-tabs"> |
||||
|
<view class="tab-item active">全部</view> |
||||
|
<view class="tab-item">待付款</view> |
||||
|
<view class="tab-item">待发货</view> |
||||
|
<view class="tab-item">待收货</view> |
||||
|
<view class="tab-item">已完成</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单列表 --> |
||||
|
<view class="order-list"> |
||||
|
<!-- 暂无订单提示 --> |
||||
|
<view class="no-orders"> |
||||
|
<view class="no-orders-icon">📦</view> |
||||
|
<view class="no-orders-title">空空如也~</view> |
||||
|
<view class="no-orders-subtitle">您还没有任何订单，快去选购吧</view> |
||||
|
<button class="go-shopping-btn" bindtap="goToHome">去首页购物</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,197 @@ |
|||||
|
/* pages/order/index.wxss */ |
||||
|
.order-page { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
/* 订单状态标签栏 */ |
||||
|
.order-tabs { |
||||
|
display: flex; |
||||
|
background-color: #fff; |
||||
|
border-bottom: 1rpx solid #e0e0e0; |
||||
|
overflow-x: auto; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
flex: 1; |
||||
|
min-width: 160rpx; |
||||
|
text-align: center; |
||||
|
padding: 24rpx 0; |
||||
|
font-size: 32rpx; |
||||
|
color: #666; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active { |
||||
|
color: #1677ff; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.tab-item.active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 60rpx; |
||||
|
height: 6rpx; |
||||
|
background-color: #1677ff; |
||||
|
border-radius: 3rpx; |
||||
|
} |
||||
|
|
||||
|
/* 订单列表 */ |
||||
|
.order-list { |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
/* 暂无订单提示 */ |
||||
|
.no-orders { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 120rpx 0; |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.no-orders-icon { |
||||
|
font-size: 160rpx; |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.no-orders-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.no-orders-subtitle { |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.go-shopping-btn { |
||||
|
background-color: #1677ff; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
padding: 20rpx 80rpx; |
||||
|
border-radius: 60rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* 订单卡片样式（预留） */ |
||||
|
.order-card { |
||||
|
background-color: #fff; |
||||
|
border-radius: 12rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.order-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding-bottom: 20rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.order-info { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.order-status { |
||||
|
font-size: 28rpx; |
||||
|
color: #1677ff; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.order-goods { |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-image { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 8rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-info { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
margin-bottom: 10rpx; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.goods-spec { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.goods-price { |
||||
|
font-size: 32rpx; |
||||
|
color: #ff4d4f; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.order-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-top: 20rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.total-price { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.total-price .price { |
||||
|
color: #ff4d4f; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.order-actions { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.action-btn { |
||||
|
padding: 12rpx 30rpx; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
margin-left: 20rpx; |
||||
|
border: 2rpx solid #1677ff; |
||||
|
color: #1677ff; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.action-btn.primary { |
||||
|
background-color: #1677ff; |
||||
|
color: #fff; |
||||
|
} |
||||
Loading…
Reference in new issue