huasheng-erp-order-system-applet/pages/client/index.vue

<template>
    <view class="client-page">
        <erp-nav-bar title="授权客户" :showBack="false" />

        <scroll-view scroll-y class="page-body" :show-scrollbar="false" :refresher-enabled="true"
            :refresher-triggered="refresherTriggered" @refresherrefresh="onPullDownRefresh">
            <!-- 加载中 -->
            <view class="loading-wrap" v-if="isLoading">
                <text class="loading-text">加载中...</text>
            </view>

            <!-- 空状态 -->
            <view class="empty-wrap" v-else-if="clientList.length === 0">
                <view class="empty-icon-box">
                    <text class="empty-icon">📋</text>
                </view>
                <text class="empty-title">暂无授权客户</text>
                <text class="empty-desc">请联系管理员为您分配客户</text>
            </view>

            <!-- 客户卡片列表 -->
            <view class="client-list" v-else>
                <view class="client-card" v-for="(client, idx) in clientList" :key="client.rowId || idx"
                    @click="goClientOrders(client)">
                    <view class="card-header">
                        <view class="card-title-row">
                            <view class="card-index">{{ idx + 1 }}</view>
                            <view class="card-name-group">
                                <text class="card-name">{{ client.name || '-' }}</text>
                                <text class="card-num" v-if="client.num">{{ client.num }}</text>
                            </view>
                        </view>
                        <view class="card-tag" :class="client.stopUse === 0 ? 'tag-active' : 'tag-stop'">
                            {{ client.stopUse === 0 ? '正常' : '停用' }}
                        </view>
                    </view>

                    <view class="card-divider"></view>

                    <view class="card-body">
                        <view class="info-grid">
                            <view class="info-item">
                                <text class="info-label">分类</text>
                                <text class="info-value">{{ client.clientClass || '-' }}</text>
                            </view>
                            <view class="info-item">
                                <text class="info-label">业务员</text>
                                <text class="info-value">{{ client.saleMan || '-' }}</text>
                            </view>
                        </view>

                        <view class="contact-row" v-if="client.contactMan || client.contactTel || client.contactMobile">
                            <image class="contact-icon" src="https://img.icons8.com/ios-glyphs/28/999999/phone--v1.png"
                                mode="aspectFit"></image>
                            <text class="contact-text">{{ client.contactMan || '' }} {{ client.contactMobile ||
                                client.contactTel || '' }}</text>
                        </view>

                        <view class="addr-row" v-if="client.contactAddr">
                            <image class="addr-icon" src="https://img.icons8.com/ios-glyphs/28/999999/marker--v1.png"
                                mode="aspectFit"></image>
                            <text class="addr-text">{{ client.contactAddr }}</text>
                        </view>
                    </view>

                    <view class="card-footer" v-if="client.enterDate">
                        <text class="footer-text">加入时间 {{ formatDate(client.enterDate) }}</text>
                    </view>
                </view>
            </view>

            <!-- 底部安全距离 -->
            <view class="safe-bottom"></view>
        </scroll-view>

        <erp-tab-bar active="client"></erp-tab-bar>
    </view>
</template>

<script>
import ErpNavBar from '@/components/erp-nav-bar.vue';
import ErpTabBar from '@/components/erp-tab-bar.vue';
import { getMyInfo } from '@/api/system/employee.js';
import { getClientByIds } from '@/api/erp/client.js';

export default {
    components: { ErpNavBar, ErpTabBar },
    data() {
        return {
            isLoading: true,
            refresherTriggered: false,
            clientList: []
        }
    },
    computed: {},
    async onLoad() {
        await this.loadClients();
    },
    methods: {
        onPullDownRefresh() {
            this.refresherTriggered = true;
            this.loadClients().finally(() => {
                this.refresherTriggered = false;
            });
        },
        async loadClients() {
            try {
                const infoRes = await getMyInfo();
                const ids = infoRes.data?.authClientFRowIDs;
                if (ids) {
                    const clientRes = await getClientByIds(ids);
                    this.clientList = clientRes.data || [];
                }
            } catch (e) {
                console.error('加载客户列表失败', e);
                uni.showToast({ title: e || '加载失败', icon: 'none' });
            } finally {
                this.isLoading = false;
            }
        },
        formatDate(dateStr) {
            if (!dateStr) return '';
            const d = new Date(dateStr.replace(/-/g, '/'));
            const y = d.getFullYear();
            const m = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${y}-${m}-${day}`;
        },
        goClientOrders(client) {
            uni.navigateTo({
                url: `/pages/order/list/index?clientId=${client.rowId}&clientName=${encodeURIComponent(client.name || '')}`
            });
        }
    }
}
</script>

<style scoped>
.client-page {
    width: 100vw;
    height: 100vh;
    background: #f5f6f8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-body {
    flex: 1;
    height: 0;
    padding: 24rpx 32rpx 0;
}

/* ========== 加载 & 空状态 ========== */
.loading-wrap {
    display: flex;
    justify-content: center;
    padding: 120rpx 0;
}

.loading-text {
    font-size: 28rpx;
    color: #bbb;
}

.empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 140rpx 0;
}

.empty-icon-box {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: #f0f1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28rpx;
}

.empty-icon {
    font-size: 56rpx;
}

.empty-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #555;
    margin-bottom: 12rpx;
}

.empty-desc {
    font-size: 26rpx;
    color: #bbb;
}

/* ========== 客户卡片 ========== */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.client-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 28rpx 32rpx 0;
    box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.15s;
}

.client-card:active {
    transform: scale(0.98);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-title-row {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.card-index {
    width: 44rpx;
    height: 44rpx;
    border-radius: 12rpx;
    background: #f0f1f5;
    color: #888;
    font-size: 22rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
    flex-shrink: 0;
    margin-top: 2rpx;
}

.card-name-group {
    flex: 1;
    min-width: 0;
}

.card-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a1a1a;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-num {
    font-size: 24rpx;
    color: #b0b0b0;
    display: block;
    margin-top: 4rpx;
}

.card-tag {
    font-size: 22rpx;
    font-weight: 500;
    padding: 6rpx 18rpx;
    border-radius: 20rpx;
    flex-shrink: 0;
}

.tag-active {
    background: rgba(193, 0, 28, 0.06);
    color: #C1001C;
}

.tag-stop {
    background: #f5f5f5;
    color: #bbb;
}

.card-divider {
    height: 1rpx;
    background: #f0f0f0;
    margin: 22rpx 0;
}

.card-body {
    padding-bottom: 4rpx;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx 32rpx;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 6rpx;
}

.info-label {
    font-size: 22rpx;
    color: #bbb;
}

.info-value {
    font-size: 26rpx;
    color: #444;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f7f7f7;
}

.contact-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    flex-shrink: 0;
}

.contact-text {
    font-size: 24rpx;
    color: #888;
}

.addr-row {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
}

.addr-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    flex-shrink: 0;
}

.addr-text {
    font-size: 24rpx;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-footer {
    border-top: 1rpx solid #f7f7f7;
    padding: 18rpx 0;
    margin-top: 20rpx;
}

.footer-text {
    font-size: 22rpx;
    color: #ccc;
}

/* ========== 底部 ========== */
.safe-bottom {
    height: 140rpx;
}
</style>