gypsy-crm-frontend-vu/pages/mine/components/CardAuthDialog.vue

<template>
    <uni-popup ref="cardRef" type="center" background-color="#fff" style="z-index: 999;">
        <view class="dialog-container">
            <view class="dialog-header">
                <text class="dialog-title" v-t="'PersonalManagement.CardVerify.Title'" />
                <view class="dialog-close" @click="close">
                    <text>×</text>
                </view>
            </view>
            <view class="qrcode-page">
                <view class="container">
                    <view class="title" v-t="'PersonalManagement.CardVerify.UploadTitle'"></view>
                    <!-- 说明 -->
                    <uni-file-picker limit="9" :title="t('PersonalManagement.CardVerify.UploadTip')"
                        @select="fileSelect" @delete="fileDelete"></uni-file-picker>



                    <!-- 邮箱验证码部分 -->
                    <view>
                        <view class="code-input-wrapper">
                            <view class="code-input">
                                <cwg-input v-model:value="cardEmailCode" :label="t('newSignup.item9')"
                                    fkey="cardEmailCode" type="text" :required="true" rulesKey="cardEmailCode"
                                    :placeholder="t('newSignup.item10')" @change="handleChange" />
                            </view>
                            <view class="get-code-btn1">
                                <view class="ok-button">
                                    <u-button type="primary" block>{{ getCodeString }}</u-button>
                                </view>
                            </view>
                            <view class="get-code-btn">
                                <view class="cwg-button">
                                    <button class="btn-gray" block @click="handleGetCode">{{ getCodeString }}</button>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="notice">
                        <view class="notice-title">
                            <text class="icon">ⓘ</text>
                            <text>{{ t('PersonalManagement.CardVerify.NoticeTitle') }}</text>
                        </view>
                        <view class="notice-list">
                            <text v-for="(item, index) in noticeItems" :key="index" class="notice-item">
                                {{ index + 1 }}. {{ item }}
                            </text>
                        </view>
                    </view>

                    <!-- 演示视频 -->
                    <cwg-video-player :video-url="videoUrl"></cwg-video-player>
                </view>
            </view>
            <view class="dialog-footer">
                <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>
                <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { customApi } from '@/service/custom';
import { showToast } from "@/utils/toast";
import config from '@/config';
import { userToken } from '@/composables/config'
import { useEmailCountdown } from '@/hooks/useEmailCountdown';
const {
    time,
    text: getCodeString,
    canSend,
    start,
    restore
} = useEmailCountdown()
const { t, locale } = useI18n()
const cardEmailCode = ref('')
const form = ref({
    bankId: null,
    email: ''
})
const emit = defineEmits(["success"]);
// 发送邮箱验证码
async function sendEmailCode() {
    try {
        if (!form.value.bankId) {
            showToast(t("PersonalManagement.CardVerify.MissingBankId"));
            return false;
        }
        const res = await customApi.customBankCardSendCode({
            bankId: form.value.bankId
        });

        if (res.code === 200) {
            if (res.data && (res.data.emailCode || res.data.code)) {
                cardEmailCode.value = res.data.emailCode || res.data.code;
            }
            start()
            return true;
        } else {
            showToast(t("Msg.CodeFail"));
            return false;
        }
    } catch (error: any) {
        console.log(error, 12);

        showToast(t("Msg.CodeFail"));
        return false;
    }
}

async function handleGetCode() {
    if (!canSend.value) return
    await sendEmailCode();
}
// 视频URL
const videoUrl = computed(() => {
    const lang = locale.value || 'en'
    const videos = {
        cn: "https://player.vimeo.com/video/1152417528?badge=0&autopause=0&player_id=0&app_id=58479",
        zhHant: "https://player.vimeo.com/video/1152417614?badge=0&autopause=0&player_id=0&app_id=58479",
        en: "https://player.vimeo.com/video/1152417671?badge=0&autopause=0&player_id=0&app_id=58479",
    }
    return videos[lang] || videos.en
})
// uni-file-picker 相关
const selectedFiles = ref([]) // 选择的文件列表
const uploadedFiles = ref([]) // 上传成功的文件列表
// 选择文件
const fileSelect = async (e) => {
    selectedFiles.value = e.tempFiles
    for (const file of e.tempFiles) {
        await uploadFile(file)
    }
}

