对接接单大厅

api/amount/index.js

@@ -28,7 +28,7 @@ export const cashIn = (data) => {
 // 小程序-提现
 export const cashOut = (params) => {
   return request({
-    url: '​/applet​/amount​/cashOut',
+    url: '/app',
     headers: {
       isToken: true
     },

api/receivingHall/index.js

@@ -1,6 +1,30 @@
 // 订单模块 - 接单大厅流程
 import request from '@/utils/request'
 
+// 接单大厅 - 拒绝、无法接单
+export function endByOrderId(data) {
+	return request({
+		headers: {
+			"isToken": true
+		},
+		url: "/applet/order/endByOrderId",
+		method: 'post',
+		data
+	})
+}
+
+// 接单大厅 - 根据订单标识查询订单详情的接口
+export function getByOrderId(params) {
+	return request({
+		headers: {
+			"isToken": true
+		},
+		url: "/applet/order/getByOrderId",
+		method: 'get',
+		params
+	})
+}
+
 // 小程序-接单大厅流程
 export function orderList(params) {
 	return request({
@@ -11,4 +35,16 @@ export function orderList(params) {
 		method: 'get',
 		params
 	})
+}
+
+// 接单大厅 - 立即接单
+export function startByOrderId(data) {
+	return request({
+		headers: {
+			"isToken": true
+		},
+		url: "/applet/order/startByOrderId",
+		method: 'post',
+		data
+	})
 }

components/Modal/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <up-popup :show="show" mode="center" @close="close" @open="open" :zIndex="999999" :round="10"
+              :safeAreaInsetBottom="false" :customStyle="{padding:'40rpx 20rpx',width:'80%'}">
+        <view>
+            <view>
+                <view class="content">
+                    <slot></slot>
+                </view>
+                <view class="btn">
+                    <view class="cancle" @click="handleCancel">
+                        取消
+                    </view>
+                    <view class="ok" @click="handleConfirm">
+                        确定
+                    </view>
+                </view>
+            </view>
+        </view>
+    </up-popup>
+</template>
+
+<script setup>
+import { ref, defineEmits } from "vue";
+
+const show = ref(false);
+const emits = defineEmits(['confirm', 'cancel']);
+
+const close = () => {
+    show.value = false;
+};
+
+const open = () => {
+    show.value = true;
+};
+
+const handleConfirm = () => {
+    emits('confirm');
+    close();
+};
+
+const handleCancel = () => {
+    emits('cancel');
+    close();
+};
+
+defineExpose({
+    close,
+    open
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+	padding: 20rpx 0rpx;
+}
+
+.btn {
+    display: flex;
+    justify-content: space-between;
+}
+
+.cancle,
+.ok {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48%;
+    height: 80rpx;
+    background: #FFBF60;
+    border-radius: 40rpx;
+    color: white;
+}
+
+.cancle {
+    background: #FFF4E6;
+    color: #FFC269;
+}
+</style>    

otherPages/orderTakingManage/detail/index.vue

@@ -52,7 +52,7 @@
 					服务地址
 				</view>
 				<view class="">
-					重庆市南岸区长嘉汇18栋9-2
+					{{ orderDetail.address }}
 				</view>
 			</view>
 		</view>
@@ -61,28 +61,26 @@
 				<view class="form-title">
 					服务内容和酬劳
 				</view>
-				<view class="text2 flex">
+				<view @click="petInfo" class="text2 flex">
 					查看宠物信息
 					<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
 				</view>
 			</view>
 			<view class="line1">
 			</view>
-			<view class="pet_information box-size">
+			<view v-for="pet in orderDetail.appletPetList" :key="pet.id" class="pet_information box-size">
 				<view class="flex pet_item box-size">
 					<view class="img" :style="{borderRadius:'100rpx'}">
-						<image
-							src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
-							mode=""></image>
+						<image :src="pet.headImage" mode=""></image>
 					</view>
 					<view class="">
 						<view class="flex name">
 							<view class="name_text">
-								小咪
+								{{ pet.nickName }}
 							</view>
 							<image src="" mode=""></image>
 						</view>
-						银渐层短毛猫（小型猫）
+						{{ pet.type }}
 					</view>
 				</view>
 				<view class="pet- level">
@@ -103,7 +101,7 @@
 					合计
 				</view>
 				<view class="money_text">
-					¥&nbsp;455
+					¥&nbsp;{{ orderDetail.price }}
 				</view>
 			</view>
 		</view>
@@ -128,7 +126,7 @@
 					下单时间：
 				</view>
 				<view>
-					2024-12-45 12:32:41
+					{{ orderDetail.createTime }}
 				</view>
 			</view>
 			<view class="line1">
@@ -138,72 +136,200 @@
 					支付时间：
 				</view>
 				<view>
-					2024-12-45 12:32:41
+					{{ orderDetail.payTime }}
 				</view>
 			</view>
 		</view>
 	</view>
 	<view class="bottom">
-		<view class="bottom_button level" :style="{ borderRadius: '41rpx' }">
+		<view @click="rushToBuyAnOrder" class="bottom_button level" :style="{ borderRadius: '41rpx' }">
 			立即抢单
 		</view>
 	</view>
-	<!-- <view>
-			<u-popup :show="show" mode="center" @close="close" @open="open">
-				<view class="success">
-					<view class="pop_top">
+
+	<up-popup :show="showConfirmOrder" mode="bottom" @close="close" @open="open" :round="10" :closeable="true"
+		:safeAreaInsetBottom="false"
+		:customStyle="{padding:'60rpx 20rpx 40rpx 20rpx;position:relative;height:auto;background:#F6F5F8;'}">
+		<view>
+			<view style="position:absolute;top: 20rpx;left:0;text-align: center;width: 100%;">
+				订单信息
+			</view>
+			<view style="text-align: center;">
+				请全部确认后接单
+			</view>
+			<view class="order-confirmation">
+				<view class="confirmation-item">
+					<view class="confirmation-base">
+						<view class="title">
+							服务日期
+						</view>
+						<view class="desc">
+							共两天:12-09,01-09
+						</view>
 					</view>
-					<u--text text="请立即添加服务顾问，并提供订单编码" size="12rpx" color="#707070" align="center"></u--text>
-					<view class="pop_image">
-						<u--image src="https://xxx.com/album/1.jpg" shape="square" width="100rpx"
-							height="100rpx"></u--image>
+					<view class="ok">
+						<view class="btn">
+							点击确定
+						</view>
 					</view>
-					<view class="code" :style="{ borderRadius: '6rpx' }">
-					
+				</view>
+
+				<view class="confirmation-item">
+					<view class="confirmation-base">
+						<view class="title">
+							服务地址
+						</view>
+						<view class="desc">
+							xxx省xx市
+						</view>
+					</view>
+					<view class="ok">
+						<view class="btn">
+							点击确定
+						</view>
 					</view>
-					<view class="copy" :style="{ borderRadius: '40rpx' }">
-						<u--text text="复制订单编号" size="12rpx" color="#FFFFFF" align="center"
-							line-height="50rpx"></u--text>
+				</view>
+
+				<view class="confirmation-item">
+					<view class="confirmation-base">
+						<view class="title">
+							服务宠物
+						</view>
+						<view class="desc">
+							<view class="">
+								中华田园犬
+							</view>
+							<view class="">
+								中华田园犬2
+							</view>
+						</view>
 					</view>
-					<view class="cancel" :style="{ borderRadius: '50rpx' }">
-						<u-icon name="close-circle" color="#707070" size="40"></u-icon>
+					<view class="ok">
+						<view class="btn">
+							点击确定
+						</view>
 					</view>
 				</view>
-			</u-popup>
-			<u-button @click="show = true">打开</u-button>
-		</view> -->
+			</view>
+			<view class="handbook">
+				接单即接受
+				<text class="text">《伴宠师手册》</text>
+			</view>
+			<up-button @click="conform" color="#FFBF60" text="确定" shape="circle"></up-button>
+		</view>
+	</up-popup>
+
+	<!-- 抢单成功 -->
+	<up-popup :show="showOrderSuccess" mode="center" @close="orderSuccessClose" @open="orderSuccessOpen" :zIndex="999"
+		:round="10" :safeAreaInsetBottom="false" :customStyle="{padding:'40rpx 20rpx',width:'80%'}">
+		<view>
+			<view class="success-desc">
+				请立即添加服务顾问，并提供订单编码
+			</view>
+			<view class="qr-code">
+				<image class="code-img" src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif"
+					mode="aspectFill"></image>
+			</view>
+			<view class="input">
+				<up-input placeholder="" border="none" v-model="value" disabled
+					:customStyle="{height:'60rpx','text-indent': '20rem'}"></up-input>
+			</view>
+			<up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
+		</view>
+	</up-popup>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				show: false
-			}
-		},
-		methods: {
-			open() {
-				// console.log('open');
-			},
-			close() {
-				this.show = false
-				// console.log('close');
-			}
+<script setup>
+	import {
+		ref,
+		computed
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getByOrderId
+	} from "@/api/receivingHall/index.js"
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
+	import order from '../../../api/order/order'
+	import {
+		startByOrderId
+	} from "@/api/receivingHall/index.js"
+	import {
+		useStore
+	} from "vuex"
+
+	onLoad((options) => {
+		orderId.value = options.id || null;
+	});
+
+	onShow(() => {
+		getDetail();
+	})
+
+	const store = useStore();
+	const orderId = ref(null);
+	const orderDetail = ref({});
+	const showConfirmOrder = ref(false);
+	const showOrderSuccess = ref(false);
+	const value = ref("45619491656")
+	const userInfo = computed(() => {
+		return store.getters.userInfo
+	})
+
+	// 抢单
+	const rushToBuyAnOrder = () => {
+		open()
+	}
+
+	// 查看宠物信息
+	const petInfo = () => {
+		uni.navigateTo({
+			url: "/otherPages/orderTakingManage/pet/index"
+		})
+	}
+
+	const open = () => {
+		showConfirmOrder.value = true;
+	}
+
+	const close = () => {
+		showConfirmOrder.value = false;
+	}
+
+	const orderSuccessClose = () => {
+		showOrderSuccess.value = false;
+	};
+
+	const orderSuccessOpen = () => {
+		showOrderSuccess.value = true;
+	};
+
+	const conform = async () => {
+		close();
+		let response = await startByOrderId({
+			id: orderId.value,
+			userId: userInfo.value.userId
+		})
+		if (response.code == 200 && response.data) {
+			uni.showToast({
+				title: '接单成功~',
+				icon: "none"
+			});
+			orderSuccessOpen();
 		}
 	}
 
-	// export default {
-	// 	data() {
-	// 		return {
-	// 			value: ''
-	// 		}
-	// 	},
-	// 	methods: {
-	// 		change(e) {
-	// 			console.log('change', e);
-	// 		}
-	// 	}
-	// }
+	const getDetail = async () => {
+		let response = await getByOrderId({
+			id: orderId.value
+		});
+		if (response.code == 200 && response.data) {
+			orderDetail.value = response.data;
+		}
+	}
 </script>
 
 <style scoped lang="scss">
@@ -224,4 +350,76 @@
 			// background-color: red;
 		}
 	}
+
+	.order-confirmation {
+		.confirmation-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: white;
+			padding: 20rpx;
+			border-radius: 20rpx;
+			overflow: hidden;
+			margin: 20rpx 0rpx;
+
+			.confirmation-base {
+				width: 75%;
+
+				.title {
+					font-size: 34rpx;
+				}
+
+				.desc {
+					color: #999999;
+				}
+			}
+
+			.ok {
+				display: flex;
+				justify-content: center;
+				width: 25%;
+
+				.btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: #FFBF60;
+					color: white;
+					width: 100%;
+					height: 60rpx;
+					border-radius: 30rpx;
+				}
+			}
+		}
+	}
+
+	.handbook {
+		color: #999999;
+		margin: 10rpx 0rpx;
+
+		.text {
+			color: #FFBF60;
+		}
+	}
+
+	.success-desc {
+		text-align: center;
+		color: #787878;
+		font-size: 32rpx;
+	}
+
+	.qr-code {
+		display: flex;
+		justify-content: center;
+		margin: 40rpx 0rpx;
+
+		.code-img {
+			width: 160rpx;
+			height: 160rpx;
+		}
+	}
+
+	.input {
+		margin-bottom: 40rpx;
+	}
 </style>

otherPages/orderTakingManage/pet/index.vue

@@ -1,130 +1,233 @@
 <template>
-	<!-- <div>宠物信息</div> -->
-	<view class="box box-size">
-		<view class="box-item box-size" 
-		@click="toDetail"
-		:style="{borderRadius:'16rpx'}">
-			<view class="level flex">
-				<view class="img" :style="{borderRadius:'100rpx'}">
-					<image src="" mode=""></image>
-				</view>
-				<view class="top">
-					<view class="name level">
+	<view class="personal-pet">
+		<view v-if="petLists.length > 0" class="personal-pet-list">
+			<view v-for="(item, index) in petLists" :key="index">
+				<view
+					:class="['personal-pet-list-item', item.sex === 0 ? '.personal-pet-list-item_backgroud_m' : '.personal-pet-list-item_backgroud_f']">
+					<view class="personal-pet-info">
 						<view>
-							小咪
+							<u-avatar :src="item.headImage? item.headImage : defaultPhoto" size="60" shape="circle"></u-avatar>
 						</view>
-						<view class="img_" :style="{borderRadius:'20rpx'}">
-							<image src="" mode=""></image>
+						<view class="personal-pet-info-1">
+							<view class="personal-pet-info-2">
+								<view class="personal-pet-name">
+									{{ item.nickName }}
+								</view>
+								<view class="personal-pet-sex">
+									<img :src="item.sex === 0 ? '../../static/images/details/boy.svg' : '../../static/images/details/girl.svg'"
+										alt="sex" style="width: 16px;height: 16px;" />
+								</view>
+							</view>
+							<view class="personal-pet-info-3" style="width: 100%;">
+								<view class="ellipsis" style="max-width: 25%;">
+									{{ item.type || '未知' }}
+								</view>
+								<view class="personal-pet-info-age" style="max-width: 90px;">
+									{{ item.type || '未知' }}
+								</view>
+								<view class="ellipsis" style="max-width: 25%;">
+									{{ item.weight + 'kg' }}
+								</view>
+							</view>
 						</view>
 					</view>
-					<view>
-						银渐层短毛猫 | 1岁 | 体重2kg
+					<view class="personal-pet-info-disposition ellipsis">
+						性格： {{ item.personality }}
+					</view>
+					<view class="view-pets">
+						<view @click="toDetail" class="btn">
+							查看详细信息
+						</view>
 					</view>
 				</view>
 			</view>
-			<view class="character box-size" :style="{borderRadius:'5rpx'}">
-				性格：活泼开朗，对人友好
-			</view>
-			<view class="buttom" :style="{borderRadius:'27rpx'}">
-				<!-- <button>查看详细信息</button> -->
-				查看详细信息
-			</view>
+		</view>
+		<view v-else class="personal-pet-none">
+			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"
+				style="width: 149px;height: 124px;" mode="widthFix" />
+			<view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue';
+	import {
+		petList
+	} from "@/api/pet/index.js";
+	import {
+		onShow,
+		onPullDownRefresh
+	} from "@dcloudio/uni-app"
+
+	// 定义响应式数据
+	const defaultPhoto = ref('https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png');
+	const petLists = ref([]);
+
+	// 获取宠物列表
+	const getPetListData = async () => {
+		petLists.value = [];
+		try {
+			const res = await petList();
+			if (res && res.data) {
+				petLists.value = res.data;
+			}
+		} catch (error) {
+			console.error('获取宠物列表失败', error);
+		}
+	};
+	
+	// 生命周期钩子
+	onMounted(() => {
+		getPetListData();
+	});
+
+	onShow(() => {
+		getPetListData();
+	});
+
+	onPullDownRefresh(() => {
+		getPetListData();
+	});
 	
-	function toDetail() {
+	const toDetail = () => {
 		uni.navigateTo({
 			url: "/otherPages/orderTakingManage/pet/detail"
 		})
 	}
-	
 </script>
 
 <style lang="scss">
-	.box {
-		width: 100vw;
-		height: 100vh;
-		padding: 1% 3%;
-
-		.box-item {
-			width: 710rpx;
-			height: 359rpx;
-			background-image: linear-gradient(to bottom, #FFF6F7, #FFFFFF);
-			padding: 3% 2%;
-			position: relative;
-
-			.img {
-				width: 142rpx;
-				height: 142rpx;
-				background-color: red;
-				margin: 0 20rpx 20rpx 0;
-			}
+	.personal-pet {
+		position: relative;
+		height: 100%;
+		padding-bottom: 90px;
 
-			.top {
-				font-size: 28rpx;
-				color: #999999;
-			}
+		.personal-pet-list {
+			.personal-pet-list-add {
+				width: 100%;
+				height: 44px;
+				background-color: #FFFFFF;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 15px;
 
-			.name {
-				font-size: 30rpx;
-				color: #000000;
+				.personal-pet-list-add-btn {
+					font-size: 14px;
+					color: #AAA;
+					display: flex;
+					align-items: center;
+				}
 			}
 
-			.img_ {
-				width: 35rpx;
-				height: 35rpx;
-				background-color: red;
-				margin-left: 10rpx;
+			.personal-pet-list-item_backgroud_m {
+				background: linear-gradient(179deg, #EDF5FE 0.75%, #FFF 34.11%);
 			}
 
-			.character {
-				width: 678rpx;
-				height: 65rpx;
-				background-color: #F9F9F9;
-				// background-color: green;
-				color: #999999;
-				font-size: 28rpx;
-				line-height: 65rpx;
-				padding: 0 10rpx;
+			.personal-pet-list-item_backgroud_f {
+				background: linear-gradient(179deg, #FFF4F6 0.75%, #FFF 34.11%);
 			}
 
-			.buttom {
-				width: 188rpx;
-				height: 54rpx;
-				border: 2rpx solid #FFBF60;
-				color: #FFBF60;
-				font-size: 22rpx;
-				line-height: 54rpx;
-				justify-content: center;
-				display: grid;
-				position: absolute;
-				bottom: 25rpx;
-				right: 25rpx;
-
-
-				// .buttom buttom {
-				// 	color: #FFBF60;
-				// 	font-size: 22rpx;
-				// 	line-height: 54rpx;
-				// display: grid;
-				// 	justify-content: center;
-				// }
+			.personal-pet-list-item {
+				margin: 10px 10px 0 10px;
+				border-radius: 5px;
+				padding: 20px 10px 10px;
+
+				.personal-pet-info {
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+
+					.personal-pet-info-1 {
+						margin-left: 10px;
+
+						.personal-pet-info-2 {
+							display: flex;
+							flex-wrap: wrap;
+
+							.personal-pet-name {
+								color: #333;
+								font-size: 16px;
+								margin-right: 10px;
+							}
+						}
+
+						.personal-pet-info-3 {
+							display: flex;
+							align-items: baseline;
+							font-size: 14px;
+							margin-top: 5px;
+							color: #7D8196;
+
+							.personal-pet-info-age {
+								padding: 0 10px;
+								margin: 0 10px;
+								border-left: solid 2px #7D8196;
+								border-right: solid 2px #7D8196;
+							}
+						}
+					}
+				}
+
+				.personal-pet-info-disposition {
+					padding: 10px;
+					color: #7D8196;
+					font-size: 14px;
+					background: #f9f9f9;
+					border-radius: 5px;
+					margin: 10px 0rpx;
+				}
+				
+				.view-pets {
+					display: flex;
+					justify-content: flex-end;
+					
+					.btn {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 220rpx;
+						height: 50rpx;
+						border-radius: 25rpx;
+						border: 2rpx solid #FFBF60;
+						color: #FFBF60;
+						font-size: 24rpx;
+					}
+				}
+
+				.personal-pet-info-btns {
+					display: flex;
+					justify-content: flex-end;
+					margin-top: 10px;
+
+					.personal-pet-info-btn {
+						display: flex;
+						font-size: 14px;
+						color: #7D8196;
+						margin-left: 20px;
+					}
+				}
 			}
 		}
-	}
 
-	.box-size {
-		box-sizing: border-box;
-	}
+		.personal-pet-none {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+			margin-top: 40%;
 
-	.level {
-		display: flex;
-	}
-
-	.flex {
-		align-items: center;
+			.personal-pet-none-text {
+				color: #666;
+				text-align: center;
+				font-size: 14px;
+				width: 100%;
+				margin-top: 10px;
+			}
+		}
 	}
 </style>

otherPages/userManage/pet/index.vue

@@ -3,7 +3,7 @@
 		<view v-if="petLists.length > 0" class="personal-pet-list">
 			<view v-for="(item, index) in petLists" :key="index">
 				<view
-					:class="['personal-pet-list-item', item.gender === '男生' ? '.personal-pet-list-item_backgroud_m' : '.personal-pet-list-item_backgroud_f']">
+					:class="['personal-pet-list-item', item.sex === 0 ? '.personal-pet-list-item_backgroud_m' : '.personal-pet-list-item_backgroud_f']">
 					<view class="personal-pet-info">
 						<view>
 							<u-avatar :src="item.headImage? item.headImage : defaultPhoto" size="60" shape="circle"></u-avatar>

pages/myOrdersManage/components/systemOrder.vue

@@ -25,7 +25,7 @@
 						
 						<up-button type="primary" 
 						v-if="true"
-						text="打卡" @click="toClock" shape="circle" class="mr20"
+						text="订单详情" @click="toClock" shape="circle" class="mr20"
 							color="#FFAA48"></up-button>
 
 						<up-button type="primary" 
@@ -33,10 +33,10 @@
 						text="查看订单详情" @click="toDetail" shape="circle" class="mr20"
 							color="#FFAA48"></up-button>
 
-						<up-button type="primary" text="查看宠物档案" @click="toPet" shape="circle" class="mr20"
+						<up-button type="primary" text="宠物档案" @click="toPet" shape="circle" class="mr20"
 							color="#FFAA48"></up-button>
 
-						<up-button type="primary" text="查看服务档案" @click="toService" shape="circle"
+						<up-button type="primary" text="服务档案" @click="toService" shape="circle"
 							color="#FFAA48"></up-button>
 					</view>
 				</view>
@@ -59,7 +59,7 @@
 
 	function toClock() {
 		uni.navigateTo({
-			url: "/otherPages/myOrdersManage/clock/index"
+			url: "/otherPages/orderTakingManage/detail/index"
 		})
 	}
 

pages/myOrdersManage/index.vue

@@ -16,7 +16,7 @@
 				}" :inactiveStyle="{
 					color: '#FFFFFF',
 					transform: 'scale(1)'
-				}" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#FFFFFF"></up-tabs>
+				}" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#FFFFFF" @click="activeIndex1Click"></up-tabs>
 			</view>
 		</up-sticky>
 
@@ -118,6 +118,10 @@
 	}
 
 	getList()
+	
+	const activeIndex1Click = (item) => {  
+	    console.log('item', item);  
+	}  
 </script>
 
 <style scoped lang="scss">

pages/orderTakingManage/components/list.vue

@@ -3,7 +3,9 @@
 		<up-list-item v-for="item in orderList">
 			<view class="mb28 container-list-item">
 				<view class="flex-between flex" style="background: #FFF4E5;padding: 22rpx 42rpx">
-					<view>待接单</view>
+					<view>
+						<text v-if="current != 2">待接单</text>
+					</view>
 					<view>本单酬劳
 						<text style="color: #FF530A">￥{{ item.price }}</text>
 					</view>
@@ -22,36 +24,130 @@
 					<view class="mb28 address">{{ item.address }}</view>
 					<view class="mb28">订单为系统派发，请确认订单信息后再抢单</view>
 					<view class="flex flex-between">
-						<up-button text="无法接单" shape="circle" plain class="mr20"></up-button>
-						<up-button @click="toOrderDetail" type="primary" text="查看详情后接单" shape="circle" color="#FFAA48"></up-button>
+						<up-button @click="unableToAcceptOrder(item.id)" text="无法接单" shape="circle" plain
+							class="mr20"></up-button>
+						<up-button @click="toOrderDetail(item.id)" type="primary" text="查看详情后接单" shape="circle"
+							color="#FFAA48"></up-button>
 					</view>
 				</view>
 			</view>
 		</up-list-item>
 	</up-list>
+
+	<Modal @confirm="confirm" @cancel="cancel" ref="modal">
+		<template>
+			<view class="tip">
+				确认要拒绝该系统派单的订单吗?
+			</view>
+		</template>
+	</Modal>
+	<up-popup :show="showCause" mode="bottom" @close="close" @open="open" :round="10" :closeable="true"
+		:safeAreaInsetBottom="false" :customStyle="{padding:'60rpx 20rpx 40rpx 20rpx;position:relative;height:auto;'}">
+		<view>
+			<view style="position:absolute;top: 20rpx;text-align: center;width: 100%;">
+				请补充无法接单原因
+			</view>
+			<view style="margin: 20rpx 0rpx;">
+				<up-textarea style="background-color: #f0f0f0;" v-model="cause" placeholder="请输入内容"
+					border="none"></up-textarea>
+			</view>
+			<up-button @click="noneOrder" color="#FFBF60" text="提交" shape="circle"></up-button>
+		</view>
+	</up-popup>
 </template>
 <script setup>
+	import {
+		computed,
+		ref
+	} from "vue";
+	import Modal from "@/components/Modal/index.vue"
+	import {
+		endByOrderId
+	} from "@/api/receivingHall/index.js"
+	import { useStore } from "vuex"
+
+	const modal = ref(null);
+	const showCause = ref(false);
+	const cause = ref("");
+	const id = ref(0);
+	const store = useStore();
+	
+	const userInfo = computed(() => {
+		return store.getters.userInfo
+	})
+
 	const scrolltolower = () => {
 
 	}
-	
+
 	const props = defineProps({
-		orderList : {
-			type : Array,
-			default : () => []
+		orderList: {
+			type: Array,
+			default: () => []
+		},
+		current: {
+			type: Number,
+			required: true
 		}
 	})
-	
-	console.log("props",props)
 
 	// 跳转订单详情
-	const toOrderDetail = () => {
+	const toOrderDetail = (id) => {
 		uni.navigateTo({
-			url: "/otherPages/orderTakingManage/detail/index"
+			url: `/otherPages/orderTakingManage/detail/index?id=${id}`
 		});
 	}
+
+	const confirm = () => {
+		open();
+	}
+
+	const cancel = () => {
+
+	}
+
+	const unableToAcceptOrder = () => {
+		modal.value.open();
+		
+	}
+
+	const open = () => {
+		showCause.value = true;
+	}
+
+	const close = () => {
+		showCause.value = false;
+	}
+
+	// 无法接单逻辑
+	const noneOrder = async () => {
+		if (!cause.value) {
+			return uni.showToast({
+				title: '提交无法接单原因成功~',
+				icon: "none"
+			})
+		}
+
+		let response = await endByOrderId({
+			id : id.value,
+			reason : cause.value,
+			userId : userInfo.value.userId
+		});
+		if (response.code == 200 && response.data) {
+			uni.showToast({
+				title: '提交无法接单原因成功~',
+				icon: "none"
+			});
+			close();
+		}
+	}
 </script>
 
 <style scoped lang="scss">
 	@import "../index";
+
+	.tip {
+		text-align: center;
+		padding: 25rpx 0rpx;
+	}
 </style>

pages/orderTakingManage/index.vue

@@ -14,7 +14,7 @@
 		</up-sticky>
 
 		<view class="container">
-			<list :orderList="orderlist" v-if="current===0" />
+			<List :orderList="orderlist" :current="current"/>
 		</view>
 	</view>
 </template>
@@ -35,6 +35,7 @@
 	import {
 		orderList
 	} from "@/api/receivingHall/index.js"
+	import submitBut from "@/components/submitBut/index.vue"
 	import {
 		useStore
 	} from "vuex"