wangfukang
21 hours ago
6 changed files with 888 additions and 9 deletions
@ -0,0 +1,471 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<view class="fixed-head"> |
|||
<view class="nav" :style="{'height': navHeight + 'px'}"> |
|||
<view class="back-btn" :style="{'top': backTop + 'px'}" @tap="back"> |
|||
<uni-icons type="left" size="26"></uni-icons> |
|||
</view> |
|||
<view class="nav-title">自配送订单</view> |
|||
</view> |
|||
<view class="tabs"> |
|||
<view class="tab" :class="{active: tab === 'pickup'}" @tap="switchTab('pickup')">待取货</view> |
|||
<view class="tab" :class="{active: tab === 'complete'}" @tap="switchTab('complete')">待送达</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"> |
|||
<view class="card-head"> |
|||
<view class="tag">商家自配送</view> |
|||
<view class="time">{{item.mustFinishTime | formatTime}}前送达</view> |
|||
</view> |
|||
<view class="order-code" v-if="item.numberCode">#{{item.numberCode}}</view> |
|||
<view class="address"> |
|||
<view class="dot get">取</view> |
|||
<view> |
|||
<view class="name">{{item.shopName}}</view> |
|||
<view class="desc">{{item.shopAddress}}</view> |
|||
<view class="phone-row" v-if="item.shopPhone" @tap.stop="makeCall(item.shopPhone)"> |
|||
商家电话：{{item.shopPhone}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="address"> |
|||
<view class="dot send">送</view> |
|||
<view> |
|||
<view class="name">{{item.receiverName}} {{item.receiverPhone}}</view> |
|||
<view class="desc">{{item.receiverAddress}}</view> |
|||
<view class="phone-row" v-if="item.receiverPhone" @tap.stop="makeCall(item.receiverPhone)"> |
|||
用户电话：{{item.receiverPhone}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="goods-row" v-if="item.goodsList && item.goodsList.length > 0" @tap="productDetail(item)"> |
|||
<view class="goods-title">商品详情</view> |
|||
<view class="goods-desc">共{{goodsCount(item)}}件，点击查看规格和数量</view> |
|||
<uni-icons type="right" size="14" color="#7a8582"></uni-icons> |
|||
</view> |
|||
<view class="remark" v-if="item.remark">备注：{{item.remark}}</view> |
|||
<view class="fee">配送费 ￥{{item.deliveryFee || 0}}</view> |
|||
<view class="btn" @tap="handleOrder(index,item)"> |
|||
{{buttonText(item)}} |
|||
</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 && productData.length > 0"> |
|||
<view class="product-popup-card" v-for="(item1,index1) in productData" :key="index1"> |
|||
<view class="product-popup-img"> |
|||
<img :src="item1.productPicture" alt=""> |
|||
</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">{{formatSpecs(item1.specs)}}</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> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab: 'pickup', |
|||
list: [], |
|||
loadStatus: 'more', |
|||
totalPages: 1, |
|||
searchForm: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
status: 1, |
|||
deliveryType: 1, |
|||
shopDelivery: 1, |
|||
shopId: '', |
|||
workerId: '', |
|||
regionId: '' |
|||
}, |
|||
menuButtonInfo: {}, |
|||
navHeight: 120, |
|||
backTop: 88, |
|||
listTop: 210, |
|||
productData: [] |
|||
} |
|||
}, |
|||
filters: { |
|||
formatTime(value) { |
|||
if (!value) return ''; |
|||
const date = new Date(value); |
|||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`; |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.initNavMetrics(); |
|||
this.initWorkerFromShop(); |
|||
this.resetList(); |
|||
}, |
|||
methods: { |
|||
initNavMetrics() { |
|||
const rect = uni.getMenuButtonBoundingClientRect(); |
|||
this.menuButtonInfo = rect || {}; |
|||
const top = rect && rect.top ? rect.top : 32; |
|||
const height = rect && rect.height ? rect.height : 32; |
|||
this.backTop = top + 6; |
|||
this.navHeight = top + height + 52; |
|||
this.listTop = this.navHeight + 76; |
|||
}, |
|||
back() { |
|||
uni.navigateBack(); |
|||
}, |
|||
initWorkerFromShop() { |
|||
const shop = this.getCurrentShop(); |
|||
this.searchForm.shopId = uni.getStorageSync('shopId'); |
|||
this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id; |
|||
this.searchForm.workerId = shop.workerId || ''; |
|||
this.worker = { |
|||
workerId: shop.workerId || '', |
|||
workerName: shop.workerName || '', |
|||
workerPhone: shop.workerPhone || '' |
|||
}; |
|||
}, |
|||
getCurrentShop() { |
|||
const shopList = uni.getStorageSync('schoolShop') || []; |
|||
const shopId = uni.getStorageSync('shopId'); |
|||
if (Array.isArray(shopList)) { |
|||
return shopList.find(item => item.id == shopId) || {}; |
|||
} |
|||
return {}; |
|||
}, |
|||
switchTab(tab) { |
|||
this.tab = tab; |
|||
this.resetList(); |
|||
}, |
|||
resetList() { |
|||
this.list = []; |
|||
this.searchForm.pageNum = 1; |
|||
this.totalPages = 1; |
|||
this.loadStatus = 'more'; |
|||
this.searchForm.status = this.tab === 'pickup' ? 1 : 2; |
|||
this.getList(); |
|||
}, |
|||
loadMore() { |
|||
if (this.searchForm.pageNum >= this.totalPages) return; |
|||
this.searchForm.pageNum++; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
if (!this.searchForm.workerId) { |
|||
this.loadStatus = 'nomore'; |
|||
this.tui.toast('店铺未绑定自配送配送员'); |
|||
return; |
|||
} |
|||
this.tui.request('/mall/delivery/pageShopDelivery', 'POST', this.searchForm, false, false).then((res) => { |
|||
if (res.code == 200) { |
|||
const records = res.result.records || []; |
|||
this.list = this.searchForm.pageNum == 1 ? records : this.list.concat(records); |
|||
this.totalPages = res.result.pages || 1; |
|||
this.loadStatus = this.searchForm.pageNum >= this.totalPages ? 'nomore' : 'more'; |
|||
} else { |
|||
this.tui.toast(res.message); |
|||
} |
|||
}); |
|||
}, |
|||
handleOrder(index, item) { |
|||
if (this.tab === 'pickup' && !item.arriveTime) { |
|||
this.changeStatus(index, item, 1); |
|||
return; |
|||
} |
|||
this.changeStatus(index, item, this.tab === 'pickup' ? 2 : 3); |
|||
}, |
|||
buttonText(item) { |
|||
if (this.tab === 'pickup') { |
|||
return item.arriveTime ? '确认取货' : '已到店'; |
|||
} |
|||
return '确认送达'; |
|||
}, |
|||
changeStatus(index, item, status) { |
|||
const url = status === 1 ? '/mall/delivery/arriveShop' : (status === 2 ? '/mall/delivery/pickup' : '/mall/delivery/complete'); |
|||
this.tui.request(url, 'POST', { |
|||
regionId: this.searchForm.regionId, |
|||
deliveryId: item.id, |
|||
workerId: this.worker.workerId |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
if (status === 1) { |
|||
this.$set(this.list[index], 'arriveTime', new Date()); |
|||
} else { |
|||
this.list.splice(index, 1); |
|||
} |
|||
this.tui.toast(res.message || '操作成功'); |
|||
} else { |
|||
this.tui.toast(res.message); |
|||
} |
|||
}); |
|||
}, |
|||
productDetail(item) { |
|||
this.productData = item.goodsList || []; |
|||
this.$refs.productPopup.open(); |
|||
}, |
|||
goodsCount(item) { |
|||
return (item.goodsList || []).reduce((sum, goods) => sum + Number(goods.quantity || 0), 0); |
|||
}, |
|||
formatSpecs(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, ''); |
|||
}, |
|||
makeCall(phone) { |
|||
if (!phone) return; |
|||
uni.makePhoneCall({ |
|||
phoneNumber: phone |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.page{ |
|||
height: 100vh; |
|||
background: #F5F8F5; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.fixed-head{ |
|||
position: absolute; |
|||
top: -40rpx; |
|||
left: 24rpx; |
|||
right: 24rpx; |
|||
z-index: 10; |
|||
background: #F5F8F5; |
|||
} |
|||
.nav{ |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.back-btn{ |
|||
position: absolute; |
|||
left: 0; |
|||
width: 68rpx; |
|||
height: 68rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
box-shadow: 0 8rpx 20rpx rgba(0, 35, 28, 0.08); |
|||
} |
|||
.nav-title{ |
|||
position: absolute; |
|||
bottom: 18rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 800; |
|||
} |
|||
.tabs{ |
|||
display: flex; |
|||
background: #fff; |
|||
border-radius: 24rpx; |
|||
padding: 10rpx; |
|||
margin-bottom: 0; |
|||
} |
|||
.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{ |
|||
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 12rpx 30rpx rgba(0, 35, 28, 0.08); |
|||
} |
|||
.card-head{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.tag{ |
|||
background: rgba(255, 111, 44, 0.1); |
|||
color: #ff6f2c; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 18rpx; |
|||
font-weight: 700; |
|||
} |
|||
.time{ |
|||
color: #666; |
|||
} |
|||
.order-code{ |
|||
margin-top: 18rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 800; |
|||
} |
|||
.address{ |
|||
display: flex; |
|||
margin-top: 18rpx; |
|||
} |
|||
.dot{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
margin-right: 16rpx; |
|||
} |
|||
.get{ |
|||
background: #0b9b73; |
|||
} |
|||
.send{ |
|||
background: #ff6f2c; |
|||
} |
|||
.name{ |
|||
font-weight: 700; |
|||
} |
|||
.desc,.remark,.fee{ |
|||
margin-top: 8rpx; |
|||
color: #666; |
|||
line-height: 38rpx; |
|||
} |
|||
.phone-row{ |
|||
display: inline-block; |
|||
margin-top: 8rpx; |
|||
color: #0b9b73; |
|||
font-weight: 700; |
|||
line-height: 34rpx; |
|||
} |
|||
.goods-row{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
padding: 18rpx 20rpx; |
|||
border-radius: 18rpx; |
|||
background: rgba(247, 248, 248, 0.8); |
|||
} |
|||
.goods-title{ |
|||
font-weight: 800; |
|||
margin-right: 16rpx; |
|||
} |
|||
.goods-desc{ |
|||
flex: 1; |
|||
color: #666; |
|||
font-size: 24rpx; |
|||
} |
|||
.btn{ |
|||
margin-top: 24rpx; |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
text-align: center; |
|||
border-radius: 38rpx; |
|||
background: linear-gradient(90deg, #e3ff96, #a6ffea); |
|||
font-weight: 800; |
|||
} |
|||
.empty{ |
|||
text-align: center; |
|||
color: #888; |
|||
padding: 80rpx 0; |
|||
} |
|||
.product-popup-content{ |
|||
width: 650rpx; |
|||
max-height: 850rpx; |
|||
padding: 30rpx; |
|||
border-radius: 28rpx; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
} |
|||
.product-popup-title{ |
|||
font-size: 32rpx; |
|||
font-weight: 800; |
|||
} |
|||
.product-popup-subtitle{ |
|||
margin-top: 8rpx; |
|||
color: #888; |
|||
font-size: 24rpx; |
|||
} |
|||
.product-popup-list{ |
|||
margin-top: 24rpx; |
|||
max-height: 680rpx; |
|||
overflow-y: auto; |
|||
} |
|||
.product-popup-card{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 18rpx 0; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
} |
|||
.product-popup-img img{ |
|||
width: 90rpx; |
|||
height: 90rpx; |
|||
border-radius: 16rpx; |
|||
margin-right: 18rpx; |
|||
} |
|||
.product-popup-info{ |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
.product-popup-name{ |
|||
font-weight: 800; |
|||
line-height: 38rpx; |
|||
} |
|||
.product-popup-spec{ |
|||
margin-top: 8rpx; |
|||
color: #777; |
|||
font-size: 24rpx; |
|||
} |
|||
.product-popup-label{ |
|||
margin-right: 10rpx; |
|||
color: #999; |
|||
} |
|||
.product-popup-quantity{ |
|||
width: 80rpx; |
|||
text-align: right; |
|||
} |
|||
.product-popup-quantity-num{ |
|||
font-weight: 800; |
|||
} |
|||
.product-popup-quantity-label, |
|||
.product-popup-empty{ |
|||
color: #888; |
|||
font-size: 22rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue