<template>
|
<view class="sales-account">
|
<PageHeader title="客户档案" @back="goBack" />
|
|
<view class="search-section">
|
<view class="search-bar">
|
<view class="search-input">
|
<up-input
|
class="search-text"
|
v-model="customerName"
|
placeholder="请输入客户名称"
|
clearable
|
@change="getList"
|
/>
|
</view>
|
<view class="filter-button" @click="getList">
|
<up-icon name="search" size="24" color="#999999"></up-icon>
|
</view>
|
</view>
|
</view>
|
|
<view class="tabs-section">
|
<up-tabs
|
v-model="tabValue"
|
:list="tabList"
|
itemStyle="width: 33.33%;height: 80rpx;"
|
@change="onTabChange"
|
/>
|
</view>
|
|
<view v-if="list.length > 0" class="ledger-list">
|
<view v-for="item in list" :key="item.id" class="ledger-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="account-fill" size="16" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-id">{{ item.customerName || "-" }}</text>
|
</view>
|
<text class="item-index">{{ item.customerType || "-" }}</text>
|
</view>
|
|
<up-divider></up-divider>
|
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="detail-label">纳税人识别号</text>
|
<text class="detail-value">{{ item.taxpayerIdentificationNumber || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">公司电话</text>
|
<text class="detail-value">{{ item.companyPhone || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">公司地址</text>
|
<text class="detail-value">{{ item.companyAddress || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">法人</text>
|
<text class="detail-value">{{ item.corporation || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">代理人</text>
|
<text class="detail-value">{{ item.agent || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">维护人</text>
|
<text class="detail-value">{{ item.maintainer || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">维护时间</text>
|
<text class="detail-value">{{ item.maintenanceTime || "-" }}</text>
|
</view>
|
</view>
|
|
<view class="action-buttons">
|
<up-button class="action-btn" size="small" type="primary" @click="goEdit(item)"
|
>编辑</up-button
|
>
|
<up-button class="action-btn" size="small" @click="goDetail(item)"
|
>详情</up-button
|
>
|
</view>
|
</view>
|
</view>
|
|
<view v-else class="no-data">
|
<text>暂无客户档案数据</text>
|
</view>
|
|
<view class="fab-button" @click="goAdd">
|
<up-icon name="plus" size="28" color="#ffffff"></up-icon>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { reactive, ref } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import { listCustomer } from "@/api/basicData/customerFile";
|
|
const customerName = ref("");
|
const list = ref([]);
|
|
const tabList = reactive([
|
{ name: "全部客户", value: "" },
|
{ name: "零售客户", value: "零售客户" },
|
{ name: "经销商客户", value: "经销商客户" },
|
]);
|
const tabValue = ref(0);
|
|
const page = {
|
current: -1,
|
size: -1,
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
const goAdd = () => {
|
uni.navigateTo({ url: "/pages/basicData/customerFile/edit" });
|
};
|
|
const goEdit = item => {
|
uni.navigateTo({ url: `/pages/basicData/customerFile/edit?id=${item.id}` });
|
};
|
|
const goDetail = item => {
|
uni.navigateTo({ url: `/pages/basicData/customerFile/detail?id=${item.id}` });
|
};
|
|
const onTabChange = val => {
|
tabValue.value = val.index;
|
getList();
|
};
|
|
const getCurrentCustomerType = () => {
|
const currentTab = tabList[tabValue.value];
|
return currentTab?.value || "";
|
};
|
|
const getList = () => {
|
uni.showLoading({ title: "加载中...", mask: true });
|
listCustomer({
|
...page,
|
customerName: customerName.value,
|
customerType: getCurrentCustomerType(),
|
})
|
.then(res => {
|
list.value = res?.records || res?.data?.records || [];
|
})
|
.catch(() => {
|
uni.showToast({ title: "查询失败", icon: "error" });
|
})
|
.finally(() => {
|
uni.hideLoading();
|
});
|
};
|
|
onShow(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/styles/procurement-common.scss";
|
|
.tabs-section {
|
background: #ffffff;
|
padding: 0 12px 8px 12px;
|
}
|
|
.item-index {
|
max-width: 180rpx;
|
text-align: center;
|
}
|
|
.detail-value {
|
max-width: 70%;
|
word-break: break-all;
|
}
|
</style>
|
