acupuncture/大唐会议前台1/pages/user/mine.vue

<template>
  <view class="container">
    <route :index="3">
      <view class="main">
        <view class="header">
          <view class="header-img">
            <image
              class="image"
              src="@/imgs/home/QQ_1734418394803.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="header-info">
            <p class="header-info-name">{{ userInfo.nickName }}</p>
            <p class="header-info-sex">
              {{ userInfo.sex - 0 ? "女" : "男" }}
            </p>
          </view>
        </view>
        <view class="content">
          <view class="list">
            <span class="list-title">所属医院：</span>
            <view class="list-value"> {{ userInfo.hospitalName }}</view>
          </view>
          <view class="list">
            <span class="list-title">所属科室：</span>
            <view class="list-value"> {{ userInfo.deptName }}</view>
          </view>
          <view class="list">
            <span class="list-title">有效期至：</span>
            <view class="list-value"> {{ userInfo.validDate }}</view>
          </view>
          <view class="list">
            <span class="list-title">联系客服：</span>
            <view class="list-value"> {{ userInfo.serviceTel }}</view>
          </view>
          <view class="list">
            <span class="list-title">当前版本：</span>
            <view class="list-value">
              {{ config.versions }}
              {{ userInfo.versions || "---" }}</view
            >
          </view>
          <view class="list logout">
            <view class="but" @click="handleLogout"> 退出登录 </view>
            <view class="but but-pass" @click="handleEditPass"> 修改密码 </view>
          </view>
        </view>
      </view>
    </route>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
// 引入配置
import config from "@/common/config";
import { mapState, mapMutations } from "vuex";
import { userInfo } from "@/common/userApi";

export default {
  mixins: [],
  components: {},
  props: [],
  data() {
    return {
      config,
      userInfo: {},
    };
  },
  computed: {
    ...mapState(["trainInfo", "time"]),
  },
  methods: {
    ...mapMutations(["setTrainPath"]),
    // 修改密码
    handleEditPass() {
      uni.navigateTo({
        url: "/pages/user/editPassword",
      });
    },
    // 退出登录
    handleLogout() {
      uni.clearStorage();
      this.setTrainPath(null);
      uni.reLaunch({
        url: "/pages/user/login",
      });
    },
    // 获取用户信息
    async getUserInfo() {
      const res = await userInfo();
      const { code, data, msg } = res;
      if (code === 200) {
        this.userInfo = data;
        uni.setStorageSync("userInfo", data);
      }
    },
  },
  // 页面显示调用接口
  onLoad() {},
  created() {
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
uni-view,
p,
span {
  font-family: none;
  font-size: 18px;
}
.content {
  width: 40%;

  .list {
    display: flex;
    line-height: 60px;
    border-bottom: 1px solid #e1e2e7;
    .list-title {
      font-size: 20px;
      width: 120px;
      color: #888;
      flex-shrink: 0;
      margin-right: 16px;
    }
    .list-value {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .logout {
    margin-top: 16px;
    border: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .but {
      width: 80%;
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      background-color: #007aff;
      margin-bottom: 16px;
    }
    .but-pass {
      background: #fff;
      border: 1px solid #007aff;
      color: #007aff;
    }
  }
}

.header {
  display: flex;
  margin-bottom: 20px;
  .header-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f0f0f0;
    margin-right: 16px;
    .image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header-info-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .header-info-sex {
    font-size: 18px;
    color: #888;
  }
}
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
<style>
uni-scroll-view {
  height: 100%;
  position: absolute;
}
</style>