root
/
school-peisong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
tianyi 2 weeks ago
parent
9f089c96fb
commit
e9e5e20df4
1 changed files with 340 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 365
      components/tab-bar/delivery.vue

365
components/tab-bar/delivery.vue
View File

@ -21,46 +21,66 @@
</view> </view>
<scroll-view @scrolltolower="onReachPage" scroll-y style="width:100%;height: 1240rpx;overflow: scroll;"> <scroll-view @scrolltolower="onReachPage" scroll-y style="width:100%;height: 1240rpx;overflow: scroll;">
<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index"> <view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index">
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;"> <view class="order-head">
<view style="display: flex;padding-right: 20rpx;" v-if="item.numberCode"> <view class="order-main">
{{'#' + item.numberCode}} <view class="order-code" v-if="item.numberCode">{{'#' + item.numberCode}}</view>
<view class="order-time">{{item.createTime | formatISOTime}}</view>
</view> </view>
<view style="flex: 1;display: flex;"> <view class="order-status">
{{item.createTime | formatISOTime}} {{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?'已售后':""}}
<!-- <text>已退款</text> -->
</view> </view>
<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 == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}} <view class="delivery-info-row" v-if="item.deliveryType == 1 && (isAppointmentDelivery(item) || getDeliveryMustFinishTime(item))">
<view class="appointment-delivery-tag" v-if="isAppointmentDelivery(item)">预约配送</view>
<view class="delivery-required-time" v-if="getDeliveryMustFinishTime(item)">
要求送达：{{getDeliveryMustFinishTime(item) | formatISOTime}}
</view> </view>
</view> </view>
<view style="height: 120rpx;padding-top: 20rpx;"> <view class="goods-box">
<view v-if="item.status == 3" style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;"> <view class="goods-title">
商品 <text>共<text>{{item.goodsNum}}</text>件</text> <text>商品</text>
<text class="goods-count" :class="{ 'goods-count-important': item.goodsNum > 1 }">共{{item.goodsNum}}件</text>
</view> </view>
<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index"> <view class="goods-row" v-for="(item1,index1) in item.goodsList" :key="index1">
<view style="flex: 1;"> <view class="goods-name">
{{item1.productName}} <view>{{item1.productName}}</view>
<view class="goods-spec" v-if="item1.specs">{{item1.specs | delNode}}</view>
</view> </view>
<view style="width: 100rpx;"> <view class="goods-quantity" :class="{ 'goods-quantity-important': item1.quantity > 1 }">
{{'X' + item1.quantity}} {{'X' + item1.quantity}}
</view> </view>
<view> <view class="goods-price">
{{'￥'+ item1.price}} {{'￥'+ item1.price}}
</view> </view>
</view> </view>
</view> </view>
<view @tap.stop="mealServing(item)" style="height: 80rpx;border-top: 1px solid #eee;display: flex;"> <view class="order-fee-row" v-if="shouldShowPackageFee(item)">
<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;"> <text>餐盒费</text>
{{item.deliveryType == 1?'配送':item.isPack == 1?'自取-打包':item.isPack == 0?'自取-堂食':'自取'}} <text>￥{{formatMoney(item.packageFee)}}</text>
</view>
<view class="order-total-row" v-if="shouldShowPackageFee(item)">
<text>合计</text>
<text>￥{{getOrderTotalAmount(item)}}</text>
</view>
<view class="remark-box" v-if="getOrderRemark(item)">
<view class="remark-label">备注</view>
<view class="remark-content">{{getOrderRemark(item)}}</view>
</view>
<view class="order-footer">
<view class="delivery-tag" @tap.stop="tanchuang(item.deliveryType)">
{{(item.deliveryType == 1 && item.orderType != 3)?'普通配送单':(item.deliveryType == 1 && item.orderType == 3)?'面对面配送单':(item.isPack == 1 && item.otherOrder == null)?'自取-打包':(item.isPack == 0 && item.otherOrder == null)?'自取-堂食':'到店消费'}}
</view> </view>
<view v-if="item.orderType != 1" @tap.stop="getGroupOrders(item.id)" class="pinzi"> <view v-if="item.orderType != 1" @tap.stop="getGroupOrders(item)" class="pinzi btn meal-btn">
拼 拼团详情
</view> </view>
<view style="flex: 1;"></view> <view class="footer-space"></view>
<view v-if="currentIndex == 13" style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));width: 100rpx;height: 60rpx;border-radius: 14rpx;line-height: 60rpx;text-align: center;font-weight: 700;margin-top: 10rpx;"> <view @tap.stop="mealServing(item)" v-if="canShowMealServingButton(item)" class="btn meal-btn">
已出餐 出餐
</view> </view>
</view> </view>
<view class="face-delivery-tip" v-if="isFaceDeliveryOrder(item)">
面对面配送单需要一块出餐--点击拼团详情按钮并出餐
</view>
</view> </view>
<view style="width: 100%;height: 150rpx;"></view> <view style="width: 100%;height: 150rpx;"></view>
</scroll-view> </scroll-view>
@ -154,6 +174,11 @@
value: 10, value: 10,
checked: true checked: true
}, },
{
name: '待配送接单',
value: 3,
checked: false
},
{ {
name: '待消费', name: '待消费',
value: 2, value: 2,
@ -207,6 +232,16 @@
const minutes = date.getMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0'); const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
delNode(data) {
if (data == null || data === '') return '';
let str = '';
if (typeof data === 'object') {
str = JSON.stringify(data);
} else {
str = String(data);
}
return str.replace(/[{}"]/g, '');
} }
}, },
methods: { methods: {
@ -217,6 +252,47 @@
} }
this.getList() this.getList()
}, },
isAppointmentDelivery(item) {
const deliveryInfo = this.getDeliveryInfo(item)
return item && item.deliveryType == 1 && (item.appointmentDelivery == 1 || deliveryInfo.appointmentDelivery == 1)
},
getDeliveryInfo(item) {
return item && item.deliveryInfo ? item.deliveryInfo : {}
},
getDeliveryMustFinishTime(item) {
if (!item || item.deliveryType != 1) return ''
const deliveryInfo = this.getDeliveryInfo(item)
return deliveryInfo.mustFinishTime || item.mustFinishTime || ''
},
shouldShowPackageFee(order) {
return !!order && (order.deliveryType == 1 || order.isPack == 1)
},
formatMoney(value) {
return this.toNumber(value).toFixed(2)
},
toNumber(value) {
let amount = parseFloat(value)
return isNaN(amount) ? 0 : amount
},
getOrderRemark(item) {
if (!item) return ''
return item.remark || (item.mallOrder && item.mallOrder.remark) || ''
},
canShowMealServingButton(item) {
if (!item || item.status != 3 || !this.isEmptyShopMakeTime(item.shopMakeTime)) return false
return item.deliveryType == 1 || (item.deliveryType == 2 && item.userRequireMake == 1)
},
isFaceDeliveryOrder(item) {
return !!item && item.deliveryType == 1 && item.orderType == 3
},
getOrderTotalAmount(order) {
if (!order) return this.formatMoney(0)
const goodsList = Array.isArray(order.goodsList) ? order.goodsList : []
const goodsAmount = goodsList.reduce((total, goods) => {
return total + this.toNumber(goods.price) * this.toNumber(goods.quantity)
}, 0)
return this.formatMoney(goodsAmount + this.toNumber(order.packageFee))
},
onReachPage(){ onReachPage(){
if (this.searchForm.pageNum >= this.totalPages) return; if (this.searchForm.pageNum >= this.totalPages) return;
this.searchForm.pageNum++; this.searchForm.pageNum++;
@ -434,16 +510,255 @@
border-radius: 20rpx; border-radius: 20rpx;
padding: 20rpx 20rpx 0; padding: 20rpx 20rpx 0;
} }
.order-head {
display: flex;
align-items: flex-start;
padding-bottom: 18rpx;
border-bottom: 1px solid #eef2ef;
}
.order-main {
flex: 1;
min-width: 0;
}
.order-code {
display: inline-block;
height: 42rpx;
line-height: 42rpx;
padding: 0 16rpx;
margin-bottom: 8rpx;
border-radius: 999rpx;
background: #00231C;
color: #E3FF96;
font-size: 28rpx;
font-weight: 700;
}
.order-time {
color: #7a8582;
font-size: 24rpx;
}
.order-status {
margin-left: 20rpx;
padding: 8rpx 16rpx;
border-radius: 999rpx;
background: rgba(255, 107, 53, 0.1);
color: #ff6b35;
font-size: 26rpx;
font-weight: 700;
white-space: nowrap;
}
.delivery-info-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12rpx;
padding: 16rpx 0 0;
}
.appointment-delivery-tag {
height: 44rpx;
line-height: 44rpx;
padding: 0 16rpx;
border-radius: 14rpx;
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, 0.16);
}
.delivery-required-time {
height: 44rpx;
line-height: 44rpx;
padding: 0 16rpx;
border-radius: 14rpx;
background: rgba(166, 255, 234, 0.36);
color: #0b6b5a;
font-size: 22rpx;
font-weight: 800;
}
.goods-box {
padding: 22rpx 0 16rpx;
}
.goods-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
font-size: 30rpx;
font-weight: 700;
}
.goods-count {
padding: 4rpx 14rpx;
border-radius: 999rpx;
background: #f1f5f2;
color: #52736b;
font-size: 24rpx;
font-weight: 700;
}
.goods-count-important {
background: linear-gradient(90deg, #FFE8D6, #FFF5E9);
color: #ff4d00;
}
.goods-row {
display: flex;
align-items: center;
min-height: 46rpx;
line-height: 1.35;
color: #253b35;
}
.goods-name {
flex: 1;
padding-right: 16rpx;
font-size: 26rpx;
}
.goods-spec {
margin-top: 4rpx;
color: #7a8582;
font-size: 22rpx;
line-height: 30rpx;
}
.goods-quantity {
width: 92rpx;
text-align: center;
color: #52736b;
font-weight: 700;
}
.goods-quantity-important {
display: flex;
justify-content: center;
align-items: center;
height: 42rpx;
border-radius: 14rpx;
background: linear-gradient(90deg, #FF4500, #FFA07A);
color: #fff;
font-size: 28rpx;
}
.goods-price {
width: 120rpx;
text-align: right;
color: #00231C;
font-weight: 700;
}
.order-fee-row {
display: flex;
justify-content: space-between;
margin: 0 0 10rpx;
padding-top: 16rpx;
border-top: 1px dashed #e4ebe7;
color: #52736b;
font-size: 24rpx;
font-weight: 700;
}
.order-total-row {
display: flex;
justify-content: space-between;
margin: 0 0 18rpx;
color: #00231C;
font-size: 30rpx;
font-weight: 900;
}
.remark-box {
display: flex;
margin: 0 0 18rpx;
padding: 18rpx;
border: 1px solid rgba(255, 107, 53, 0.22);
border-radius: 18rpx;
background: linear-gradient(90deg, rgba(255, 246, 235, 1), rgba(255, 251, 243, 1));
}
.remark-label {
flex-shrink: 0;
height: 40rpx;
line-height: 40rpx;
margin-right: 14rpx;
padding: 0 12rpx;
border-radius: 10rpx;
background: #ff6b35;
color: #fff;
font-size: 24rpx;
font-weight: 700;
}
.remark-content {
flex: 1;
color: #9a3d00;
font-size: 28rpx;
font-weight: 700;
line-height: 40rpx;
word-break: break-all;
}
.order-footer {
display: flex;
align-items: center;
min-height: 80rpx;
border-top: 1px solid #eef2ef;
}
.delivery-tag {
width: auto;
height: 44rpx;
line-height: 44rpx;
margin-right: 20rpx;
padding: 0 14rpx;
border-radius: 12rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
color: #00231C;
font-weight: 700;
}
.footer-space {
flex: 1;
}
.meal-btn {
margin: 0 0 0 20rpx;
}
.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{ .pinzi{
margin: 20rpx 0; margin: 20rpx 0;
background: linear-gradient(90deg, #FF4500, #FFA07A); background: linear-gradient(90deg, #FF4500, #FFA07A);
width: 40rpx; width: 120rpx;
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
text-align: center; text-align: center;
border-radius: 10rpx; border-radius: 10rpx;
color: #fff; color: #fff;
} }
.face-delivery-tip {
padding: 0 0 18rpx;
color: #ff2d2d;
font-size: 24rpx;
font-weight: 800;
line-height: 34rpx;
}
.guize-list { .guize-list {
width: 100%; width: 100%;
padding: 20rpx; padding: 20rpx;

Write Preview
Loading…
Cancel
Save