|
|
|
@ -1,15 +1,42 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<scroll-view class="list" scroll-y @scrolltolower="loadMore"> |
|
|
|
<view class="card" v-for="(item,index) in list" :key="item.id"> |
|
|
|
<view class="fixed-head"> |
|
|
|
<view class="nav" :style="{'height': navHeight + 'px'}"> |
|
|
|
<view class="back" :style="{'top': backTop + 'px'}" @tap="back"><uni-icons type="left" size="26"></uni-icons></view> |
|
|
|
<view class="title" :style="{'top': titleTop + 'px','height': capsuleHeight + 'px','line-height': capsuleHeight + 'px'}">中转配送</view> |
|
|
|
</view> |
|
|
|
<view class="tabs"> |
|
|
|
<view class="tab" :class="{active: tab === 'wait'}" @tap="switchTab('wait')">待送达</view> |
|
|
|
<view class="tab" :class="{active: tab === 'done'}" @tap="switchTab('done')">已送达</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view class="list" :style="{'top': listTop + 'px'}" scroll-y @scrolltolower="loadMore"> |
|
|
|
<view class="card" v-for="(item,index) in list" :key="item.id" @tap="productDetail(item)"> |
|
|
|
<view class="card-head"> |
|
|
|
<view class="tag">中转配送</view> |
|
|
|
<view class="appointment-delivery-tag" v-if="item.appointmentDelivery == 1">预约配送</view> |
|
|
|
<view class="code" v-if="item.numberCode">#{{item.numberCode}}</view> |
|
|
|
</view> |
|
|
|
<view class="row"> |
|
|
|
<view class="label">中转点</view> |
|
|
|
<view class="value">{{item.transferAddressName || item.shopName}}</view> |
|
|
|
</view> |
|
|
|
<view class="row"> |
|
|
|
<view class="label">下单时间</view> |
|
|
|
<view class="value">{{formatTime(item.createTime)}}</view> |
|
|
|
</view> |
|
|
|
<view class="row" v-if="item.mustFinishTime"> |
|
|
|
<view class="label">要求送达</view> |
|
|
|
<view class="value">{{formatTime(item.mustFinishTime)}}</view> |
|
|
|
</view> |
|
|
|
<view class="row" v-if="getTransferArriveText(item)"> |
|
|
|
<view class="label">中转送达</view> |
|
|
|
<view class="value">{{getTransferArriveText(item)}}前需要送达中转点</view> |
|
|
|
</view> |
|
|
|
<view class="row"> |
|
|
|
<view class="label">取餐码</view> |
|
|
|
<view class="value pickup-code">{{item.transferPickupCode || '配送员接单后生成'}}</view> |
|
|
|
</view> |
|
|
|
<view class="row"> |
|
|
|
<view class="label">配送员</view> |
|
|
|
<view class="value phone-value" @tap.stop="makeCall(item.workerPhone)"> |
|
|
|
@ -28,13 +55,47 @@ |
|
|
|
<view class="image-row" v-if="item.transferArriveImage"> |
|
|
|
<image :src="item.transferArriveImage" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="actions"> |
|
|
|
<view class="photo-btn" @tap="chooseImage(index)">拍照</view> |
|
|
|
<view class="main-btn" @tap="transferArrive(index,item)">送达中转点</view> |
|
|
|
<view class="arrive-info" v-if="item.transferArriveTime"> |
|
|
|
已送达中转点：{{formatTime(item.transferArriveTime)}} |
|
|
|
</view> |
|
|
|
<view class="actions" v-else> |
|
|
|
<view class="photo-btn" @tap.stop="chooseImage(index)">拍照</view> |
|
|
|
<view class="main-btn" @tap.stop="transferArrive(index,item)">送达中转点</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="empty" v-if="list.length === 0 && loadStatus === 'nomore'">暂无中转配送单</view> |
|
|
|
</scroll-view> |
|
|
|
<uni-popup ref="productPopup" background-color="transparent"> |
|
|
|
<view class="product-popup-content"> |
|
|
|
<view class="product-popup-header"> |
|
|
|
<view class="product-popup-title">订单详情</view> |
|
|
|
<view class="product-popup-subtitle">请核对商品规格和数量</view> |
|
|
|
</view> |
|
|
|
<view class="product-popup-list" v-if="productData != null && productData.length > 0"> |
|
|
|
<view class="product-popup-card" v-for="(item1,index1) in productData" :key="index1"> |
|
|
|
<view class="product-popup-img"> |
|
|
|
<image :src="item1.productPicture" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="product-popup-info"> |
|
|
|
<view class="product-popup-name"> |
|
|
|
{{item1.productName}} |
|
|
|
</view> |
|
|
|
<view class="product-popup-spec"> |
|
|
|
<text class="product-popup-label">规格</text> |
|
|
|
<text class="product-popup-spec-text">{{item1.specs | delNode}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="product-popup-quantity"> |
|
|
|
<view class="product-popup-quantity-num">x{{item1.quantity}}</view> |
|
|
|
<view class="product-popup-quantity-label">数量</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="product-popup-empty" v-else> |
|
|
|
暂无商品详情 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uni-popup> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -42,34 +103,67 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tab: 'wait', |
|
|
|
list: [], |
|
|
|
productData: [], |
|
|
|
loadStatus: 'more', |
|
|
|
totalPages: 1, |
|
|
|
searchForm: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
status: 1, |
|
|
|
deliveryType: 1, |
|
|
|
transferDelivery: 1, |
|
|
|
transferArriveEmpty: true, |
|
|
|
shopId: '', |
|
|
|
regionId: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
navHeight: 120, |
|
|
|
backTop: 50, |
|
|
|
titleTop: 50, |
|
|
|
capsuleHeight: 32, |
|
|
|
listTop: 210 |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.initNavMetrics() |
|
|
|
this.resetList() |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
delNode(data) { |
|
|
|
let str |
|
|
|
if (typeof data === 'object' && data !== null) { |
|
|
|
str = JSON.stringify(data) |
|
|
|
} else if (typeof data === 'string') { |
|
|
|
str = data |
|
|
|
} else { |
|
|
|
str = String(data || '') |
|
|
|
} |
|
|
|
return str.replace(/[{}"]/g, '') |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initNavMetrics() { |
|
|
|
const top = 32 |
|
|
|
const height = 32 |
|
|
|
this.capsuleHeight = height |
|
|
|
this.navHeight = top + height + 30 |
|
|
|
this.listTop = this.navHeight + 48 |
|
|
|
}, |
|
|
|
back() { |
|
|
|
uni.navigateBack() |
|
|
|
}, |
|
|
|
switchTab(tab) { |
|
|
|
if (this.tab === tab) return |
|
|
|
this.tab = tab |
|
|
|
this.resetList() |
|
|
|
}, |
|
|
|
resetList() { |
|
|
|
this.searchForm.pageNum = 1 |
|
|
|
this.totalPages = 1 |
|
|
|
this.list = [] |
|
|
|
this.loadStatus = 'more' |
|
|
|
this.searchForm.shopId = JSON.parse(uni.getStorageSync('area')).regionId |
|
|
|
this.searchForm.transferArriveEmpty = this.tab === 'wait' |
|
|
|
this.searchForm.shopId = uni.getStorageSync('shopId') |
|
|
|
const area = uni.getStorageSync('area') |
|
|
|
this.searchForm.regionId = area ? JSON.parse(area).regionId : '' |
|
|
|
this.getList() |
|
|
|
@ -80,7 +174,7 @@ |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
this.NB.sendRequest("/mall/delivery/pageTransferDelivery",this.searchForm, false, 'post', 'application/json').then((res) => { |
|
|
|
this.NB.sendRequest("/mall/delivery/pageTransferDelivery", this.searchForm, false, 'post', 'application/json').then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
const records = res.result.records || [] |
|
|
|
this.list = this.searchForm.pageNum == 1 ? records : this.list.concat(records) |
|
|
|
@ -92,8 +186,7 @@ |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
uni.hideLoading() |
|
|
|
}).catch((res) => {}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
chooseImage(index) { |
|
|
|
uni.chooseMedia({ |
|
|
|
@ -108,7 +201,7 @@ |
|
|
|
}, |
|
|
|
uploadImage(index, filePath) { |
|
|
|
uni.uploadFile({ |
|
|
|
url: getApp().globalData.mainurl + '/upload/file', |
|
|
|
url: this.tui.interfaceUrl() + '/upload/file', |
|
|
|
filePath, |
|
|
|
name: 'file', |
|
|
|
header: { |
|
|
|
@ -122,24 +215,45 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
transferArrive(index, item) { |
|
|
|
this.NB.sendRequest("/mall/delivery/transferArrive",{ |
|
|
|
this.NB.sendRequest("/mall/delivery/transferArrive", { |
|
|
|
deliveryId: item.id, |
|
|
|
transferArriveImage: item.transferArriveImage || '' |
|
|
|
}, false, 'post', 'application/x-www-form-urlencoded').then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.list.splice(index, 1) |
|
|
|
uni.showToast({ |
|
|
|
title: '操作成功', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
this.resetList() |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: res.message, |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
uni.hideLoading() |
|
|
|
}).catch((res) => {}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
productDetail(item) { |
|
|
|
const goodsList = item.goodsList || item.mallOrderGoodsList || item.orderGoodsList || [] |
|
|
|
this.productData = goodsList |
|
|
|
this.$refs.productPopup.open() |
|
|
|
}, |
|
|
|
getTransferArriveText(item) { |
|
|
|
const address = item && item.shopAddress ? String(item.shopAddress) : '' |
|
|
|
const match = address.match(/商家预计(.+?)配送到-/) |
|
|
|
return match && match[1] ? match[1] : '' |
|
|
|
}, |
|
|
|
formatTime(value) { |
|
|
|
if (!value) return ''; |
|
|
|
const date = new Date(value) |
|
|
|
if (isNaN(date.getTime())) return '' |
|
|
|
const year = date.getFullYear() |
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0') |
|
|
|
const day = String(date.getDate()).padStart(2, '0') |
|
|
|
const hour = String(date.getHours()).padStart(2, '0') |
|
|
|
const minute = String(date.getMinutes()).padStart(2, '0') |
|
|
|
const second = String(date.getSeconds()).padStart(2, '0') |
|
|
|
return `${year}-${month}-${day} ${hour}:${minute}:${second}` |
|
|
|
}, |
|
|
|
makeCall(phone) { |
|
|
|
if (!phone) { |
|
|
|
@ -158,25 +272,152 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.page{min-height:100vh;background:#F5F8F5;padding:120rpx 24rpx 24rpx;box-sizing:border-box;} |
|
|
|
.nav{position:fixed;top:0;left:0;right:0;height:110rpx;background:#F5F8F5;z-index:9;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18rpx;} |
|
|
|
.back{position:absolute;left:24rpx;bottom:12rpx;width:68rpx;height:68rpx;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;} |
|
|
|
.title{font-size:32rpx;font-weight:800;} |
|
|
|
.list{height:calc(100vh - 140rpx);} |
|
|
|
.page{height:100vh;background:#F5F8F5;padding:0 24rpx;box-sizing:border-box;position:relative;overflow:hidden;} |
|
|
|
.fixed-head{position:absolute;top:0;left:24rpx;right:24rpx;z-index:9;background:#F5F8F5;} |
|
|
|
.nav{position:relative;display:flex;align-items:center;justify-content:center;} |
|
|
|
.back{position:absolute;left:0;width:68rpx;height:68rpx;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;} |
|
|
|
.title{position:absolute;font-size:32rpx;font-weight:800;text-align:center;} |
|
|
|
.tabs{display:flex;background:#fff;border-radius:24rpx;padding:10rpx;} |
|
|
|
.tab{flex:1;text-align:center;height:70rpx;line-height:70rpx;border-radius:20rpx;font-weight:700;} |
|
|
|
.tab.active{background:linear-gradient(90deg,#e3ff96,#a6ffea);} |
|
|
|
.list{width:94%;position:absolute;left:24rpx;right:24rpx;bottom:0;box-sizing:border-box;padding-top:20rpx;padding-bottom:36rpx;} |
|
|
|
.card{background:#fff;border-radius:24rpx;padding:24rpx;margin-bottom:20rpx;box-shadow:0 10rpx 26rpx rgba(0,35,28,.08);} |
|
|
|
.card-head{display:flex;align-items:center;margin-bottom:20rpx;} |
|
|
|
.tag{background:#fff2e9;color:#f36c21;border-radius:12rpx;padding:8rpx 14rpx;font-weight:700;} |
|
|
|
.appointment-delivery-tag{margin-left:12rpx;padding:8rpx 14rpx;border-radius:12rpx;background:linear-gradient(135deg,#ff8f1f 0%,#ff6a3d 100%);color:#fff;font-size:22rpx;font-weight:800;box-shadow:0 8rpx 18rpx rgba(255,106,61,.16);} |
|
|
|
.code{margin-left:auto;font-weight:800;font-size:32rpx;} |
|
|
|
.row{display:flex;line-height:46rpx;} |
|
|
|
.label{width:120rpx;color:#7a8582;} |
|
|
|
.value{flex:1;font-weight:700;} |
|
|
|
.phone-value{display:flex;align-items:center;gap:16rpx;color:#123d35;} |
|
|
|
.phone{color:#0b9b73;text-decoration:underline;} |
|
|
|
.pickup-code{color:#f36c21;font-size:34rpx;letter-spacing:4rpx;} |
|
|
|
.address{margin-top:10rpx;color:#6c7773;line-height:40rpx;} |
|
|
|
.image-row image{width:160rpx;height:160rpx;border-radius:16rpx;margin-top:16rpx;} |
|
|
|
.arrive-info{margin-top:22rpx;padding:18rpx 20rpx;border-radius:18rpx;background:#f2f6f4;color:#0b9b73;font-weight:700;text-align:center;} |
|
|
|
.actions{display:flex;margin-top:22rpx;gap:18rpx;} |
|
|
|
.photo-btn,.main-btn{flex:1;height:76rpx;line-height:76rpx;text-align:center;border-radius:38rpx;font-weight:700;} |
|
|
|
.photo-btn{background:#f2f6f4;color:#0b9b73;} |
|
|
|
.main-btn{background:linear-gradient(90deg,#e3ff96,#a6ffea);color:#00231c;} |
|
|
|
.empty{text-align:center;color:#8a9692;padding:80rpx 0;} |
|
|
|
.product-popup-content { |
|
|
|
width: 680rpx; |
|
|
|
max-height: 880rpx; |
|
|
|
padding: 34rpx 28rpx 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: scroll; |
|
|
|
border-radius: 36rpx; |
|
|
|
background: |
|
|
|
radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx), |
|
|
|
linear-gradient(180deg, #ffffff 0%, #f8fffc 100%); |
|
|
|
box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18); |
|
|
|
} |
|
|
|
.product-popup-header { |
|
|
|
margin-bottom: 26rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.product-popup-title { |
|
|
|
color: #143d35; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 48rpx; |
|
|
|
} |
|
|
|
.product-popup-subtitle { |
|
|
|
margin-top: 8rpx; |
|
|
|
color: #7b8a85; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 34rpx; |
|
|
|
} |
|
|
|
.product-popup-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 20rpx; |
|
|
|
} |
|
|
|
.product-popup-card { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 22rpx; |
|
|
|
border: 1px solid rgba(166, 255, 234, 0.58); |
|
|
|
border-radius: 28rpx; |
|
|
|
background: rgba(255, 255, 255, 0.88); |
|
|
|
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06); |
|
|
|
} |
|
|
|
.product-popup-img { |
|
|
|
width: 128rpx; |
|
|
|
height: 128rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 22rpx; |
|
|
|
background: #f0f5f3; |
|
|
|
} |
|
|
|
.product-popup-img image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.product-popup-info { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
padding: 0 22rpx; |
|
|
|
} |
|
|
|
.product-popup-name { |
|
|
|
color: #172f2a; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 42rpx; |
|
|
|
} |
|
|
|
.product-popup-spec { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
margin-top: 16rpx; |
|
|
|
} |
|
|
|
.product-popup-label { |
|
|
|
flex-shrink: 0; |
|
|
|
height: 34rpx; |
|
|
|
padding: 0 14rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(166, 255, 234, 0.72); |
|
|
|
color: #126255; |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 800; |
|
|
|
line-height: 34rpx; |
|
|
|
} |
|
|
|
.product-popup-spec-text { |
|
|
|
flex: 1; |
|
|
|
margin-left: 12rpx; |
|
|
|
color: #65736f; |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 34rpx; |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
.product-popup-quantity { |
|
|
|
width: 92rpx; |
|
|
|
height: 92rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 28rpx; |
|
|
|
background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%); |
|
|
|
color: #103f36; |
|
|
|
text-align: center; |
|
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08); |
|
|
|
} |
|
|
|
.product-popup-quantity-num { |
|
|
|
padding-top: 16rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 900; |
|
|
|
line-height: 34rpx; |
|
|
|
} |
|
|
|
.product-popup-quantity-label { |
|
|
|
margin-top: 2rpx; |
|
|
|
color: #52736b; |
|
|
|
font-size: 20rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
.product-popup-empty { |
|
|
|
padding: 80rpx 20rpx; |
|
|
|
border-radius: 28rpx; |
|
|
|
background: rgba(247, 255, 251, 0.9); |
|
|
|
color: #7b8a85; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 700; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
