yueyueshu/jnpf-app/pages/me/index.vue

<template>
  <view class="viewport">
    <template v-if="isLoading">
      <view class="loading-text">拼命加载中...</view>
    </template>
    <template v-else>
      <CustomNavbar />
      <u-row gutter="16">
        <u-col span="3">
          <view :style="{ padding: '15px' }">
            <u-avatar :src="userInfo.avatar" size="100"></u-avatar>
          </view>
        </u-col>
        <u-col span="9">
          <view>
            <text>{{ userInfo.realName }}</text>
          </view>
          <view>
            <text>{{ userInfo.account }}</text>
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16">
        <u-col span="12">
          <view :style="{ padding: '20px 15px' }">
            <image
              class="icon"
              src="/static/images/my-empty.png"
              mode="aspectFit"
            ></image>
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16">
        <u-col span="12">
          <view :style="{ padding: '15px' }">
            <u-button
              :custom-style="{ color: '#ffffff', backgroundColor: '#6F89DD' }"
              shape="circle"
              :plain="false"
              @click="fnEditPwd('/pages/my/modifyPsd/index')"
              >修改密码</u-button
            >
          </view>
        </u-col>
        <u-col span="12">
          <view :style="{ padding: '15px' }">
            <u-button shape="circle" @click="fnLoginOut">退出登录</u-button>
          </view>
        </u-col>
      </u-row>
    </template>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapGetters } from "vuex";
import { UserBaseInfo, logoutCurrentUser } from "@/api/yys/me.js";
import CustomNavbar from "./components/CustomNavbar";
export default {
  components: {
    CustomNavbar,
  },
  mixins: [],
  data() {
    return {
      isLoading: false,
      userInfo: {},
    };
  },
  watch: {},
  computed: {
    token() {
      return this.$store.getters.token;
    },
  },
  onLoad() {
    console.log("onLoad");
    this.fnUserBaseInfo();
  },
  onUnload() {},
  methods: {
    fnUserBaseInfo() {
      UserBaseInfo()
        .then((res) => {
          if (res.code == 200) {
            this.userInfo = { ...res.data };
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fnLoginOut() {
      uni.showModal({
        title: "提示",
        content: "确定退出当前账号吗？",
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch("user/logout").then(() => {
              uni.closeSocket();
              uni.reLaunch({
                url: "/pages/login/index",
              });
            });
            console.log("用户点击确定");
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    fnEditPwd(path) {
      if (!path) return;
      uni.navigateTo({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f8fafd;
}

.viewport {
  width: 100vw;
  height: 100vh;
  margin-bottom: 300rpx;
  .cont {
    //margin: 100rpx 0;
  }
  .loading-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.barbox {
  height: 50rpx;
}
</style>