Skip to content

飞
飞鹤小程序
Commit 845b536f authored by spc's avatar spc
Browse files
Options

fixed

parent eb2a5dea
Expand all Show whitespace changes
Inline Side-by-side
Showing with 531 additions and 142 deletions
api/address.js
View file @ 845b536f
...@@ -164,3 +164,28 @@ export const getAddressDetail = (data) => api.get('/c/user/address/detail', data ...@@ -164,3 +164,28 @@ export const getAddressDetail = (data) => api.get('/c/user/address/detail', data
* @response {string} response.data[].name - 地区名称 * @response {string} response.data[].name - 地区名称
*/ */
export const getRegionList = (params = {}) => api.get('/c/regions/query', params); export const getRegionList = (params = {}) => api.get('/c/regions/query', params);
/**
* 获取订单物流信息
* @param {Object} data - 请求参数
* @param {string} data.order_no - 订单号 (必须)
* @returns {Promise} API响应
* @description 根据订单号查询订单物流信息
* @response {Object} 响应数据
* @response {boolean} response.ok - 请求是否成功
* @response {boolean} response.success - 操作是否成功
* @response {string} response.msg - 响应消息
* @response {string} response.code - 响应代码
* @response {Object} response.data - 物流信息数据
* @response {string} response.data.order_no - 订单号
* @response {string} response.data.express_company - 快递公司名称
* @response {string} response.data.express_no - 快递公司单号
* @response {Array} response.data.traces - 物流轨迹列表
* @response {string} response.data.traces[].time - 物流事件时间
* @response {string} response.data.traces[].context - 物流事件描述
*/
export const getOrderLogistics = (data) => api.get('/c/order/express/route', data);
pages.json
View file @ 845b536f
...@@ -404,6 +404,13 @@ ...@@ -404,6 +404,13 @@
"style": { "style": {
"navigationBarTitleText": "我的订单" "navigationBarTitleText": "我的订单"
} }
},
{
"path" : "logisticsPage/logisticsPage",
"style" :
{
"navigationBarTitleText" : ""
}
} }
] ]
} }
......
v3/logisticsPage/logisticsPage.vue 0 → 100644
View file @ 845b536f
<template>
<view class="logistics-container">
<!-- 顶部信息 -->
<view class="logistics-header">
<view class="logistics-info">
<view class="company-info">
<text class="company-name">{{ logisticsData.logisticsCompanyName || '快递公司' }}</text>
<text class="express-code">{{ logisticsData.expressCode || '暂无运单号' }}</text>
</view>
<view class="status-info" v-if="logisticsData.statusDesc">
<text class="status-desc">{{ logisticsData.statusDesc }}</text>
</view>
</view>
</view>
<!-- 物流时间轴 -->
<view class="logistics-timeline" v-if="logisticsData.processDetailList && logisticsData.processDetailList.length > 0">
<view class="timeline-item" v-for="(item, index) in logisticsData.processDetailList" :key="index">
<!-- 时间轴点和线 -->
<view class="timeline-line">
<view class="timeline-dot" :class="{ 'active': index === 0 }">
<view class="dot-inner" v-if="index === 0"></view>
</view>
<view class="timeline-line-vertical" v-if="index < logisticsData.processDetailList.length - 1"></view>
</view>
<!-- 物流信息内容 -->
<view class="timeline-content">
<view class="timeline-text" :class="{ 'active': index === 0 }">
<!-- 处理时间 -->
<text class="timeline-time">{{ formatTime(item.processDate) }}</text>
<!-- 物流信息 -->
<text class="timeline-info">{{ item.text || '暂无信息' }}</text>
</view>
</view>
</view>
</view>
<!-- 暂无数据提示 -->
<view class="empty-logistics" v-else>
<text>暂无物流信息</text>
</view>
<!-- 底部间距 -->
<view class="bottom-space"></view>
</view>
</template>
<script>
import { getOrderLogistics } from '@/api/address';
export default {
data() {
return {
// 物流数据
logisticsData: {
logisticsCompanyName: '',
logisticsCompanyCode: '',
expressCode: '',
statusDesc: '',
parcelStatusDesc: '',
lastUpdateTime: '',
processDetailList: []
},
// 加载状态
loading: true
}
},
onLoad(options) {
// 从页面参数获取订单ID或物流单号
this.orderId = options.orderId || '';
this.getLogisticsInfo();
},
methods: {
// 获取物流信息
async getLogisticsInfo() {
try {
this.loading = true;
// 调用物流查询接口
const res = await getOrderLogistics({
orderId: this.orderId
});
if (res && res.data) {
// 假设接口返回的数据结构为 { ok, data: { processDetailList, ... } }
// 调整为页面需要的数据结构
this.logisticsData = {
logisticsCompanyName: res.data.logisticsCompanyName || '',
logisticsCompanyCode: res.data.logisticsCompanyCode || '',
expressCode: res.data.expressCode || '',
statusDesc: res.data.statusDesc || res.data.parcelStatusDesc || '',
parcelStatusDesc: res.data.parcelStatusDesc || '',
lastUpdateTime: res.data.lastUpdateTime || '',
processDetailList: res.data.processDetailList || []
};
} else {
console.error('物流数据获取失败');
}
} catch (error) {
console.error('获取物流信息异常:', error);
} finally {
this.loading = false;
}
},
// 格式化时间
formatTime(timeStr) {
if (!timeStr) return '';
// 假设时间格式为 yyyy-MM-dd HH:mm:ss
// 需要转换为 MM.dd HH:mm 格式
const date = new Date(timeStr);
if (isNaN(date.getTime())) return timeStr;
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${month}.${day} ${hours}:${minutes}`;
}
}
}
</script>
<style scoped>
.logistics-container {
min-height: 100vh;
background-color: #f5f5f5;
}
/* 顶部信息样式 */
.logistics-header {
background-color: #ffffff;
padding: 30rpx 30rpx 20rpx;
border-bottom: 1rpx solid #e5e5e5;
}
.logistics-info {
padding-bottom: 10rpx;
}
.company-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.company-name {
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.express-code {
font-size: 26rpx;
color: #999999;
}
.status-info {
padding-bottom: 10rpx;
}
.status-desc {
font-size: 28rpx;
color: #666666;
}
/* 物流时间轴样式 */
.logistics-timeline {
margin-top: 20rpx;
background-color: #ffffff;
padding: 30rpx 0;
}
.timeline-item {
display: flex;
padding: 0 30rpx;
position: relative;
padding-bottom: 40rpx;
}
/* 时间轴点和线 */
.timeline-line {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30rpx;
min-width: 20rpx;
}
.timeline-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #e5e5e5;
position: relative;
z-index: 2;
}
.timeline-dot.active {
background-color: #ffffff;
border: 2rpx solid #ff6600;
width: 18rpx;
height: 18rpx;
}
.dot-inner {
position: absolute;
width: 10rpx;
height: 10rpx;
background-color: #ff6600;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-line-vertical {
width: 2rpx;
background-color: #e5e5e5;
flex: 1;
margin-top: -1rpx;
position: relative;
z-index: 1;
}
/* 物流内容样式 */
.timeline-content {
flex: 1;
padding-bottom: 40rpx;
}
.timeline-text {
font-size: 26rpx;
color: #999999;
line-height: 40rpx;
word-break: break-all;
}
.timeline-text.active {
color: #333333;
}
.timeline-time {
display: block;
margin-bottom: 10rpx;
font-size: 24rpx;
}
.timeline-info {
font-size: 26rpx;
}
/* 暂无数据样式 */
.empty-logistics {
padding: 100rpx 0;
test-align: center;
color: #999999;
font-size: 28rpx;
background-color: #ffffff;
margin-top: 20rpx;
}
/* 底部间距 */
.bottom-space {
height: 40rpx;
}
</style>
v3/orderDetail/orderDetail.vue
View file @ 845b536f
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment