|
|
|
@ -0,0 +1,393 @@ |
|
|
|
<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/address-icon.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"> |
|
|
|
<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="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'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['month'].availableCreditLine }}</text> |
|
|
|
</view> |
|
|
|
<image |
|
|
|
v-if="payMap['month'] != null" |
|
|
|
@click="selectPayMethod('month')" |
|
|
|
class="img" |
|
|
|
:src="currentPayType == 'month' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'" |
|
|
|
></image> |
|
|
|
<text v-else 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'] != null" style="font-size: 28rpx; color: #888888">剩余额度: {{ payMap['fs'].availableCreditLine }}</text> |
|
|
|
</view> |
|
|
|
<image |
|
|
|
v-if="payMap['fs'] != null" |
|
|
|
@click="selectPayMethod('month')" |
|
|
|
class="img" |
|
|
|
:src="currentPayType == 'fs' ? '/static/imgs/order/selected-icon.png' : '/static/imgs/order/select-icon.png'" |
|
|
|
></image> |
|
|
|
<text v-else style="font-size: 28rpx; color: #888888">待申请</text> |
|
|
|
</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 } from '@/apis/orderApi' |
|
|
|
import { getFsCredit, getMonthCredit } from '@/apis/commonApi' |
|
|
|
import { isObject } from '@/utils/is' |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
orderInfo: { |
|
|
|
customerEnterpriseName: '', |
|
|
|
receivedTime: null |
|
|
|
}, |
|
|
|
deliveryAddress: {}, |
|
|
|
currentPayType: '', |
|
|
|
payMap: { |
|
|
|
month: { |
|
|
|
availableCreditLine: 0, |
|
|
|
value: 2 |
|
|
|
}, |
|
|
|
fs: { |
|
|
|
availableCreditLine: 0, |
|
|
|
value: 4 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
|
if (option.orderId) { |
|
|
|
getPreOrderInfo({ |
|
|
|
customerOrderId: option.orderId |
|
|
|
}).then((res) => { |
|
|
|
if (res) { |
|
|
|
this.orderInfo = res |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: '订单信息错误', |
|
|
|
icon: 'warn', |
|
|
|
success: () => { |
|
|
|
setTimeout(() => { |
|
|
|
back() |
|
|
|
}, 2000) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.init() |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
let address = getCache('address') |
|
|
|
if (address) { |
|
|
|
this.deliveryAddress = address |
|
|
|
this.deliveryAddress.addressId = address.id |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
go2, |
|
|
|
back, |
|
|
|
selectPayMethod(type) { |
|
|
|
this.currentPayType = type |
|
|
|
}, |
|
|
|
submitOrder() { |
|
|
|
if (this.currentPayType == null) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请选择支付方式', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
let itemsRemarkList = [] |
|
|
|
// 拼接订单信息 |
|
|
|
for (let i = 0; i < this.orderInfo.supplierOrder.length; i++) { |
|
|
|
this.orderInfo.supplierOrder[i].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 |
|
|
|
}) |
|
|
|
}, |
|
|
|
init() { |
|
|
|
// 获取月结额度 |
|
|
|
getMonthCredit({ |
|
|
|
enterpriseId: this.$store.state.companyInfo.id, |
|
|
|
supplierId: this.$store.state.supplierId |
|
|
|
}).then((res) => { |
|
|
|
if (res) { |
|
|
|
if (res.supplierCredit !== null) { |
|
|
|
this.payMap['month'].availableCreditLine = res.supplierCredit |
|
|
|
} else { |
|
|
|
this.payMap['month'] = null |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.payMap['month'] = null |
|
|
|
} |
|
|
|
}) |
|
|
|
// 获取飞算额度 |
|
|
|
getFsCredit({ |
|
|
|
enterpriseId: this.$store.state.companyInfo.id |
|
|
|
}).then((res) => { |
|
|
|
if (isObject(res)) { |
|
|
|
this.payMap['fs'].availableCreditLine = res.availableCreditLine |
|
|
|
} else { |
|
|
|
this.payMap['fs'] = null |
|
|
|
} |
|
|
|
}) |
|
|
|
// 获取默认地址 |
|
|
|
getDefaultAddress({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => { |
|
|
|
if (res) { |
|
|
|
this.deliveryAddress = res |
|
|
|
this.deliveryAddress.addressId = res.id |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</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 #dddddd; |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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 #d8d8d8; |
|
|
|
.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> |