// 上传文件
const uploadFile = (file) => {
    return new Promise((resolve, reject) => {
        const tempFile = file.path || file.url
        uni.uploadFile({
            url: config.Host80 + '/custom/bank/upload',
            filePath: tempFile,
            name: 'file',
            header: {
                'Access-Token': userToken.value
            },
            success: (uploadRes) => {
                const data = JSON.parse(uploadRes.data)
                console.log(data, 1111);

                if (data.code === 200) {
                    // 保存上传成功后的文件信息
                    uploadedFiles.value.push(data.data)
                    resolve(data)
                } else {
                    uni.showToast({
                        title: data.msg || '上传失败',
                        icon: 'none'
                    })
                    reject(new Error(data.msg))
                }
            },
            fail: (err) => {
                uni.showToast({
                    title: '上传失败',
                    icon: 'none'
                })
                reject(err)
            }
        })
    })
}

// 删除文件
const fileDelete = (e) => {
    const index = uploadedFiles.value.findIndex(f => f.uuid === e.tempFile.uuid)
    if (index !== -1) {
        uploadedFiles.value.splice(index, 1)
    }
}

// 说明项
const noticeItems = computed(() => [
    t('PersonalManagement.CardVerify.NoticeItem1'),
    t('PersonalManagement.CardVerify.NoticeItem2'),
    t('PersonalManagement.CardVerify.NoticeItem3'),
    t('PersonalManagement.CardVerify.NoticeItem4'),
    t('PersonalManagement.CardVerify.NoticeItem5'),
    t('PersonalManagement.CardVerify.NoticeItem6'),
    t('PersonalManagement.CardVerify.NoticeItem7')
])

const cardRef = ref(null)
// 打开弹窗
const open = async (e, item) => {
    form.value = { ...item, bankId: item.id }
    console.log(item, 2222);
    await nextTick();
    restore()
    cardRef.value?.open();
};

// 关闭弹窗
const close = () => {
    cardRef.value?.close();
};
const submit = async () => {
    if (!cardEmailCode.value) {
        showToast(t("vaildate.emailCode.empty"));
        return;
    }
    try {
        const res = await customApi.customBankCardVerify({
            bankId: form.value.bankId,
            emailCode: cardEmailCode.value,
            fileList: uploadedFiles.value
        });
        if (res.code === 200) {
            showToast(res.msg);
            close();
            emit("success");
        } else {
            showToast(res.msg || t("common.error"));
        }
    } catch (error) {
        showToast(t("common.error"));
    }
};
// 暴露方法
defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
  @import "@/uni.scss";
.dialog-container {
    width: 90vw;
    max-width: px2rpx(800);
    max-height: 85vh;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rpx(20) px2rpx(24);
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        flex-shrink: 0;

        .dialog-title {
            font-size: px2rpx(20);
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .dialog-close {
            width: px2rpx(36);
            height: px2rpx(36);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: px2rpx(32);
            color: rgba(255, 255, 255, 0.9);
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);

            &:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: rotate(90deg);
            }

            &:active {
                transform: rotate(90deg) scale(0.9);
            }
        }
    }

    .dialog-footer {
        display: flex;
        gap: px2rpx(150);
        justify-content: center;
        padding: px2rpx(16);
        border-top: 1px solid #f3f4f6;

        .btn {
            min-width: px2rpx(120);
            padding: px2rpx(12) px2rpx(24);
            border-radius: px2rpx(6);
            font-size: px2rpx(14);
            font-weight: 600;
            border: none;
            box-sizing: border-box;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;

            &.btn-cancel {
                background: #f3f4f6;
                color: #6b7280;

                &:hover {
                    background: #e5e7eb;
                }

                &:active {
                    background: #d1d5db;
                }
            }

            &.btn-confirm {
                background: #ea2027;
                color: #fff;

                &:hover {
                    background: #d11920;
                }

                &:active {
                    background: #c01819;
                }
            }
        }
    }
}

