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

<template>
    <cwg-popup :title="t('Shop.Index.Transaction')" :visible="props.visible" :showFooters="false"
        @update:visible="$emit('update:visible', $event)">
        <view class="card-list">
            <view class="card" @click="handleWebClick">
                <view class="card-icon">
                    <svg width="48" height="48" viewBox="0 0 48 48" class="muiltr-l39xog">
                        <rect width="48" height="48" rx="8" fill="#141D22"></rect>
                        <path
                            d="M24.3183 13.6533C26.025 13.6533 27.4116 12.2667 27.4116 10.56C27.4116 8.85334 26.025 7.46667 24.3183 7.46667C22.6116 7.46667 21.225 8.85334 21.225 10.56C21.225 12.2667 22.6116 13.6533 24.3183 13.6533Z"
                            fill="white"></path>
                        <path
                            d="M24.3174 31.5951C27.3254 31.5951 29.768 29.1524 29.768 26.1444C29.768 23.1364 27.3254 20.6937 24.3174 20.6937C21.3094 20.6937 18.8667 23.1364 18.8667 26.1444C18.8667 29.1524 21.3094 31.5951 24.3174 31.5951Z"
                            fill="white"></path>
                        <path
                            d="M28.8627 12.4052C28.8627 12.4052 28.7774 12.3732 28.724 12.3625C28.0094 14.1012 26.3027 15.3279 24.308 15.3279C22.3134 15.3279 20.6067 14.1012 19.892 12.3625C19.8494 12.3732 19.8067 12.3945 19.7534 12.4052C18.26 12.9065 17.3 14.3572 17.3 15.9252V20.3092C17.4494 20.5012 17.588 20.7039 17.7587 20.8745L18.868 21.9839C19.4227 21.2479 20.1267 20.6292 20.9267 20.1705V18.9759C20.9267 18.2825 21.4814 17.7279 22.1747 17.7279H26.4094C27.1027 17.7279 27.6574 18.2825 27.6574 18.9759V20.1065C28.532 20.5865 29.2787 21.2585 29.8654 22.0479L30.8254 21.0879C30.996 20.9172 31.1454 20.7145 31.284 20.5225V15.9145C31.284 14.3465 30.324 12.8959 28.8307 12.3945L28.8627 12.4052Z"
                            fill="white"></path>
                        <path
                            d="M13.245 32.4272C12.3916 30.9445 10.5036 30.4325 9.02095 31.2859C7.53828 32.1392 7.02628 34.0272 7.87962 35.5099C8.73295 36.9925 10.621 37.5045 12.1036 36.6512C13.5863 35.7979 14.0983 33.9099 13.245 32.4272Z"
                            fill="white"></path>
                        <path
                            d="M9.92847 29.2056V29.2376C11.7951 28.9923 13.7151 29.8563 14.7071 31.5843C15.6991 33.3123 15.4858 35.403 14.3338 36.8856C14.3338 36.8856 14.3445 36.8963 14.3551 36.907C15.5605 38.0163 17.3845 38.1123 18.8031 37.3016L22.5151 35.1683C22.6111 34.9443 22.7071 34.7203 22.7711 34.4856L23.1765 32.971C22.2591 32.8536 21.3738 32.555 20.5738 32.0856L19.3258 32.8003C18.8458 33.0776 18.2378 32.907 17.9711 32.4376L15.6138 28.331C15.3365 27.851 15.5071 27.243 15.9765 26.9763L17.1818 26.283C17.1605 25.291 17.3738 24.299 17.7685 23.3923L16.4458 23.0403C16.2111 22.9763 15.9658 22.955 15.7311 22.923L11.8271 25.163C10.4085 25.9736 9.57647 27.6056 9.92847 29.2056Z"
                            fill="white"></path>
                        <path
                            d="M35.3692 32.4272C36.2226 30.9445 38.1106 30.4325 39.5932 31.2859C41.0759 32.1392 41.5879 34.0272 40.7346 35.5099C39.8812 36.9925 37.9932 37.5045 36.5106 36.6512C35.0279 35.7979 34.5159 33.9099 35.3692 32.4272Z"
                            fill="white"></path>
                        <path
                            d="M38.6959 29.2058V29.2378C36.8292 28.9925 34.9092 29.8565 33.9172 31.5845C32.9252 33.3125 33.1385 35.4031 34.2905 36.8858C34.2905 36.8858 34.2799 36.8965 34.2692 36.9071C33.0639 38.0165 31.2399 38.1125 29.8212 37.3018L26.1092 35.1685C26.0132 34.9445 25.9172 34.7205 25.8532 34.4858L25.4479 32.9711C26.3652 32.8538 27.2505 32.5551 28.0505 32.0858L28.9252 32.5871C29.6079 32.9818 30.4825 32.7471 30.8772 32.0645L32.8079 28.7045C33.2025 28.0218 32.9679 27.1471 32.2852 26.7525L31.4532 26.2725C31.4745 25.2805 31.2612 24.2885 30.8665 23.3818L32.1892 23.0298C32.4239 22.9658 32.6692 22.9445 32.9039 22.9125L36.8079 25.1525C38.2265 25.9631 39.0585 27.5951 38.7065 29.1951L38.6959 29.2058Z"
                            fill="white"></path>
                    </svg>
                </view>
                <view class="card-content">
                    <text class="card-title">{{ webTitle }}</text>
                    <text class="card-desc">{{ t('Downloadpage.item40') }}</text>
                </view>
                <view class="card-arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="muiltr-isq1pf">
                        <path d="M5 12l14 0"></path>
                        <path d="M13 18l6 -6"></path>
                        <path d="M13 6l6 6"></path>
                    </svg>
                </view>
            </view>
            <view class="card" @click="handleDownloadClick">
                <view class="card-icon">
                    <svg width="48" height="48" viewBox="0 0 48 48" class="muiltr-l39xog">
                        <rect width="48" height="48" rx="8" fill="#141D22"></rect>
                        <path
                            d="M24.3183 13.6533C26.025 13.6533 27.4116 12.2667 27.4116 10.56C27.4116 8.85334 26.025 7.46667 24.3183 7.46667C22.6116 7.46667 21.225 8.85334 21.225 10.56C21.225 12.2667 22.6116 13.6533 24.3183 13.6533Z"
                            fill="white"></path>
                        <path
                            d="M24.3174 31.5951C27.3254 31.5951 29.768 29.1524 29.768 26.1444C29.768 23.1364 27.3254 20.6937 24.3174 20.6937C21.3094 20.6937 18.8667 23.1364 18.8667 26.1444C18.8667 29.1524 21.3094 31.5951 24.3174 31.5951Z"
                            fill="white"></path>
                        <path
                            d="M28.8627 12.4052C28.8627 12.4052 28.7774 12.3732 28.724 12.3625C28.0094 14.1012 26.3027 15.3279 24.308 15.3279C22.3134 15.3279 20.6067 14.1012 19.892 12.3625C19.8494 12.3732 19.8067 12.3945 19.7534 12.4052C18.26 12.9065 17.3 14.3572 17.3 15.9252V20.3092C17.4494 20.5012 17.588 20.7039 17.7587 20.8745L18.868 21.9839C19.4227 21.2479 20.1267 20.6292 20.9267 20.1705V18.9759C20.9267 18.2825 21.4814 17.7279 22.1747 17.7279H26.4094C27.1027 17.7279 27.6574 18.2825 27.6574 18.9759V20.1065C28.532 20.5865 29.2787 21.2585 29.8654 22.0479L30.8254 21.0879C30.996 20.9172 31.1454 20.7145 31.284 20.5225V15.9145C31.284 14.3465 30.324 12.8959 28.8307 12.3945L28.8627 12.4052Z"
                            fill="white"></path>
                        <path
                            d="M13.245 32.4272C12.3916 30.9445 10.5036 30.4325 9.02095 31.2859C7.53828 32.1392 7.02628 34.0272 7.87962 35.5099C8.73295 36.9925 10.621 37.5045 12.1036 36.6512C13.5863 35.7979 14.0983 33.9099 13.245 32.4272Z"
                            fill="white"></path>
                        <path
                            d="M9.92847 29.2056V29.2376C11.7951 28.9923 13.7151 29.8563 14.7071 31.5843C15.6991 33.3123 15.4858 35.403 14.3338 36.8856C14.3338 36.8856 14.3445 36.8963 14.3551 36.907C15.5605 38.0163 17.3845 38.1123 18.8031 37.3016L22.5151 35.1683C22.6111 34.9443 22.7071 34.7203 22.7711 34.4856L23.1765 32.971C22.2591 32.8536 21.3738 32.555 20.5738 32.0856L19.3258 32.8003C18.8458 33.0776 18.2378 32.907 17.9711 32.4376L15.6138 28.331C15.3365 27.851 15.5071 27.243 15.9765 26.9763L17.1818 26.283C17.1605 25.291 17.3738 24.299 17.7685 23.3923L16.4458 23.0403C16.2111 22.9763 15.9658 22.955 15.7311 22.923L11.8271 25.163C10.4085 25.9736 9.57647 27.6056 9.92847 29.2056Z"
                            fill="white"></path>
                        <path
                            d="M35.3692 32.4272C36.2226 30.9445 38.1106 30.4325 39.5932 31.2859C41.0759 32.1392 41.5879 34.0272 40.7346 35.5099C39.8812 36.9925 37.9932 37.5045 36.5106 36.6512C35.0279 35.7979 34.5159 33.9099 35.3692 32.4272Z"
                            fill="white"></path>
                        <path
                            d="M38.6959 29.2058V29.2378C36.8292 28.9925 34.9092 29.8565 33.9172 31.5845C32.9252 33.3125 33.1385 35.4031 34.2905 36.8858C34.2905 36.8858 34.2799 36.8965 34.2692 36.9071C33.0639 38.0165 31.2399 38.1125 29.8212 37.3018L26.1092 35.1685C26.0132 34.9445 25.9172 34.7205 25.8532 34.4858L25.4479 32.9711C26.3652 32.8538 27.2505 32.5551 28.0505 32.0858L28.9252 32.5871C29.6079 32.9818 30.4825 32.7471 30.8772 32.0645L32.8079 28.7045C33.2025 28.0218 32.9679 27.1471 32.2852 26.7525L31.4532 26.2725C31.4745 25.2805 31.2612 24.2885 30.8665 23.3818L32.1892 23.0298C32.4239 22.9658 32.6692 22.9445 32.9039 22.9125L36.8079 25.1525C38.2265 25.9631 39.0585 27.5951 38.7065 29.1951L38.6959 29.2058Z"
                            fill="white"></path>
                    </svg>
                </view>
                <view class="card-content">
                    <text class="card-title">{{ downloadItem.name }}</text>
                    <text class="card-desc">{{ downloadItem.description }}</text>
                </view>
                <view class="card-arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12l14 0"></path>
                        <path d="M13 18l6 -6"></path>
                        <path d="M13 6l6 6"></path>
                    </svg>
                </view>
            </view>
            <view @click="handleClick" class="card">
                <view class="card-content">
                    <text class="card-title" v-t="'vu.item13'"></text>
                </view>
                <view class="card-arrow">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12l14 0"></path>
                        <path d="M13 18l6 -6"></path>
                        <path d="M13 6l6 6"></path>
                    </svg>
                </view>
            </view>
        </view>
    </cwg-popup>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { TerminalMap } from '../composables/TerminalMap'
