GEKE_PHONE/pages/team/usercore.vue

<template>
	<div>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		<div class="img" >
			<div style="height: 15px;width: 100%;"></div>
			<ul style="text-align: center;">
				<li>
					<div style="position: relative;">
					<div class="tx" @click="upload()">
					 <image :src="avatar" style="width:80px; height:80px;"></image>
					</div>
					<text class='cuIcon-cameraadd' @tap="ChooseImage" style="position: absolute;top: 65px;margin-left: 25px;"></text>
					</div>
				</li>
				<li>
					<div class="row">
						<span><h2>admin</h2></span>
						<!-- <image src="../../static/icon/xbn.png" class="ic"></image> -->
					</div>
					<!-- <ul class="ls" style="margin-left: 33%;">
						<li ><span><h2>admin</h2></span></li>
						<li ><image src="../../static/icon/xbn.png" class="ic"></image></li>
					</ul> -->
				</li>
			</ul>
					
			
			
			
		</div>
		<div style="background-color: #FFFFFF;">
			<ul>
				<li>
					<div style="margin-top: -5px;">
					<span>
						<image src="../../static/zl.png" class="bac"></image>
					</span>
					</div>
					<div  style="margin-left: 15%; margin-top: -33px;">
					<span >个人信息</span>
					</div>
					<span style="width: 10px;height: 10px;float: right;"></span>
					<div style="float: right;margin-top: -23px;" @click="queryUser()">
						<image src="../../static/fh2.png" class="bacImg"></image>
					</div>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				</li>
				<li>
					<div style="height: 10px;width: 100%;"></div>
					<div style="margin-top: -5px;">
					<span>
						<image src="../../static/pwd.png" class="bac"></image>
					</span>
					</div>
					<div  style="margin-left: 15%; margin-top: -31px;">
					<span >修改密码</span>
					</div>
					<span style="width: 10px;height: 10px;float: right;"></span>
					<div style="float: right;margin-top: -23px;" @click="userpwd()">
						<image src="../../static/fh2.png" class="bacImg"></image>
					</div>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				</li>
				<li>
					<div style="height: 10px;width: 100%;"></div>
					<div style="margin-top: -5px;">
					<span>
						<image src="../../static/wz.png" class="bac"></image>
					</span>
					</div>
					<div  style="margin-left: 15%; margin-top: -32px;">
					<span >位置</span>
					</div>
					<span style="width: 10px;height: 10px;float: right;"></span>
					<div style="float: right;margin-top: -23px;" @click="userdt()">
						<image src="../../static/fh2.png" class="bacImg"></image>
					</div>
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				</li>
				<li>
					<div style="height: 10px;width: 100%;"></div>
					<div >
					<span>
						<image src="../../static/tc2.png" class="bac"></image>
					</span>
					</div>
					<div  style="margin-left: 15%; margin-top: -32px;">
					<span >退出登录</span>
					</div>
					<span style="width: 10px;height: 10px;float: right;"></span>
					<div style="float: right;margin-top: -23px;" @click="exit()">
						<image src="../../static/fh2.png" class="bacImg"></image>
					</div>					
					<div style="width: 100%; height: 1px; border-top: solid #ACC0D8 1px;margin-top: 10px;"></div>
				</li>
			</ul>
		</div>
		
		
	</div>
</template>

<script>
	import {ACCESS_TOKEN} from '@/common/util/constants.js'
	import api from '@/api/api'
	export default {
			data() {
				return {
					userUrl:'/sys/user/edit',
					Url:'/sys/user/queryById',
					avatar:"",
					uploadUrl:"/sys/common/upload",
				}
				},
				created() {
				let avatars=(this.$store.getters.avatar && this.$store.getters.avatar.length > 0)? api.getFileAccessHttpUrl(this.$store.getters.avatar):'/static/avatar_boy.png'
				this.avatar=avatars; 
				console.log(this.avatar)
				},
				methods:{
					
					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.put(this.userUrl,{id:this.$store.getters.userid,avatar:res.data.message}).then(res=>{
												if(res.data.code==200){
													this.$http.get(this.Url,{params:{id:this.$store.getters.userid}}).then(res=>{
															let perArr = res.data.data;
															let avatars=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
															let ava="/static/avatar_boy.png"
															if(perArr.avatar!=null ||perArr.avatar!=""){
																ava=perArr.avatar;
															}
															this.$store.commit('SET_AVATAR',ava);	
															this.avatar=avatars; 
															
													}).catch(err => {
														console.log(err);
													});
													 this.$tip.success('更换成功!')
												}
												
											}).catch(err => {
												console.log(err);
											});
											
										} 
									})
									.catch(err => {
										that.$tip.error(err.data.message)
									});
							}
						});
					},
					queryUser:function(){
						this.$Router.push({name:'peruser'})
					},
					exit:function(){
						this.$Router.push({name:'userexit'})
					},
					userpwd:function(){
						this.$Router.push({name:'userpwd'})
					},
					userdt:function(){
						this.$Router.push({name:'userdt'})
					}
				}
				}
</script>

<style>
	
	.img{
		height: 155px;
		background-image: url(../../static/bj001.jpeg);
		background-size:100% 100%; 
	}
	
	ul li{
		list-style-type:none;
		margin-left: -20px;
	}
	.bacImg{
		height: 23px;
		width: 23px;
		background-size:100% 100%; 
	}
	.tx{
		width:80px;
		 height:80px;
		  border-radius:50%; 
		  overflow:hidden;
		  margin: 0 auto;
	}
	.bac{
		height: 32px;
		width: 32px;
		background-size:100% 100%; 
	}
	
	.ic{
		width: 20px;
		height: 20px;
		margin-left: 10px;
		background-size:100% 100%; 
		margin-top: 5px;
	}
	
	.ls li{
		list-style-type:none;
		display: block;
	    float: left;
		margin-left: -5px;
		
	}
	
	
	
	
</style>