MeiRiYiCheng_1_old/App/DouYin/pages/home.vue

<template>
	<view class="u-main-page">
		<view class="header">
			<view>
				<u-avatar :src="$userInfo.headimg"></u-avatar>
			</view>
			<view class="header__nickname">{{$userInfo.nickname}}</view>
		</view>
		<view>
			<button @click="getuserinfo">登录</button>
		</view>
		<view class="content">
			<text class="headertext">健康管理</text>
			<view class="content__healthinfo">
				<view class="content__healthinfo__item">
					<view class="content__healthinfo__item__text">身高</view>
					<view class="content__healthinfo__item__value">105CM</view>
				</view>
				<view class="content__healthinfo__item">
					<view class="content__healthinfo__item__text">体重</view>
					<view class="content__healthinfo__item__value">105CM</view>
				</view>
				<view class="content__healthinfo__item">
					<view class="content__healthinfo__item__text">BMI</view>
					<view class="content__healthinfo__item__value">105CM</view>
				</view>
			</view>
		</view>
		<view class="content">
			<text class="headertext">工具列表</text>
			<view class="content__healthinfo content__healthinfo__tool">
				<view v-for="(item,index) in toollist" class="content__healthinfo__item" @click="clickTool(item,index)">
					<u-icon :name="item.name" size="30"></u-icon>
					<view class="content__healthinfo__tool__text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<text class="headertext">历史记录</text>
			<view class="content__history" v-if="historylist.length>0">

			</view>
			<view class="content__history" v-if="historylist.length ==0">
				<u-empty text="暂无数据" mode="list">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onlogin,decryptdata
	} from '../common/api.js';
	export default {
		data() {
			return {
				//工具列表
				toollist: [{
					name: 'photo',
					title: 'BMI'
				}, {
					name: 'photo',
					title: '身高预测'
				}],
				historylist: [] //测量记录列表
			}
		},
		onLoad(options) {
		//	this.checkSession();
			this.userlogin()
		},
		methods: {
			//工具点击
			clickTool(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/bmi"
					})
				} else {
					uni.navigateTo({
						url: "/pages/height"
					})
				}
			},
			checkSession(){
				var that =this;
				uni.checkSession({
					success() {
						if(that.$userInfo.openid == ""){
							that.userlogin();
						}
					},
					fail() {
						that.userlogin();
					}
				})
			},
			getuserinfo(){
				var that =this;
				uni.getUserInfo({
					provider:'toutiao',
					withCredentials:true,
					success(res){
						decryptdata({
							sessionId:that.$userInfo.openid,
							encryptedData:res.encryptedData,
							iv:res.iv,
							ua:2
						}).then(resss=>{
							console.log("解密",resss)
						})
					}
				})
			},
			userlogin() {
				var that =this;
				uni.login({
					success(res) {
						onlogin({
							code:res.code,
							anonymous_code:res.anonymousCode
						}).then(ress=>{
							console.log(ress)
							uni.$u.vuex("$userInfo.openid",ress.data.sessionid);
						})
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.headertext {
		font-size: 15px;
		font-weight: bold;
	}

	.header {
		padding: 5px 0px 5px 10px;
		display: flex;
		align-items: center;
		box-shadow: 0px 0px 5px 0px #c3c3c3;

		&__nickname {
			font-size: 14px;
			padding-left: 5px;
		}
	}

	.content {
		margin-top: 10px;
		padding: 10px 15px 5px 15px;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 5px 0px #c3c3c3;

		&__healthinfo {
			margin-top: 10px;
			display: flex;
			align-items: center;
			font-size: 15px;
			justify-content: space-between;

			&__tool {
				justify-content: space-around;

				&__text {
					font-size: 12px;
					color: #909399;
					padding: 5px 0 10px 0px;
				}
			}

			&__item {
				align-items: center;
				display: flex;
				flex-direction: column;

				&__text {
					color: #999;
				}

				&__value {
					padding-top: 5px;
					font-weight: bold;
				}
			}
		}

		&__history {
			min-height: 150px;
		}
	}
</style>