<template>
|
<view class="customer-detail-page">
|
<PageHeader title="客户详情" @back="goBack" />
|
|
<view class="detail-content">
|
<view class="section">
|
<view class="section-title">客户信息</view>
|
<view class="info-list">
|
<view class="info-item">
|
<text class="info-label">客户名称</text>
|
<text class="info-value">{{ detailData.customerName || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">客户分类</text>
|
<text class="info-value">{{ detailData.customerType || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">公司地址</text>
|
<text class="info-value">{{ detailData.companyAddress || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">公司电话</text>
|
<text class="info-value">{{ detailData.companyPhone || "-" }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="section">
|
<view class="section-title">联系信息</view>
|
<view class="info-list">
|
<view class="info-item">
|
<text class="info-label">联系人</text>
|
<text class="info-value">{{ detailData.contactPerson || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">联系电话</text>
|
<text class="info-value">{{ detailData.contactPhone || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">联系人岗位</text>
|
<text class="info-value">{{ detailData.contactPosition || "-" }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="section">
|
<view class="section-title">维护信息</view>
|
<view class="info-list">
|
<view class="info-item">
|
<text class="info-label">维护人</text>
|
<text class="info-value">{{ detailData.maintainer || "-" }}</text>
|
</view>
|
<view class="info-item">
|
<text class="info-label">维护时间</text>
|
<text class="info-value">{{ detailData.maintenanceTime || "-" }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<FooterButtons
|
cancelText="返回"
|
confirmText="编辑"
|
@cancel="goBack"
|
@confirm="goEdit"
|
/>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
import FooterButtons from "@/components/FooterButtons.vue";
|
import { getCustomer } from "@/api/basicData/customerFile";
|
|
const customerId = ref("");
|
const detailData = ref({});
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
const goEdit = () => {
|
if (!customerId.value) return;
|
uni.navigateTo({ url: `/pages/basicData/customerFile/edit?id=${customerId.value}` });
|
};
|
|
const getDetail = () => {
|
if (!customerId.value) return;
|
uni.showLoading({ title: "加载中...", mask: true });
|
getCustomer(customerId.value)
|
.then(res => {
|
detailData.value = res.data || {};
|
})
|
.catch(() => {
|
uni.showToast({ title: "获取详情失败", icon: "error" });
|
})
|
.finally(() => {
|
uni.hideLoading();
|
});
|
};
|
|
onLoad(options => {
|
if (options?.id) {
|
customerId.value = options.id;
|
getDetail();
|
}
|
});
|
|
onShow(() => {
|
if (customerId.value) {
|
getDetail();
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.customer-detail-page {
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
padding-bottom: 90px;
|
}
|
|
.detail-content {
|
padding: 16px;
|
}
|
|
.section {
|
background: #ffffff;
|
border-radius: 12px;
|
margin-bottom: 16px;
|
overflow: hidden;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.section-title {
|
padding: 16px;
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.info-list {
|
padding: 8px 0;
|
}
|
|
.info-item {
|
display: flex;
|
padding: 12px 16px;
|
border-bottom: 1px solid #f8f8f8;
|
}
|
|
.info-item:last-child {
|
border-bottom: none;
|
}
|
|
.info-label {
|
width: 120px;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.info-value {
|
flex: 1;
|
font-size: 14px;
|
color: #303133;
|
text-align: right;
|
word-break: break-all;
|
}
|
</style>
|
