besure_app/src/pages_mine/pages/setting/index.vue

<template>
  <view class="setting-container" :style="{ height: `${windowHeight}px` }">
    <NavBar :title="pageTitle" />
    <view class="menu-list">
      <view class="list-cell list-cell-arrow" @click="handleLanguageChange">
        <view class="menu-item-box">
          <view class="iconfont icon-global menu-icon"></view>
          <view>{{ t('setting.language') }}</view>
        </view>
        <view class="text-grey">{{ t('setting.currentLanguage', { language: currentLanguageLabel }) }}</view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleToPwd">
        <view class="menu-item-box">
          <view class="iconfont icon-password menu-icon"></view>
          <view>{{ t('mine.changePassword') }}</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleTerminalChange">
        <view class="menu-item-box">
          <view class="iconfont icon-phone menu-icon"></view>
          <view>{{ t('setting.terminalMode') }}</view>
        </view>
        <view class="text-grey">{{ t('setting.currentTerminal', { terminal: currentTerminalLabel }) }}</view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
        <view class="menu-item-box">
          <view class="iconfont icon-refresh menu-icon"></view>
          <view>{{ t('setting.checkUpdate') }}</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
        <view class="menu-item-box">
          <view class="iconfont icon-clean menu-icon"></view>
          <view>{{ t('setting.cleanCache') }}</view>
        </view>
      </view>
    </view>
    <view class="cu-list menu">
      <view class="cu-item item-box">
        <view class="content text-center" @click="handleLogout">
          <text class="text-black">{{ t('setting.logout') }}</text>
        </view>
      </view>
    </view>
  </view>
  <view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog type="info" :cancelText="t('common.close')" :confirmText="t('common.exit')" :title="t('common.notice')" :content="t('common.confirmLogout')"
        @confirm="dialogConfirm" @close="dialogClose">
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { useI18n } from 'vue-i18n'
import useUserStore from '@/store/modules/user'
import { getCurrentLocale, setLocale } from '@/locales'
import NavBar from '@/components/common/NavBar.vue'
import { getTerminalType, setTerminalType, TERMINAL_TYPE_MOBILE, TERMINAL_TYPE_SCANNER } from '@/utils/terminal'

const userStore = useUserStore()
const { t } = useI18n()

const pageTitle = computed(() => t('nav.setting'))
const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
const popup = ref(null);
const currentLocale = ref(getCurrentLocale())
const currentTerminalType = ref(getTerminalType())
const currentLanguageLabel = computed(() => currentLocale.value === 'en-US' ? t('setting.enUS') : t('setting.zhCN'))
const currentTerminalLabel = computed(() => currentTerminalType.value === TERMINAL_TYPE_SCANNER ? t('setting.scanner') : t('setting.mobile'))

function handleToPwd() {
  uni.navigateTo({
    url: '/pages_mine/pages/pwd/index'
  });
};

function handleToUpgrade() {
  uni.showToast({
    title: t('common.moduleBuilding'),
    mask: false,
    icon: "none",
    duration: 1000
  });
};

function handleCleanTmp() {
  uni.showToast({
    title: t('common.moduleBuilding'),
    mask: false,
    icon: "none",
    duration: 1000
  });
};
function handleLanguageChange() {
  uni.showActionSheet({
    itemList: [t('setting.zhCN'), t('setting.enUS')],
    success: ({ tapIndex }) => {
      const nextLocale = tapIndex === 1 ? 'en-US' : 'zh-CN'
      setLocale(nextLocale)
      currentLocale.value = nextLocale
      uni.showToast({
        title: t('common.languageSwitched'),
        icon: 'none',
        duration: 1000
      })
    }
  })
}

function handleTerminalChange() {
  uni.showActionSheet({
    itemList: [t('setting.mobile'), t('setting.scanner')],
    success: async ({ tapIndex }) => {
      const nextTerminalType = tapIndex === 1 ? TERMINAL_TYPE_SCANNER : TERMINAL_TYPE_MOBILE
      if (nextTerminalType === currentTerminalType.value) {
        return
      }

      const previousTerminalType = currentTerminalType.value
      setTerminalType(nextTerminalType)
      currentTerminalType.value = nextTerminalType
      uni.showLoading({
        title: t('setting.switchingTerminal')
      })

      try {
        await userStore.refreshPermissionInfo()
        uni.showToast({
          title: t('setting.terminalSwitched', { terminal: currentTerminalLabel.value }),
          icon: 'none',
          duration: 1000
        })
      } catch (error) {
        setTerminalType(previousTerminalType)
        currentTerminalType.value = previousTerminalType
        await userStore.refreshPermissionInfo().catch(() => {})
        uni.showToast({
          title: t('common.saveFailed'),
          icon: 'none',
          duration: 1000
        })
      } finally {
        uni.hideLoading()
      }
    }
  })
}

function handleLogout() {
  popup.value.open();
};
function dialogConfirm() {
  userStore.logOut().then(() => {
    uni.reLaunch({
      url: '/pages/login'
    });
  })
};
function dialogClose() {
};

</script>

<style lang="scss" scoped>
.page {
  background-color: #f8f8f8;
}

.item-box {
  background-color: #FFFFFF;
  margin: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
  border-radius: 8rpx;
  color: #303133;
  font-size: 32rpx;
}
</style>