index.vue

<template>
  <div class="setting_container">
    <NafmHeader navClass="nafmii-head-bg3" :title="$t('title.setting')" />
    <div class="setting_list">
      <!-- 
      <van-cell :title="$t('setting.newMsgTip')" center value-class="right_content">
        <template #default>
          <van-switch v-model="msgChecked" @click="changeMsgStatus" size="20px" />
        </template>
      </van-cell> 
      -->
      <van-cell :title="$t('setting.language')" center is-link @click="controllZhEn(true)" value-class="right_content">
        <template #default>
          {{$t("lang")}}
        </template>
      </van-cell>
      <van-cell :title="$t('setting.bindWechat')" center is-link @click="jumpMessagePage('wechat')" value-class="right_content">
        <template #default>
          {{wechatNick}}
        </template>
      </van-cell>
      <van-cell :title="$t('setting.resetPassword')" center is-link @click="jumpMessagePage('reset')" value-class="right_content" />
      <!-- 
      <van-cell title="指纹ID解锁" center value-class="right_content">
        <template #default>
          <van-switch v-model="fingerprintChecked" @click="changeFingerprintStatus" size="20px" />
        </template>
      </van-cell>
      <van-cell title="面容ID解锁" center value-class="right_content">
        <template #default>
          <van-switch v-model="faceIdChecked" @click="changeFaceIdStatus" size="20px" />
        </template>
      </van-cell> 
    -->

      <van-cell title="字体大小" center is-link @click="showSysFont=true" value-class="right_content">
        <template #default>
          <span>{{sysFontText}}</span>
        </template>
      </van-cell>
    </div>
    <div class="agreement_list">
      <van-cell :title="$t('setting.privacyPolicy')" center is-link @click="jumpPrivacyPage" value-class="right_content" />
      <van-cell :title="$t('setting.serviceAgreement')" center is-link @click="jumpServicePage" value-class="right_content" />
    </div>

    <van-button type="primary" plain color="#a4a4a4" class="logout_btn" @click="handleLogout">{{$t('button.logout')}}</van-button>

    <van-action-sheet v-model="showZhEn" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @cancel="controllZhEn(false)" @select="changeLang" />
    <van-popup v-model="showSysFont" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showSysFont = false" />
    </van-popup>
  </div>
</template>
<script>
import { setLocalStorage, getLocalStorage, removeLocalStorage } from '@/utils/LocalStorage'
import { NativeApi } from '@/api/NativeApis';
export default {
  name: 'Setting',
  data() {
    return {
      msgChecked: false, //新消息提醒
      showZhEn: false, // 弹出中英文设置
      fingerprintChecked: false, // 指纹ID解锁状态 
      faceIdChecked: false, // 面容ID解锁状态 
      wechatNick: '',// 微信昵称
      showSysFont: false,
      sysFontText: getLocalStorage('sysFontText') || '标准字体',
      columns: [{ text: '特大字体', value: 120 }, { text: '大字体', value: 110 }, { text: '标准字体', value: 100 }, { text: '小字体', value: 98 }],
    }
  },
  mounted() {
    this.msgChecked = true
  },
  computed: {
    // 中英文切换 切换 tab
    actions() {
      return [{ name: '中文', key: 'zh' }, { name: 'English', key: 'en' }] // 中英文切换选项
    }
  },
  methods: {
    // 切换消息操作
    changeMsgStatus() {
      this.msgChecked = !this.msgChecked
    },
    // 弹出/关闭 设置中英文框
    controllZhEn(value) {
      this.showZhEn = value
    },
    // 切换语言
    changeLang(value) {
      setLocalStorage('lang', value.key)
      this.$i18n.locale = value.key
    },
    // 解绑微信/重置密码
    jumpMessagePage(type) {
      const phone = getLocalStorage('phone') || '18311098924'; //todo
      if (type == 'wechat') {
        // 解绑微信
        Dialog.confirm({
          title: this.$t('toast.tip'),
          message: this.$t('toast.tipMessage'),
          cancelButtonText: this.$t('button.clickWrong'),
          cancelButtonColor: '#206CB3',
          confirmButtonText: this.$t('button.okUnbinding'),
          confirmButtonColor: '#999999'
        })
          .then(() => {
            this.$router.push({
              name: 'SendVerification',
              query: {
                phone,
                type
              }
            })
          })
          .catch(() => {
          });
      } else {
        // 重置密码
        this.$router.push({
          name: 'SendVerification',
          query: {
            phone,
            type
          }
        })
      }

    },
    // 更改 指纹ID状态
    changeFingerprintStatus() {
      this.fingerprintChecked = !this.fingerprintChecked
    },
    // 触发下啦刷新
    refreshInit() {
      console.log('__', this.fingerprintChecked);
    },
    // 更改 面容ID状态
    changeFaceIdStatus() {
      this.faceIdChecked = !this.faceIdChecked
    },
    // 跳转到隐私协议页面
    jumpPrivacyPage() {
      this.$router.push({
        path: '/user/privacy'
      })
    },
    // 跳转到服务协议页面
    jumpServicePage() {
      this.$router.push({
        path: '/user/service'
      })
    },
    // 退出登录
    handleLogout() {
      // 清空用户信息
      removeLocalStorage('user')
      this.$router.push({
        path: '/user/center'
      })
    },
    // 切换字体大小
    onConfirm(opt) {
      this.sysFontText = opt.text
      setLocalStorage('sysFontText', this.sysFontText)
      const size = opt.value
      NativeApi.nativeTextZoom({
        value: size
      })
      this.showSysFont = false
    }
  }
}
</script>
<style lang="less" scoped>
.setting_container {
  background-color: #efefef;
  height: 100vh;
}
.van-cell:not(:last-child)::after {
  right: 16px;
}
.right_content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.agreement_list {
  margin-top: 10px;
}
.logout_btn {
  margin-top: 200px;
  width: 100%;
  border: 0;
}
</style>