import config from '@/config';
const { t, locale } = useI18n()
import useRouter from "@/hooks/useRouter";
const router = useRouter();
const props = defineProps({
    visible: { type: Boolean, default: false },
    mtType: { type: String, default: 'MT4', validator: val => ['MT4', 'MT5'].includes(val) }
})
const emit = defineEmits(['update:visible'])
const handleClick = () => {
    router.push("/pages/common/download")
}
// ---------- 平台相关 ----------
const platform = ref('')
const baseUrl = ref('')
const domain = ref('')

// 获取当前运行平台
const getPlatform = () => {
    // #ifdef APP-PLUS
    const sys = uni.getSystemInfoSync()
    return sys.platform === 'android' ? 'android' : 'ios'
    // #endif
    // #ifdef H5
    const ua = navigator.userAgent.toLowerCase()
    if (ua.includes('windows')) return 'windows'
    if (ua.includes('mac')) return 'mac'
    if (ua.includes('android')) return 'android'
    if (ua.includes('iphone') || ua.includes('ipad')) return 'ios'
    return 'windows'
    // #endif
}

// 初始化环境变量（域名、基础URL）
const initEnv = () => {
    baseUrl.value = config.Host80
    domain.value = config.ho
}

// 替换 URL 中的占位符
const resolveUrl = (urlTemplate) => {
    if (!urlTemplate) return ''
    let url = urlTemplate
    if (url.includes('{myLink}')) {
        url = url.replace(/{myLink}/g, baseUrl.value)
    }
    if (url.includes('{domain}')) {
        url = url.replace(/{domain}/g, domain.value)
    }
    return url
}

