index.vue 4.07 KB
<template>
  <div class="setting_container">
    <NafmHeader />
    <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="多语言" center is-link @click="controllZhEn(true)" value-class="right_content">
        <template #default>
          {{$t("lang")}}
        </template>
      </van-cell>
      <van-cell title="微信绑定" center is-link @click="unbundling" value-class="right_content">
        <template #default>
          含笑一过
        </template>
      </van-cell>
      <van-cell title="重置密码" center is-link @click="jumpResetPage" 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="agreement_list">
      <van-cell title="隐私协议" center is-link @click="jumpPrivacyPage" value-class="right_content" />
      <van-cell title="服务协议" center is-link @click="jumpServicePage" value-class="right_content" />
    </div>

    <van-button type="primary" plain color="#a4a4a4" class="logout_btn">退出登录</van-button>

    <van-action-sheet v-model="showZhEn" :actions="actions" cancel-text="取消" close-on-click-action @cancel="controllZhEn(false)" @select="changeLang" />
  </div>
</template>
<script>
import { setLocalStorage } from '@/utils/LocalStorage'
export default {
  name: 'Setting',
  data() {
    return {
      msgChecked: false, //新消息提醒
      showZhEn: false, // 弹出中英文设置
      actions: [{ name: '中文', key: 'zh' }, { name: '英文', key: 'en' }], // 中英文切换选项
      fingerprintChecked: false, // 指纹ID解锁状态 
      faceIdChecked: false, // 面容ID解锁状态 
    }
  },
  mounted() {
    this.msgChecked = true
  },
  methods: {
    // 切换消息操作
    changeMsgStatus() {
      this.msgChecked = !this.msgChecked
    },
    // 弹出/关闭 设置中英文框
    controllZhEn(value) {
      this.showZhEn = value
    },
    // 切换语言
    changeLang(value) {
      console.log('val', value.key)
      setLocalStorage('lang', value.key)
      this.$i18n.locale = value.key
    },
    // 解绑微信
    unbundling() {
      Dialog.confirm({
        title: '友情提示',
        message: '解除微信绑定后,将无法使用微信快速登录,你确定解除吗?',
        cancelButtonText: '点错了',
        // cancelButtonColor: '',
        confirmButtonText: '确定解除',
        // confirmButtonColor:''
      })
        .then(() => {
          // on confirm  调取后端接口
          Toast('解绑成功');
        })
        .catch(() => {
          // on cancel

        });
    },
    // 跳转到 重制密码页面
    jumpResetPage() {

    },
    // 更改 指纹ID状态
    changeFingerprintStatus() {
      this.fingerprintChecked = !this.fingerprintChecked
    },
    // 更改 面容ID状态
    changeFaceIdStatus() {
      this.faceIdChecked = !this.faceIdChecked
    },
    // 跳转到隐私协议页面
    jumpPrivacyPage() {
      this.$router.push({
        path: '/user/privacy'
      })
    },
    // 跳转到服务协议页面
    jumpServicePage() {
      this.$router.push({
        path: '/user/service'
      })
    },

  }
}
</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>