gypsy-crm-frontend-vu/pages/customer/components/TerminalInfoDialog.vue

<template>
    <cwg-popup :title="title" v-model:visible="props.visible" :showFooters="false"
        @update:visible="$emit('update:visible', $event)">
        <view class="account-detail-content">
            <!-- 账户编号独立显示（如果需要，也可以作为 fieldList 中的一项） -->
            <view v-if="accountNumber" class="account-number-row">
                <text class="label">{{ accountLabel }}</text>
                <text class="value">{{ accountNumber }}</text>
            </view>

            <!-- 动态字段列表 -->
            <view v-for="(field, index) in fieldList" :key="index" class="field-row">

                <cwg-label-line-value :label="field.label" :value="getFieldValue(field.key)">
                    <template #operation v-if="field.copyable">
                        <view class="copy-btn" @click="copyValue(getFieldValue(field.key))">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <path
                                    d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
                                <path
                                    d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
                            </svg>
                        </view>
                    </template>
                </cwg-label-line-value>
            </view>
        </view>
    </cwg-popup>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    // 是否显示弹窗
    visible: {
        type: Boolean,
        default: false
    },
    // 弹窗标题
    title: {
        type: String,
        default: '账户详情'
    },
    // 账户编号（若单独展示）
    accountNumber: {
        type: String,
        default: ''
    },
    // 账户编号标签
    accountLabel: {
        type: String,
        default: '账户：'
    },
    // 表单数据对象
    form: {
        type: Object,
        default: () => ({})
    },
    // 字段配置列表，每项包含：
    // - label: 字段显示名称
    // - key: 在 form 中对应的键名
    // - copyable: 是否显示复制按钮，默认 false
    fieldList: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['update:visible'])

// 获取字段值
const getFieldValue = (key) => {
    return props.form?.[key] ?? ''
}

// 复制文本到剪贴板
const copyValue = (text) => {
    if (!text) {
        uni.showToast({ title: '无内容可复制', icon: 'none' })
        return
    }
    uni.setClipboardData({
        data: String(text),
        success: () => {
            uni.showToast({ title: '复制成功', icon: 'none' })
        },
        fail: () => {
            uni.showToast({ title: '复制失败', icon: 'none' })
        }
    })
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";
@media (min-width: 768px) {
    :deep(.cwg-dialog) {
        background-color: var(--color-white);
        border-radius: px2rpx(8);
        width: px2rpx(500) !important;
    }
}

.account-number-row,
.field-row {
    display: flex;
    align-items: center;
    padding: px2rpx(10) 0;
    width: 100%;
    font-size: px2rpx(14);

    &:last-child {
        border-bottom: none;
    }

    .label {
        min-width: px2rpx(30);
        color: #666;
        font-weight: normal;
        flex-shrink: 0;
    }

    .value-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .value {
        color: #333;
        flex: 1;
    }

    .copy-btn {
        width: px2rpx(20);
        height: px2rpx(20);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: px2rpx(12);
        cursor: pointer;
        color: #999;
        transition: color 0.2s;

        &:active {
            color: #007aff;
        }

        svg {
            width: px2rpx(20);
            height: px2rpx(20);
        }
    }
}

// 可复制行样式（仅用于视觉区分）
.copyable-row {
    .value-wrapper {
        .value {
            // 可复制字段的值留出右侧空间
            margin-right: px2rpx(8);
        }
    }
}
</style>