// 获取当前 MT 版本的数据
const mtData = computed(() => TerminalMap[props.mtType] || {})

// Web 端标题（根据版本显示不同标题）
const webTitle = computed(() => {
    return props.mtType === 'MT4' ? t('Downloadpage.item38') : t('Downloadpage.item39')
})

// 根据当前 MT 版本和平台，获取对应的下载端信息
const downloadItem = computed(() => {
    const data = mtData.value
    if (!data) return null

    let item = null
    if (platform.value === 'windows' || platform.value === 'mac') {
        const list = data.desktop?.[platform.value] || []
        item = list[0]
    } else if (platform.value === 'android' || platform.value === 'ios') {
        const list = data.mobile?.[platform.value] || []
        item = list[0]
    }

    if (!item) return null

    // 构造显示名称和描述（国际化）
    let name = ''
    let description = ''
    if (item.name) {
        name = item.name
        description = item.descriptionKey ? t(item.descriptionKey) : (item.description || '')
    } else if (item.nameKey) {
        name = t(item.nameKey)
        description = item.descriptionKey ? t(item.descriptionKey) : ''
    }

    // 图标路径处理
    let icon = item.icon || ''
    if (platform.value === 'android' && !icon) icon = 'android-os-3-72.png'
    if (platform.value === 'ios' && !icon) icon = 'apple-os-3-72.png'
    if (platform.value === 'windows' && !icon) icon = 'windows-os-1-48.png'
    if (platform.value === 'mac' && !icon) icon = 'apple-os-1-48.png'

    return {
        url: resolveUrl(item.url),
        filename: item.filename,
        name,
        description,
        icon
    }
})

