|
|
@@ -1,161 +1,176 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <scroll-view scroll-y class="page">
|
|
|
- <!-- 头部logo-->
|
|
|
- <view class="UCenter-bg">
|
|
|
- <image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image>
|
|
|
- <image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill" class="gif-wave"></image>
|
|
|
- </view>
|
|
|
- <view class="padding flex text-center text-grey bg-white shadow-warp">
|
|
|
- <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
|
|
|
- <view class="text-xl text-orange">{{personalList.username}}</view>
|
|
|
- <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
|
|
|
- <view class="text-xl text-green">{{personalList.post?personalList.post:'员工'}}</view>
|
|
|
- <view class="margin-top-sm"><text class="cuIcon-news"></text> 职务</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.1s'}]">
|
|
|
- <view class="content" >
|
|
|
- <text class="cuIcon-favorfill text-yellow"></text>
|
|
|
- <text class="text-grey">收藏</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
|
|
|
- <view class="content">
|
|
|
- <text class="cuIcon-redpacket_fill text-red"></text>
|
|
|
- <text class="text-grey">红包</text>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" @tap="scan">
|
|
|
- <view class="content">
|
|
|
- <text class="cuIcon-scan text-red"></text>
|
|
|
- <text class="text-grey">扫码</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.4s'}]" url="/pages/user/location" hover-class="none">
|
|
|
- <view class="content" >
|
|
|
- <text class="cuIcon-location text-cyan"></text>
|
|
|
- <text class="text-grey">定位</text>
|
|
|
- </view>
|
|
|
- </navigator> -->
|
|
|
- <navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail" :style="[{animationDelay: '0.6s'}]">
|
|
|
- <view class="content">
|
|
|
- <text class="cuIcon-settingsfill text-cyan"></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 text-cyan"></text>
|
|
|
- <text class="text-grey">退出</text>
|
|
|
- </view>
|
|
|
- </navigator>
|
|
|
- </view>
|
|
|
- <view class="cu-tabbar-height"></view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
+ <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/avatar_boy.png'
|
|
|
- this.personalList.avatar =avatar
|
|
|
- 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);
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+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/blue.png');
|
|
|
- /* #endif */
|
|
|
+ /* #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;
|
|
|
@@ -169,7 +184,81 @@
|
|
|
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;
|
|
|
}
|
|
|
@@ -179,25 +268,59 @@
|
|
|
height: 200rpx;
|
|
|
}
|
|
|
|
|
|
-.UCenter-bg .gif-wave{
|
|
|
+.UCenter-bg .gif-wave {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 99;
|
|
|
- mix-blend-mode: screen;
|
|
|
- height: 100rpx;
|
|
|
+ mix-blend-mode: screen;
|
|
|
+ height: 100rpx;
|
|
|
}
|
|
|
|
|
|
-map,.mapBox{
|
|
|
+map,
|
|
|
+.mapBox {
|
|
|
left: 0;
|
|
|
z-index: 99;
|
|
|
- mix-blend-mode: screen;
|
|
|
- height: 100rpx;
|
|
|
+ mix-blend-mode: screen;
|
|
|
+ height: 100rpx;
|
|
|
}
|
|
|
|
|
|
-map,.mapBox{
|
|
|
+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>
|
bobo04052021@163.com
