iot-ui-app/pages/index/my.vue

<template>
	<view id="my">
		<nav-bar title="个人中心" :border-bottom="false"></nav-bar>
		<view class="header">
			<view class="header-avatar">
				<!-- 注意，请求头部保存在vuex中，浏览器调试中直接刷新页面获取不到请求头部 -->
				<image :src="imageUrl" mode=""></image>
			</view>
			<view class="header-info">
				<view class="header-name">{{infoData.userName}}</view>
				<view class="header-company">{{infoData.nickName}}</view>
			</view>
		</view>
		<view class="my-list">
			<view class="my-item" @click="goUrl('../my/alarm')">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/my1.png" mode=""></image>
					<view class="item-txt">
						<view class="item-name">报警信息</view>
						<view class="item-info">消息提醒</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#A0A0A0" size="32"></u-icon>
			</view>
			<view class="my-item"  @click="goUrl('../my/personal-data')">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/my2.png" mode=""></image>
					<view class="item-txt">
						<view class="item-name">资料信息</view>
						<view class="item-info">用户信息</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#A0A0A0" size="32"></u-icon>
			</view>
			<view class="my-item"  @click="goUrl('../my/security-setting')">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/my3.png" mode=""></image>
					<view class="item-txt">
						<view class="item-name">安全设置</view>
						<view class="item-info">退出系统及重置密码</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#A0A0A0" size="32"></u-icon>
			</view>
			<view class="my-item" @click="goUrl('../my/about')">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/my4.png" mode=""></image>
					<view class="item-txt">
						<view class="item-name">关于我们</view>
						<view class="item-info">公司简介</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#A0A0A0" size="32"></u-icon>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="my-item" @click="goUrl('../my/jump-official-account')">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/my5.png" mode=""></image>
					<view class="item-txt">
						<view class="item-name">关注公众号</view>
						<view class="item-info">海创微联</view> 
					</view>
				</view>
				<u-icon name="arrow-right" color="#A0A0A0" size="32"></u-icon>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import NavBar from '../../common/components/navbar/NavBar.vue'
	import {url } from '../../network/config.js'
	export default {
		data() {
			return {
				infoData:{},
				defaultImgPath: 'https://am-img.gkiiot.com/iotos/app/img/my/avatar.jpg'
			}
		},
		components:{
			NavBar
		},
		computed:{
			/* 有头像返回头像，没有返回默认图片 */
			imageUrl(){
				if(this.infoData.avatar){
					console.log(url + '/prod-api/file/resources/' + this.infoData.avatar)
					return url + '/prod-api/file/resources/' + this.infoData.avatar;
				}else{
					return this.defaultImgPath;
				}
			}
		},
		onLoad() {
			this.infoData = uni.getStorageSync('info');
			console.log(this.infoData)
		},
		onShow() {
			
		},
		methods:{
			goUrl(url){
				console.log(url)
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped lang="less">
	
	.header{
		height:230rpx;
		display: flex;
		padding-top: 14rpx;
		padding-left: 45rpx;
		background: url(https://am-img.gkiiot.com/iotos/app/img/my/my-header-bg.png) no-repeat;
		background-size: 100% 100%;
		.header-avatar{
			width: 116rpx;
			height: 116rpx;
			border: 10rpx solid #fff;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30rpx;
			image{
				width: 96rpx;
				height: 96rpx;
			}
		}
		.header-info{
			color: #fff;
			padding-top: 14rpx;
			.header-name{
				font-size: 32rpx;
				height: 32rpx;
			}
			.header-company{
				margin-top: 31rpx;
				font-size: 32rpx;
				line-height: 22rpx;
			}
		}
	}
	.my-list{
		padding: 13rpx 46rpx 0 41rpx;
		.my-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 663rpx;
			height: 178rpx;
			padding-right: 40rpx;
			box-shadow: 0rpx 4rpx 38rpx 0rpx rgba(0, 0, 0, 0.11);
			border-radius: 16rpx;
			margin-bottom: 17rpx;
			overflow: hidden;
			.item-left{
				display: flex;
				image{
					width: 181rpx;
					height: 163rpx;
					margin-left: -27rpx;
					margin-right: 23rpx;
				}
				.item-txt{
					padding-top: 46rpx;
					.item-name{
						font-size: 34rpx;
						line-height: 34rpx;
						font-weight: 500;
						color: #333333;
					}
					.item-info{
						font-size: 24rpx;
						line-height: 24rpx;
						margin-top: 17rpx;
						color: #333333;
						opacity: 0.4;
					}
				}
			}
		}
	}
</style>