palletApp/pages/me/index.vue

<template>
	<view class="page">
		<div class="back"></div>
		<view class="wrap">
			<view class="titleImg">
				<view class="user">
					<image :src="icon" @error="handleImageError($event,0)" class="anquanguanli"></image>
					<view class="upimg">
						<!-- <image style="width: 40rpx; height: 40rpx;" src="../../static/images/hedit.png" @click="chooseImg"></image> -->
						<!-- <UploadheadFile class="upload" @picIds="zpics" :deletable="false" :count="1" :sourceType="sourceType" :width="30" :height="30" :fileidList="zpimgs">
						</UploadheadFile> -->
						<!-- <uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" file-mediatype="image"  @select="upload">
							<image style="width: 40rpx; height: 40rpx;" src="../../static/images/hedit.png"></image>
						</uni-file-picker> -->
					</view>
					 
					<view class="username">
						<p class="p1">{{loginName}} — {{deptName}}</p>
						<p class="p2">登录时间：{{actual}}</p>
					</view>
				</view>
			</view>
			
			<view class="item">
				<u-form ref="uForm">
					<!-- <u-form-item>
						<image :src="shezhi" class="inpuIcon"></image>
						<view class="text" @click="gotome()">个人信息</view>
						<image :src="xiayiji" class="righticon"></image>
					</u-form-item> -->
					<u-form-item>
						<image :src="banbengengxin" class="inpuIcon"></image>
						<view class="text">关于</view>
						<view class="version">版本号 {{VersionIn}}</view>
						<image :src="xiayiji" class="righticon"></image>
					</u-form-item>
				</u-form>
			</view>
			
<!--			<view class="loginout" @click="loginout">
				退出当前账户
			</view>-->
		</view>
		<u-modal v-model="show" show-cancel-button @confirm="confirm" content="是否退出用户"></u-modal>
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	// const jpushModule = uni.requireNativePlugin('JG-JPush');
	//#endif
	import utils from "@/common/utils.js";
	import UploadheadFile from "@/components/UploadheadFile.vue";
	export default {
		components: {
		  UploadheadFile
		},
		data() {
			return {
				VersionIn: '1.0.0',
				edit: require("@/static/images/hedit.png"),
				icon: require("@/static/images/icon.png"),
				xiugaimima: require("@/static/images/xiugaimima.png"),
				banbengengxin: require("@/static/images/banbengengxin.png"),
				shezhi: require("@/static/images/shezhi.png"),
				xiayiji: require("@/static/images/xiayiji.png"),
				show: false,
				actual: utils.formatDate(new Date().getTime()),
				loginName:"",
				deptName:"",
				imgurl:uni.$http.baseUrl,
				sourceType:['album', 'camera'], // 选择图片的来源，album-从相册选图，camera-使用相机，默认二者都有（默认['album', 'camera']）
				imageStyles: {
					width: 40,
					height: 40,
					border: false
				},
			}
		},
		onLoad() {
			let that = this;
			 
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				that.VersionIn = widgetInfo.version;
			});
			// #endif
		},
		onShow() {
			if (!uni.getStorageSync("token")) {
				uni.showToast({
					title: '登录已失效！请您重新登录！',
					duration: 2000,
					icon: "none"
				});
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 2000);
			
			}
			
			var user= JSON.parse(uni.getStorageSync("user"));
			var yhms=user.yhms?user.yhms:"";
			if(user.yhdm)
			{
				this.icon= this.imgurl+'/images/'+ user.yhdm+".jpg?id="+Math.random()*100;
			}
			this.loginName=yhms;
			var bmmc= uni.getStorageSync("bmmc");
			this.deptName=bmmc?bmmc:"";
			this.$forceUpdate();
			this.getMsg();
		},
		mounted() {
		},
		methods: {
			handleImageError(e,index){
				console.log(e,index);
				this.icon= require("@/static/images/icon.png");
				this.$forceUpdate();
			},
			chooseImg(){
				uni.chooseImage({
					count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
				    success: res=> {
						console.log(res)     
						/*res.tempFilePaths[0]是获取到的第一个数据的blob地址，将他赋值给数据区的imgUrl*/
						// this.imgUrl=res.tempFilePaths[0]
						// console.log(this.imgUrl)
						this.upimg(res.tempFilePaths[0]);
				    }
				});
			},
			upload(e) {
				var that = this;
				const tempFilePaths = e.tempFilePaths; //e是获取的图片源
				uni.showLoading({
					title: '头像上传中...'
				});
				tempFilePaths.forEach(item => {
					this.upimg(item)
				});
			},
			// 先上传图片
			upimg(tempFilePaths) {
				var that = this;
				uni.showLoading({
					title: '头像上传中...'
				});
				uni.uploadFile({
					url: this.imgurl+'/api/uploadRyzp', //上传图片的后端接口
					filePath: tempFilePaths,
					name: 'file',
					header: {
						token: uni.getStorageSync("token")
					},
					success: res => {
						console.log(res)
						uni.hideLoading();
						if(res.statusCode==200){
							var data = JSON.parse(res.data);
							if (data.success) {
								that.icon = this.imgurl+'/images/'+ data.data+"?id="+Math.random()*100;
							} else {
								uni.showToast({
									title: "头像上传失败！" + data.massage,
									icon: 'error'
								});
							}
						}
						else{
							uni.showToast({
								title: "头像上传失败！" + res.errMsg,
								icon: 'error'
							});
						}
					}
				});
			},
			// 照片
			zpics(val) {
				console.log(val)
				if(val.length>0){
					console.log(this.imgurl+'/images/'+val[0])
					this.icon = this.imgurl+'/images/'+val[0];
					this.$forceUpdate();
				}
				 
			},
			async getMsg(){
				var _this=this;
				var user= JSON.parse(uni.getStorageSync("user"));
				var yhdm=user.yhdm?user.yhdm:"";
				const {data: res} = await uni.$http.post('/api/getMsgCount?yhdm='+yhdm);
				if(res.success){
					if(res.data){
						_this.msgCount=1*(res.data.msgCount?res.data.msgCount:0);
						if(_this.msgCount>0){
							// 底部菜单消息角标
							uni.setTabBarBadge({
								//显示未读消息条数
							    index: 2,
							    text: _this.msgCount+''
							});
						}
						else{
							uni.removeTabBarBadge({
								index: 2
							})
						}
						//#ifdef APP-PLUS
						plus.runtime.setBadgeNumber(_this.msgCount);
						//#endif
					}
				}
			},
			loginout() {
				this.show = true;
			},
			confirm() {
				setTimeout(function(){
					uni.removeStorageSync('token');
					uni.removeStorageSync('user');
					uni.removeStorageSync('bmmc');
					// uni.redirectTo({
					// 	url: '/pages/login/index'
					// });
				},500);
			},
			setpsd(){
				uni.navigateTo({
				    url: `/pages/aboutMe/psdSet?type=0`
				});
			},
			gotome(){
				uni.navigateTo({
				    url: `/pages/aboutMe/myInfo`
				});
			}
		}
	}
