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="usericon1"> </view>
          <view class="username1">
            <view class="text-xl" style="color: #3485fe">{{
              personalList.username
            }}</view>
            <view class="text-info">用户</view>
          </view>
        </view>

        <view class="user2" :style="[{ animationDelay: '0.2s' }]">
          <view class="usericon2"> </view>
          <view class="username2">
            <view class="text-xl" style="color: #09bda0">{{
              personalList.post ? personalList.post : "员工"
            }}</view>
            <view class="text-info">职务</view>
          </view>
        </view>
      </view>
      <!-- 列表list-->
      <view
        class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius"
      >
        <view
          class="cu-item arrow animation-slide-bottom"
          :style="[{ animationDelay: '0.3s' }]"
          @tap="scan"
        >
          <view class="content">
            <text class="userSacll"></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="userDetail"></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="userExit"></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/userBg.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/user1.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-around;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user1 {
  display: flex;
  flex-direction: row;
  background-image: url("/static/user3.png");
  background-size: 100% 100%;
  margin: 10px;
  width: 48%;
  height: 120rpx;
}
.usericon1 {
  margin-left: 20rpx;
  margin-top: 20rpx;
  width: 30%;
  height: 80%;
  background-image: url("/static/usericon1.png");
  background-size: 100% 100%;
  margin-right: 20rpx;
}
.username1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user2 {
  display: flex;
  flex-direction: row;
  background-image: url("/static/user4.png");
  background-size: 100% 100%;
  margin: 10px;
  width: 48%;
  height: 120rpx;
}
.usericon2 {
  margin-left: 20rpx;
  margin-top: 20rpx;
  width: 30%;
  height: 80%;
  background-image: url("/static/usericon2.png");
  background-size: 100% 100%;
  margin-right: 20rpx;
}
.username2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-info {
  color: #8094ac;
  font-weight: bold;
}
.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;
}

.userSacll {
  background-image: url("/static/userscall.png");
  background-size: 100% 100%;
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  display: inline-block;
  vertical-align: middle;
}
.userDetail {
  background-image: url("/static/userdetail.png");
  background-size: 100% 100%;
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  display: inline-block;
  vertical-align: middle;
}
.userExit {
  background-image: url("/static/userexit.png");
  background-size: 100% 100%;
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  display: inline-block;
  vertical-align: middle;
}
.text-grey {
  color: #000;
  font-weight: bold;
}
</style>