Initial commit
This commit is contained in:
sjk
161
miniprogram/pages/order/delivery-detail/api.js
Normal file
161
miniprogram/pages/order/delivery-detail/api.js
Normal file
@@ -0,0 +1,161 @@
|
||||
import { config } from '../../../config/index';
|
||||
import { mockIp, mockReqId } from '../../../utils/mock';
|
||||
|
||||
/**
|
||||
* Mock获取物流信息
|
||||
*/
|
||||
function mockGetLogisticsInfo(params) {
|
||||
console.log('[物流API] 使用Mock数据获取物流信息', { params });
|
||||
|
||||
const mockData = {
|
||||
data: {
|
||||
logisticsNo: params.logisticsNo || '1234567890123',
|
||||
company: '顺丰快递',
|
||||
phoneNumber: '95338',
|
||||
nodes: [
|
||||
{
|
||||
title: '已签收',
|
||||
desc: '您的快件已签收，感谢使用顺丰，期待再次为您服务',
|
||||
date: '2024-01-15 14:30:25',
|
||||
icon: 'check-circle'
|
||||
},
|
||||
{
|
||||
title: '派送中',
|
||||
desc: '快件正在派送途中，请您准备签收',
|
||||
date: '2024-01-15 09:15:10',
|
||||
icon: 'location'
|
||||
},
|
||||
{
|
||||
title: '到达目的地',
|
||||
desc: '快件已到达【北京朝阳区】',
|
||||
date: '2024-01-15 06:20:45',
|
||||
icon: 'location'
|
||||
},
|
||||
{
|
||||
title: '运输中',
|
||||
desc: '快件在【北京转运中心】，正发往下一站',
|
||||
date: '2024-01-14 22:10:30',
|
||||
icon: 'swap'
|
||||
},
|
||||
{
|
||||
title: '已发货',
|
||||
desc: '商家已发货，快件已交给顺丰快递',
|
||||
date: '2024-01-14 16:45:20',
|
||||
icon: 'check-circle'
|
||||
}
|
||||
]
|
||||
},
|
||||
code: 200,
|
||||
message: 'success',
|
||||
requestId: mockReqId(),
|
||||
clientIp: mockIp(),
|
||||
success: true
|
||||
};
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log('[物流API] Mock物流信息获取完成', mockData.data);
|
||||
resolve(mockData);
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取物流信息
|
||||
* @param {Object} params - 参数对象
|
||||
* @param {string} params.logisticsNo - 物流单号
|
||||
* @param {string} params.logisticsCompanyCode - 物流公司代码
|
||||
* @param {string} params.orderNo - 订单号（可选）
|
||||
* @param {string} params.rightsNo - 售后单号（可选）
|
||||
*/
|
||||
export function getLogisticsInfo(params) {
|
||||
console.log('[物流API] 开始获取物流信息', {
|
||||
params,
|
||||
useMock: config.useMock,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
if (config.useMock) {
|
||||
return mockGetLogisticsInfo(params);
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const token = wx.getStorageSync('token');
|
||||
if (!token) {
|
||||
console.error('[物流API] 用户未登录');
|
||||
reject(new Error('未登录'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!params.logisticsNo) {
|
||||
console.error('[物流API] 缺少物流单号');
|
||||
reject(new Error('缺少物流单号'));
|
||||
return;
|
||||
}
|
||||
|
||||
const requestUrl = `${config.apiBase}/logistics/track`;
|
||||
console.log('[物流API] 发送物流查询API请求', {
|
||||
url: requestUrl,
|
||||
logisticsNo: params.logisticsNo,
|
||||
companyCode: params.logisticsCompanyCode
|
||||
});
|
||||
|
||||
wx.request({
|
||||
url: requestUrl,
|
||||
method: 'GET',
|
||||
data: {
|
||||
logisticsNo: params.logisticsNo,
|
||||
logisticsCompanyCode: params.logisticsCompanyCode,
|
||||
orderNo: params.orderNo,
|
||||
rightsNo: params.rightsNo
|
||||
},
|
||||
header: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('[物流API] 物流查询API响应', {
|
||||
statusCode: res.statusCode,
|
||||
dataCode: res.data?.code,
|
||||
message: res.data?.message,
|
||||
logisticsNo: params.logisticsNo
|
||||
});
|
||||
|
||||
if (res.statusCode === 200 && res.data.code === 200) {
|
||||
console.log('[物流API] 物流信息获取成功', {
|
||||
logisticsNo: params.logisticsNo,
|
||||
nodesCount: res.data.data?.nodes?.length || 0
|
||||
});
|
||||
resolve(res.data);
|
||||
} else {
|
||||
const errorMsg = res.data?.message || '获取物流信息失败';
|
||||
console.error('[物流API] 物流信息获取失败', {
|
||||
statusCode: res.statusCode,
|
||||
dataCode: res.data?.code,
|
||||
message: errorMsg,
|
||||
logisticsNo: params.logisticsNo
|
||||
});
|
||||
reject(new Error(errorMsg));
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[物流API] 物流查询请求失败', {
|
||||
error: err,
|
||||
logisticsNo: params.logisticsNo,
|
||||
url: requestUrl,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
reject(new Error('网络请求失败'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新物流信息
|
||||
* @param {Object} params - 参数对象
|
||||
*/
|
||||
export function refreshLogisticsInfo(params) {
|
||||
console.log('[物流API] 刷新物流信息', { params });
|
||||
return getLogisticsInfo(params);
|
||||
}
|
||||
178
miniprogram/pages/order/delivery-detail/index.js
Normal file
178
miniprogram/pages/order/delivery-detail/index.js
Normal file
@@ -0,0 +1,178 @@
|
||||
import { getLogisticsInfo, refreshLogisticsInfo } from './api';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
logisticsData: {
|
||||
logisticsNo: '',
|
||||
nodes: [],
|
||||
company: '',
|
||||
phoneNumber: '',
|
||||
},
|
||||
active: 0,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
// 存储查询参数，用于刷新
|
||||
queryParams: null,
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
console.log('[物流详情] 页面加载', { query });
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(decodeURIComponent(query.data || '{}'));
|
||||
} catch (e) {
|
||||
console.warn('物流节点数据解析失败', e);
|
||||
}
|
||||
|
||||
// 如果是从售后页面跳转过来的（source=2）
|
||||
if (Number(query.source) === 2) {
|
||||
const service = {
|
||||
company: data.logisticsCompanyName,
|
||||
logisticsNo: data.logisticsNo,
|
||||
nodes: data.nodes,
|
||||
phoneNumber: data.phoneNumber,
|
||||
};
|
||||
this.setData({
|
||||
logisticsData: service,
|
||||
queryParams: {
|
||||
logisticsNo: data.logisticsNo,
|
||||
logisticsCompanyCode: data.logisticsCompanyCode,
|
||||
rightsNo: query.rightsNo,
|
||||
orderNo: query.orderNo
|
||||
}
|
||||
});
|
||||
|
||||
// 如果有物流单号，尝试获取最新的物流信息
|
||||
if (data.logisticsNo) {
|
||||
this.fetchLogisticsInfo();
|
||||
}
|
||||
} else if (data) {
|
||||
// 直接传入的物流数据
|
||||
this.setData({
|
||||
logisticsData: data,
|
||||
queryParams: {
|
||||
logisticsNo: data.logisticsNo,
|
||||
logisticsCompanyCode: data.logisticsCompanyCode,
|
||||
orderNo: query.orderNo
|
||||
}
|
||||
});
|
||||
|
||||
// 如果有物流单号，尝试获取最新的物流信息
|
||||
if (data.logisticsNo) {
|
||||
this.fetchLogisticsInfo();
|
||||
}
|
||||
} else if (query.logisticsNo) {
|
||||
// 直接传入物流单号
|
||||
this.setData({
|
||||
queryParams: {
|
||||
logisticsNo: query.logisticsNo,
|
||||
logisticsCompanyCode: query.logisticsCompanyCode,
|
||||
orderNo: query.orderNo,
|
||||
rightsNo: query.rightsNo
|
||||
}
|
||||
});
|
||||
this.fetchLogisticsInfo();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取物流信息
|
||||
async fetchLogisticsInfo() {
|
||||
if (!this.data.queryParams?.logisticsNo) {
|
||||
console.warn('[物流详情] 缺少物流单号，无法获取物流信息');
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ loading: true });
|
||||
|
||||
try {
|
||||
console.log('[物流详情] 开始获取物流信息', this.data.queryParams);
|
||||
const res = await getLogisticsInfo(this.data.queryParams);
|
||||
|
||||
if (res.success && res.data) {
|
||||
console.log('[物流详情] 物流信息获取成功', res.data);
|
||||
this.setData({
|
||||
logisticsData: {
|
||||
logisticsNo: res.data.logisticsNo,
|
||||
company: res.data.company,
|
||||
phoneNumber: res.data.phoneNumber,
|
||||
nodes: res.data.nodes || []
|
||||
},
|
||||
active: 0 // 默认激活第一个节点
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[物流详情] 获取物流信息失败', error);
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: error.message || '获取物流信息失败',
|
||||
icon: 'error-circle',
|
||||
});
|
||||
} finally {
|
||||
this.setData({ loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新物流信息
|
||||
async onRefresh() {
|
||||
if (!this.data.queryParams?.logisticsNo) {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '无法刷新，缺少物流单号',
|
||||
icon: 'error-circle',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ refreshing: true });
|
||||
|
||||
try {
|
||||
console.log('[物流详情] 开始刷新物流信息', this.data.queryParams);
|
||||
const res = await refreshLogisticsInfo(this.data.queryParams);
|
||||
|
||||
if (res.success && res.data) {
|
||||
console.log('[物流详情] 物流信息刷新成功', res.data);
|
||||
this.setData({
|
||||
logisticsData: {
|
||||
logisticsNo: res.data.logisticsNo,
|
||||
company: res.data.company,
|
||||
phoneNumber: res.data.phoneNumber,
|
||||
nodes: res.data.nodes || []
|
||||
},
|
||||
active: 0
|
||||
});
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '刷新成功',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[物流详情] 刷新物流信息失败', error);
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: error.message || '刷新失败',
|
||||
icon: 'error-circle',
|
||||
});
|
||||
} finally {
|
||||
this.setData({ refreshing: false });
|
||||
}
|
||||
},
|
||||
|
||||
onLogisticsNoCopy() {
|
||||
wx.setClipboardData({ data: this.data.logisticsData.logisticsNo });
|
||||
},
|
||||
|
||||
onCall() {
|
||||
const { phoneNumber } = this.data.logisticsData;
|
||||
wx.makePhoneCall({
|
||||
phoneNumber,
|
||||
});
|
||||
},
|
||||
});
|
||||
13
miniprogram/pages/order/delivery-detail/index.json
Normal file
13
miniprogram/pages/order/delivery-detail/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "物流信息",
|
||||
"usingComponents": {
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-steps": "tdesign-miniprogram/steps/steps",
|
||||
"t-step": "tdesign-miniprogram/step-item/step-item",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast"
|
||||
}
|
||||
}
|
||||
107
miniprogram/pages/order/delivery-detail/index.wxml
Normal file
107
miniprogram/pages/order/delivery-detail/index.wxml
Normal file
@@ -0,0 +1,107 @@
|
||||
<wxs module="isUrl">
|
||||
var isUrl = function(item) {
|
||||
return item.indexOf('http') > -1;
|
||||
}
|
||||
module.exports = {
|
||||
isUrl: isUrl,
|
||||
}
|
||||
</wxs>
|
||||
|
||||
<!-- 刷新按钮 -->
|
||||
<view class="refresh-section" wx:if="{{queryParams.logisticsNo}}">
|
||||
<t-button
|
||||
theme="light"
|
||||
size="small"
|
||||
loading="{{refreshing}}"
|
||||
bind:tap="onRefresh"
|
||||
t-class="refresh-btn"
|
||||
>
|
||||
{{refreshing ? '刷新中...' : '刷新物流'}}
|
||||
</t-button>
|
||||
</view>
|
||||
|
||||
<view class="page-section cells" wx:if="{{logisticsData.logisticsNo || logisticsData.company}}">
|
||||
<t-cell-group>
|
||||
<t-cell
|
||||
title="快递单号"
|
||||
t-class-title="wr-cell__title"
|
||||
t-class-note="wr-cell__value"
|
||||
t-class-left="order-group__left"
|
||||
wx:if="{{logisticsData.logisticsNo}}"
|
||||
bordered="{{false}}"
|
||||
>
|
||||
<text slot="note" class="logistics-no">{{logisticsData.logisticsNo}}</text>
|
||||
<view
|
||||
slot="right-icon"
|
||||
class="text-btn"
|
||||
hover-class="text-btn--active"
|
||||
bindtap="onLogisticsNoCopy"
|
||||
>复制
|
||||
</view>
|
||||
</t-cell>
|
||||
<t-cell
|
||||
title="物流公司"
|
||||
t-class-title="wr-cell__title"
|
||||
t-class-note="wr-cell__value"
|
||||
t-class-left="order-group__left"
|
||||
bordered="{{false}}"
|
||||
wx:if="{{logisticsData.company}}"
|
||||
note="{{logisticsData.company + (logisticsData.phoneNumber ? '-' + logisticsData.phoneNumber : '')}}"
|
||||
>
|
||||
<view
|
||||
slot="right-icon"
|
||||
class="text-btn"
|
||||
hover-class="text-btn--active"
|
||||
bindtap="onCall"
|
||||
wx:if="{{logisticsData.phoneNumber}}"
|
||||
>
|
||||
拨打
|
||||
</view>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
</view>
|
||||
<view class="page-section cell-steps">
|
||||
<t-steps
|
||||
class="page-section__steps"
|
||||
t-class="steps"
|
||||
layout="vertical"
|
||||
current="{{active}}"
|
||||
>
|
||||
<t-step
|
||||
class="steps"
|
||||
t-class-title="step-title"
|
||||
wx:for="{{logisticsData.nodes}}"
|
||||
wx:for-item="item"
|
||||
wx:for-index="index"
|
||||
wx:key="index"
|
||||
title="{{item.title}}"
|
||||
icon="slot"
|
||||
>
|
||||
<block wx:if="{{isUrl.isUrl(item.icon)}}">
|
||||
<t-image
|
||||
class="cell-steps__imgWrapper"
|
||||
slot="icon"
|
||||
t-class="cell-steps__img"
|
||||
src="{{item.icon}}"
|
||||
/>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<t-icon
|
||||
slot="icon"
|
||||
size="32rpx"
|
||||
prefix="wr"
|
||||
color="{{index === 0 ? '#ef5433' : '#bbb'}}"
|
||||
name="{{item.icon}}"
|
||||
/>
|
||||
</block>
|
||||
<view slot="content">
|
||||
<view class="step-desc">{{item.desc}}</view>
|
||||
<view class="step-date">{{item.date}}</view>
|
||||
</view>
|
||||
</t-step>
|
||||
</t-steps>
|
||||
</view>
|
||||
|
||||
<!-- Toast 组件 -->
|
||||
<t-toast id="t-toast" />
|
||||
|
||||
110
miniprogram/pages/order/delivery-detail/index.wxss
Normal file
110
miniprogram/pages/order/delivery-detail/index.wxss
Normal file
@@ -0,0 +1,110 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.refresh-section {
|
||||
padding: 24rpx;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
width: 200rpx !important;
|
||||
}
|
||||
.page-section {
|
||||
margin-top: 24rpx;
|
||||
background-color: white;
|
||||
}
|
||||
.page-section .order-group__left {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.cell-steps {
|
||||
padding: 8rpx;
|
||||
}
|
||||
.wr-cell__title {
|
||||
flex: none;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
.wr-cell__value {
|
||||
flex: auto;
|
||||
margin-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333 !important;
|
||||
}
|
||||
.logistics-no {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
color: #333;
|
||||
}
|
||||
.text-btn {
|
||||
margin-left: 20rpx;
|
||||
display: inline;
|
||||
font-size: 24rpx;
|
||||
padding: 0 15rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.text-btn--active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.steps .step-title {
|
||||
font-weight: bold;
|
||||
color: #333 !important;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.steps .step-desc {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.steps .step-date {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.cell-steps__img,
|
||||
.cell-steps__imgWrapper {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.steps
|
||||
.t-step--vertical.t-step--default-anchor
|
||||
.t-steps-item--process
|
||||
.t-steps-item__icon-number {
|
||||
background: #ffece9 !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.steps
|
||||
.t-step--vertical.t-step--default-anchor
|
||||
.t-steps-item--default
|
||||
.t-steps-item__icon-number {
|
||||
color: white !important;
|
||||
background: #f5f5f5 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.steps
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child
|
||||
.t-steps-item__inner::after {
|
||||
top: 48rpx;
|
||||
height: calc(100% - 44rpx - 4rpx);
|
||||
}
|
||||
|
||||
.steps
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child
|
||||
.t-steps-item__inner::after,
|
||||
.steps
|
||||
.t-step--vertical.t-step--default-anchor.t-step--not-last-child
|
||||
.t-steps-item--default
|
||||
.t-steps-item__inner:after {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
.page-section__steps {
|
||||
padding: 24rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user