Sprinkler-app/pages/my.vue

<template>
	<view class="page">
		<u-navbar :is-back="false" title=" " :border-bottom="false" :background="bgc" title-color='#fff'
			title-size='44' height='50'></u-navbar>
		</u-navbar>
		<!-- 头部 -->
		<view class="avattop">
			<button type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
				<image :src="imageSrc" mode=""></image> 
			</button> 
			<view class="name">{{userobj.nickName == undefined ? '' : userobj.nickName}}</view>
		</view>
		<!-- 帮助与客服 -->
		<view class="kefu">
			<view class="lt" style="border-right: 1px solid #D8D8D8;padding-right: 30rpx;">
				<view class="ltxx" @click="btnkf">
					<view class="one">
						<view class="ones">帮助与客服</view>
						<view class="">为您解答疑惑</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uvKnHSxPnANSsTbgO7em" mode=""></image>
				</view>
			</view>
			<view class="lt">
				<view class="ltxx" @click="btnyjfk">
					<view class="one">
						<view class="ones">意见反馈</view>
						<view class="">欢迎您指出问题</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ual1t8rYuPBxROgRNPmN" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="bot">
			
		</view>
		<view class="zhengce">
			<view class="" @click="btnxq(1)">
				隐私政策  <image src="https://api.ccttiot.com/smartmeter/img/static/uKpBiM6T9kj4BddzJtDc" mode=""></image>
			</view>
			<view class="" @click="btnxq(2)">
				用户协议  <image src="https://api.ccttiot.com/smartmeter/img/static/uKpBiM6T9kj4BddzJtDc" mode=""></image>
			</view>
			<view class="" @click="btnxq(3)">
				关于我们  <image src="https://api.ccttiot.com/smartmeter/img/static/uKpBiM6T9kj4BddzJtDc" mode=""></image>
			</view>
			<view class="" style="border: 0;" @click="btnxq(4)">
				退出登录  <image src="https://api.ccttiot.com/smartmeter/img/static/uKpBiM6T9kj4BddzJtDc" mode=""></image>
			</view>
		</view>
		
       <tab-bar :indexs='2'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#E2EFDF",
				},
                userobj:{},
				imageSrc:'',
				token:'',
				picdomain:''

			}
		},
		onLoad() {
			this.getinfo()
			this.gettiken()
		},
		methods: {
			// 获取用户信息
			getinfo() {
				this.$u.get(`/app/profile`).then((res) => {
					if (res.code == 200) {
						this.userobj = res.data
						this.imageSrc = res.data.avatar
					}
				})
			},
			// 获取七牛云token
			gettiken() {
				this.$u.get("/common/qiniu/uploadInfo").then(res => {
					this.token = res.token
					this.picdomain = res.domain
				})
			},
			// 获取修改头像
			getImage(e){
				let that = this
				uni.uploadFile({
					url: 'https://up-z2.qiniup.com',
					filePath:  e.detail.avatarUrl,
					name: 'file',
					header: {
						accept: 'application/json'
					},
					formData: {
						token: that.token,
					},
					success: (res) => {
						that.imageSrc = that.picdomain + '/' + JSON.parse(res.data).key
						console.log(that.imageSrc);
						that.$u.get(`/app/avatar?img=${that.imageSrc}`).then(res => {
							
						})
					}
				})
			},
			
			// 跳转意见反馈
            btnyjfk(){
				uni.navigateTo({
					url:'/page_user/opinion'
				})
			},
			// 跳转帮助与客服
			btnkf(){
				uni.navigateTo({
					url:'/page_user/kefu'
				})
			},
			
			// 跳转到详情
			 btnxq(num){
				if(num == 1){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '隐私政策'
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '用户协议'
					})
				}else if(num == 3){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '关于我们'
					})
				}else if(num == 4){
					uni.showModal({  
					    title: '提示',  
					    content: '您确定要退出登录吗？',  
					    success: function (res) {  
					        if (res.confirm) {  
					           uni.reLaunch({
					           	url:'/pages/login/login'
					           })
					        } else if (res.cancel) {  
					           
					        }  
					    }  
					})
				}
			 }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #E2EFDF;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	button{
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
		background-color: #D8D8D8;
		position: relative;
		left: -260rpx;
		image{
			border-radius: 50%;
			width: 136rpx;
			height: 136rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.zhengce{
		width: 670rpx;
		height: 420rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		margin-top: 28rpx;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		view{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #D8D8D8;
			padding-bottom: 28rpx;
			box-sizing: border-box;
			padding-top: 28rpx;
			font-size: 36rpx;
			color: #3D3D3D;
			image{
				width: 18rpx;
				height: 32rpx;
			}
		}
	}
	.avattop{
		display: flex;
		align-items: center;
		font-size: 52rpx;
		color: #3D3D3D;
		font-weight: 600;
		.name{
			position: absolute;
			left: 220rpx;
		}
	}
	.bot{
		width: 100%;
		height: 100vh;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		top: 480rpx;
		z-index: -1;
	}
	.kefu{
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 20rpx;
		padding: 42rpx 22rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-top: 56rpx;
		.lt{
			text-align: left;
			width: 48%;
			.ltxx{
				display: flex;
				justify-content: space-between;
				width: 100%;
				.one{
					.ones{
						font-size: 28rpx;
						color: #3D3D3D;
						font-weight: 600;
						margin-bottom: 10rpx;
					}
				}
				image{
					width: 84rpx;
					height: 84rpx;
				}
			}
		}
	}

	
</style>