Vent-App/pages/user/people.vue

<template>
  <view>
    <scroll-view scroll-y class="page">
      <!-- 头部logo-->
      <view class="UCenter-bg">
        <view class="avatar-box">
          <view class="avatar"></view>
        </view>
      </view>
      <view
        class="padding flex text-center text-grey bg-white shadow-warp userinfo-box"
      >
        <view class="user1" :style="[{ animationDelay: '0.2s' }]">
          <view class="username1">
            <view class="text-xl" style="color: #fff">{{
              personalList.username
            }}</view>
            <view class="text-info">用户</view>
          </view>
          <view class="usericon1"> </view>
        </view>

        <view class="user2" :style="[{ animationDelay: '0.2s' }]">
          <view class="username2">
            <view class="text-xl" style="color: #fff">{{
              personalList.post ? personalList.post : "员工"
            }}</view>
            <view class="text-info">职务</view>
          </view>
          <view class="usericon2"> </view>
        </view>
      </view>
      <!-- 列表list-->
      <view
        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius people-menu"
      >
        <view
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.3s' }]"
          @tap="scan"
        >
          <view class="content">
            <text class="cuIcon-scan menu-icon"></text>
            <text class="text-grey">扫码</text>
          </view>
        </view>
        <navigator
          class="cu-item arrow animation-slide-bottom"
          url="/pages/user/userdetail"
          :style="[{ animationDelay: '0.6s' }]"
        >
          <view class="content">
            <text class="cuIcon-settings menu-icon"></text>
            <text class="text-grey">设置</text>
          </view>
        </navigator>

        <navigator
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.7s' }]"
          url="/pages/user/userexit"
          hover-class="none"
        >
          <view class="content">
            <text class="cuIcon-exit menu-icon"></text>
            <text class="text-grey">退出</text>
          </view>
        </navigator>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
import api from "@/api/api";
export default {
  name: "people",
  data() {
    return {
      personalList: {
        avatar: "",
        realname: "",
        username: "",
        post: "",
      },
      positionUrl: "/sys/position/list",
      departUrl: "/sys/user/userDepartList",
      userUrl: "/sys/user/queryById",
      postUrl: "/sys/position/queryByCode",
      userId: "",
      id: "",
    };
  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        console.log("watch", this.cur);
        this.userId = this.$store.getters.userid;
        this.load();
      },
    },
  },
  methods: {
    scan() {
      console.log("进来了");
      // #ifndef H5
      uni.scanCode({
        success: function (res) {
          console.log("条码res：" + res);
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        },
      });
      // #endif
      // #ifdef H5
      this.$tip.alert("暂不支持");
      // #endif
    },
    load() {
      if (!this.userId) {
        return;
      }
      this.$http
        .get(this.userUrl, { params: { id: this.userId } })
        .then((res) => {
          console.log("res", res);
          if (res.data.success) {
            let perArr = res.data.result;
            let avatar =
              perArr.avatar && perArr.avatar.length > 0
                ? api.getFileAccessHttpUrl(perArr.avatar)
                : "/static/user2.png";
            this.personalList.realname = perArr.realname;
            this.personalList.username = perArr.username;
            this.personalList.depart = perArr.departIds;
            this.getpost(perArr.post);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getpost(code) {
      if (!code || code.length == 0) {
        this.personalList.post = "员工";
        return false;
      }
      this.$http
        .get(this.postUrl, { params: { code: code } })
        .then((res) => {
          console.log("postUrl", res);
          if (res.data.success) {
            this.personalList.post = res.data.result.name;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.UCenter-bg {
  /* #ifdef MP-WEIXIN */
  background-image: url("/static/topnavbar.png");
  /* #endif */
  /* #ifndef MP-WEIXIN */
  background-image: url("/static/user/usertopbg.png");
  /* #endif */
  background-size: cover;
  height: 400rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.avatar-box {
  position: relative;
  width: 250rpx;
  height: 250rpx;
  background-image: url("/static/user/userTop.png");
  background-size: 100% 100%;
}
.avatar {
  position: absolute;
  width: 100%;
  height: 95%;
  background-image: url("/static/user2.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.userinfo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin: 16rpx 15rpx 0;
  box-sizing: border-box;
  border-radius: 12rpx;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("/static/user/userbg1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0;
  padding: 14rpx 10rpx 10rpx 20rpx;
  height: 128rpx;
  border-radius: 16rpx;
}
.usericon1 {
  flex: 0 0 auto;
  width: 136rpx;
  height: 120rpx;
  margin: 0;
  align-self: flex-end;
  background-image: url("/static/user/user.png");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.username1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding-bottom: 8rpx;
  text-align: left;
}
.user2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("/static/user/userbg2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 0 0 16rpx;
  padding: 14rpx 10rpx 10rpx 20rpx;
  height: 128rpx;
  border-radius: 16rpx;
}
.usericon2 {
  flex: 0 0 auto;
  width: 136rpx;
  height: 120rpx;
  margin: 0;
  align-self: flex-end;
  background-image: url("/static/user/user1.png");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.username2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding-bottom: 8rpx;
  text-align: left;
}
.username1 .text-xl,
.username2 .text-xl {
  overflow: hidden;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.username1 .text-info,
.username2 .text-info {
  color: rgba(255, 255, 255, 0.92);
  font-size: 22rpx;
  font-weight: 400;
}
.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}

map,
.mapBox {
  width: 750rpx;
  height: 300rpx;
}
.card-menu {
  margin: 20rpx;
}
.people-menu {
  overflow: visible;
  margin-top: 20rpx;
  background-color: transparent;
  box-shadow: none;
}
.people-menu > .cu-item {
  min-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
}
.people-menu > .cu-item:last-child {
  margin-bottom: 0;
}
.people-menu > .cu-item.arrow:before {
  color: #1677ff;
}
.people-menu .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
  background: linear-gradient(135deg, #80b4ff, #347df3);
  color: #fff;
  font-size: 30rpx;
  vertical-align: middle;
}
.people-menu .content > text[class*="cuIcon"] {
  width: 52rpx;
  margin-right: 16rpx;
}
.text-grey {
  color: #000;
  font-weight: bold;
}
</style>