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.
541 lines
17 KiB
541 lines
17 KiB
<template>
|
|
<view>
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单确认"></uni-nav-bar>
|
|
<view class="address-area">
|
|
<view class="header">
|
|
<image class="img" src="/static/imgs/order/customer-default.png"></image>
|
|
<text class="text">{{ orderInfo.customerEnterpriseName }}</text>
|
|
</view>
|
|
<!-- 送货地址 -->
|
|
<view class="address-content" v-if="deliveryAddress.addressId" @click="go2('address-manage', { operation: 'select' })">
|
|
<view class="left">
|
|
<image style="width: 66rpx; height: 66rpx" src="/static/imgs/order/address-icon.png"></image>
|
|
<text style="font-size: 22rpx; margin-top: 8rpx; transform: scale(0.8)">送货至</text>
|
|
</view>
|
|
<view class="center">
|
|
<text style="font-size: 30rpx; font-weight: 600">{{ `${deliveryAddress.receiver} ${deliveryAddress.receiverMobile}` }}</text>
|
|
<text style="font-size: 28rpx; font-weight: 500; word-break: break-all; margin-top: 10rpx; line-height: 1.2">
|
|
{{
|
|
`${deliveryAddress.provinceName}${deliveryAddress.cityName}${deliveryAddress.districtName}${deliveryAddress.streetName}${deliveryAddress.detail}`
|
|
}}
|
|
</text>
|
|
</view>
|
|
<image class="right" src="/static/imgs/order/edit-address-icon.png"></image>
|
|
</view>
|
|
<view class="address-content" v-else @click="go2('address-manage', { operation: 'select' })">
|
|
<view class="left">
|
|
<image style="width: 66rpx; height: 66rpx" src="/static/imgs/order/address-icon.png"></image>
|
|
</view>
|
|
<view class="center">
|
|
<text style="font-size: 30rpx; font-weight: 400">请添加收货地址</text>
|
|
</view>
|
|
<image class="right" src="/static/imgs/order/right-arrow.png"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 商品信息区域 -->
|
|
<view class="order-area">
|
|
<view v-for="item in orderInfo.supplierOrder" :key="item.supplierOrderId">
|
|
<view class="header">
|
|
<text style="font-size: 32rpx; font-weight: 600">{{ item.supplierEnterpriseName }}</text>
|
|
</view>
|
|
<view v-for="order in item.orderItems" :key="order.supplierOderItemId">
|
|
<view class="order-header">
|
|
<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">
|
|
<text>重量(吨):</text>
|
|
<text>{{ order.buyTon }}</text>
|
|
</view>
|
|
<view class="order-row">
|
|
<text>单价(元/吨):</text>
|
|
<text>{{ order.unitPrice }}</text>
|
|
</view>
|
|
<view class="order-row">
|
|
<text>小计(元):</text>
|
|
<text>{{ order.subtotal }}</text>
|
|
</view>
|
|
<view class="order-row">
|
|
<text>其他费用(元):</text>
|
|
<text>{{ item.otherFee }}</text>
|
|
</view>
|
|
<view class="order-row">
|
|
<qn-easyinput
|
|
style="background-color: #f7f8fa; border-radius: 10rpx; padding: 8rpx 0rpx; font-size: 28rpx; color: #888888; height: 88rpx"
|
|
v-model="order.remark"
|
|
placeholder="请输入备注"
|
|
:inputBorder="false"
|
|
:maxlength="100"
|
|
></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 是否开票 -->
|
|
<view class="tax-area flex-row-center-space">
|
|
<text class="text">是否开票:</text>
|
|
<view style="width: 350rpx" class="flex-row-center-space">
|
|
<view class="flex-row-center-space" @click="selectInvoice(true)">
|
|
<image class="switch-icon" :src="isInvoice ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"></image>
|
|
<text class="text">开票</text>
|
|
</view>
|
|
<view class="flex-row-center-space" @click="selectInvoice(false)">
|
|
<image class="switch-icon" :src="!isInvoice ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"></image>
|
|
<text class="text">不开票</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 送货时间 -->
|
|
<view class="timer-area">
|
|
<text style="font-size: 30rpx; color: #000000">送货时间:</text>
|
|
<qn-datetime-picker v-model="orderInfo.receivedTime" type="datetime" :border="false"></qn-datetime-picker>
|
|
</view>
|
|
<!-- 支付方式 -->
|
|
<view class="pay-area">
|
|
<view class="pay-item">
|
|
<view class="left">
|
|
<image class="img" src="/static/imgs/order/month-pay-icon.png"></image>
|
|
<text style="font-size: 30rpx; color: #000000; margin: 0 16rpx">使用月结额度</text>
|
|
<text v-if="payMap['month'].isShow" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['month'].availableCreditLine }}</text>
|
|
</view>
|
|
<image
|
|
v-if="payMap['month'].isShow && payMap['month'].availableCreditLine > orderInfo.totalOfferPrice"
|
|
@click="selectPayMethod('month')"
|
|
class="img"
|
|
:src="currentPayType == 'month' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
|
|
></image>
|
|
<text v-if="!payMap['month'].isShow" style="font-size: 28rpx; color: #888888">待申请</text>
|
|
<text v-if="payMap['month'].isShow && payMap['month'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
|
|
余额不足
|
|
</text>
|
|
</view>
|
|
<view class="pay-item" style="border: none">
|
|
<view class="left">
|
|
<image class="img" src="/static/imgs/order/fs-pay-icon.png"></image>
|
|
<text style="font-size: 30rpx; color: #000000; margin: 0 16rpx">使用飞算资金</text>
|
|
<text v-if="payMap['fs'].isShow" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['fs'].availableCreditLine }}</text>
|
|
</view>
|
|
<image
|
|
v-if="payMap['fs'].isShow && payMap['fs'].availableCreditLine > orderInfo.totalOfferPrice"
|
|
@click="selectPayMethod('fs')"
|
|
class="img"
|
|
:src="currentPayType == 'fs' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
|
|
></image>
|
|
<text v-if="!payMap['fs'].isShow" style="font-size: 28rpx; color: #888888">待申请</text>
|
|
<text v-if="payMap['fs'].isShow && payMap['fs'].availableCreditLine < orderInfo.totalOfferPrice" style="font-size: 28rpx; color: #888888">
|
|
余额不足
|
|
</text>
|
|
</view>
|
|
<view class="pay-item" style="border: none">
|
|
<view class="left">
|
|
<image class="img" src="/static/imgs/order/wxpay-icon.png"></image>
|
|
<text style="font-size: 30rpx; color: #000000; margin: 0 16rpx">使用现款支付</text>
|
|
</view>
|
|
<image
|
|
@click="selectPayMethod('wxpay')"
|
|
class="img"
|
|
:src="currentPayType == 'wxpay' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<qn-footer fixed height="120rpx">
|
|
<view class="button-area">
|
|
<view class="text-line">
|
|
<text style="font-size: 28rpx">应付:</text>
|
|
<text style="font-size: 40rpx; color: #f5222d">￥{{ orderInfo.totalOfferPrice }}</text>
|
|
</view>
|
|
<view class="button" @click="submitOrder">确认下单</view>
|
|
</view>
|
|
</qn-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2, back, getCache } from '@/utils/hook.js'
|
|
import { getPreOrderInfo, getDefaultAddress, submitClientOrder, calcNotInvoiceOrderInfo } from '@/apis/orderApi'
|
|
import { getFsCredit, getMonthCredit } from '@/apis/commonApi'
|
|
import { isObject } from '@/utils/is'
|
|
import { invoiceStatusEnum, paymentMethodEnum } from '@/enums/index'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderInfo: {
|
|
customerEnterpriseName: '',
|
|
receivedTime: null
|
|
},
|
|
invoiceInfo: {}, // 开票的订单详情
|
|
deliveryAddress: {},
|
|
currentPayType: null,
|
|
payMap: {
|
|
month: {
|
|
availableCreditLine: 0,
|
|
value: paymentMethodEnum.MONTHLY_PAY,
|
|
isShow: false
|
|
},
|
|
fs: {
|
|
availableCreditLine: 0,
|
|
value: paymentMethodEnum.FLY_PAY,
|
|
isShow: false
|
|
},
|
|
wxpay: {
|
|
value: paymentMethodEnum.WECHAT_PAY,
|
|
isShow: false
|
|
}
|
|
},
|
|
loading: false,
|
|
isInvoice: true // 默认开票
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (option.orderId) {
|
|
getPreOrderInfo({
|
|
customerOrderId: option.orderId
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.orderInfo = res
|
|
this.invoiceInfo = res
|
|
this.completePayment(res.paymentMethods)
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '订单信息错误',
|
|
icon: 'error',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
back()
|
|
}, 2000)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
// 获取默认地址
|
|
getDefaultAddress({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => {
|
|
if (res) {
|
|
this.deliveryAddress = res
|
|
this.deliveryAddress.addressId = res.id
|
|
}
|
|
})
|
|
},
|
|
onShow() {
|
|
let address = getCache('address')
|
|
if (address) {
|
|
this.deliveryAddress = address
|
|
this.deliveryAddress.addressId = address.id
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
back,
|
|
selectPayMethod(type) {
|
|
this.currentPayType = type
|
|
},
|
|
selectInvoice(type) {
|
|
this.isInvoice = type
|
|
if (!type) {
|
|
// 请求后端获取价格信息
|
|
calcNotInvoiceOrderInfo({
|
|
customerOrderId: this.orderInfo.orderId,
|
|
invoiceOrNot: invoiceStatusEnum.NO_INVOICE, // 1: 不开票
|
|
paymentMethod: this.payMap[this.currentPayType].value
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.orderInfo = res
|
|
}
|
|
})
|
|
} else {
|
|
this.orderInfo = this.invoiceInfo
|
|
}
|
|
},
|
|
submitOrder() {
|
|
if (this.currentPayType == null) {
|
|
uni.showToast({
|
|
title: '请选择支付方式',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (this.loading) {
|
|
return
|
|
}
|
|
if (!this.deliveryAddress.addressId) {
|
|
uni.showToast({
|
|
title: '请选择收货地址',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.loading = true
|
|
let itemsRemarkList = []
|
|
// 拼接订单信息
|
|
for (let target of this.orderInfo.supplierOrder) {
|
|
target.orderItems.forEach((item) => {
|
|
itemsRemarkList.push({ customerOderItemId: item.customerOderItemId, remark: item.remark })
|
|
})
|
|
}
|
|
submitClientOrder({
|
|
deliveryAddress: this.deliveryAddress,
|
|
itemsRemarkList,
|
|
orderId: this.orderInfo.orderId,
|
|
paymentMethod: this.payMap[this.currentPayType].value,
|
|
receivedTime: this.orderInfo.receivedTime,
|
|
invoiceOrNot: this.isInvoice ? invoiceStatusEnum.INVOICE : invoiceStatusEnum.NO_INVOICE
|
|
})
|
|
.then((res) => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '前往签约',
|
|
icon: 'success',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
// #ifdef APP-PLUS
|
|
go2('page-view', { title: '合同签署', url: encodeURIComponent(res.signUrl) })
|
|
// #endif
|
|
// #ifdef H5
|
|
if (window) {
|
|
window.location.href = res.signUrl
|
|
}
|
|
// #endif
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
completePayment(paymentMethods) {
|
|
let map = {
|
|
[paymentMethodEnum.MONTHLY_PAY]: 'month',
|
|
[paymentMethodEnum.FLY_PAY]: 'fs',
|
|
[paymentMethodEnum.WECHAT_PAY]: 'wxpay'
|
|
}
|
|
if (paymentMethods && paymentMethods.length > 0) {
|
|
for (let item of paymentMethods) {
|
|
// 飞算额度查询
|
|
if (item.value == this.payMap.fs.value) {
|
|
this.payMap.fs.isShow = true
|
|
this.completeFsCredit()
|
|
}
|
|
// 月结额度查询
|
|
if (item.value == this.payMap.month.value) {
|
|
this.payMap.month.isShow = true
|
|
this.completeMonthCredit()
|
|
}
|
|
// 微信支付
|
|
if (item.value == this.payMap.wxpay.value) {
|
|
this.payMap.wxpay.isShow = true
|
|
}
|
|
if (item.isDefault) {
|
|
this.currentPayType = map[item.value]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// 获取月结额度
|
|
completeMonthCredit() {
|
|
getMonthCredit({
|
|
enterpriseId: this.$store.state.companyInfo.id,
|
|
supplierId: this.$store.state.supplierId
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.payMap['month'].availableCreditLine = res.supplierCredit
|
|
if (this.payMap['month'].availableCreditLine < this.orderInfo.totalOfferPrice && this.currentPayType == 'month') {
|
|
this.currentPayType = null
|
|
}
|
|
} else {
|
|
this.payMap['month'].isShow = false
|
|
}
|
|
})
|
|
},
|
|
// 获取飞算额度
|
|
completeFsCredit() {
|
|
getFsCredit({
|
|
enterpriseId: this.$store.state.companyInfo.id
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.payMap['fs'].availableCreditLine = res.availableCreditLine
|
|
if (this.payMap['fs'].availableCreditLine < this.orderInfo.totalOfferPrice && this.currentPayType == 'fs') {
|
|
this.currentPayType = null
|
|
}
|
|
} else {
|
|
this.payMap['fs'].isShow = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.address-area {
|
|
width: 750rpx;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
.header {
|
|
width: 686rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 24rpx 0 40rpx;
|
|
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
|
|
.img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
}
|
|
.text {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.address-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0;
|
|
.left {
|
|
width: 72rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
margin: 0 38rpx 0 24rpx;
|
|
}
|
|
.right {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
.order-area {
|
|
width: 750rpx;
|
|
background-color: #fff;
|
|
padding-bottom: 14rpx;
|
|
.header {
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
background-color: #e5f1ff;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
.order-header {
|
|
width: 750rpx;
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 2rpx dashed #d8d8d8;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.order-row {
|
|
width: 750rpx;
|
|
padding: 0 32rpx;
|
|
margin-bottom: 18rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
}
|
|
}
|
|
.timer-area {
|
|
margin-top: 20rpx;
|
|
width: 750rpx;
|
|
padding: 0rpx 32rpx;
|
|
height: 88rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-align: right;
|
|
}
|
|
|
|
.tax-area {
|
|
margin-top: 20rpx;
|
|
width: 750rpx;
|
|
padding: 0rpx 32rpx;
|
|
height: 88rpx;
|
|
background-color: #fff;
|
|
.text {
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.switch-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
.pay-area {
|
|
background-color: #fff;
|
|
margin-top: 20rpx;
|
|
.pay-item {
|
|
width: 750rpx;
|
|
padding: 20rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
.button-area {
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
.text-line {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.button {
|
|
width: 320rpx;
|
|
height: 88rpx;
|
|
border-radius: 48rpx;
|
|
background-color: #007aff;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
</style>
|