feat: 新增确认送达弹框组件、添加安卓打包测试证书、骑手配送流程接口对接

This commit is contained in:
admin
2026-02-24 11:58:30 +08:00
parent b85833690f
commit bc1833ec89
25 changed files with 2982 additions and 1205 deletions

View File

@@ -5,14 +5,16 @@
<view class="top-area" :style="headerStyle">
<view class="top-bg"></view>
<view class="top-inner">
<view class="user-info">
<image class="user-avatar" @tap="sheep.$router.go('/pages/index/user')"
:src="driverInfo.avatar || defaultAvatar" mode="cover" />
<view class="user-info" @tap="sheep.$router.go('/pages/index/user')">
<image class="user-avatar" :src="driverInfo.avatar || defaultAvatar" mode="cover" />
<view class="user-meta">
<!-- <text class="user-status" @click="toggleOnline">{{ driverInfo.isOnline ? '在线中' : '离线' }}</text> -->
<text class="user-status">
<text class="user-status" v-if="driverInfo.nickname">
{{ driverInfo.onlineStatus == 0 ? '离线' : (driverInfo.onlineStatus == 1 ? '在线' : '待审核') }}
</text>
<text class="user-status" v-else>
请登录
</text>
</view>
</view>
<view class="tabs">
@@ -53,7 +55,7 @@
<text class="address-title">{{ order.shopAddress }}</text>
<text class="address-sub">商家 · {{ order.shopPhone || '' }}</text>
</view>
<view class="nav-icon" @click="openMap(order.shopLat, order.shopLng, order.shopAddress)">导航</view>
<view class="nav-icon" @click.stop="openMap(order.shopLat, order.shopLng, order.shopAddress)">导航</view>
</view>
<view class="address-row">
<view class="icon deliver"></view>
@@ -61,14 +63,14 @@
<text class="address-title">{{ order.deliveryAddress }}</text>
<text class="address-sub">收货人{{ order.receiverName }} {{ order.receiverPhone ? ('尾号' + (order.receiverPhone + '').slice(-4)) : ''}}</text>
</view>
<view class="nav-icon" @click="openMap(order.deliveryLat, order.deliveryLng, order.deliveryAddress)">导航</view>
<view class="nav-icon" @click.stop="openMap(order.deliveryLat, order.deliveryLng, order.deliveryAddress)">导航</view>
</view>
</view>
</view>
<!-- 操作区 -->
<view class="order-actions">
<view class="contact" @click="callPhone(order.receiverPhone)">
<view class="contact" @click="openRemindPopupWithOrder(order)">
<text>联系</text>
</view>
<view class="confirm" @click="confirmArrive(order.id)" v-if="order.deliveryStatus == 2">
@@ -77,15 +79,55 @@
<view class="confirm" @click="confirmPickup(order.id)" v-if="order.deliveryStatus == 3">
<text>确认取餐</text>
</view>
<view class="confirm" style="background: #ffaa00;" v-if="order.deliveryStatus == 4">
<text>送达交接点</text>
</view>
<view class="confirm" v-if="order.deliveryStatus == 5" @click="openDeliveryPopup(order)">
<text>确认送达顾客</text>
</view>
</view>
</view>
</scroll-view>
<!-- 催单弹框 -->
<up-popup v-model:show="showRemind" mode="bottom" :closeable="false" border-radius="12">
<view class="remind-popup">
<view class="remind-row">
<text class="remind-title">联系商家</text>
<view class="remind-btn" @click.stop="callShopPhone">拨打电话</view>
</view>
<view class="remind-row">
<text class="remind-title">联系顾客</text>
<view class="remind-btn" @click.stop="callCustomerPhone">拨打电话</view>
</view>
</view>
</up-popup>
<!-- 底部批量操作栏 -->
<view class="bottom-bar">
<view v-if="activeTab == 'delivering'" class="batch-operation" @click="openBatchOperation">批量操作</view>
<view class="batch-item" @click="scanQr">扫一扫取单</view>
<view class="batch-item" @click="openManualInput">输入用户单编码</view>
</view>
<!-- 批量操作模态弹框 -->
<u-modal :show="batchModalShow" :title="batchModalTitle" :content="batchModalContent" confirmText="确认送达" cancelText="取消"
:showCancelButton="hasDeliveryOrders" @confirm="onBatchConfirm" @cancel="batchModalShow = false" @close="batchModalShow = false"
:closeOnClickOverlay="false" :zoom="true" confirmColor="#1e9fff" />
<!-- 批量送达交接点异步操作弹框 -->
<u-modal :show="batchLoadingModalShow" :title="batchLoadingModalTitle" :content="batchLoadingModalContent" confirmText="确认送达"
:showCancelButton="false" :asyncClose="true" @confirm="onBatchLoadingConfirm" ref="batchLoadingModalRef"
confirmColor="#1e9fff" />
<!-- 确认送达顾客弹框 -->
<DeliveryPopup
:show="showDeliveryPopup"
:receiverPhone="currentOrderForDelivery?.receiverPhone || ''"
@update:show="showDeliveryPopup = $event"
@submit="handleDeliveryConfirm"
@close="showDeliveryPopup = false"
/>
</view>
</template>
@@ -95,13 +137,10 @@ import sheep from '@/sheep';
import { onShow } from '@dcloudio/uni-app';
import OrderCodePopup from './components/order-code-popup.vue';
import DeliveryOrderApi from '@/sheep/api/member/deliveryOrder';
import DeliveryPopup from './components/delivery-popup.vue';
// 驿站/骑手信息(从 store 获取或 mock
const driverInfo = ref({
isOnline: true,
nickName: '骑手张三',
avatar: ''
});
//骑手信息
const driverInfo = computed(() => sheep.$store('user').userInfo);
const defaultAvatar = 'https://huichibao.oss-cn-guangzhou.aliyuncs.com/1/material/348b8223-8d03-46aa-8836-6757e8beebd2.png';
@@ -148,7 +187,7 @@ const filteredOrders = computed(() => orders.value);
// 加载订单列表数据
async function loadOrders(isLoadMore = false) {
if (loading.value) return;
if (driverInfo.value.auditStatus != 2) return;
loading.value = true;
// 根据当前 tab 确定接口参数 status
@@ -199,6 +238,10 @@ async function loadOrders(isLoadMore = false) {
// 判断是否还有更多数据
noMore.value = orders.value.length >= pagination.value.total;
} else {
// 清空列表,防止旧数据残留
if (!isLoadMore) {
orders.value = [];
}
sheep.$helper.toast(res.msg || '加载失败');
}
} catch (error) {
@@ -275,10 +318,66 @@ async function confirmPickup(orderId) {
}
}
// 催单弹框控制
const showRemind = ref(false);
const currentOrder = ref(null);
// 批量操作模态弹框控制
const batchModalShow = ref(false);
const batchModalTitle = ref('当前送达交接点订单数');
const batchModalContent = ref('');
const hasDeliveryOrders = ref(false);
// 批量送达异步操作弹框控制
const batchLoadingModalShow = ref(false);
const batchLoadingModalTitle = ref('当前送达交接点订单数');
const batchLoadingModalContent = ref('');
const batchOrderCount = ref(0);
// 确认送达顾客弹框控制
const showDeliveryPopup = ref(false);
const currentOrderForDelivery = ref(null);
function openRemindPopupWithOrder(order) {
currentOrder.value = order;
showRemind.value = true;
}
function openRemindPopup() {
showRemind.value = true;
}
function closeRemindPopup() {
showRemind.value = false;
}
function callShopPhone(phone) {
//订单获取商家电话
const orderPhone = currentOrder.value?.shopPhone || '';
if (!orderPhone) {
sheep.$helper.toast('未找到商家电话');
return;
}
callPhone(orderPhone);
closeRemindPopup();
}
function callCustomerPhone(phone) {
//从订单获取顾客电话
const orderPhone = currentOrder.value?.receiverPhone || '';
if (!orderPhone) {
sheep.$helper.toast('未找到顾客电话');
return;
}
callPhone(orderPhone);
closeRemindPopup();
}
// 拨打电话
function callPhone(phone) {
console.log("电话:", phone)
if (!phone) {
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('未找到联系电话');
sheep.$helper.toast('未找到联系电话');
return;
}
uni.makePhoneCall({
@@ -296,7 +395,13 @@ function openMap(lat, lng, name) {
latitude: Number(lat),
longitude: Number(lng),
name: name || '',
scale: 18
scale: 18,
success: function () {
console.log('success');
},
error: function (err) {
console.log("错误信息:", err);
}
});
}
@@ -321,6 +426,76 @@ function openManualInput() {
orderPopupShow.value = true;
}
// 打开批量操作弹框
function openBatchOperation() {
// 筛选出配送中状态为待送达交接点(ddeliveryStatus=4)的订单
const deliveryOrders = orders.value.filter(o => o.type === 'delivering' && o.deliveryStatus === 4);
hasDeliveryOrders.value = deliveryOrders.length > 0;
if (hasDeliveryOrders.value) {
// 有待送达交接点的订单
batchModalTitle.value = '当前送达交接点订单数';
batchModalContent.value = `${deliveryOrders.length}`;
batchModalShow.value = true;
} else {
// 没有待送达交接点的订单
batchModalTitle.value = '';
batchModalContent.value = '暂无待送达交接点的订单';
batchModalShow.value = true;
}
}
// 批量送达交接点确认
function onBatchConfirm() {
// 筛选出配送中状态为待送达交接点的订单
const deliveryOrders = orders.value.filter(o => o.type === 'delivering' && o.deliveryStatus === 4);
batchOrderCount.value = deliveryOrders.length;
if (deliveryOrders.length > 0) {
// 关闭第一个弹框,打开异步操作弹框
batchModalShow.value = false;
batchLoadingModalTitle.value = '当前送达交接点订单数';
batchLoadingModalContent.value = `${deliveryOrders.length}`;
batchLoadingModalShow.value = true;
} else {
// 没有订单,直接关闭
batchModalShow.value = false;
}
}
// 批量送达交接点异步确认(真正执行批量操作)
async function onBatchLoadingConfirm() {
// 筛选出配送中状态为待送达交接点的订单ID
const deliveryOrderIds = orders.value
.filter(o => o.type === 'delivering' && o.deliveryStatus === 4)
.map(o => o.id);
if (deliveryOrderIds.length === 0) {
batchLoadingModalShow.value = false;
return;
}
try {
// 调用批量送达交接点接口ids 为逗号分隔的订单ID字符串
const res = await DeliveryOrderApi.riderDeliveryHandoverBatch(deliveryOrderIds.join(','));
if (res.code === 0 && res.data === true) {
// 关闭异步弹框
batchLoadingModalShow.value = false;
sheep.$helper.toast('批量送达交接点操作成功');
// 刷新订单列表
refreshOrders();
} else {
batchLoadingModalShow.value = false;
sheep.$helper.toast(res.msg || '批量送达交接点失败');
}
} catch (error) {
console.error('批量送达交接点异常:', error);
batchLoadingModalShow.value = false;
sheep.$helper.toast('批量送达交接点失败,请重试');
}
}
function onConfirmCode(payload) {
// payload 包含 code, result, remark, images
// 这里简单展示提示,实际应调用后端或触发下一步逻辑
@@ -328,6 +503,41 @@ function onConfirmCode(payload) {
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('交接已确认');
}
// 确认送达顾客
async function handleDeliveryConfirm(imageUrl) {
console.log('送达照片URL:', imageUrl);
if (!currentOrderForDelivery.value?.id) {
sheep.$helper.toast('订单信息异常');
return;
}
try {
const res = await DeliveryOrderApi.riderConfirmDelivery({
deliveryOrderId: currentOrderForDelivery.value.id,
imageUrl: imageUrl
});
if (res.code === 0 && res.data === true) {
sheep.$helper.toast('已提交送达照片');
showDeliveryPopup.value = false;
// 刷新订单列表
refreshOrders();
} else {
sheep.$helper.toast(res.msg || '提交失败');
}
} catch (error) {
console.error('确认送达异常:', error);
sheep.$helper.toast('提交失败,请重试');
}
}
// 打开确认送达顾客弹框
function openDeliveryPopup(order) {
currentOrderForDelivery.value = order;
showDeliveryPopup.value = true;
}
const headerStyle = ref({});
function setHeaderSafeArea() {
@@ -577,4 +787,45 @@ onShow(() => {
border-radius: 40rpx;
border: 1rpx solid #ddd;
}
.batch-operation {
background: #1e9fff;
color: #fff;
padding: 14rpx 20rpx;
border-radius: 40rpx;
font-weight: 500;
}
/* 催单弹框样式 */
.remind-popup {
padding: 20rpx 0;
}
.remind-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background: #f6f6f6;
margin: 10rpx 16rpx;
border-radius: 8rpx;
}
.remind-title {
font-size: 28rpx;
font-weight: 700;
color: #333;
}
.remind-btn {
background: #1e9fff;
color: #fff;
padding: 10rpx 18rpx;
border-radius: 8rpx;
font-weight: 700;
}
.remind-cancel {
text-align: center;
padding: 18rpx 0 70rpx;
color: #666;
font-size: 26rpx;
background: #fff;
margin-top: 10rpx;
}
</style>