GEKE_PHONE/pages/user/people.vue

<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部logo-->
			<view class="UCenter-bg">
				<div class="tx">
					<image @tap="ChooseImage" :src="personalList.avatar" round
						class="png animation-slide-right margin-bottom-sm" mode="widthFix"
						:style="[{animationDelay: '0.1s'}]"></image>
					<!-- <text class='cuIcon-cameraadd'style="position: absolute;margin-top: 70px;margin-left: -10px;"></text> -->
					<image src="../../static/vip.png"
						style="position: absolute;margin-top: 75px;margin-left: -30px;width: 20px;height: 20px;">
					</image>
				</div>
				<image src="/static/wave.gif" mode="scaleToFill" class="gif-wave"></image>
			</view>
			<!-- 个人信息卡片-->
			<!-- <view class="cu-list menu-avatar">
		   	<view class="cu-item">
		   		<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
		   		<view class="content flex-sub">
		   			<view class="text-grey">{{personalList.avatar}}</view>
		   			<view class="text-gray text-sm flex justify-between">
		   				经理
		   			</view>
		   		</view>
		   	</view>
		   </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.realname}}</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'}]">
					<navigator class="content" url="/pages/user/userdetail" hover-class="none">
						<text class="cuIcon-expressman text-cyan"></text>
						<text class="text-grey">个人信息</text>
					</navigator>
				</view>
				<!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
		      <navigator class="content" url="/pages/user/userpwd" hover-class="none">
		        <text class="cuIcon-edit text-cyan"></text>
		        <text class="text-grey">修改密码</text>
		      </navigator>
		    </view> -->
				<!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
				<navigator class="content"  hover-class="none" @click="dt()">
				    <text class="cuIcon-forward text-cyan"></text>
					<text class="text-grey">位置</text>
				</navigator>
		    </view> -->
				<!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]">
				<navigator class="content" url="/pages/user/userexit" hover-class="none">
				    <text class="cuIcon-exit text-cyan"></text>
					<text class="text-grey">退出</text>
				</navigator>
			</view> -->
			</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',
				userId: '',
				id: '',
				Url: '/sys/user/editUser',
				uploadUrl: "/sys/common/upload",

			};
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch', this.cur)
					this.load()
				},
			},
		},
		methods: {

			zf() {
				this.$Router.push({
					name: 'appzf'
				})
				/* this.$http.post(this.ul,{params:{}}).then(res=>{
					console.log(res)
					this.showModal=true;
					this.initQrCode(res.data.qrCode)
					
				}).catch(err => {
					console.log(err);
				}); */
			},
			dt() {
				/* uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
				    }
				}); */
				/* http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text= */
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					}
				});
			},
			/* remove(){
				 uni.removeStorageSync('Access-Token')
			}, */
			ChooseImage() {
				var that = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						/* alert(res.tempFilePaths) */
						that.$http.upload(that.$config.apiUrl + that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								console.log(res)
								if (res.statusCode == 200) {
									this.$http.get(this.Url, {
										params: {
											id: this.$store.getters.userid,
											avatar: res.data.message
										}
									}).then(res => {
										if (res.data.code == 200) {
											this.load();
											this.$tip.success('更换成功!')
										}

									}).catch(err => {
										console.log(err);
									});

								}
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
					}
				});
			},
			load() {
				console.log("id" + this.$store.getters.userid)
				this.$http.get(this.userUrl, {
					params: {
						id: this.$store.getters.userid
					}
				}).then(res => {
					console.log("res", res)
					if (res.statusCode == 200) {
						let perArr = res.data.data
						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.post = perArr.post
						this.personalList.depart = perArr.departIds
					}
				}).catch(err => {
					console.log(err);
				});

			}
		}
	}
</script>

<style>
	.tx {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		overflow: hidden;
	}

	.UCenter-bg {
		background-image: url(../../static/bj8.jpeg);
		/* background-image: url(../../static/bj001.jpeg); */
		/* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		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);
	}

	.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;
	}
</style>