对接订单列表接口

jd_logistics-app/api/order.js

@@ -50,8 +50,20 @@ export function getOrderList(data) {
  * 查询订单详情
  * 
  */
-export function getOrderDetail({id=''}) {
-  return request.get('mini/order/'+id, {});
+export function getOrderDetail(id) {
+  return request.get(`system/front/order/${id}`);
 }
 
 
+// 取消订单
+export function cancelOrder(data) {
+  return request.put(`system/front/order`,data);
+}
+
+// 查询运单明细
+export function getCostDetails(data) {
+  return request.get(`system//front/costDetails/list`,data);
+}
+
+
+

jd_logistics-app/pages/order/components/OrderFeesInfo.vue

@@ -7,7 +7,7 @@
 		<view class="card-body">
 			<view class="info-row">
 				<text class="info-label">代收货款：</text>
-				<text class="info-value">￥{{orderDetail.shopOrderAmount}}</text>
+				<text class="info-value price">￥{{orderDetail.amount}}</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">保价{{orderDetail.platformShopCommissionPercent}}%：</text>
@@ -126,7 +126,7 @@
 		border-radius: 16rpx;
 		overflow: hidden;
 		padding: 20rpx;
-
+		margin-bottom: 20rpx;
 		.card-header {
 			display: flex;
 			align-items: center;

jd_logistics-app/pages/order/components/OrderInfo.vue

@@ -11,36 +11,36 @@
 			</view> -->
 			<view class="info-row">
 				<text class="info-label">运单单号：</text>
-				<text class="info-value">{{orderDetail.shopOrderId}}</text>
+				<text class="info-value">{{orderDetail.externalWaybillNo}}</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">物品信息：</text>
-				<text class="info-value">{{orderDetail.userInfo.nickName}}</text>
+				<text class="info-value">{{orderDetail.goodsName}}</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">件数：</text>
-				<text class="info-value">{{orderDetail.userInfo.nickName}}</text>
+				<text class="info-value">{{orderDetail.goodsQty}}件</text>
 			</view>
-			<view class="info-row">
+			<view class="info-row" v-if="false">
 				<text class="info-label">付款方式：</text>
 				<!-- <text class="duration">{{ ValidationUtils.encryptPhone(orderDetail.userInfo.userPhone) }}</text> -->
-				<text class="info-value">{{orderDetail.userInfo.userPhone}}</text>
+				<text class="info-value">{{orderDetail.goodsName}}</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">计费重量：</text>
-				<text class="info-value">{{orderDetail.shopUserTime}}</text>
+				<text class="info-value">{{orderDetail.goodsWeight}}kg</text>
 			</view>
-			<view class="info-row">
+			<view class="info-row" v-if="false">
 				<text class="info-label">实际重量：</text>
-				<text class="info-value">{{orderDetail.orderCreateTime}}</text>
+				<text class="info-value">{{orderDetail.goodsWeight}}kg</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">实际体积：</text>
-				<text class="info-value price">¥{{orderDetail.shopOrderAmount}}</text>
+				<text class="info-value">{{orderDetail.goodsVolume}}m³</text>
 			</view>
 			<view class="info-row">
 				<text class="info-label">下单时间：</text>
-				<text class="info-value price">¥{{orderDetail.shopOrderAmount}}</text>
+				<text class="info-value">{{orderDetail.createTime}}</text>
 			</view>
 		</view>
 	</view>

jd_logistics-app/pages/order/components/OrderItem.vue

@@ -1,31 +1,33 @@
 <template>
 	<view class="card">
 		<view class="card-header">
-			<text class="waybill-number">运单号：JDVA401410370033</text>
+			<text class="waybill-number">运单号：{{ orderDetail.externalWaybillNo }}</text>
 			<image src="/static/img/copy.png" @click="copyWaybillNumber"></image>
 		</view>
 
 		<view class="content">
 			<!-- 左侧寄件人信息 -->
 			<view class="sender-info">
-				<view class="city-tag">洛阳市</view>
-				<view class="name">下海龙</view>
+				<view class="city-tag">{{ orderDetail.senderCity }}</view>
+				<view class="name">{{ orderDetail.senderName }}</view>
 			</view>
 
 			<view class="translate">
-				<view class="status">待取件</view>
-				<image src="/static/img/translte-1.png"></image>
+				<view class="status">{{ getStatusText(orderDetail.orderStatus) }}</view>
+				
+				<image v-if="orderDetail.orderStatus == 5" src="/static/img/translte-1.png"></image>
+				<image v-else src="/static/img/translte-2.png"></image>
 			</view>
 
 			<!-- 右侧收件人信息 -->
 			<view class="receiver-info">
-				<view class="city-tag">北京市</view>
-				<view class="name">周欣源</view>
+				<view class="city-tag">{{ orderDetail.receiverCity }}</view>
+				<view class="name">{{ orderDetail.receiverName }}</view>
 			</view>
 		</view>
 
 		<!-- 状态信息 -->
-		<view class="section-continer">
+		<view class="section-continer" v-if="false">
 			<view class="timeline">
 				<view class="dot">
 					<view class="timeline-dot dot-active"></view>
@@ -43,27 +45,32 @@
 
 		<!-- 操作按钮 -->
 		<view class="action-buttons">
-			<view class="action-btn" @click="showExpressTrack">
+			
+			<view v-if="orderDetail.orderStatus > 1 && orderDetail.orderStatus != 6" class="action-btn" @click="showExpressTrack">
 				<text class="btn-text">物流轨迹</text>
 			</view>
 			<view class="action-btn" @click="showOrderInfo">
 				<text class="btn-text">运单详情</text>
 			</view>
-			<view class="action-btn btn-cancel">
+			<view v-if="orderDetail.orderStatus == 1" @click="cancel" class="action-btn btn-cancel">
 				<text class="btn-text">运单取消</text>
 			</view>
 		</view>
-		
+
 		<!-- 物流轨迹弹框 -->
-		<TrackPopup 
-			v-model:showPopup="showTrackPopup" 
-			:expressData="expressData"
-		/>
+		<TrackPopup v-model:showPopup="showTrackPopup" :expressData="expressData" />
 	</view>
 </template>
 
 <script setup>
-	import { ref, defineProps, defineEmits } from 'vue'
+	import {
+		ref,
+		defineProps,
+		defineEmits
+	} from 'vue'
+	import {
+		cancelOrder
+	} from '@/api/order.js'
 	import TrackPopup from './TrackPopup.vue'
 
 	const emit = defineEmits(['success'])
@@ -74,30 +81,10 @@
 		},
 		orderDetail: {
 			type: Object,
-			default: () => ({
-				goodsMainImage: null,
-				goodsName: null,
-				id: undefined,
-				orderCreateTime: '',
-				shopConfirmStatus: "",
-				shopEvaluateStatus: '',
-				shopDispatchVerifyStatus: "",
-				shopGoodsId: undefined,
-				shopOrderAmount: undefined,
-				shopOrderId: "",
-				shopOrderNum: 1,
-				shopOrderStatus: "1",
-				shopPrice: 102,
-				shopRefundReviewStatus: null,
-				shopServiceStatus: null,
-				shopUserTime: null,
-				userId: "1989219383070896130",
-				userNickName: "bonjour",
-				userPhone: "17639845061"
-			})
+			default: () => ({})
 		}
 	})