.qrcode-page {
    flex: 1;
    overflow-y: auto;
    background: #f8f9fa;

    .container {
        padding: px2rpx(32);

        .title {
            font-size: px2rpx(18);
            font-weight: 600;
            color: #2c3e50;
            text-align: center;
            margin-bottom: px2rpx(24);
            padding-bottom: px2rpx(16);
            border-bottom: 2px solid #e9ecef;
        }

        .qrcode-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: px2rpx(32);
            padding: px2rpx(24);
            background: #fff;
            border-radius: px2rpx(12);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

            .qrcode {
                width: px2rpx(240);
                height: px2rpx(240);
            }
        }

        .notice {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: px2rpx(12);
            padding: px2rpx(24);
            margin-bottom: px2rpx(32);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            border-left: 4px solid #667eea;

            .notice-title {
                display: flex;
                align-items: center;
                gap: px2rpx(8);
                font-size: px2rpx(16);
                font-weight: 700;
                color: #2c3e50;
                margin-bottom: px2rpx(16);

                .icon {
                    width: px2rpx(24);
                    height: px2rpx(24);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #667eea;
                    color: var(--bs-emphasis-color);
                    border-radius: 50%;
                    font-size: px2rpx(16);
                    font-weight: bold;
                }
            }

            .notice-list {
                .notice-item {
                    display: block;
                    font-size: px2rpx(14);
                    color: #495057;
                    line-height: 1.8;
                    margin-bottom: px2rpx(10);
                    padding-left: px2rpx(8);
                    position: relative;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: px2rpx(10);
                        width: px2rpx(4);
                        height: px2rpx(4);
                        background: #667eea;
                        border-radius: 50%;
                    }
                }
            }
        }

        .video-section {
            background: #fff;
            border-radius: px2rpx(12);
            padding: px2rpx(24);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

            .video-title {
                font-size: px2rpx(16);
                font-weight: 600;
                color: #2c3e50;
                margin-bottom: px2rpx(16);
                display: flex;
                align-items: center;
                gap: px2rpx(8);

                &::before {
                    content: '';
                    width: px2rpx(4);
                    height: px2rpx(18);
                    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
                    border-radius: px2rpx(2);
                }
            }

            .video-wrapper {
                width: 100%;
                border-radius: px2rpx(8);
                overflow: hidden;
                background: #000;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

                video {
                    width: 100%;
                    height: px2rpx(300);
                    display: block;
                }
            }
        }
    }
}

// 验证码区域

.code-input-label {
    font-size: var(--font-size-16);
    line-height: px2rpx(44);
    letter-spacing: px2rpx(1);
    color: #474747;
}

.code-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.code-input {
    flex: 1;
}

.get-code-btn1 {
    min-width: px2rpx(100);
    margin-left: px2rpx(8);

    .ok-button {

        .u-button {
            background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
            opacity: 0;
        }
    }

}

.get-code-btn {
    position: absolute;
    right: 0;
    bottom: px2rpx(12);
    min-width: px2rpx(100);
    z-index: 1;
    margin-left: px2rpx(8);

    .cwg-button {
        margin: 0;
    }

    .cwg-button .u-button {
        border-radius: px2rpx(8);
        height: px2rpx(46) !important;
    }
  .btn-gray{
    height: px2rpx(46);
    line-height: px2rpx(46);
    border-radius: px2rpx(8);
    background-color: #102047;
    color: #fff;
  }
}

/* 移动端优化 */
@media screen and (max-width: 768px) {
    .dialog-container {
        width: 95vw;
        max-height: 90vh;
      .dialog-footer {
        gap: px2rpx(20);
        justify-content: space-around;
      }
    }


    .qrcode-page .container {
        padding: px2rpx(20);

        .qrcode-wrapper .qrcode {
            width: px2rpx(200);
            height: px2rpx(200);
        }

        .video-section .video-wrapper video {
            height: px2rpx(240);
        }
    }
}

/* 滚动条美化 */
.qrcode-page::-webkit-scrollbar {
    width: px2rpx(6);
}

.qrcode-page::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.qrcode-page::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: px2rpx(3);

    &:hover {
        background: #a8a8a8;
    }
}
</style>