xinkeaboard/xinkeaboard-web/pages/member/account.vue

<!--
 * @Author: wangwei
 * @Date: 2020-12-29 16:05:36
 * @LastEditTime: 2021-01-09 17:26:39
 * @LastEditors: Please set LastEditors
 * @Description: 账号安全
 * @FilePath: /java-pc/src/views/member/center/Account.vue
-->
<template>
  <div class="sld_account">
    <MemberTitle :memberTitle="L['账号安全']"></MemberTitle>
    <div class="container">
      <div class="title">{{ L["账号安全"] }}</div>
      <div class="commonContent">

        <div class="item flex_row_start_center">
          <i
            :class="{
              iconfont: true,
              'icon-jubao': !memberInfo.data.memberEmail,
              'icon-xuanweimorendizhi': memberInfo.data.memberEmail,
            }"
          ></i>
          <div class="item_info flex_row_start_center">
            <span class="s1">{{ L[contactType === 'email' ? "电子邮箱" : '手机号'] }}</span>
            <span class="tips" v-if="memberInfo.data.memberEmail && contactType === 'email'"
              >{{L["绑定邮箱"]}}：{{
                memberInfo.data.memberEmail
              }}，{{L["若邮箱已停用，请及时更换"]}}</span
            >
            <span class="no tips" v-if="!memberInfo.data.memberEmail && contactType === 'email'">{{L['尚未绑定邮箱']}}</span>
            <span class="tips" v-if="memberInfo.data.memberMobile && contactType === 'mobile'"
                >{{L["绑定手机号"]}}：{{
                  memberInfo.data.memberMobile
                }}，{{L["若手机已停用，请及时更换"]}}</span
              >
            <span class="no tips" v-if="!memberInfo.data.memberMobile && contactType === 'mobile'">{{L['尚未绑定手机号']}}</span>
            <div class="s2" v-if="contactType === 'email'">
              <span
                class="oprate pointer"
                @click="toPage('/member/email', 'edit')"
                v-if="memberInfo.data.memberEmail"
                >{{L["修改邮箱"]}}</span
              >
             
              <span
                class="oprate pointer"
                @click="toPage('/member/email', 'bind')"
                v-if="!memberInfo.data.memberEmail"
                >{{L["绑定邮箱"]}}</span
              >
              
            </div>
            <div class="s2" v-if="contactType === 'mobile'">
              <span
                class="oprate pointer"
                @click="toPage('/member/phone', 'edit')"
                v-if="memberInfo.data.memberMobile"
                >{{L["修改手机号"]}}</span
              >
              <span
                class="oprate pointer"
                @click="toPage('/member/phone', 'bind')"
                v-if="!memberInfo.data.memberMobile"
                >{{L["绑定手机号"]}}</span
              >
            </div>
          </div>
        </div>
        <div class="item flex_row_start_center">
          <i
            :class="{
              iconfont: true,
              'icon-jubao': !memberInfo.data.hasLoginPassword,
              'icon-xuanweimorendizhi': memberInfo.data.hasLoginPassword,
            }"
          ></i>
          <div class="item_info flex_row_start_center">
            <span class="s1">{{L["登录密码"]}}</span>
            <span class="tips"
              >{{L["安全性高的密码可以保障您的账号安全，建议密码为6～20位,由英文、数字或符号的组合"]}}</span
            >
            <div class="s2">
              <span
                class="oprate pointer"
                @click="toPage('/member/pwd/login', 'edit')"
                v-if="memberInfo.data.hasLoginPassword"
                >{{L["修改密码"]}}</span
              >
              <span
                class="oprate pointer"
                @click="toPage('/member/pwd/login', 'set')"
                v-else
                >{{L["设置密码"]}}</span
              >
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
import { getContactType } from "@/utils/common";
const filtersStore = useFiltersStore();
const contactType = getContactType();
// const L = lang_zn;
const L = getCurLanguage();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const router = useRouter();
const memberInfo = reactive({data:filtersStore.getMemberInfo});
const toPage = (url, type) => {
  router.push({
    path: url,
    query: {
      type,
    },
  });
};
</script>

<style lang="scss">
@import "@/assets/style/theme.scss";
/**
* 解决el-input设置类型为number时，中文输入法光标上移问题
**/
.el-input__inner {
  line-height: 1px !important;
}

.sld_account {
  flex: 1;
  width: 100%;
  margin-left: 10px;

  .container {
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    padding: 25px 40px;

    .title {
      font-size: 18px;
      border-bottom: 1px dashed #eaeaea;
      padding-bottom: 25px;
      font-weight: 600;
    }

    .commonContent {
      margin: 35px 0;
      font-size: 14px;

      .item {
        display: flex;
        width: 100%;
        border-bottom: 1px dashed #eaeaea;
        box-sizing: border-box;
        padding: 30px 0;

        .iconfont {
          margin-right: 10px;
        }

        .item_info {
          flex: 1;
          width: 100%;
          overflow: hidden;
        }

        .icon-jubao {
          color: $colorMain;
        }

        .icon-xuanweimorendizhi {
          color: $colorMain;
        }

        .s1{
          width: 100px;
        }

        .s2{
          width: 200px;
          text-align: right;
        }

        .tips {
          width: 100%;
          margin-left: 60px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          word-break: normal;
        }

        .oprate {
          color: #69c;
          width: 100%;
          display: block;
        }

        .reset {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>