-	
+
 	// 控制弹框显示
 	const showTrackPopup = ref(false)
 	const expressData = ref({
@@ -105,24 +92,24 @@
 		number: 'JDVA401410370033',
 		status: '待取件'
 	})
-	
+
 	// 显示物流轨迹弹框
 	const showExpressTrack = () => {
 		// 这里可以调用API获取物流信息
 		// 暂时使用模拟数据
 		showTrackPopup.value = true
 	}
-	
+
 	const showOrderInfo = () => {
 		uni.navigateTo({
-			url:'/pages/order/order_detail'
+			url: `/pages/order/order_detail?waybillId=${props.orderDetail.waybillId}`
 		})
 	}
-	
+
 	// 复制运单号
 	const copyWaybillNumber = () => {
 		uni.setClipboardData({
-			data: 'JDVA401410370033',
+			data: props.orderDetail.externalWaybillNo,
 			success: () => {
 				uni.showToast({
 					title: '运单号已复制',
@@ -131,6 +118,53 @@
 			}
 		})
 	}
+	// 取消订单
+	const cancel = async () => {
+		let res = await cancelOrder({
+			waybillId: props.orderDetail.waybillId,
+			cancelReason: "取消",
+			externalWaybillNo: props.orderDetail.externalWaybillNo,
+			orderType: props.orderDetail.orderType,
+			productCode: props.orderDetail.productCode,
+
+			waybillNo: props.orderDetail.waybillNo,
+		})
+		if (res.code == 200) {
+			uni.showToast({
+				title: res.msg,
+				icon: 'success'
+			})
+			emit('success')
+		}
+	}
+
+	// 获取订单状态
+	const getStatusText = (orderStatus) => {
+		let txt = ''
+		switch (orderStatus) {
+			case 1:
+				txt = '待揽件'
+				break;
+			case 2:
+				txt = '已揽件'
+				break;
+			case 3:
+				txt = '运输中'
+				break;
+			case 4:
+				txt = '派送中'
+				break;
+			case 5:
+				txt = '已签收'
+				break;
+			case 6:
+				txt = '已取消'
+				break;
+			default:
+				break;
+		}
+		return txt;
+	}
 </script>
 
 <style scoped lang="less">
@@ -175,7 +209,8 @@
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				min-width: 0; /* 防止flex子元素溢出 */
+				min-width: 0;
+				/* 防止flex子元素溢出 */
 
 				.city-tag {
 					max-width: 250rpx;
@@ -238,7 +273,7 @@
 			border-radius: 16rpx;
 			padding: 20rpx;
 			margin-bottom: 20rpx;
-			
+
 			.timeline {
 				display: flex;
 				flex-direction: column;
@@ -246,7 +281,7 @@
 				width: 34rpx;
 				margin-right: 20rpx;
 				flex-shrink: 0;
-				
+
 				.dot {
 					width: 34rpx;
 					height: 34rpx;
@@ -257,33 +292,33 @@
 					align-items: center;
 					flex-shrink: 0;
 				}
-			
+
 				.timeline-dot {
 					width: 18rpx;
 					height: 18rpx;
 					border-radius: 50%;
-					
+
 					&.dot-active {
 						background-color: #1B64F0;
 					}
 				}
-			
+
 				.timeline-line {
 					flex: 1;
 					width: 4rpx;
 					box-sizing: border-box;
 					margin-top: 10rpx;
-					
+
 					&.line-active {
 						border-left: 4rpx dashed #1B64F0;
 					}
 				}
 			}
-			
+
 			.status-section {
 				flex: 1;
 				min-width: 0;
-			
+
 				.status-badge {
 					margin-bottom: 8rpx;
 					height: 48rpx;
@@ -295,7 +330,7 @@
 					text-overflow: ellipsis;
 					white-space: nowrap;
 				}
-			
+
 				.status-detail {
 					font-weight: 400;
 					font-size: 28rpx;
@@ -306,7 +341,7 @@
 					text-overflow: ellipsis;
 					white-space: nowrap;
 				}
-			
+
 				.status-time {
 					margin-top: 8rpx;
 					height: 40rpx;
@@ -320,7 +355,7 @@
 				}
 			}
 		}
-		
+
 		.action-buttons {
 			margin-top: 20rpx;
 			display: flex;
@@ -335,7 +370,7 @@
 				border-radius: 80rpx;
 				border: 2rpx solid #F1F3F8;
 				margin-left: 20rpx;
-		
+
 				&:first-child {
 					margin-left: 0;
 				}
@@ -359,7 +394,7 @@
 						color: #ff6b6b;
 					}
 				}
-				
+
 				/* 添加点击效果 */
 				&:active {
 					opacity: 0.7;

jd_logistics-app/pages/order/index.vue

@@ -17,9 +17,9 @@
 		<!-- </view> -->
 
 		<!-- 订单列表 -->
-		<scroll-view class="order-list" scroll-y="true" @scrolltolower="loadMore">
-			<view v-if="ordersList.length > 0" v-for="order in ordersList" :key="order.id">
-				<OrderItem :order-detail="order" @success="getOrderList(false)"></OrderItem>
+		<view class="order-list" @scrolltolower="loadMore">
+			<view v-if="ordersList.length" v-for="order in ordersList" :key="order.id">
+				<OrderItem :order-detail="order" @success="getOrderList()"></OrderItem>
 			</view>
 			<view class="empty-state" v-else>
 				<u-icon class="empty-icon" name="list" size="60" color="#ccc"></u-icon>
@@ -35,7 +35,7 @@
 				<text>加载中...</text>
 			</view>
 
-		</scroll-view>
+		</view>
 
 
 	</view>
@@ -48,7 +48,8 @@
 	} from 'vue'
 	import {
 		onShow,
-		onLoad
+		onLoad,
+		onReachBottom
 	} from '@dcloudio/uni-app' // 导入 UniApp 的生命周期
 	import OrderItem from './components/OrderItem.vue'
 	import { getOrderListApi } from '../../api/order'
@@ -114,31 +115,8 @@
 	})
 
 	onShow(() => {
-		
-		uni.setStorageSync('senderAddress',{
-			id: '20',
-			name: '姓名',
-			phone: '13000000000',
-			address: '编辑一下地址',
-			provinceName: '天津市',
-			cityName: '天津市',
-			countyName: '和平区',
-			isDefault: false
-		})
-		uni.setStorageSync('receiverAddress',{
-			id: '30',
-			name: '姓名',
-			phone: '13000000000',
-			address: '编辑一下地址',
-			provinceName: '天津市',
-			cityName: '天津市',
-			countyName: '和平区',
-			isDefault: false
-		})
-		
-		
 		// 可以在这里初始化数据
-		getOrderList(false)
+		getOrderList()
 	})
 
 	// Tab切换事件
