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.freeLogin')" center value-class="right_content">
        <template #default>
          <van-switch v-model="isFreeLogin" @click="changeFreeLoginStatus" 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> 
    -->

    </div>
    <div class="mt15">
      <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" />
      <van-cell :title="$t('setting.questionAndFeedback')" center is-link @click="jumpQuestionPage" value-class="right_content" />
    </div>

    <div class="mt15">
      <van-cell :title="$t('setting.fontSize')" center is-link @click="showSysFont=true" value-class="right_content">
        <template #default>
          <span>{{sysFontText}}</span>
        </template>
      </van-cell>
    </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, //新消息提醒
      isFreeLogin: false, // 免登录开关
      showZhEn: false, // 弹出中英文设置
      fingerprintChecked: false, // 指纹ID解锁状态 
      faceIdChecked: false, // 面容ID解锁状态 
      wechatNick: '',// 微信昵称
      showSysFont: false,
      sysFontText: getLocalStorage('sysFontText') || this.$t('setting.standardFontSize'),
      columns: [
        { text: this.$t('setting.superFontSize'), value: 120 },
        { text: this.$t('setting.bigFontSize'), value: 110 },
        { text: this.$t('setting.standardFontSize'), value: 100 },
        { text: this.$t('setting.smallFontSize'), value: 98 }
      ],
    }
  },
  mounted() {
    this.msgChecked = true
  },
  computed: {
    // 中英文切换 切换 tab
    actions() {
      return [{ name: '中文', key: 'zh' }, { name: 'English', key: 'en' }] // 中英文切换选项
    }
  },
  methods: {
    // 切换消息操作
    changeMsgStatus() {
      this.msgChecked = !this.msgChecked
    },
    // 切换免登录状态
    changeFreeLoginStatus() {
      if (!this.isFreeLogin) {
        // 开启需要弹出
        Dialog.confirm({
          title: this.$t('toast.tip'),
          message: this.$t('toast.freeLoginContent'),
          cancelButtonText: this.$t('button.clickWrong'),
          cancelButtonColor: '#999999',
          confirmButtonText: this.$t('button.okUnbinding'),
          confirmButtonColor: '#206CB3'
        })
          .then(() => {
            // 确定操作
            this.isFreeLogin = true
            // todo 完善存储用户逻辑
          })
          .catch(() => {
            // 取消操作
            console.log(2);
            this.isFreeLogin = false
          });
      } else {
        // 关闭免登录 清除用户信息

      }

    },
    // 弹出/关闭 设置中英文框
    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'
      })
    },
    // 跳转到问题及反馈
    jumpQuestionPage(){
      this.$router.push({
        path:'/user/qsandfeedback'
      })
    },
    // 退出登录
    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;
}
.mt15 {
  margin-top: 5px;
}
.logout_btn {
  margin-top: 200px;
  width: 100%;
  border: 0;
}
</style>