// 获取 Web 端链接（根据当前 MT 版本和语言）
const webUrl = computed(() => {
    const data = mtData.value
    if (!data || !data.web) return ''
    let url = data.web.url
    // 替换动态变量
    url = resolveUrl(url)
    // 替换语言占位符（{lang}）
    url = url.replace(/{lang}/g, locale.value)
    return url
})

// 处理 Web 端点击
const handleWebClick = () => {
    if (!webUrl.value) {
        uni.showToast({ title: t('Downloadpage.invalidLink') || '链接无效', icon: 'none' })
        return
    }
    // #ifdef APP-PLUS
    plus.runtime.openURL(webUrl.value, (err) => {
        uni.showToast({ title: t('Downloadpage.openFailed') || '打开失败，请重试', icon: 'none' })
    })
    // #endif
    // #ifdef H5
    window.location.href = webUrl.value
    // #endif
}

// 处理下载端点击
const handleDownloadClick = () => {
    if (!downloadItem.value || !downloadItem.value.url) {
        uni.showToast({ title: t('Downloadpage.unsupported') || '暂不支持当前平台下载', icon: 'none' })
        return
    }

    const url = downloadItem.value.url
    // #ifdef APP-PLUS
    plus.runtime.openURL(url, (err) => {
        uni.showToast({ title: t('Downloadpage.openFailed') || '打开失败，请重试', icon: 'none' })
    })
    // #endif
    // #ifdef H5
    if (url.match(/\.(exe|dmg|pkg|apk|zip)$/i)) {
        const a = document.createElement('a')
        a.href = url
        a.download = downloadItem.value.filename || ''
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    } else {
        window.open(url, '_blank')
    }
    // #endif
}

// 初始化
onMounted(() => {
    platform.value = getPlatform()
    initEnv()
})
</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(600) !important;
    }
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: px2rpx(12);
}

.card {
    display: flex;
    align-items: center;
    background-color: rgba(108, 133, 149, 0.08);
    border-radius: px2rpx(12);
    padding: px2rpx(14) px2rpx(12);
    border: 1px solid rgba(108, 133, 149, 0);
    transition: background-color 0.2s;

    &:hover {
        border: 1px solid rgba(108, 133, 149, 0.2);
    }
}

.card-icon {
    width: px2rpx(54);
    height: px2rpx(54);
    background-color: #141D22;
    border-radius: px2rpx(12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: px2rpx(12);
    flex-shrink: 0;

    .icon-image {
        width: px2rpx(32);
        height: px2rpx(32);
    }
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: px2rpx(14);
    font-weight: 600;
    line-height: 1.4;
    color: #141d22;
}

.card-desc {
    font-size: px2rpx(14);
    color: #A0B0C0;
    margin-top: 8rpx;
}

.card-arrow {
    width: px2rpx(24);
    height: px2rpx(24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16rpx;
    flex-shrink: 0;
    color: #141d22;
}
</style>