@@ -146,26 +124,13 @@
 		currentTab.value = index
 		getOrderList(false)
 	}
-	const loadMore = () => {
-		pageNum.value++
-		getOrderList(true)
-	}
 
 	const handleSearch = () => {
-		getOrderList(false)
+		getOrderList()
 	}
 
 	// 获取收益明细列表
-	const getOrderList = async (isLoadMore = false) => {
-		
-		if (loadState.value) return
-
-		if (!isLoadMore) {
-			pageNum.value = 1
-			loadFinished.value = false
-			ordersList.value = []
-		}
-		loadState.value = true
+	const getOrderList = async () => {
 		//orderType: 订单类型（1-全部订单, 2-待确认,  4-已完成, 5-申请退款）
 		try {
 			uni.showLoading({
@@ -175,35 +140,33 @@
 			const params = {
 				pageNum: pageNum.value,
 				pageSize: pageSize.value,
-				orderType: orderType,
+				// orderType: orderType,
 				keyword: searchKeyword.value
 			}
 			var res = await getOrderListApi(params)
 			if (res.code === 200) {
 				const list = res.rows || []
-				const total = res.total || 0
-
-
-				if (isLoadMore) {
-					ordersList.value = [...ordersList.value, ...list]
-				} else {
-					ordersList.value = list
-				}
-				recordTotal.value = total
-				// 判断是否还有更多数据
-				if (list.length < pageSize.value) {
-					loadFinished.value = true
-				}
+
+				ordersList.value = pageNum.value == 1 ? list : [...ordersList.value, ...list]
+				
+				recordTotal.value = Math.ceil(res.total / pageSize.value) || 0
+				
 			}
 		} catch (error) {
 
 		} finally {
-			loadState.value = false
+			
 			uni.hideLoading()
 		}
 	}
 
-
+	// 触底加载更多
+	onReachBottom(() => {
+		if (pageNum.value < recordTotal.value) {
+			pageNum.value++;
+			getOrderList()
+		}
+	})
 	// 查看订单详情
 	const viewOrderDetail = (order) => {
 		uni.showToast({
@@ -214,14 +177,6 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-		background-color: #F5F7FA;
-	}
-
-
 	.search-section {
 		background-color: #fff;
 		padding: 16rpx;
@@ -278,11 +233,7 @@
 	}
 
 	.order-list {
-		flex: 1;
 		padding: 20rpx;
-		min-height: 500rpx;
-		background-color: #F5F7FA;
-		box-sizing: border-box;
 	}
 
 	.order-card {

jd_logistics-app/pages/order/order_detail.vue

@@ -2,8 +2,6 @@
 	<view class="verification-container">
 		<!-- 内容区域 -->
 		<view class="content">
-
-
 			<!-- 用户信息卡片 -->
 			<view class="info-card1">
 				<view class="address-item">
@@ -12,7 +10,7 @@
 						<!-- <view class="status-text">{{getStatusText}}</view> -->
 					</view>
 					<view class="user-info">
-						<AddressInfo :address="addressSend"/>
+						<AddressInfo :address="addressSend" />
 					</view>
 				</view>
 				<view class="address-item">
@@ -21,7 +19,7 @@
 						<!-- <view class="status-text">{{getStatusText}}</view> -->
 					</view>
 					<view class="user-info">
-						<AddressInfo :address="addressReceive"/>
+						<AddressInfo :address="addressReceive" />
 					</view>
 				</view>
 			</view>
@@ -32,8 +30,10 @@
 			<OrderInfo :order-detail="orderInfo"></OrderInfo>
 
 			<view class="action-title">费用信息</view>
-
-			<OrderFeesInfo :order-detail="orderInfo"/>
+			<view class="" v-for="(item,index) in details.feeList" :key="index">
+				<OrderFeesInfo :order-detail="item" />
+			</view>
+			
 
 		</view>
 	</view>
@@ -51,7 +51,10 @@
 	import OrderInfo from './components/OrderInfo.vue'
 	import OrderFeesInfo from './components/OrderFeesInfo.vue'
 	import AddressInfo from '@/components/AddressInfo.vue'
-
+	import {
+		getOrderDetail,
+		getCostDetails
+	} from '@/api/order.js'
 
 
 	import {
@@ -60,43 +63,12 @@
 	const appStore = useAppStore()
 
 	const shopOrderId = ref('')
-	
-	const addressSend = ref({
-			id: 1,
-			name: '张三',
-			phone: '132****5678',
-			address: '广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路97号',
-			isDefault: true
-		})
-	const addressReceive = ref({
-			id: 1,
-			name: '张三',
-			phone: '132****5678',
-			address: '广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路广东省深圳市罗湖区贝丽北路97号',
-			isDefault: true
-		})
 
-	const orderInfo = ref({
-		createTime: null,
-		goodsInfo: null,
-		goodsMainImage: null,
-		goodsName: "",
-		serviceAvatar: null,
-		serviceBelongShop: "",
-		serviceCommission: "",
-		serviceName: "",
-		servicePhone: "",
-		shopOrderAmount: "",
-		shopOrderId: "",
-		shopOrderNum: 1,
-		userName: "",
-		userPhone: "",
-		dispatchInfo: {},
-		goodsInfo: {},
-		grabInfo: {},
-		userInfo: {}
-	})
+	const addressSend = ref({})
+	const addressReceive = ref({})
 
+	const orderInfo = ref({})
+	const details = ref({})
 	const showOrderCofirmBtn = ref(false)
 	const showOrderDispatchBtn = ref(false)
 	const showOrderRefundBtn = ref(false)
@@ -104,23 +76,42 @@
 
 
 	onLoad((option) => {
-		shopOrderId.value = option.id
-	})
-
-	onShow(() => {
-		// getOrderInfo()
+		shopOrderId.value = option.waybillId;
+		getOrderInfo()
 	})
 
-	const getOrderInfo = () => {
-		const param = {
-			shopOrderId: shopOrderId.value
-		}
-		getOrderInfoApi(param).then(res => {
+	const getOrderInfo = async () => {
+		getOrderDetail(shopOrderId.value).then(res => {
 			if (res.code == 200) {
 				console.log('getOrderInfoApi=========', res)
-				orderInfo.value = res.data
+				orderInfo.value = res.data;
+				addressSend.value = {
+					contactName: res.data.senderName,
+					contactPhone: res.data.senderPhone,
+					provinceName: res.data.senderProvince,
+					cityName: res.data.senderCity,
+					countyName: res.data.senderCounty,
+					detailedAddress: res.data.senderAddress
+				}
+				addressReceive.value = {
+					contactName: res.data.receiverName,
+					contactPhone: res.data.receiverPhone,
+					provinceName: res.data.receiverProvince,
+					cityName: res.data.receiverCity,
+					countyName: res.data.receiverCounty,
+					detailedAddress: res.data.receiverAddress
+				}
 			}
 		})
+
+
+		let result = await getCostDetails({
+			waybillId: shopOrderId.value
+		})
+		if (result.code == 200) {
+			details.value = result.data;
+		}
+		console.log(result, '222')
 	}
 
 	// 返回按钮点击事件
@@ -455,14 +446,16 @@
 			border-radius: 32rpx;
 			padding: 20rpx;
 			margin-bottom: 16rpx;
+
 			// F1F3F8
-			.address-item{
+			.address-item {
 				display: flex;
-												
+
 				&:first-child {
-				    border-bottom: 2rpx solid #F1F3F8;
+					border-bottom: 2rpx solid #F1F3F8;
 					padding-bottom: 20rpx;
 				}
+
 				&:last-child {
 					padding-top: 20rpx;
 				}