Vent-App/pages/user/userdetail.vue

<template>
  <view class="user-page">
    <u-navbar
      title="用户详情"
      :safeAreaInsetTop="true"
      :fixed="true"
      :placeholder="true"
      height="50px"
      bgColor="transparent"
      titleStyle="fw600 fs-18"
      leftIconColor="#303133"
      @leftClick="goBack"
    >
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" size="20" color="#303133"></u-icon>
      </view>
      <view class="u-nav-slot" slot="right" @tap="rightClick">
        <view class="nav-edit-btn">
          <u-icon name="edit-pen" size="14" color="#0065f8"></u-icon>
          <text class="nav-edit-text">编辑</text>
        </view>
      </view>
    </u-navbar>

    <view class="user-page-content">
      <!-- 个人资料 -->
      <view class="detail-card">
        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="photo-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">头像</text>
          <view class="detail-value-area">
            <image
              class="detail-avatar"
              :src="personalMsg.avatar"
              mode="aspectFill"
            ></image>
          </view>
        </view>

        <view class="detail-divider"></view>

        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="account-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">姓名</text>
          <text class="detail-value">{{ personalMsg.realname }}</text>
        </view>

        <view class="detail-divider"></view>

        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon
              :name="personalMsg.sex === '女' ? 'woman' : 'man'"
              size="14"
              color="#ffffff"
            ></u-icon>
          </view>
          <text class="detail-label">性别</text>
          <text class="detail-value">{{ personalMsg.sex }}</text>
        </view>

        <view class="detail-divider"></view>

        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="calendar-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">生日</text>
          <text class="detail-value">{{ personalMsg.birthday }}</text>
        </view>
      </view>

      <!-- 对外信息展示 -->
      <view class="detail-card">
        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="eye-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">对外信息展示</text>
          <text class="detail-value">
            {{
              getSubStringText(
                personalMsg.realname + "@" + personalMsg.orgCode,
                11
              )
            }}
          </text>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="detail-card">
        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="phone-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">手机</text>
          <text class="detail-value">{{ personalMsg.phone }}</text>
        </view>

        <view class="detail-divider"></view>

        <view class="detail-row">
          <view class="detail-icon-box">
            <u-icon name="email-fill" size="14" color="#ffffff"></u-icon>
          </view>
          <text class="detail-label">邮箱</text>
          <text class="detail-value">{{ personalMsg.email }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api/api.js";
export default {
  data() {
    return {
      personalMsg: {
        avatar: "",
        realname: "",
        username: "",
        sex: 1,
        birthday: new Date(),
        orgCode: "",
        workNo: "",
        status: 1,
        phone: "",
        telephone: "",
        email: "",
        post: "",
        departIds: "",
        identity: "",
      },
      userUrl: "/sys/user/queryById",
      positionUrl: "/sys/position/list",
      departUrl: "/sys/user/userDepartList",
    };
  },
  onLoad() {
    this.loadinfo();
  },
  methods: {
    getSubStringText(text, len) {
      if (!text || text.length == 0) {
        return "";
      }
      if (text.length < len) {
        return text;
      }
      return text.substr(0, len) + "...";
    },
    //左上角返回键：返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    rightClick() {
      this.$Router.push({ name: "useredit", params: this.personalMsg });
      /* uni.navigateTo({
				    url: '/pages/user/useredit?item='+item
				}); */
    },
    loadinfo() {
      this.$http
        .get(this.userUrl, { params: { id: this.$store.getters.userid } })
        .then((res) => {
          console.log("用户", res);
          if (res.data.success) {
            let result = res.data.result;
            if (result.avatar && result.avatar.length > 0)
              this.personalMsg.avatar = api.getFileAccessHttpUrl(result.avatar);
            this.personalMsg.realname = result.realname;
            this.personalMsg.username = result.username;
            this.personalMsg.post = result.post;
            this.personalMsg.sex = result.sex === 1 ? "男" : "女";
            this.personalMsg.birthday =
              result.birthday == null ? "无" : result.birthday;
            this.personalMsg.departIds = result.departIds;
            this.personalMsg.workNo = result.workNo;
            this.personalMsg.phone = result.phone;
            this.personalMsg.telephone =
              result.telephone == null ? "无" : result.telephone;
            this.personalMsg.email = result.email;
            this.personalMsg.post = result.post;
            this.personalMsg.identity =
              result.identity === 1 ? "普通成员" : "上级";
            this.personalMsg.status = result.status === 1 ? "正常" : "冻结";
            this.personalMsg.orgCode = result.orgCode;
          }
        })
        .catch((e) => {
          console.log("请求错误", e);
        });

      this.$http
        .get(this.departUrl, { params: { userId: this.$store.getters.userid } })
        .then((res) => {
          if (res.success) {
            for (let item of res.result) {
              this.personalMsg.orgCode = item.title;
              this.personalMsg.departIds = item.title;
            }
          }
        })
        .catch((e) => {
          console.log("请求错误", e);
        });

      this.$http
        .get(this.positionUrl)
        .then((res) => {
          if (res.success) {
            let postArr = res.result.records;
            for (let item of postArr) {
              if (this.personalMsg.post == item.code) {
                this.personalMsg.post = item.name;
              }
            }
          }
        })
        .catch((e) => {
          console.log("请求错误", e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #c8d8f8 0%, #eef4fd 320rpx, #f4f7fd 100%);
}

.user-page-content {
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.nav-edit-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 14rpx;
  height: 44rpx;
  border: 1rpx solid #0065f8;
  border-radius: 8rpx;
  background: #ffffff;
  box-sizing: border-box;
}

.nav-edit-text {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #0065f8;
  line-height: 1;
}

.detail-card {
  background: #ffffff;
  border: 1rpx solid #e8effc;
  border-radius: 16rpx;
  padding: 0 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(43, 124, 255, 0.08);
}

.detail-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 112rpx;
  padding: 20rpx 0;
}

.detail-divider {
  height: 1rpx;
  background: #eef0f4;
}

.detail-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #80b4ff, #347df3);
  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.detail-label {
  flex-shrink: 0;
  width: 170rpx;
  font-size: 24rpx;
  color: #000;
  line-height: 1.4;
}

.detail-value-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.detail-value {
  flex: 1;
  min-width: 0;
  font-size: 24rpx;
  font-weight: 500;
  color: #0065f8;
  line-height: 1.4;
  text-align: right;
  word-break: break-all;
}

.detail-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  border: 1rpx solid #e8effc;
}
</style>