userinfo.uvue

<template>
  <view class="uni-content">
    <view class="list">
      <view class="item">
        <text class="title">头像</text>
        <uni-id-pages-x-avatar ref="avatar" width="60px" height="60px" :border="false"></uni-id-pages-x-avatar>
      </view>
      <view class="item">
        <text class="title">昵称</text>
        <view @click="setNickname" class="content">
          <text class="unset" v-if="!isLogin">未登录</text>
          <text class="value"
                v-else-if="userInfo['nickname'] != null && userInfo['nickname'] != ''">{{userInfo['nickname']}}
          </text>
          <text class="unset" v-else>未设置</text>
          <uni-id-pages-x-icons v-if="isLogin" :size="16" type="right-arrow"
                                class="link-icon"></uni-id-pages-x-icons>
        </view>
      </view>
      <view class="item">
        <text class="title">手机号码</text>
        <view @click="bindmobile" class="content">
          <text class="value" v-if="userInfo['mobile'] != null">{{userInfo['mobile']}}</text>
          <text class="unset" v-else>未绑定</text>
          <uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
        </view>
      </view>
    </view>
    <view class="list">
      <!-- 如未开通实人认证服务，可以将实名认证入口注释 -->
      <view @click="realNameVerify" class="item">
        <text class="title">实名认证</text>
        <view class="content">
            <text class="value" v-if="realNameStatus == 2">已认证</text>
            <text class="unset" v-else>未认证</text>
          <uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
        </view>
      </view>
    </view>
    <view class="list">
      <view @click="deactivate" class="item">
        <text class="title">注销账号</text>
        <uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
      </view>
      <view class="item" v-if="isLogin && showLoginManage" @click="logout">
        <text class="title">退出登录</text>
        <uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
      </view>
      <view class="mask" v-if="!isLogin" @click="login"></view>
    </view>
    <view class="btn-list" v-if="showLoginManage">
      <!-- <button v-if="isLogin" @click="logout" class="logout">退出登录</button> -->
      <button v-if="!isLogin" @click="login" type="primary" class="login">去登录</button>
    </view>
    <!-- 弹出对话框组件 -->
    <uni-id-pages-x-popup-dialog ref="popup-dialog"/>
  </view>
</template>

<script>
  import {state, mutations} from '@/uni_modules/uni-id-pages-x/store.uts';
  import {logout} from '@/uni_modules/uni-id-pages-x/common/common.uts';

  export default {
    data() {
      return {}
    },
    computed: {
      userInfo(): UTSJSONObject {
        return state.userInfo
      },
      isLogin(): boolean {
        return state.isLogin
      },
      realNameStatus (): number {
        const realNameAuth = this.userInfo.getJSON('realNameInfo')
        const authStatus = realNameAuth?.getNumber('authStatus')

        if (realNameAuth == null || authStatus == null) {
          return 0
        }

        return authStatus as number
      }
    },
    onShow() {
    },
    props: {
      showLoginManage: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      setNickname() {
        uni.navigateTo({
          "url": "/uni_modules/uni-id-pages-x/pages/userinfo/setNickname/setNickname"
        })
      },
      bindmobile() {
        uni.navigateTo({
          url: "/uni_modules/uni-id-pages-x/pages/userinfo/bindMobile/bindMobile",
          complete(_) {
            // console.log('e', e);
          }
        })
      },
      deactivate() {
        uni.navigateTo({
          url: "/uni_modules/uni-id-pages-x/pages/userinfo/deactivate/deactivate",
          complete(_) {
            // console.log('e', e);
          }
        })
      },
      logout() {
        logout()
      },
      login() {
        uni.navigateTo({
          url: "/uni_modules/uni-id-pages-x/pages/login/login",
          // complete(e){
          //   console.log('e',e);
          // }
        })
      },
      realNameVerify() {
        uni.navigateTo({
          "url": "/uni_modules/uni-id-pages-x/pages/userinfo/realnameAuth/realnameAuth"
        })
      }
    }
  }
</script>

<style>
  .uni-content {
    width: 750rpx;
    background-color: #f5f5f5;
    flex: 1;
  }

  .avatar {
    border: 1px solid #000;
    align-items: center;
  }

  .list {
    position: relative;
    background-color: #fff;
    margin-top: 15px;
  }

  .mask {
    position: absolute;
    width: 750rpx;
    height: 100%;
  }

  .list .item {
      border-bottom: 1px solid #f5f5f5;
      flex-direction: row;
      align-items: center;
      padding: 15px 15px;
  }

  .list .item.deactivate {
    margin-top: 20px;
    border-top: 0.1px solid #EEE;
  }

  .list .item .title {
    font-size: 14px;
    flex: 1;
    color: #333;
  }

  .list .item .content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .list .item .content .value {
    color: #999;
    font-size: 12px;
  }

  .list .item .content .unset {
    color: #aaa;
    font-size: 12px;
  }

  .link-icon {
    margin-left: 5px;
    width: 13px;
  }

  .btn-list {
    margin-top: 30px;
    padding: 30px 150rpx;
  }

  .logout {
    color: #888;
    border-style: none;
  }
</style>