<template>
|
<view class="account-view">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="台账详情" @back="goBack" />
|
|
<!-- 基本信息展示 -->
|
<view class="info-section">
|
<view class="section-title">基本信息</view>
|
<view class="info-grid">
|
<view class="info-item">
|
<text class="info-label">销售合同号</text>
|
<text class="info-value">{{ form.salesContractNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">客户合同号</text>
|
<text class="info-value highlight">{{ form.customerContractNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">客户名称</text>
|
<text class="info-value">{{ form.customerName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">业务员</text>
|
<text class="info-value">{{ form.salesman }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">项目名称</text>
|
<text class="info-value">{{ form.projectName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">签订日期</text>
|
<text class="info-value">{{ form.executionDate }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">付款方式</text>
|
<text class="info-value">{{ form.paymentMethod }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">录入人</text>
|
<text class="info-value">{{ form.entryPersonName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">录入日期</text>
|
<text class="info-value">{{ form.entryDate }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 产品信息展示 -->
|
<view class="product-section" v-if="productData && productData.length > 0">
|
<view class="section-title">产品信息</view>
|
<view class="product-card" v-for="(product, idx) in productData" :key="idx">
|
<view class="product-header">
|
<view class="product-title">
|
<van-icon name="description" color="#2979ff" size="15" />
|
<text class="product-productCategory">产品 {{ idx + 1 }}</text>
|
</view>
|
</view>
|
|
<view class="product-info">
|
<view class="info-grid">
|
<view class="info-item">
|
<text class="info-label">产品大类</text>
|
<text class="info-value">{{ product.productCategory }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">规格型号</text>
|
<text class="info-value">{{ product.specificationModel }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">单位</text>
|
<text class="info-value">{{ product.unit }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">税率(%)</text>
|
<text class="info-value">{{ product.taxRate }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">含税单价(元)</text>
|
<text class="info-value highlight">{{ product.taxInclusiveUnitPrice }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">数量</text>
|
<text class="info-value highlight">{{ product.quantity }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">含税总价(元)</text>
|
<text class="info-value highlight">{{ product.taxInclusiveTotalPrice }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">不含税总价(元)</text>
|
<text class="info-value highlight">{{ product.taxExclusiveTotalPrice }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">发票类型</text>
|
<text class="info-value">{{ product.invoiceType }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 无产品信息提示 -->
|
<view class="no-product" v-else>
|
<text>暂无产品信息</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from 'vue';
|
import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger";
|
|
// 表单数据
|
const form = ref({
|
id: '',
|
salesContractNo: '',
|
customerContractNo: '',
|
customerId: '',
|
customerName: '',
|
projectName: '',
|
executionDate: '',
|
paymentMethod: '',
|
entryPerson: '',
|
entryPersonName: '',
|
entryDate: '',
|
salesman: ''
|
});
|
|
// 产品数据
|
const productData = ref([]);
|
|
// 编辑数据
|
const editData = ref(null);
|
|
// 返回上一页
|
const goBack = () => {
|
// 清理本地存储的数据
|
uni.removeStorageSync('editData');
|
uni.navigateBack();
|
};
|
|
// 填充表单数据
|
const fillFormData = () => {
|
if (!editData.value) return;
|
|
// 获取完整的产品信息
|
getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then((res) => {
|
productData.value = res.productData || [];
|
});
|
|
// 填充基本信息
|
form.value.salesContractNo = editData.value.salesContractNo || '';
|
form.value.customerContractNo = editData.value.customerContractNo || '';
|
form.value.customerName = editData.value.customerName || '';
|
form.value.projectName = editData.value.projectName || '';
|
form.value.executionDate = editData.value.executionDate || '';
|
form.value.paymentMethod = editData.value.paymentMethod || '';
|
form.value.salesman = editData.value.salesman || '';
|
form.value.entryPerson = editData.value.entryPerson || '';
|
form.value.entryPersonName = editData.value.entryPersonName || '';
|
form.value.entryDate = editData.value.entryDate || '';
|
form.value.id = editData.value.id || '';
|
form.value.customerId = editData.value.customerId || '';
|
};
|
|
onMounted(() => {
|
// 获取编辑数据并填充表单
|
const editDataStr = uni.getStorageSync('editData');
|
if (editDataStr) {
|
try {
|
editData.value = JSON.parse(editDataStr);
|
// 使用 nextTick 确保数据加载完成后再填充
|
setTimeout(() => {
|
fillFormData();
|
}, 100);
|
} catch (error) {
|
console.error('解析编辑数据失败:', error);
|
}
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.account-view {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 2rem;
|
}
|
|
.header {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
padding: 1rem 1.25rem;
|
border-bottom: 0.0625rem solid #f0f0f0;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
/* 兼容 iOS 刘海/灵动岛安全区 */
|
padding-top: env(safe-area-inset-top);
|
}
|
|
.title {
|
flex: 1;
|
text-align: center;
|
font-size: 1.125rem;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.info-section {
|
background: #fff;
|
margin: 1rem;
|
padding: 1rem;
|
border-radius: 0.5rem;
|
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
|
}
|
|
.section-title {
|
font-size: 1rem;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 1rem;
|
padding-bottom: 1rem;
|
border-bottom: 0.0625rem solid #e8e8e8;
|
}
|
|
.info-grid {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 0.75rem;
|
}
|
|
.info-item {
|
display: flex;
|
flex-direction: column;
|
gap: 0.25rem;
|
}
|
|
.info-label {
|
font-size: 0.75rem;
|
color: #666;
|
font-weight: 400;
|
}
|
|
.info-value {
|
font-size: 0.875rem;
|
color: #333;
|
font-weight: 500;
|
}
|
|
.info-value.highlight {
|
color: #2979ff;
|
font-weight: 600;
|
}
|
|
.product-section {
|
background: #fff;
|
margin: 1rem;
|
padding: 1rem;
|
border-radius: 0.5rem;
|
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
|
}
|
|
.product-card {
|
background: #f8f9fa;
|
border-radius: 0.5rem;
|
padding: 1rem;
|
margin-bottom: 1rem;
|
}
|
|
.product-card:last-child {
|
margin-bottom: 0;
|
}
|
|
.product-header {
|
display: flex;
|
align-items: center;
|
padding-bottom: 0.75rem;
|
border-bottom: 0.0625rem solid #e8e8e8;
|
margin-bottom: 1rem;
|
}
|
|
.product-title {
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
}
|
|
.product-productCategory {
|
font-size: 0.875rem;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.product-info .info-grid {
|
grid-template-columns: 1fr 1fr;
|
gap: 0.5rem;
|
}
|
|
.no-product {
|
text-align: center;
|
padding: 2rem;
|
color: #999;
|
font-size: 0.875rem;
|
}
|
</style>
|
