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

<template>
  <div class="about-me">
    <div class="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="">
        <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">昵称：@{{userInfo.user_name}}</div>
      </div>
      <i class="arrow-icon el-icon-arrow-right"></i>
    </div>
    <ul class="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">{{item.type.toUpperCase()}}</div>
          <div class="code">{{item.account || '未绑定'}}</div>
        </div>
        <div class="opetate" v-if="item.account" @click="hanldeChange(item)">
          <i :class="item.is_visible === 0 ? 'unopen' : 'open'"></i>
          <p>{{item.is_visible === 0 ? '未公开' : '已公开'}}</p>
        </div>
      </li>
    </ul>
    <div class="login-out-btn" @click="loginOut">退出登录</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import API from '@/api'

export default {
  name: 'chatList',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      userInfo: state => {
        return state.userInfo
      }
    })
  },
  methods: {
    loginOut () {
      this.$store.dispatch('doScatterLogout')
    },
    // 账号显示与隐藏
    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')
      })
    }
  },
  created () {
    this.$store.dispatch('getUserInfo')
  }
}
</script>

<style lang="scss" scoped>
.top{
  padding: px2rem(50) px2rem(54);
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
  .avatar-wrap{
    display: inline-block;
    vertical-align: middle;
  }
  .user-avatar{
    width: px2rem(120);
    height: px2rem(120);
    border-radius: 4px;
  }
  .top-info{
    display: inline-block;
    vertical-align: middle;
    margin-left: px2rem(30);
  }
  .name{
    font-size: px2rem(42);
    color: #000000;
    margin-bottom: px2rem(30);
  }
  .code{
    color: #666666;
    font-size: px2rem(28);
  }
  .arrow-icon{
    position: absolute;
    color: #c8c8c8;
    top: px2rem(96);
    right: px2rem(24);
    font-size: px2rem(36);
  }
}
.account-list{
  background-color: #ffffff;
  margin: 18px 0;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  .list-item{
    display: flex;
    height: px2rem(130);
    &:last-child{
      .info{
        border-bottom: none;
      }
      .opetate{
        border-bottom: none;
      }
    }
  }
  .title{
    font-size: px2rem(30);
    color: #000000;
    margin-bottom: px2rem(22);
  }
  .code{
    font-size: px2rem(20);
    color: #999999;
  }
  .info{
    flex: 1;
    padding-top: px2rem(30);
    border-bottom: 1px solid #d8d8d8;
  }
  .opetate{
    width: px2rem(100);
    font-size: px2rem(20);
    color: #999999;
    padding-top: px2rem(32);
    border-bottom: 1px solid #d8d8d8;
    i{
      display: block;
      margin: 0 auto;
    }
    p{
      text-align: center;
      margin-top: px2rem(16);
    }
    .open{
      background: url('../../../assets/h5/open-icon.png') no-repeat;
      width: px2rem(39);
      height: px2rem(23);
      background-size: 100%;
    }
    .unopen{
      background: url('../../../assets/h5/unopen-icon.png') no-repeat;
      width: px2rem(40);
      height: px2rem(23);
      background-size: 100%;
    }
  }
  .icon-wrap{
    width: px2rem(106);
    line-height: px2rem(130);
    text-align: center;
    i{
      display: inline-block;
      vertical-align: middle;
    }
  }
  .eos-icon{
    background: url('../../../assets/h5/eos-icon.png') no-repeat;
    width: px2rem(47);
    height: px2rem(48);
    background-size: 100%;
  }
  .eth-icon{
    background: url('../../../assets/h5/eth-icon.png') no-repeat;
    width: px2rem(44);
    height: px2rem(39);
    background-size: 100%;
  }
  .tron-icon{
    background: url('../../../assets/h5/tron-icon.png') no-repeat;
    width: px2rem(34);
    height: px2rem(35);
    background-size: 100%;
  }
}
.login-out-btn{
  font-size: px2rem(28);
  color: #ea2d2d;
  text-align: center;
  height: px2rem(88);
  line-height: px2rem(88);
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  background-color: #ffffff;
}
</style>