|
|
|
@ -16,6 +16,10 @@ onLoad((options) => {
|
|
|
|
|
const isLoading = ref(false)
|
|
|
|
|
// 获取订单详情
|
|
|
|
|
const order = ref({})
|
|
|
|
|
const isOrderTypeSH = ref(false)
|
|
|
|
|
const isOderTypeTime = ref(false)
|
|
|
|
|
const isOderTypeDZ = ref(false)
|
|
|
|
|
|
|
|
|
|
const getMemberOrderByIdData = async (orderId) => {
|
|
|
|
|
const params = {
|
|
|
|
|
orderId: orderId,
|
|
|
|
@ -25,16 +29,33 @@ const getMemberOrderByIdData = async (orderId) => {
|
|
|
|
|
isLoading.value = true
|
|
|
|
|
const res = await getOrderDetailAPI(params)
|
|
|
|
|
const data = res.data
|
|
|
|
|
const str = data.appointmentTimeStart.slice(0, 10)
|
|
|
|
|
const start = data.appointmentTimeStart.slice(11, 16)
|
|
|
|
|
const end = data.appointmentTimeEnd.slice(11, 16)
|
|
|
|
|
data.appointmentTime = str + ' ' + start + '-' + end
|
|
|
|
|
|
|
|
|
|
data.orderDetails.forEach((q) => {
|
|
|
|
|
const arr = JSON.parse(q.product.photo)
|
|
|
|
|
const imgUrl = serviceDomain + arr[0].url
|
|
|
|
|
q.imgUrl = imgUrl
|
|
|
|
|
})
|
|
|
|
|
// 预约散户下单
|
|
|
|
|
isOrderTypeSH.value = data.orderType?.code == '520193382480351557' || false
|
|
|
|
|
// 定时下单
|
|
|
|
|
isOderTypeTime.value = data.orderType?.code == '520193458267230533' || false
|
|
|
|
|
// 到站下单
|
|
|
|
|
isOderTypeDZ.value = data.orderType?.code == '520193532170867013' || false
|
|
|
|
|
|
|
|
|
|
if (isOrderTypeSH.value) {
|
|
|
|
|
const str = data.appointmentTimeStart?.slice(0, 10)
|
|
|
|
|
const start = data.appointmentTimeStart?.slice(11, 16)
|
|
|
|
|
const end = data.appointmentTimeEnd?.slice(11, 16)
|
|
|
|
|
data.appointmentTime = str + ' ' + start + '-' + end
|
|
|
|
|
|
|
|
|
|
data.orderDetails?.forEach((q) => {
|
|
|
|
|
const arr = JSON.parse(q.product.photo)
|
|
|
|
|
const imgUrl = serviceDomain + arr[0].url
|
|
|
|
|
q.imgUrl = imgUrl
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 定时回收
|
|
|
|
|
if (isOderTypeTime.value) {
|
|
|
|
|
const arr = data.housingEstateInfo.images && JSON.parse(data.housingEstateInfo.images) || []
|
|
|
|
|
const imgUrl = serviceDomain + arr[0]?.url
|
|
|
|
|
data.housingEstateInfo.imgUrl = imgUrl
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
order.value = data
|
|
|
|
|
isLoading.value = false
|
|
|
|
@ -45,45 +66,142 @@ const getMemberOrderByIdData = async (orderId) => {
|
|
|
|
|
<template v-if="!isLoading">
|
|
|
|
|
<view class="order-detail">
|
|
|
|
|
<view class="status">
|
|
|
|
|
<view class="title">{{ order?.orderStatus?.desc }}</view>
|
|
|
|
|
<view class="title">订单状态:{{ order.orderStatus?.desc }}</view>
|
|
|
|
|
<view class="desc">订单类型:{{ order.orderType?.desc || '散户下单' }}</view>
|
|
|
|
|
<template
|
|
|
|
|
v-if="order.orderStatus?.code == '520192817293693253' || order.orderStatus?.code == '520192868833300805' || order.orderStatus?.code == '520192993311854917'">
|
|
|
|
|
<view class="time">预约时间:{{ order.appointmentTime }}</view>
|
|
|
|
|
<view class="action">
|
|
|
|
|
<view class="button cancle" @click="handleCancleOrder">取消订单</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module">
|
|
|
|
|
<view class="title">订单编号:{{ order.orderNumber }}</view>
|
|
|
|
|
<view class="order-details">
|
|
|
|
|
<view class="detail-item" v-for="item in order.orderDetails" :key="item.id">
|
|
|
|
|
<image class="img-url" :src="item.imgUrl"></image>
|
|
|
|
|
<view class="product-name">{{ item.product.name }}</view>
|
|
|
|
|
<template v-if="isOrderTypeSH">
|
|
|
|
|
<view class="module">
|
|
|
|
|
<view class="title">订单编号:{{ order.orderNumber }}</view>
|
|
|
|
|
<view class="detail-title">回收品类:</view>
|
|
|
|
|
<view class="order-details">
|
|
|
|
|
<view class="detail-item" v-for="item in order.orderDetails" :key="item.id">
|
|
|
|
|
<view class="product-info">
|
|
|
|
|
<image class="img-url" :src="item.imgUrl"></image>
|
|
|
|
|
<view class="name">{{ item.product.name }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<template v-if="order.orderStatus.code == '520193049964319045'">
|
|
|
|
|
<view class="recovery-price">实际价格:{{ item.actualRecoveryPrice }}元</view>
|
|
|
|
|
<view class="recovery-weight">实际重量:{{ item.productActualWeight }}千克</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="predict-weight">预估重量:{{ order.predictWeight?.desc }}</view>
|
|
|
|
|
<template v-if="order.recyclerInfo">
|
|
|
|
|
<view class="staffs-name">
|
|
|
|
|
回收员:{{ order.recyclerInfo?.staffsName }}</view>
|
|
|
|
|
<view class="staffs-phone">回收员手机号:{{ order.recyclerInfo?.mobilePhone }}</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<view class="predict-weight">预估重量:{{ order.predictWeight?.desc }}</view>
|
|
|
|
|
<view class="client-name">下单人员:{{ order.clientName }}</view>
|
|
|
|
|
<view class="client-phone">下单人员手机号:{{ order.clientMobile }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module info">
|
|
|
|
|
<view class="title">取件信息</view>
|
|
|
|
|
<view class="module info">
|
|
|
|
|
<view class="title">取件信息</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">取件时间:</view>
|
|
|
|
|
<view class="val">{{ order.appointmentTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item" v-if="order.arrivalTime">
|
|
|
|
|
<view class="label">到达时间:</view>
|
|
|
|
|
<view class="val">{{ order.arrivalTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">取件地址:</view>
|
|
|
|
|
<view class="val">{{ order.addressInfo?.receiveStreet }} {{ order.addressInfo?.receiveHouseNumber }}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">下单时间:</view>
|
|
|
|
|
<view class="val">{{ order.creatorTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item" v-if="order.completeTime">
|
|
|
|
|
<view class="label">完成时间:</view>
|
|
|
|
|
<view class="val">{{ order.completeTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">备注:</view>
|
|
|
|
|
<view class="val">{{ order.remark }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="isOderTypeTime">
|
|
|
|
|
<view class="module info">
|
|
|
|
|
<view class="title">小区信息</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">名字:</view>
|
|
|
|
|
<view class="val">{{ order.housingEstateInfo.name }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">地址:</view>
|
|
|
|
|
<view class="val">{{ order.housingEstateInfo.address }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">回收时间:</view>
|
|
|
|
|
<view class="val">{{ order.housingEstateInfo.appointmentTimeStart }} -
|
|
|
|
|
{{ order.housingEstateInfo.appointmentTimeEnd }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">下单时间:</view>
|
|
|
|
|
<view class="val">{{ order.housingEstateInfo.creatorTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item" v-if="order.housingEstateInfo.completeTime">
|
|
|
|
|
<view class="label">完成时间:</view>
|
|
|
|
|
<view class="val">{{ order.housingEstateInfo.completeTime }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">备注:</view>
|
|
|
|
|
<view class="val">{{ order.remark }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<view class="module info" v-if="order.recyclerInfo">
|
|
|
|
|
<view class="title">回收员信息</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">取件时间</view>
|
|
|
|
|
<view class="val">{{ order.appointmentTime }}</view>
|
|
|
|
|
<view class="label">头像:</view>
|
|
|
|
|
<image class="img-url" :src="order.recyclerInfo.imgUrl"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">取件地址</view>
|
|
|
|
|
<view class="val">{{ order.addressInfo?.receiveStreet }} {{ order.addressInfo?.receiveHouseNumber }}</view>
|
|
|
|
|
<view class="label">性别:</view>
|
|
|
|
|
<view class="val">{{ order.recyclerInfo.gender ? '男' : '女' }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">下单时间</view>
|
|
|
|
|
<view class="val">{{ order.creatorTime }}</view>
|
|
|
|
|
<view class="label">名字:</view>
|
|
|
|
|
<view class="val">{{ order.recyclerInfo.staffsName }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">取件时间</view>
|
|
|
|
|
<view class="val">{{ order.receiveTime }}</view>
|
|
|
|
|
<view class="label">手机:</view>
|
|
|
|
|
<view class="val">{{ order.recyclerInfo.mobilePhone }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="module info" v-if="order.recycleStationInfo">
|
|
|
|
|
<view class="title">回收站信息</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">完成时间</view>
|
|
|
|
|
<view class="val">{{ order.completeTime }}</view>
|
|
|
|
|
<view class="label">站点图片:</view>
|
|
|
|
|
<image class="img-url" :src="order.recycleStationInfo.imgUrl"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">备注</view>
|
|
|
|
|
<view class="val">{{ order.remark }}</view>
|
|
|
|
|
<view class="label">名称:</view>
|
|
|
|
|
<view class="val">{{ order.recycleStationInfo.stationName }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">联系人:</view>
|
|
|
|
|
<view class="val">{{ order.recycleStationInfo.contactPerson }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="label">营业时间:</view>
|
|
|
|
|
<view class="val">{{ order.recycleStationInfo.appointmentTimeStart + ' - ' +
|
|
|
|
|
order.recycleStationInfo.appointmentTimeEnd }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
@ -107,24 +225,36 @@ page {
|
|
|
|
|
margin-bottom: 100rpx;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
scrollbar-width: none;
|
|
|
|
|
|
|
|
|
|
.order-detail {
|
|
|
|
|
.status {
|
|
|
|
|
margin: 40rpx 0;
|
|
|
|
|
padding: 40rpx 0;
|
|
|
|
|
background: linear-gradient(180deg, #BDD3FF -3%, #FAFAFD 21%);
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 42rpx;
|
|
|
|
|
color: #0D0D26;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
|
margin: 10rpx 0;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #356899;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #999A9F;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action {
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
@ -133,6 +263,7 @@ page {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #0D0D26;
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
|
|
|
|
&.cancle {
|
|
|
|
|
border: 2rpx solid #E30000;
|
|
|
|
|
color: #E30000;
|
|
|
|
@ -140,67 +271,114 @@ page {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.module {
|
|
|
|
|
margin: 20rpx;
|
|
|
|
|
padding: 20rpx 20rpx;
|
|
|
|
|
min-height: 300rpx;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
padding: 10rpx;
|
|
|
|
|
border-bottom: 2rpx solid #F2F2F2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.detail-title {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.order-details {
|
|
|
|
|
margin: 20rpx;
|
|
|
|
|
|
|
|
|
|
.detail-item {
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.img-url {
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
margin: 30rpx 0; // display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
|
|
|
|
.product-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.img-url {
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.address {}
|
|
|
|
|
|
|
|
|
|
.recovery-price {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
margin: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
.product-name {
|
|
|
|
|
|
|
|
|
|
.recovery-weight {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.predict-weight {
|
|
|
|
|
margin: 40rpx 0 20rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
}
|
|
|
|
|
.client-name {
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
|
|
|
|
|
.staffs-name {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
}
|
|
|
|
|
.client-phone {
|
|
|
|
|
|
|
|
|
|
.staffs-phone {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.info {
|
|
|
|
|
.title {
|
|
|
|
|
color: #0D0D26;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
border-bottom: 2rpx solid #F2F2F2;
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img-url {
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
width: 160rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.val {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|