10 changed files with 439 additions and 22 deletions
@ -0,0 +1,435 @@ |
|||||
|
<template> |
||||
|
<!-- 兼职订单列表 --> |
||||
|
<view class="page1"> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
订单列表 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="margin-top: -140rpx;"> |
||||
|
<view class="box1" @tap="goDetail(item)" v-for="(item,index) in orderList" :key="index"> |
||||
|
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;"> |
||||
|
<view style="display: flex;padding-right: 20rpx;" v-if="item.numberCode"> |
||||
|
{{'#' + item.numberCode | delPlus}} |
||||
|
</view> |
||||
|
<view style="flex: 1;display: flex;"> |
||||
|
{{item.createTime | formatISOTime}} |
||||
|
<!-- <text>已退款</text> --> |
||||
|
</view> |
||||
|
<view> |
||||
|
{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake != 1)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: auto;padding-top: 20rpx;"> |
||||
|
<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;display: flex;"> |
||||
|
商品 <text>共<text>{{item.goodsNum}}</text>件</text> |
||||
|
</view> |
||||
|
<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index"> |
||||
|
<view style="flex: 1;height: 20px;line-height: 20px;"> |
||||
|
{{item1.productName}} |
||||
|
</view> |
||||
|
<view style="width: 100rpx;"> |
||||
|
{{'X' + item1.quantity}} |
||||
|
</view> |
||||
|
<view> |
||||
|
{{'￥'+ item1.price}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 80rpx;border-top: 1px solid #eee;display: flex;"> |
||||
|
<view class="pinzi" @tap.stop="tanchuang(item.deliveryType)" style="width:auto;font-weight:700;margin-right: 20rpx;color:#00231C;background:linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));padding:0 12rpx;"> |
||||
|
{{item.deliveryType == 1?'配送':item.isPack == 1?'自取-打包':item.isPack == 0?'自取-堂食':'自取'}} |
||||
|
</view> |
||||
|
<view v-if="item.orderType != 1 && item.groupInfo != null" @tap.stop="getGroupOrders(item.id)" class="pinzi"> |
||||
|
拼 |
||||
|
</view> |
||||
|
<view style="flex: 1;"></view> |
||||
|
<view @tap.stop="mealServing(item)" v-if="currentIndex == 13" class="btn" style="margin: 10rpx 0 0 20rpx;"> |
||||
|
已出餐 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width:100%;height:60rpx;"></view> |
||||
|
<!-- 拼团详情弹窗 --> |
||||
|
<uni-popup ref="pintuanPopup" background-color="#fff"> |
||||
|
<view class="guize-list"> |
||||
|
<view v-for="(item,index) in tuanzhangOrder" :key="index"> |
||||
|
<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;"> |
||||
|
订单-{{item.numberCode}} |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view class="dingdan"> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单状态： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单号： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.id}} |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<view style="display:flex"> |
||||
|
<view style="width:300rpx;"> |
||||
|
订单时间： |
||||
|
</view> |
||||
|
<view class="pituan-text"> |
||||
|
{{item.createTime | formatISOTime}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dingdan" v-for="(item1,index1) in item.goodsList" :key="index1"> |
||||
|
<view class="pt-title"> |
||||
|
商品信息 |
||||
|
</view> |
||||
|
<view style="display: flex;font-weight: 700;"> |
||||
|
<view style="flex:1"> |
||||
|
商品名：{{item1.productName}} |
||||
|
</view> |
||||
|
<view style="width:100rpx;"> |
||||
|
X{{item1.quantity}} |
||||
|
</view> |
||||
|
<view style="width:220rpx;text-align: right;padding-right:20rpx;"> |
||||
|
￥{{item1.price}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="dingdan"> |
||||
|
<view style="text-align: right;padding-right: 20rpx;color: #777;"> |
||||
|
餐盒费：￥{{item.packageFee}} 配送费：￥{{item.deliveryFee}} |
||||
|
</view> |
||||
|
<view style="text-align: right;padding-right: 20rpx;font-size: 28rpx;font-weight: 700;color: red;"> |
||||
|
总计：￥{{item.totalAmount}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
loadStatus: 'more', |
||||
|
searchForm: { |
||||
|
status: 3, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
order: '', |
||||
|
regionId: JSON.parse(uni.getStorageSync('area')).id, |
||||
|
deliveryType: null, |
||||
|
workerId: uni.getStorageSync('worker').workerId |
||||
|
}, |
||||
|
totalPages: 1, |
||||
|
tuanzhangOrder:[], |
||||
|
orderList: [], |
||||
|
currentIndex: 10, |
||||
|
menuButtonInfo: {} |
||||
|
} |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.searchForm.pageNum >= this.totalPages) return; |
||||
|
this.searchForm.pageNum++; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
filters: { |
||||
|
formatISOTime(isoString) { |
||||
|
const date = new Date(isoString); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = date.getDate().toString().padStart(2, '0'); |
||||
|
const hours = date.getHours().toString().padStart(2, '0'); |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
|
const seconds = date.getSeconds().toString().padStart(2, '0'); |
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
}, |
||||
|
delPlus(data){ |
||||
|
if (data.endsWith("+")) { |
||||
|
data = data.slice(0, -1); // 删除最后一个字符 |
||||
|
} |
||||
|
return data; |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.searchForm.shopId = uni.getStorageSync('shopId') |
||||
|
this.regionId = JSON.parse(uni.getStorageSync('area')).id |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
if (option.index) { |
||||
|
this.searchForm.searchStatus = option.index |
||||
|
this.currentIndex = option.index |
||||
|
} |
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.loadStatus = 'loading' |
||||
|
let that = this |
||||
|
that.tui.request("/mall/delivery/pagebyworker", "POST", this.searchForm, false, false).then(( |
||||
|
res) => { |
||||
|
that.loadStatus = 'nomore'; |
||||
|
if (res.code == 200) { |
||||
|
if (that.searchForm.pageNum == 1) { |
||||
|
that.orderList = res.result.records; |
||||
|
} else { |
||||
|
that.orderList = [...that.orderList, ...res.result.records] |
||||
|
} |
||||
|
for(let i=0;i<that.orderList.length;i++){ |
||||
|
that.orderList[i].goodsNum = 0 |
||||
|
for(let m=0;m<that.orderList[i].goodsList.length;m++){ |
||||
|
that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity |
||||
|
} |
||||
|
} |
||||
|
that.totalPages = res.result.pages; |
||||
|
that.$forceUpdate(); |
||||
|
} else { |
||||
|
that.tui.toast(res.message); |
||||
|
return; |
||||
|
} |
||||
|
uni.hideLoading(); |
||||
|
}).catch((res) => {}); |
||||
|
}, |
||||
|
tanchuang(v){ |
||||
|
this.tui.toast('该订单为'+(v==1?'配送':'自取')+'单') |
||||
|
}, |
||||
|
getGroupOrders(id){ |
||||
|
this.tui.request("/mall/order/selectAllOrderByOrderId/"+id, "GET", {}, false, true).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.tuanzhangOrder = res.result; |
||||
|
this.$refs.pintuanPopup.open('bottom') |
||||
|
} else { |
||||
|
that.tui.toast(res.message) |
||||
|
return |
||||
|
} |
||||
|
uni.hideLoading() |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
openPopup(){ |
||||
|
this.$refs.groupPopup.open() |
||||
|
}, |
||||
|
mealServing(item){ |
||||
|
let that = this |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '确定要出餐吗？', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
let data = {} |
||||
|
let url = '' |
||||
|
if(item.deliveryType == 2){ //自取单 |
||||
|
url = '/mall/order/complete' |
||||
|
}else if(item.deliveryType == 1){ //外卖单 |
||||
|
url = '/mall/order/shopMakeTime' |
||||
|
} |
||||
|
that.tui.request(url, "post", { |
||||
|
orderId:item.id |
||||
|
}, false, true).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
that.getList() |
||||
|
} else { |
||||
|
that.tui.toast(res.message); |
||||
|
return; |
||||
|
} |
||||
|
uni.hideLoading(); |
||||
|
}).catch((res) => {}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
goDetail(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: '/package2/shop/orderDetail?id=' + item.orderId |
||||
|
}) |
||||
|
}, |
||||
|
handleStatusClick(index) { |
||||
|
this.searchForm.pageNum = 1 |
||||
|
if (this.currentIndex === index) return; |
||||
|
this.currentIndex = index; |
||||
|
this.searchForm.searchStatus = index |
||||
|
this.getList() |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
background: #F5F8F5; |
||||
|
color: #00231C; |
||||
|
} |
||||
|
|
||||
|
.page1 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 110rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.title-tab { |
||||
|
display: flex; |
||||
|
margin: -120rpx auto 0; |
||||
|
} |
||||
|
|
||||
|
.status-scroll-view { |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
/* 辅助滚动，与 flex 配合确保不换行 */ |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.status-list { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: nowrap; |
||||
|
align-items: center; |
||||
|
padding: 0 0; |
||||
|
/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */ |
||||
|
min-height: 88rpx; |
||||
|
/* 保证内部项撑开高度 */ |
||||
|
} |
||||
|
|
||||
|
/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */ |
||||
|
.status-item { |
||||
|
flex-shrink: 0; |
||||
|
width: 20vw; |
||||
|
/* 关键：屏幕宽度的1/5，正好一排5个 */ |
||||
|
text-align: center; |
||||
|
padding: 20rpx 0; |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
||||
|
/* 点击反馈 */ |
||||
|
-webkit-tap-highlight-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.status-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #666666; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.4; |
||||
|
transition: color 0.2s, font-weight 0.2s; |
||||
|
} |
||||
|
|
||||
|
/* 激活状态样式 */ |
||||
|
.status-item.active .status-text { |
||||
|
color: #ff6b35; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 激活指示条（下划线） */ |
||||
|
.status-item.active::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 40rpx; |
||||
|
height: 4rpx; |
||||
|
background-color: #ff6b35; |
||||
|
border-radius: 2rpx; |
||||
|
transition: width 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.box1 { |
||||
|
width: 95%; |
||||
|
margin: 20rpx auto; |
||||
|
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx 20rpx 0; |
||||
|
} |
||||
|
.btn{ |
||||
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
||||
|
padding:0 10rpx; |
||||
|
height: 50rpx; |
||||
|
border-radius: 14rpx; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 700; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.pinzi{ |
||||
|
margin: 20rpx 0; |
||||
|
background: linear-gradient(90deg, #FF4500, #FFA07A); |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 10rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.guize-list { |
||||
|
width: 100%; |
||||
|
padding: 20rpx; |
||||
|
overflow: scroll; |
||||
|
background: #fff; |
||||
|
max-height: 1000rpx; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
.pt-title{ |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 700; |
||||
|
color: #777; |
||||
|
} |
||||
|
.dingdan{ |
||||
|
border-top: 1px solid #eee; |
||||
|
} |
||||
|
.uni-popup__wrapper{ |
||||
|
border-radius: 20rpx !important; |
||||
|
} |
||||
|
.pituan-text{ |
||||
|
flex:1; |
||||
|
text-align:right; |
||||
|
padding-right:20rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue