ucard-person-app-front/pages/mine/language.vue

<template>
  <cwg-page-wrapper>
    <view class="page page-shadow">
      <view v-for="item in localesList" :key="item" class="lang-item" :class="{ active: currentLang === item }"
        @click="changeLang(item)">
        {{ t(`language.${item}`) }}
        <view v-if="currentLang === item" class="check">
          <cwg-icon name="icon_select" />
        </view>
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { lang } from "@/composables/config";
import { localesList } from "@/locale/index";

const { locale, t } = useI18n();
const currentLang = ref(lang.value || locale.value);
function changeLang(langValue: string) {
  locale.value = langValue;
  lang.value = langValue;
  currentLang.value = langValue;
}
</script>

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

.title {
  font-size: px2rpx(22);
  color: #000;
  font-weight: bold;
  margin-bottom: px2rpx(44);
}

.lang-item {
  background: var(--main-bg);
  border-radius: px2rpx(14);
  padding: px2rpx(18);
  font-size: px2rpx(20);
  margin-bottom: px2rpx(44);
  color: #000;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.lang-item.active {
  border-radius: px2rpx(10);
  background: rgba(255, 209, 216, 0.85);
}

.check {
  margin-left: auto;

  svg {
    width: px2rpx(44);
    height: px2rpx(44);
    font-size: px2rpx(44);
    margin-right: px2rpx(12);
    color: #4caf50;
  }
}
</style>