MTP20_WEB_GLOBAL/src/stores/modules/global.ts

import { reactive, toRefs } from 'vue'
import { AppTheme } from '@/constants/theme'
import { defineStore } from '../store'
import { localData } from '../storage'
import axios from 'axios'
import plus from '@/utils/h5plus'

export interface SystemInfo {
    appName: string; // 应用名称
    version: string; // 应用版本
    versionCode: string; // 应用版本号
    apiUrl: string; // 接口地址
    tradeChannel: 'http' | 'ws'; // 交易通道
    modules: ('register' | 'delivery')[]; // 应用包含的模块
    quotationPropertys: (keyof Model.QuoteDayRsp)[]; // 盘面可显示的属性
    forcedPasswordChange: boolean; // 首次登录是否强制修改密码
    slogan: string; // 标语
    registrationCodeRule: -1 | 0 | 1; // 注册编码规则，-1隐藏，0非必填，1必填
    riskType: 0 | 1 | 2; // 风控类型，1按单风控，2按账户风控
}

export const useGlobalStore = defineStore(() => {
    const appTheme = localData.getRef('appTheme')
    const androidPermissions = localData.getRef('androidPermissions')

    const state = reactive({
        dateDiff: 0, // 服务器和本地的时间差(毫秒数)
        showGoodsListing: false, // 是否显示订单交易挂牌
        showPricingListing: false, // 是否显示挂牌点价交易
        showTransferListing: false, // 是否显示定金转让挂牌
        clientWidth: 0, // 客户端宽度
        isMobile: false, // 是否移动设备
        systemInfo: <SystemInfo>{
            appName: document.title,
            version: '1.0.0',
            versionCode: '100000',
            apiUrl: 'http://localhost',
            tradeChannel: 'ws',
            modules: [],
            quotationPropertys: [],
            forcedPasswordChange: false,
            slogan: '数字化交易平台\r\n现代化综合服务',
            registrationCodeRule: 1,
            riskType: 0
        }
    })

    // 获取当前服务器时间戳
    const getTimestamp = () => {
        const ts = new Date().getTime()
        return ts - state.dateDiff
    }

    // 获取系统配置项
    const getSystemConfig = async () => {
        const filePath = './config/appconfig.json'
        if (plus.hasPlus()) {
            const res = await plus.getLocalFileContent(filePath)
            state.systemInfo = {
                ...state.systemInfo,
                ...JSON.parse(res)
            }
        } else {
            const res = await axios(filePath)
            state.systemInfo = {
                ...state.systemInfo,
                ...res.data
            }
        }
        return state.systemInfo
    }

    // 获取系统信息
    const getSystemInfo = <K extends keyof SystemInfo>(key: K) => {
        return state.systemInfo[key]
    }

    // 判断应用是否包含某个模块
    const hasSystemModule = (module: SystemInfo['modules'][number]) => {
        return state.systemInfo.modules.includes(module)
    }

    // 判断盘面是否包含某个属性
    const hasQuotationProperty = (prop: keyof Model.QuoteDayRsp) => {
        return state.systemInfo.quotationPropertys.includes(prop)
    }

    // 获取APP权限状态
    const getAndroidPermissions = <K extends keyof typeof androidPermissions.value>(key: K) => {
        if (plus.hasPlus() && plus.getSystemInfo('os') === 'Android') {
            return androidPermissions.value[key]
        }
        return 1
    }

    // 更新APP权限状态
    const setAndroidPermissions = <K extends keyof typeof androidPermissions.value>(key: K, value: number) => {
        androidPermissions.value[key] = value
        localData.setValue('androidPermissions', androidPermissions.value)
    }

    // 设置状态栏主题色
    const setStatusBarTheme = (theme: AppTheme) => {
        switch (theme) {
            case AppTheme.Default:
            case AppTheme.Dark: {
                plus.setStatusBarStyle('light')
                break
            }
            default: {
                plus.setStatusBarStyle('dark')
            }
        }
    }

    // 设置主题
    const setTheme = (key: keyof typeof AppTheme) => {
        const theme = AppTheme[key]
        setStatusBarTheme(theme)
        document.documentElement.setAttribute('theme', theme)
        appTheme.value = theme
    }

    // 适配客户端屏幕
    const screenAdapter = (remsize = false) => {
        const { isPc } = getClientAgent()
        const el = document.documentElement
        const body = document.body
        let screenWidth = el.clientWidth

        if (remsize) {
            const designSize = 750
            state.isMobile = true

            if (isPc) {
                screenWidth = designSize / 1.8
                body.style.setProperty('width', '540px')
            } else {
                body.style.removeProperty('width')
            }

            if (screenWidth > 0) {
                const fontSize = (screenWidth / designSize) * 100 + 'px'
                el.style.setProperty('font-size', fontSize)
            }
        } else {
            // if (screenWidth > 768) {
            //     state.isMobile = false
            // } else {
            //     state.isMobile = true
            // }

            el.setAttribute('screen', state.isMobile ? 'small' : 'normal')
        }

        state.clientWidth = body.clientWidth
    }

    // 获取客户端平台
    const getClientAgent = () => {
        const ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
            isiPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isiPhone && !isAndroid && !isSymbian && !isTablet

        return {
            isTablet,
            isiPhone,
            isAndroid,
            isChrome,
            isPc,
        }
    }

    // 加载主题
    const loadTheme = () => {
        setStatusBarTheme(appTheme.value)
        document.documentElement.setAttribute('theme', appTheme.value)
        document.removeEventListener('DOMContentLoaded', loadTheme)
    }

    // 等待 dom 加载完毕
    document.addEventListener('DOMContentLoaded', loadTheme, false)

    return {
        ...toRefs(state),
        appTheme,
        getTimestamp,
        getSystemConfig,
        getSystemInfo,
        hasSystemModule,
        hasQuotationProperty,
        getAndroidPermissions,
        setAndroidPermissions,
        setStatusBarTheme,
        setTheme,
        screenAdapter,
        getClientAgent
    }
})