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

<template>
    <cwg-popup :title="'账户昵称'" :visible="props.visible" :showFooters="false"
        @update:visible="$emit('update:visible', $event)">
        <view class="popup-content">
            <text class="account-number">{{ accountLabel }} {{ account.login }}</text>
            <text class="account-hint">{{ hint }}</text>

            <view class="form-item">
                <view class="input-label">账户昵称</view>
                <input class="input-field" v-model="nickName" :maxlength="36" :placeholder="placeholder"
                    @input="onInput" />
                <text class="input-hint">{{ constraint }}</text>
            </view>
            <view class="save-btn">
                <view class="btn primary" @click="save" :disabled="!isValid || !nickName.trim()" v-t="'Btn.Save'" />
            </view>
        </view>
    </cwg-popup>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { customApi } from '@/service/custom';
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const props = defineProps({
    visible: { type: Boolean, default: false },
    // 账户编号
    account: { type: Object, default: {} },
    // 标题
    title: { type: String, default: '账户昵称' },
    // 账户标签前缀
    accountLabel: { type: String, default: '账户: #' },
    // 提示文字
    hint: { type: String, default: '为账户定制名称，以便快速查找。' },
    // 输入框占位符
    placeholder: { type: String, default: '为账户定制名称，以便快速查找。' },
    // 特殊字符限制说明
    constraint: { type: String, default: '昵称不可包含特殊字符：< > " \' & ? ^ * # @' }
})
const emit = defineEmits(['update:visible', 'save'])

const nickName = ref(props.account.nickName)

// 特殊字符正则
const specialCharsRegex = /[<>"\'&?^*#@]/

// 校验昵称是否合法
const isValid = computed(() => {
    if (!nickName.value) return false
    return !specialCharsRegex.test(nickName.value)
})

// 输入时实时校验（可选，可去掉）
const onInput = (e) => {
    // 实时过滤非法字符（也可以只是校验）
}
// 保存昵称
const save = async () => {
    if (!isValid.value) {
        uni.showToast({
            title: '昵称包含非法字符，请重新输入',
            icon: 'none'
        })
        return
    }
    const nickname = nickName.value.trim()
    if (!nickname) {
        uni.showToast({
            title: '昵称不能为空',
            icon: 'none'
        })
        return
    }
    const res = await customApi.updateNick({ nickName: nickname, login: props.account.login })
    if (res.code == 200) {
        emit('update:visible', false)
        emit('save', nickname)
    }
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

@media (min-width: 768px) {
    :deep(.cwg-dialog) {
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        border-radius: px2rpx(8);
        width: px2rpx(480) !important;
    }
}

.popup-content {
    padding: px2rpx(16);
}

.account-number {
    display: block;
    font-size: px2rpx(14);
    color: #fff;
    margin-bottom: px2rpx(40);
}

.account-hint {
    display: block;
    font-size: px2rpx(13);
    color: #fff;
    margin-bottom: px2rpx(40);
}

.form-item {
    margin-bottom: px2rpx(20);
}

.input-label {
    font-size: px2rpx(12);
    color: #fff;
    margin-bottom: px2rpx(4);
}

.input-field {
    width: 100%;
    height: px2rpx(40);
    border: 1px solid #ddd;
    border-radius: px2rpx(6);
    padding: 0 px2rpx(12);
    font-size: px2rpx(14);
    box-sizing: border-box;
}

.input-hint {
    display: block;
    font-size: px2rpx(11);
    color: var(--bs-heading-color);
    margin-top: px2rpx(6);
    line-height: 1.4;
}

.save-btn {
    width: 100%;
    height: px2rpx(40);
    color: #fff;
    border-radius: px2rpx(8);
    font-size: px2rpx(16);
    font-weight: 500;
    display: flex;
    justify-content: flex-end;

    border: none;


    .btn {
        background: transparent;
        border: 1px solid rgba(108, 133, 149, 0);
        border-radius: px2rpx(8);
        padding: px2rpx(8) px2rpx(20);
        font-size: px2rpx(14);
        color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(8);
        cursor: pointer;
        transition: all 0.2s;
        height: px2rpx(40);
        box-sizing: border-box;
        background-color: rgba(108, 133, 149, 0.08);

        &.primary {
            background-color: #cf1322;
            ;
            color: #fff;

            svg {
                stroke: #fff;
            }

            &:hover {
                background-color: var(--color-navy-600);
            }
        }
    }
}
</style>