536 lines
19 KiB
Vue
536 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<div class="stocking-final-show-page">
|
|||
|
|
<div class="header boxshadow">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<div class="title">合塑实业·汽车事业部-备货单(客户下定)</div>
|
|||
|
|
<div class="sub">备货单编号：{{ header.order_no }} 业务员：{{ header.salesman }}</div>
|
|||
|
|
</div>
|
|||
|
|
<ElButton type="primary" plain @click="handlePrint">打印整单</ElButton>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 基础信息 -->
|
|||
|
|
<div class="boxshadow">
|
|||
|
|
<div class="form-title"><span class="border"></span><span class="title">基础信息</span></div>
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="5"><ElFormItem label="阿里订单号/PN号"><ElInput v-model="base.pn_no" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="日期"><ElInput v-model="base.date" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="关闭日期"><ElInput v-model="base.close_date" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="3"><ElFormItem label="客户来源"><ElInput v-model="base.channel" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="客户名称"><ElInput v-model="base.customer_name" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="客户所在国"><ElInput v-model="base.client_country" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单详情 -->
|
|||
|
|
<div class="boxshadow">
|
|||
|
|
<div class="form-title"><span class="border"></span><span class="title">订单详情</span></div>
|
|||
|
|
<div class="items-wrap">
|
|||
|
|
<div class="item-row" v-for="(item, idx) in items" :key="idx">
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="8"><ElFormItem label="车型" label-width="64px"><ElInput v-model="item.model" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="颜色/外" label-width="72px"><ElInput v-model="item.color_out" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="内饰" label-width="52px"><ElInput v-model="item.color_in" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="8"><ElFormItem label="改装" label-width="52px"><ElInput v-model="item.modify" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="4"><ElFormItem label="改装费" label-width="60px"><ElInput v-model="item.modify_fee" disabled><template #append>{{ item.modify_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="FOB段运费" label-width="84px"><ElInput v-model="item.fob_fee" disabled><template #append>{{ item.fob_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="单价" label-width="52px"><ElInput v-model="item.unit_price" disabled><template #append>{{ item.unit_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="总价" label-width="52px"><ElInput v-model="item.total_price" disabled><template #append>{{ item.total_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="官方指导价" label-width="85px"><ElInput v-model="item.guide_price" disabled><template #append>{{ item.guide_price_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="优惠" label-width="52px"><ElInput v-model="item.discount" disabled><template #append>{{ item.discount_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="4"><ElFormItem label="手续费" label-width="60px"><ElInput v-model="item.helper_fee" disabled><template #append>{{ item.helper_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="国内运费" label-width="72px"><ElInput v-model="item.domestic_freight" disabled><template #append>{{ item.domestic_freight_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="港杂费" label-width="60px"><ElInput v-model="item.port_fee" disabled><template #append>{{ item.port_fee_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="利润" label-width="52px"><ElInput v-model="item.profit" disabled><template #append>{{ item.profit_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="车架号" label-width="60px"><ElInput v-model="item.vin" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="5"><ElFormItem label="合计到岸价" label-width="85px"><ElInput v-model="base.total_cif" disabled><template #append>{{ base.total_cif_currency }}</template></ElInput></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="合同汇率" label-width="70px"><ElInput v-model="base.contract_rate" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 运输详情 -->
|
|||
|
|
<div class="boxshadow">
|
|||
|
|
<div class="form-title"><span class="border"></span><span class="title">运输详情</span></div>
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="4"><ElFormItem label="清关人"><ElInput v-model="ship.customs" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="预计发送日"><ElInput v-model="ship.plan" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="运输方式"><ElInput v-model="ship.method" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="国内收货港"><ElInput v-model="ship.domestic_port" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="8"><ElFormItem label="贸易条款/清关目的港"><ElInput v-model="ship.terms" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="6"><ElFormItem label="最迟到港时间"><ElInput v-model="ship.latest_arrival" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 计划收款信息 -->
|
|||
|
|
<div class="boxshadow">
|
|||
|
|
<div class="form-title"><span class="border"></span><span class="title">计划收款信息</span></div>
|
|||
|
|
<ElRow :gutter="12">
|
|||
|
|
<ElCol :span="4"><ElFormItem label="汇款国"><ElInput v-model="pay.remit_country" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="日期"><ElInput v-model="pay.date" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="币种"><ElInput v-model="pay.currency" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="账户"><ElInput v-model="pay.account" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="汇款人"><ElInput v-model="pay.payer" disabled /></ElFormItem></ElCol>
|
|||
|
|
<ElCol :span="4"><ElFormItem label="金额"><ElInput v-model="pay.amount" disabled /></ElFormItem></ElCol>
|
|||
|
|
</ElRow>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 上传合同 -->
|
|||
|
|
<div class="boxshadow">
|
|||
|
|
<div class="form-title"><span class="border"></span><span class="title">上传合同</span></div>
|
|||
|
|
<div class="upload-box">
|
|||
|
|
<img class="preview" src="@/assets/img/common/logo.webp" alt="file" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
const header = reactive({ order_no: 'HSAT-JN00010', salesman: '王玉杰' })
|
|||
|
|
|
|||
|
|
// 打印功能
|
|||
|
|
const handlePrint = () => {
|
|||
|
|
// 创建一个新的窗口用于打印
|
|||
|
|
const printWindow = window.open('', '_blank')
|
|||
|
|
if (!printWindow) return
|
|||
|
|
|
|||
|
|
// 构建表格行数据
|
|||
|
|
const tableRows = items.value.map((item, index) => {
|
|||
|
|
return `
|
|||
|
|
<tr>
|
|||
|
|
<td>${index + 1}</td>
|
|||
|
|
<td class="text-left">${item.model}</td>
|
|||
|
|
<td>1</td>
|
|||
|
|
<td>${item.color_out}</td>
|
|||
|
|
<td>${item.color_in}</td>
|
|||
|
|
<td class="text-left">${item.modify}</td>
|
|||
|
|
<td>$${item.unit_price}</td>
|
|||
|
|
<td>$${item.total_price}</td>
|
|||
|
|
<td>${item.guide_price}</td>
|
|||
|
|
<td>${item.discount}</td>
|
|||
|
|
</tr>
|
|||
|
|
`
|
|||
|
|
}).join('')
|
|||
|
|
|
|||
|
|
// 构建打印页面的HTML
|
|||
|
|
const printHTML = `<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>备货单打印</title>
|
|||
|
|
<style>
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.print-container {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
.header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-bottom: 2px solid #333;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.main-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.order-info {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
.order-info-left, .order-info-right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 3px;
|
|||
|
|
}
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.info-label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
min-width: 60px;
|
|||
|
|
}
|
|||
|
|
.info-value {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.order-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
.order-table th,
|
|||
|
|
.order-table td {
|
|||
|
|
border: 1px solid #333;
|
|||
|
|
padding: 4px 6px;
|
|||
|
|
text-align: center;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
.order-table th {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.order-table .text-left {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.summary-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.summary-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
.summary-label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
min-width: 100px;
|
|||
|
|
}
|
|||
|
|
.shipping-info {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.shipping-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 10px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
.shipping-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.shipping-label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
min-width: 80px;
|
|||
|
|
}
|
|||
|
|
.payment-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
.payment-table th,
|
|||
|
|
.payment-table td {
|
|||
|
|
border: 1px solid #333;
|
|||
|
|
padding: 4px 6px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.payment-table th {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
@media print {
|
|||
|
|
body { -webkit-print-color-adjust: exact; }
|
|||
|
|
.print-container { padding: 10px; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="print-container">
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="main-title">合塑实业-汽车事业部-备货单(客户下定)</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单基本信息 -->
|
|||
|
|
<div class="order-info">
|
|||
|
|
<div class="order-info-left">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">备货单编号:</span>
|
|||
|
|
<span class="info-value">${header.order_no}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">阿里订单号/PI号:</span>
|
|||
|
|
<span class="info-value">${base.pn_no}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">日期:</span>
|
|||
|
|
<span class="info-value">${base.date}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-info-right">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">业务员:</span>
|
|||
|
|
<span class="info-value">${header.salesman}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">客户名称:</span>
|
|||
|
|
<span class="info-value">${base.customer_name}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">客户来源:</span>
|
|||
|
|
<span class="info-value">${base.channel}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">关目的国:</span>
|
|||
|
|
<span class="info-value">${base.client_country}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">客户所在国:</span>
|
|||
|
|
<span class="info-value">${base.client_country}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单详情表格 -->
|
|||
|
|
<table class="order-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>编号</th>
|
|||
|
|
<th>车型</th>
|
|||
|
|
<th>数量/台</th>
|
|||
|
|
<th>颜色/外</th>
|
|||
|
|
<th>内饰</th>
|
|||
|
|
<th>改装</th>
|
|||
|
|
<th>单价(美金)</th>
|
|||
|
|
<th>总价(美金)</th>
|
|||
|
|
<th>官方指导价</th>
|
|||
|
|
<th>优惠</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
${tableRows}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<!-- 汇总信息 -->
|
|||
|
|
<div class="summary-section">
|
|||
|
|
<div class="summary-row">
|
|||
|
|
<span class="summary-label">合同汇率:</span>
|
|||
|
|
<span>${base.contract_rate}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-row">
|
|||
|
|
<span class="summary-label">合计到岸价:</span>
|
|||
|
|
<span>$${base.total_cif}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 运输信息 -->
|
|||
|
|
<div class="shipping-info">
|
|||
|
|
<div class="shipping-grid">
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">清关人:</span>
|
|||
|
|
<span>${ship.customs}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">预计发运日期:</span>
|
|||
|
|
<span>${ship.plan}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">出运方式:</span>
|
|||
|
|
<span>${ship.method}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">国内收货港:</span>
|
|||
|
|
<span>${ship.domestic_port}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">贸易条款/清关目的港:</span>
|
|||
|
|
<span>${ship.terms}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="shipping-item">
|
|||
|
|
<span class="shipping-label">最迟到港时间:</span>
|
|||
|
|
<span>${ship.latest_arrival}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 计划收款信息 -->
|
|||
|
|
<div style="margin-top: 20px;">
|
|||
|
|
<h4 style="margin-bottom: 10px; font-size: 13px;">计划收款信息</h4>
|
|||
|
|
<table class="payment-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>序号</th>
|
|||
|
|
<th>汇款国</th>
|
|||
|
|
<th>日期</th>
|
|||
|
|
<th>币种</th>
|
|||
|
|
<th>账户</th>
|
|||
|
|
<th>汇款人</th>
|
|||
|
|
<th>金额</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>收款1</td>
|
|||
|
|
<td>${pay.remit_country}</td>
|
|||
|
|
<td>${pay.date}</td>
|
|||
|
|
<td>${pay.currency}</td>
|
|||
|
|
<td>${pay.account}</td>
|
|||
|
|
<td class="text-left">${pay.payer}</td>
|
|||
|
|
<td>$${pay.amount}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>`
|
|||
|
|
|
|||
|
|
// 写入HTML内容
|
|||
|
|
printWindow.document.write(printHTML)
|
|||
|
|
printWindow.document.close()
|
|||
|
|
|
|||
|
|
// 等待内容加载完成后打印
|
|||
|
|
setTimeout(() => {
|
|||
|
|
printWindow.print()
|
|||
|
|
printWindow.close()
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
const base = reactive({
|
|||
|
|
pn_no: 'VCSC250827JN1',
|
|||
|
|
date: '2025-08-28',
|
|||
|
|
close_date: '',
|
|||
|
|
channel: '广交会',
|
|||
|
|
customer_name: 'Ailcia',
|
|||
|
|
client_country: '密鲁',
|
|||
|
|
total_cif: '60,652.00',
|
|||
|
|
total_cif_currency: '美元',
|
|||
|
|
contract_rate: '7.16'
|
|||
|
|
})
|
|||
|
|
const items = ref([
|
|||
|
|
{
|
|||
|
|
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
|||
|
|
color_out: '银',
|
|||
|
|
color_in: '黑',
|
|||
|
|
modify: '改装仿皮座椅',
|
|||
|
|
modify_fee: '1000',
|
|||
|
|
modify_fee_currency: '美元',
|
|||
|
|
fob_fee: '500',
|
|||
|
|
fob_fee_currency: '美元',
|
|||
|
|
unit_price: '14,545.00',
|
|||
|
|
unit_price_currency: '美元',
|
|||
|
|
total_price: '14,545.00',
|
|||
|
|
total_price_currency: '美元',
|
|||
|
|
guide_price: '139800',
|
|||
|
|
guide_price_currency: '人民币',
|
|||
|
|
discount: '42000郑州',
|
|||
|
|
discount_currency: '人民币',
|
|||
|
|
helper_fee: '1500',
|
|||
|
|
helper_fee_currency: '美元',
|
|||
|
|
domestic_freight: '1500',
|
|||
|
|
domestic_freight_currency: '美元',
|
|||
|
|
port_fee: '600',
|
|||
|
|
port_fee_currency: '美元',
|
|||
|
|
profit: '1000',
|
|||
|
|
profit_currency: '美元',
|
|||
|
|
vin: 'S4412454142142141'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
|||
|
|
color_out: '银',
|
|||
|
|
color_in: '黑',
|
|||
|
|
modify: '改装仿皮座椅',
|
|||
|
|
modify_fee: '1000',
|
|||
|
|
modify_fee_currency: '美元',
|
|||
|
|
fob_fee: '500',
|
|||
|
|
fob_fee_currency: '美元',
|
|||
|
|
unit_price: '14,545.00',
|
|||
|
|
unit_price_currency: '美元',
|
|||
|
|
total_price: '14,545.00',
|
|||
|
|
total_price_currency: '美元',
|
|||
|
|
guide_price: '139800',
|
|||
|
|
guide_price_currency: '人民币',
|
|||
|
|
discount: '42000郑州',
|
|||
|
|
discount_currency: '人民币',
|
|||
|
|
helper_fee: '1500',
|
|||
|
|
helper_fee_currency: '美元',
|
|||
|
|
domestic_freight: '1500',
|
|||
|
|
domestic_freight_currency: '美元',
|
|||
|
|
port_fee: '600',
|
|||
|
|
port_fee_currency: '美元',
|
|||
|
|
profit: '1000',
|
|||
|
|
profit_currency: '美元',
|
|||
|
|
vin: 'S4412454142142141'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
model: '丰田卡罗拉锐放汽油 2024款 2.0L CVT 精英版',
|
|||
|
|
color_out: '银',
|
|||
|
|
color_in: '黑',
|
|||
|
|
modify: '改装仿皮座椅',
|
|||
|
|
modify_fee: '1000',
|
|||
|
|
modify_fee_currency: '美元',
|
|||
|
|
fob_fee: '500',
|
|||
|
|
fob_fee_currency: '美元',
|
|||
|
|
unit_price: '14,545.00',
|
|||
|
|
unit_price_currency: '美元',
|
|||
|
|
total_price: '14,545.00',
|
|||
|
|
total_price_currency: '美元',
|
|||
|
|
guide_price: '139800',
|
|||
|
|
guide_price_currency: '人民币',
|
|||
|
|
discount: '42000郑州',
|
|||
|
|
discount_currency: '人民币',
|
|||
|
|
helper_fee: '1500',
|
|||
|
|
helper_fee_currency: '美元',
|
|||
|
|
domestic_freight: '1500',
|
|||
|
|
domestic_freight_currency: '美元',
|
|||
|
|
port_fee: '600',
|
|||
|
|
port_fee_currency: '美元',
|
|||
|
|
profit: '1000',
|
|||
|
|
profit_currency: '美元',
|
|||
|
|
vin: 'S4412454142142141'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
const ship = reactive({ customs: '陆云鹤', plan: '2025-08-28', method: '海运', domestic_port: 'shanghai', terms: 'FOB shanghai', latest_arrival: '2025-9-03' })
|
|||
|
|
const pay = reactive({ remit_country: '香港', date: '2028-9-01', currency: '美元', account: '中行1451', payer: 'AMOTOR TECHNOLOGY CO. LIMITED/XTRANSFER LIMITED', amount: '15,000.00' })
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.stocking-final-show-page { min-height: 100vh; }
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
.header-left {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub {
|
|||
|
|
color: var(--el-text-color-secondary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form-title { font-weight: bold; color: #222; margin-bottom: 15px; }
|
|||
|
|
.form-title .title { margin-left: 6px; }
|
|||
|
|
.items-wrap { margin-top: 6px; }
|
|||
|
|
.item-row { padding: 8px 0; }
|
|||
|
|
.upload-box { padding: 12px; }
|
|||
|
|
.upload-box .preview { width: 120px; height: 120px; object-fit: cover; border: 1px dashed var(--el-border-color); border-radius: 6px; }
|
|||
|
|
:deep(.el-input.is-disabled .el-input__inner) { color: var(--el-text-color-regular); }
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|