You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
19 KiB
582 lines
19 KiB
<template>
|
|
<view>
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar>
|
|
<view class="status-area flex-row-center-start">
|
|
<image class="flex-base" style="width: 40rpx; height: 40rpx; margin-right: 16rpx" src="/static/imgs/order/status-icon.png"></image>
|
|
<text style="font-size: 30rpx; color: #ffffff">{{ statusImg[orderInfo.status] }}</text>
|
|
</view>
|
|
<view class="address-area">
|
|
<view class="flex-row-start-start" style="padding: 24rpx 0 40rpx">
|
|
<image class="flex-base" style="width: 100rpx; height: 100rpx; margin-right: 20rpx" src="/static/imgs/order/customer-default.png"></image>
|
|
<view class="flex-col-start-start">
|
|
<text style="font-size: 30rpx; color: #333333; font-weight: 600">{{ orderInfo.customerEnterpriseName }}</text>
|
|
<text style="font-size: 26rpx; color: #333333; margin-top: 26rpx">
|
|
联系人: {{ `${orderInfo.deliveryAddress.receiver || '-'} ${orderInfo.deliveryAddress.receiverMobile || '-'}` }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row-start-start footer">
|
|
<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image>
|
|
<text style="font-size: 26rpx; color: #333333; word-break: break-all">{{ transformAddress(orderInfo.deliveryAddress) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="order-area" v-for="(supplierOrder, index) in orderInfo.supplierOrder" :key="supplierOrder.supplierOrderId">
|
|
<view class="flex-row-center-space header">
|
|
<text style="font-size: 32rpx; font-weight: 600">{{ supplierOrder.supplierEnterpriseName }}</text>
|
|
<view>
|
|
<!-- 微信支付待付款 -->
|
|
<view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_PAY" class="button-item" @click="confirmWxPay(supplierOrder.mallSupplierId)">
|
|
去付款
|
|
</view>
|
|
<!-- 待收货展示 -->
|
|
<view v-else-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_RECEIVE" class="button-item" @click="confirmReceive(supplierOrder)">
|
|
确认收货
|
|
</view>
|
|
<!-- 待借款展示 -->
|
|
<view v-else-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_LOAN" class="button-item" @click="goFsPage()">去借款</view>
|
|
<!-- 飞算支付且待还款状态 -->
|
|
<view
|
|
v-else-if="orderInfo.paymentMethod == paymentMethodEnum.FLY_PAY && supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_REPAY"
|
|
class="button-item"
|
|
@click="goFsPage()"
|
|
>
|
|
去还款
|
|
</view>
|
|
<text v-else style="font-size: 30rpx; color: #ff5368; font-weight: 600">{{ supplierOrderStatusMap[supplierOrder.status] }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-for="order in supplierOrder.orderItems" :key="order.productId">
|
|
<view style="background-color: #fff; padding-bottom: 20rpx">
|
|
<view class="order-header flex-row-start-space">
|
|
<text style="font-size: 30rpx; font-weight: 600">
|
|
{{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }}
|
|
</text>
|
|
</view>
|
|
<view class="order-row flex-row-center-space">
|
|
<text>重量(吨):</text>
|
|
<text>{{ order.buyTon }}</text>
|
|
</view>
|
|
<view class="order-row flex-row-center-space">
|
|
<text>单价(元/吨):</text>
|
|
<text>{{ order.unitPrice }}</text>
|
|
</view>
|
|
<view class="order-row flex-row-center-space">
|
|
<text>小计(元):</text>
|
|
<text>{{ order.subtotal }}</text>
|
|
</view>
|
|
<view class="order-row flex-row-center-space" style="margin: 0">
|
|
<text>备注信息:{{ order.remark }}</text>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 24rpx 10rpx">
|
|
<uni-steps
|
|
:options="transformStep(order.outboundProcessList, order.pieceQuantity)"
|
|
active-color="#1890FF"
|
|
:active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length - 1 : -1"
|
|
></uni-steps>
|
|
</view>
|
|
</view>
|
|
<!-- 送货凭证 -->
|
|
<view v-if="showSendImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_send`) ? '' : 'height:88rpx;'">
|
|
<view class="header flex-row-center-space">
|
|
<text style="font-size: 28rpx; font-weight: 600">送货凭证</text>
|
|
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_send`)">
|
|
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_send`) ? '收起' : '展开' }}</text>
|
|
<uni-icons :type="showList.includes(`${index}_send`) ? 'top' : 'bottom'" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="imgs flex-row-start-start">
|
|
<view v-for="item in supplierOrder.proofDelivery" :key="item.id" class="upload_img">
|
|
<image style="width: 120rpx; height: 120rpx" :src="item.imgUrl"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 收货凭证 -->
|
|
<view v-if="showReceiveImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_receive`) ? '' : 'height:88rpx;'">
|
|
<view class="header flex-row-center-space">
|
|
<text style="font-size: 28rpx; font-weight: 600">收货凭证</text>
|
|
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_receive`)">
|
|
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_receive`) ? '收起' : '展开' }}</text>
|
|
<uni-icons :type="showList.includes(`${index}_receive`) ? 'top' : 'bottom'" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="imgs flex-row-start-start">
|
|
<view v-for="(item, index) in supplierOrder.proofReceipt" :key="index" class="upload_img">
|
|
<uni-icons v-show="showUploadBtn(supplierOrder.status)" type="clear" size="16" class="close-icon" @click="deleteVoucher(item.id)"></uni-icons>
|
|
<image style="width: 120rpx; height: 120rpx" :src="item.imgUrl"></image>
|
|
</view>
|
|
<view v-show="showUploadBtn(supplierOrder.status)" class="default-upload" @click="uploadVoucher(supplierOrder.supplierOrderId)">
|
|
<image src="/static/imgs/order/camera.png" class="icon"></image>
|
|
<text style="font-size: 26rpx; color: #4c4a58">上传凭证</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fee flex-row-center-space">
|
|
<text style="font-size: 28rpx; color: #555555">其他费用: ￥{{ orderInfo.otherFee || 0 }}</text>
|
|
<view class="flex-row-center-end">
|
|
<text style="font-size: 28rpx; color: #555555">合计:</text>
|
|
<text style="font-size: 40rpx; color: #f5222d; font-weight: 600">￥{{ orderInfo.totalOfferPrice || 0 }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="order-footer">
|
|
<view class="flex-row-center-space order-row">
|
|
<text class="label">订单编号</text>
|
|
<view class="flex-row-center-end value">
|
|
<text>{{ orderInfo.orderId }}</text>
|
|
<text style="color: #007aff; margin-left: 8rpx" @click="clip(orderInfo.orderId)">复制</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row-center-space order-row">
|
|
<text class="label">下单时间</text>
|
|
<text class="value">{{ orderInfo.createTime }}</text>
|
|
</view>
|
|
<view class="flex-row-center-space order-row">
|
|
<text class="label">交货时间</text>
|
|
<text class="value">{{ orderInfo.receivedTime }}</text>
|
|
</view>
|
|
<view class="flex-row-center-space order-row" style="border: none">
|
|
<text class="label">支付方式</text>
|
|
<text class="value">{{ paymentMethodMap[orderInfo.paymentMethod] || '-' }}</text>
|
|
</view>
|
|
<view class="flex-row-center-space order-row" style="border: none">
|
|
<text class="label">是否开票</text>
|
|
<text class="value">{{ invoiceStatusMap[orderInfo.invoiceOrNot] || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
<qn-footer fixed height="120rpx">
|
|
<view class="flex-row-center-end" style="padding: 0 32rpx">
|
|
<view class="button" @click="viewContract">查看合同</view>
|
|
</view>
|
|
</qn-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2, back, uploadImage } from '@/utils/hook.js'
|
|
import { getClientOrderInfo, clientUploadVoucher, clientDeleteVoucher, clientConfirmOrder, getReciptCode } from '@/apis/orderApi.js'
|
|
import { transformFileToImg, getFeisuanUrl } from '@/apis/commonApi.js'
|
|
import { orderStatusEnum, supplierOrderStatusMap, supplierOrderStatusEnum, paymentMethodMap, paymentMethodEnum, invoiceStatusMap } from '@/enums/index.js'
|
|
const statusImg = {
|
|
[orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认',
|
|
[orderStatusEnum.ORDERED]: '已下单',
|
|
[orderStatusEnum.FINISHED]: '已完成',
|
|
[orderStatusEnum.CANCELED]: '已取消'
|
|
}
|
|
const showVoucherStatus = [
|
|
supplierOrderStatusEnum.WAIT_RECEIVE,
|
|
supplierOrderStatusEnum.WAIT_CLIENT_LOAN,
|
|
supplierOrderStatusEnum.PAYING,
|
|
supplierOrderStatusEnum.WAIT_CLIENT_PAY,
|
|
supplierOrderStatusEnum.PAY_FAIL,
|
|
supplierOrderStatusEnum.FINISHED,
|
|
supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
|
|
supplierOrderStatusEnum.REPAYING,
|
|
supplierOrderStatusEnum.CANCELED
|
|
]
|
|
const showUploadStatus = [
|
|
supplierOrderStatusEnum.FINISHED,
|
|
supplierOrderStatusEnum.WAIT_CLIENT_REPAY,
|
|
supplierOrderStatusEnum.REPAYING,
|
|
supplierOrderStatusEnum.CANCELED
|
|
]
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderInfo: {
|
|
deliveryAddress: {},
|
|
supplierOrder: []
|
|
},
|
|
statusImg,
|
|
supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap),
|
|
paymentMethodMap: Object.freeze(paymentMethodMap),
|
|
supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum),
|
|
paymentMethodEnum: Object.freeze(paymentMethodEnum),
|
|
invoiceStatusMap: Object.freeze(invoiceStatusMap),
|
|
showList: []
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (option.orderId) {
|
|
this.init(option.orderId)
|
|
} else {
|
|
uni.showToast({
|
|
title: '订单信息错误',
|
|
icon: 'error',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
back()
|
|
}, 2000)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
back,
|
|
init(orderId) {
|
|
getClientOrderInfo({
|
|
customerOrderId: orderId
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.orderInfo = res
|
|
}
|
|
})
|
|
},
|
|
transformAddress(address) {
|
|
let res = ''
|
|
if (address.provinceName) {
|
|
res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}`
|
|
}
|
|
return res
|
|
},
|
|
// 生成步骤条
|
|
transformStep(list, quantity) {
|
|
// 分切 出库 完成
|
|
let step1 = [],
|
|
step2 = [],
|
|
step3 = []
|
|
// 出库数量
|
|
let outboundQuantity = 0
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.userName && item.userName.length > 3) {
|
|
item.userName = item.userName.substr(0, 2) + '...'
|
|
}
|
|
if (item.status == '30301') {
|
|
step1.push({
|
|
title: '分切',
|
|
desc: item.userName + '\n\r' + item.createTime
|
|
})
|
|
} else if (item.status == '30302') {
|
|
step2.push({
|
|
title: '出库',
|
|
desc: item.userName + ' ' + item.quantity + '\n\r' + item.createTime
|
|
})
|
|
outboundQuantity += item.quantity
|
|
} else if (item.status == '30303') {
|
|
step3.push({
|
|
title: '完成',
|
|
desc: '已完成'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
if (step1.length == 0) {
|
|
step1.push({
|
|
title: '分切',
|
|
desc: '未完成'
|
|
})
|
|
}
|
|
if (step2.length == 0) {
|
|
step2.push({
|
|
title: '出库',
|
|
desc: '未完成'
|
|
})
|
|
} else if (outboundQuantity < quantity) {
|
|
// 判断是否出库完成
|
|
step2.push({
|
|
title: '出库',
|
|
desc: '未完成'
|
|
})
|
|
}
|
|
if (step3.length == 0) {
|
|
step3.push({
|
|
title: '完成',
|
|
desc: '未完成'
|
|
})
|
|
}
|
|
return [...step1, ...step2, ...step3]
|
|
},
|
|
changeShowIndex(index) {
|
|
let target = this.showList.indexOf(index)
|
|
if (target > -1) {
|
|
this.showList.splice(target, 1)
|
|
} else {
|
|
this.showList.push(index)
|
|
}
|
|
},
|
|
// 根据状态是否展示送货凭证
|
|
showSendImgs(status) {
|
|
return showVoucherStatus.includes(status)
|
|
},
|
|
// 根据状态是否展示收货凭证
|
|
showReceiveImgs(status) {
|
|
return showVoucherStatus.includes(status)
|
|
},
|
|
// 根据状态是否展示上传按钮
|
|
showUploadBtn(status) {
|
|
return !showUploadStatus.includes(status)
|
|
},
|
|
// 去借款
|
|
goFsPage() {
|
|
getFeisuanUrl().then((res) => {
|
|
if (res) {
|
|
// #ifdef APP-PLUS
|
|
go2('page-view', {
|
|
title: '飞算申请',
|
|
url: encodeURIComponent(res)
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
window ? (window.location.href = res) : ''
|
|
// #endif
|
|
}
|
|
})
|
|
},
|
|
// 确认收货
|
|
confirmReceive(order) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认收货后，将不能修改，确认收货吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
clientConfirmOrder({
|
|
supplierOrderId: order.supplierOrderId
|
|
}).then((success) => {
|
|
if (success) {
|
|
uni.showToast({
|
|
title: '确认收货成功',
|
|
icon: 'success',
|
|
success: () => {
|
|
this.init(this.orderInfo.orderId)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 调起供应商二维码微信支付
|
|
confirmWxPay(mallSupplierId) {
|
|
getReciptCode({ mallSupplierId }).then((res) => {
|
|
if (res.payeeCodeUrl) {
|
|
uni.previewImage({
|
|
urls: [res.payeeCodeUrl],
|
|
current: res.payeeCodeUrl
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂无二维码,请联系供应商',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
clip(content) {
|
|
uni.setClipboardData({
|
|
data: content,
|
|
success: function () {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 删除收货凭证
|
|
deleteVoucher(id) {
|
|
clientDeleteVoucher({ id }).then((res) => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.init(this.orderInfo.orderId)
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 上传收货凭证
|
|
uploadVoucher(supplierOrderId) {
|
|
uploadImage(['album'], 5)
|
|
.then((urls) => {
|
|
if (urls) {
|
|
clientUploadVoucher({
|
|
supplierOrderId,
|
|
proofDeliveryUrl: urls
|
|
}).then((res) => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '上传成功',
|
|
icon: 'success',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.init(this.orderInfo.orderId)
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.log('上传失败:', e)
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'fail'
|
|
})
|
|
})
|
|
},
|
|
// 查看合同
|
|
viewContract() {
|
|
let urls = this.orderInfo.contractUrls
|
|
if (urls && urls.length > 0) {
|
|
let promises = []
|
|
urls.forEach((item) => {
|
|
promises.push(transformFileToImg({ fileUrl: item }))
|
|
})
|
|
Promise.all(promises).then((res) => {
|
|
let list = []
|
|
res.forEach((item) => {
|
|
list.push(item.imgUrl)
|
|
})
|
|
uni.previewImage({
|
|
urls: list,
|
|
current: list[0]
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.status-area {
|
|
padding: 24rpx 32rpx;
|
|
width: 750rpx;
|
|
background-image: linear-gradient(90deg, #ff4d2e 6%, #ff952f 100%);
|
|
}
|
|
.address-area {
|
|
padding: 0 32rpx;
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
.footer {
|
|
padding: 24rpx 0;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
}
|
|
.order-area {
|
|
.header {
|
|
padding: 24rpx 32rpx;
|
|
word-break: break-all;
|
|
background: #e5f1ff;
|
|
width: 750rpx;
|
|
}
|
|
.order-header {
|
|
padding: 24rpx 32rpx;
|
|
word-break: break-all;
|
|
background: #fff;
|
|
width: 750rpx;
|
|
border-bottom: 2rpx dashed #d8d8d8;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.order-row {
|
|
width: 750rpx;
|
|
padding: 0 32rpx;
|
|
margin-bottom: 18rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
}
|
|
.footer {
|
|
background-color: #ffffff;
|
|
width: 750rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
.header {
|
|
padding: 24rpx 32rpx;
|
|
background-color: #fff;
|
|
}
|
|
.imgs {
|
|
padding: 16rpx 32rpx 32rpx;
|
|
min-height: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
.fee {
|
|
padding: 24rpx 32rpx;
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
margin: 20rpx 0;
|
|
}
|
|
.order-footer {
|
|
padding: 0rpx 32rpx;
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
.order-row {
|
|
padding: 24rpx 0;
|
|
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.button {
|
|
height: 88rpx;
|
|
width: 220rpx;
|
|
background-color: #fff;
|
|
line-height: 84rpx;
|
|
border: 1px solid #007aff;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #007aff;
|
|
}
|
|
.button-item {
|
|
padding: 0rpx 24rpx;
|
|
height: 46rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #007aff;
|
|
border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
.default-upload {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #dcdee0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
.upload_img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #dcdee0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-right: 12rpx;
|
|
overflow: hidden;
|
|
.close-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
</style>
|