chat/_src/pages/h5/view/aboutMe.vue

<template>
  <div class="about-me">
    <div class="pub-user-top" @click="$router.push('/editMe')" v-if="userInfo">
      <div class="avatar-wrap">
        <img class="user-avatar" v-if="userInfo.cover_photo" :src="userInfo.cover_photo" alt="" @click.stop="$showImgPreview(userInfo.cover_photo)">
        <div v-else class="user-avatar"
        :class="'avatar_bg' + userInfo.user_id % 9"
        :data-name="userInfo.nick_name.slice(0,2).toUpperCase()"
        ></div>
      </div>
      <div class="top-info">
        <div class="name">{{userInfo.nick_name}}</div>
        <div class="code">{{$t('h5.username')}}：@{{userInfo.user_name}}</div>
      </div>
      <i class="arrow-icon el-icon-arrow-right"></i>
    </div>
    <ul class="pub-account-list" v-if="userInfo">
      <li class="list-item" v-for="(item, key) in userInfo.binds" :key="key">
        <div class="icon-wrap">
          <i :class="`${item.type}-icon`"></i>
        </div>
        <div class="info">
          <div class="title-wrap">
            <h4>{{item.type.toUpperCase()}}</h4>
            <p>{{item.account || $t('h5.notBind')}}</p>
          </div>
          <div class="btn-unbind" v-if="item.account" @click.stop="unbindAccount(item.type)">{{$t('userinfo.unbind')}}</div>
          <el-button @click="bindAccount(item.type)" v-else>{{$t('userinfo.bind')}}</el-button>
          <div class="opetate" v-if="item.account" @click.stop="hanldeChange(item)">
            <i :class="item.is_visible === 0 ? 'unopen' : 'open'"></i>
            <p>{{item.is_visible === 0 ? $t('userinfo.private') : $t('userinfo.public')}}</p>
          </div>
        </div>
      </li>
      <!-- <li class="list-item ext-psw" @click="handlePsw">
        <div class="icon-wrap">
          <i class="psw-icon"></i>
        </div>
        <div class="info">
          <div class="title">{{$t('public.pswSetting')}}</div>
          <i class="arrow-icon el-icon-arrow-right"></i>
        </div>
      </li> -->
    </ul>
    <div class="pub-bottom-btn ext-lang" @click="changeLang"><i class="icon-change"></i>{{curLang=="en"?$t('public.chinese'):$t('public.english')}}</div>
    <div class="pub-bottom-btn" @click="loginOut">{{$t('h5.logout')}}</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
import { mapState } from 'vuex'
import API from '@/api'
import { changeLangMixin } from '@/mixins'
import { bindAccountMixins } from '@/mixins/user'

Vue.component(Button.name, Button)

export default {
  name: 'aboutMe',
  mixins: [changeLangMixin, bindAccountMixins],
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      userInfo: state => {
        return state.userInfo
      }
    })
  },
  methods: {
    bindAccount (type) {
      switch (type) {
        case 'eos':
          this.bindEos()
          break
        case 'tg':
          this.bindTg()
          break
      }
    },
    loginOut () {
      this.$store.dispatch('doScatterLogout').then(() => {
        // this.$router.replace({ name: 'login', query: { from: '/me' } })

        this.$store.commit('setUserInfo', null)
        this.$store.commit('initChatData')
        this.$store.commit('initGroupData')
        this.$store.commit('chatAppLogin', false)
        // this.$store.commit('toApp', true)
        location.reload()
      })
    },
    // 账号显示与隐藏
    hanldeChange (item) {
      let type = item.type
      let val = item.is_visible == 0 ? 1 : 0
      API.user.setVisible({
        type,
        is_visible: val
      }).then(({ data }) => {
        this.$store.dispatch('getUserInfo')
      })
    },
    handlePsw () {
      this.$router.push('/password')
    }
  },
  created () {
    this.$store.dispatch('getUserInfo')
  }
}
</script>