I18nPop.vue

<template>
  <uv-popup ref="i18nPopRef" round="24rpx" @maskClick="handleShowTabbar">
    <view class="pop_header">
      <view style="width: 22px;visibility: hidden;"></view>
      <!-- <view style="width: 22px;"></view> -->
      <text class="pop_header_text">{{ t('table.language') }}</text>
      <uv-icon name="close" size="22" class="pop_header_icon" @tap="handleCloseI18nPop"></uv-icon>
    </view>
    <view class="national">
      <view class="n_item" v-for="(item,index) in i18nList" :key="item.value"
        :class="{'n_item_active':index === checkIndex}" @tap="handleChangeI18n(index)">
        <image :src="item.nationalFlag" style="width: 52rpx;" mode="widthFix"></image>
        <view class="n_label">
          <view class="n_item_text" :class="{'n_item_active_text':index === checkIndex}">{{ item.label }}</view>
          <view class="n_item_textDesc">{{ item.labelDesc }}</view>
        </view>

        <image v-if="checkIndex === index" src="@/static/national-flag/check.png" style="width: 36rpx;height:36rpx"
          mode="aspectFill"></image>

      </view>
    </view>
    <view class="confirm-button" @tap="handleConfirmSelectType">
      <text class="btn">{{ t('message.confirm') }}</text>
    </view>
  </uv-popup>
</template>

<script setup>
  import {
    ref,
    computed
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    t,
    changeLanguage
  } from '@/plugins/index.js'
  import {
    bindClientIdApi
  } from '@/api';
  import usa from '@/static/national-flag/usa.png'
  import japan from '@/static/national-flag/japan.png'
  import cn from '@/static/national-flag/cn.png'
  const props = defineProps({
    reloadPage: {
      type: String,
      default: ''
    },
    bindCid: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['changeLang'])
  const i18nPopRef = ref(null)
  const checkIndex = ref(0)
  const handleOpenI18n = () => {
    uni.hideTabBar()
    const index = i18nList.findIndex(item => item.value === currentLang.value)
    checkIndex.value = index === -1 ? 0 : index
    i18nPopRef.value?.open('bottom')
  }
  const handleShowTabbar = ()=>{
    uni.showTabBar()
  }
  const handleCloseI18nPop = () => {
    i18nPopRef.value?.close()
    handleShowTabbar()
  }
  const handleChangeI18n = (index) => {
    checkIndex.value = index
  }
  const handleConfirmSelectType = async () => {
    try {
      const index = i18nList.findIndex(item => item.value === currentLang.value)
      currentLang.value = i18nList[checkIndex.value].value
      await changeLanguage(currentLang.value, true)

      await handleCloseI18nPop()
      // 重新载入
      if (props.reloadPage) {
        uni.setStorageSync('lang', currentLang.value)
        // if(props.tab){
        //   uni.switchTab({
        //     url: props.reloadPage
        //   })
        // }else{
        //   // uni.reLaunch({
        //   //   url: props.reloadPage
        //   // })
        // }
      }
      const item = i18nList.find(item => item.value === currentLang.value)
      if(props.bindCid){
        await handleRebindCid()
      }
      await emit('changeLang', item)
    } catch (e) {
      console.log(e)
    }
  }
  const handleRebindCid = async ()=>{
    try {
      const clientInfo = uni.getDeviceInfo()
      await bindClientIdApi({
        clientId: uni.getStorageSync('clientId'),
        clientType: clientInfo.osName, // ios or android
        deviceInfo: JSON.stringify(clientInfo), // 备用传值
        language: uni.getStorageSync('lang'),
        status: 1
      })
    } catch (error) {
      console.log('error:', error);
    }
  }


  const currentLang = ref(uni.getStorageSync('lang') || 'en_US')

  const currentLangText = computed(() => {
    const item = i18nList.find(item => item.value === currentLang.value)
    return item?.labelDesc || 'English,US'
  })

  const currentLangImg = computed(() => {
    const item = i18nList.find(item => item.value === currentLang.value)
    return item?.nationalFlag || usa
  })


  const i18nList = [{
    label: 'English,US',
    labelDesc: 'English,US',
    value: 'en_US',
    nationalFlag: usa
  }, {
    label: 'Japan',
    labelDesc: 'Japanese',
    value: 'ja_JP',
    nationalFlag: japan
  },
  // {
  //   label: 'China',
  //   labelDesc: 'Chinese',
  //   value: 'zh_CN',
  //   nationalFlag: cn
  // }, {
  //   label: 'China',
  //   labelDesc: 'Traditional Chinese',
  //   value: 'zh_TW',
  //   nationalFlag: cn
  // },
  ]
  onLoad(()=>{
    const item = i18nList.find(item => item.value === currentLang.value)
    emit('changeLang', item)
  })
defineExpose({
    currentLangImg,
    currentLangText,
    handleOpenI18n
  })
</script>

<style lang="scss" scoped>
  .national {
    overflow: hidden;
    padding: 32rpx 0 32rpx 32rpx;
  }

  .n_item {
    padding: 16rpx 32rpx 16rpx 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EEF0F3;
  }

  .n_label {
    flex: 1;
    margin-left: 30rpx;

    .n_item_text {
      font-family: Inter, Inter;
      font-weight: 500;
      font-size: 28rpx;
      color: #262626;
    }

    .n_item_textDesc {
      font-family: Inter, Inter;
      font-weight: 400;
      font-size: 24rpx;
      color: #90949D;
    }
  }

  .confirm-button {
    width: 686rpx;
    height: 88rpx;
    background-color: #387CF5;
    border-radius: 12rpx;
    margin: 14rpx 32rpx 50rpx;
    text-align: center;
    line-height: 88rpx;

    .btn {
      color: #fff;
      text-align: center;
    }
  }
</style>