</script>

<style lang="scss">
	.titleImg {
		padding: 0 57rpx;
		color: #fff;
		width: 100%;
		background-size: 100%;
		position: relative;
		height: 365rpx;
		background-image: url(@/static/images/mebackimg.jpg);

		.user {
			// position: absolute;
			// top: 165rpx;
			// left: 72rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			margin: 0;
			padding-top: 165rpx;
			padding-left: 72rpx;
			.upimg{
				position: absolute;
				top: 220rpx;
				left: 150rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.anquanguanli {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.username {
				margin-top: 0rpx;
				margin-left: 50rpx;

				.p1 {
					font-size: 36rpx;
				}

				.p2 {
					font-size: 22rpx;
					opacity: 0.7;
					margin-top: 10rpx;
				}
			}
		}

	}

	.item {
		width: 710rpx;
		margin-left: 20rpx;
		border-radius: 5rpx;
		margin-top: 20rpx;
		height: 110rpx;
		position: relative;
		padding: 0 47rpx 43rpx 40rpx;
		background: #fff;

		.text {
			width: 400rpx;
			margin-left: 25rpx;
			display: inline-block;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.loginout {
		width: 710rpx;
		height: 100rpx;
		position: relative;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 5rpx;
		text-align: center;
		line-height: 110rpx;
		font-size: 28rpx;
		font-family: FZLTZHUNHJW--GB1-0;
		color: #3690ff
	}

	.inpuIcon {
		width: 35rpx;
		height: 35rpx;
	}

	.righticon {
		width: 11rpx;
		height: 22rpx;
		position: absolute;
		right: 0rpx;
		top:45rpx;
	}
	.version{
		width: 180rpx;
		height: 70rpx;
		position: absolute;
		right: 20rpx;
		color:#888;
	}
</style>