ReedawFoodApp/pages/index/index.vue

<template>
	<view class="box">
		<!-- 头部 -->
		<view class="header" v-if="token">
			<view class="top" v-if="userList.length">
				<image :src="info.head_pic" class="headimg" @click="handleAddUser(1)"></image>
				<view class="info" @click="handleAddUser(1)">
					<view class="size18 bold">{{info.nickname}}</view>
					<view class="mt-5">
						<text class="mr-10">性别：{{info.gender==1?'男':info.gender==2?'女':'未知'}}</text>
						<text class="ml-10">年龄：{{info.age}}岁</text>
					</view>
				</view>
				<view class="t-icon t-icon-qiehuan1" @click="$store.commit('changeDrawe', true)"></view>
			</view>
			<view class="top top2" v-else @click="handleAddUser(2)">
				<view class="info">
					暂无成员，请先添加~
				</view>
				<view class="add">
					+
				</view>
			</view>
			<!-- 蓝牙 -->
			<view class="bluetooth" v-if="userList.length" :class="[bleValue.isConnectStatus==1?'activs':'']">
				<view class="bleTips" @click="openBluetoothAdapter">
					{{bleTipsText}}
				</view>
			</view>
		</view>
		<view class="header" v-else @click="handleLogin">
			<view class="top top2">
				登录后查看更多
			</view>
		</view>
		<view v-if="token&&Measure.top_list.length" class="body">
			<view class="top">
				<view class="info box_shadow" v-for="(ite,ind) in  Measure.top_list"
					:style="{'backgroundColor':ite.bk_color}" @click="handelCurveDetailed">
					<view class="title">
						<view class="bold">{{ite.name}}</view>
						<view class="c999">
							{{ite.time}}
							<uni-icons type="right" class="ml-10" color="#999"></uni-icons>
						</view>
					</view>
					<view class="weight">
						<view class="left">
							<view class="number"><text class="size26 bold">{{ite.value}}</text>{{ite.unit}}</view>
							<view class="standard bold size16" :style="{'color':ite.standard_color}">{{ite.standard}}
							</view>
						</view>
						<view class="charts" v-if="handTrue&&ite.curve_list.line.categories.length">
							<qiun-data-charts type="area" :chartData="ite.curve_list.line" :Width="140" :Height="40"
								:canvas2d="true" :canvasId="ite.key_name+ind" :opts="opts" :tapLegend="false"
								:tooltipShow="false" />
						</view>
					</view>
					<view class="Ideal c999" v-if="ite.ideal_weight">
						<text>理想{{ite.name}}</text>
						<text>{{ite.ideal_weight}}</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="function mt-15">
				<view @click="handlerRecord">
					<image src="/static/shoudong.png" mode="widthFix"></image>
				</view>
				<view @click="handReport">
					<image src="/static/shendu.png" mode="widthFix"></image>
				</view>
			</view>
			<!--  -->
			<view class="tools">
				<view class="item box_shadow" v-for="(ite,ind) in  Measure.card_list"
					@click="handleTools(ite.key_name)">
					<view class="top">
						<image :src="ite.icon"></image>{{ite.name}}
					</view>
					<view class="number">
						<text class="bold"
							:class="[ite.key_name=='body_level'||ite.key_name=='body_type'?'size14':'size20']">{{ite.value}}</text>{{ite.unit}}
					</view>
					<view class="bold size14" :style="{'color':ite.standard_color}">{{ite.standard}}</view>
				</view>
			</view>
			<!-- 手动记录 -->
			<record></record>
		</view>
		<view class="nolist" v-else>
			<image src="/static/none.png"></image>
			<text>暂无数据</text>
		</view>
		<!--  -->
		<drawer @handleToolsIndex="handleToolsIndex(0)"></drawer>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import drawer from "@/components/bodyIndex/drawer.vue"
	import record from '@/components/bodyIndex/record.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				token: "",
				handTrue: false,
				// Measure: {
				// 	card_list: [],
				// 	top_list: []
				// },
				opts: {
					padding: [5, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true,
						itemCount: 5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						axisLine: false,
						disableGrid: true,
					},
				}
			}
		},
		components: {
			record,
			drawer,
			qiunDataCharts
		},
		computed: {
			...mapState(["user", "familayList", 'isBluetoothTyle', "isConnected", "configInfo", "bleValue",
				"MeasureResult"
			]),
			info() {
				return this.user
			},
			userList() {
				return this.familayList
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			isConnection() {
				return this.bleValue.isConnectStatus
			},
			bleTipsText() {
				return this.bleValue.bleTipsText
			},
			Measure() {
				let that = this
				that.handTrue = false
				that.$nextTick(() => {
					that.handTrue = true
				})
				return this.MeasureResult
			}
		},
		onLoad() {
			let that = this
			that.token = uni.getStorageSync("token")
			console.log("token", that.token)
			if (that.token && that.bleValue.isConnectStatus != 2) {
				that.$ble.openBluetoothAdapter()
			}
			that.$ble.onBLEConnectionStateChange()
			uni.onBluetoothAdapterStateChange(function(res) {
				that.$store.commit("changeBluetooth", res.available);
			})
		},
		onPullDownRefresh() {
			let that = this
			that.$tools.handleUserList()
			if (that.bleValue.isConnectStatus != 2) {
				that.$ble.openBluetoothAdapter()
			}
			that.$ble.onBLEConnectionStateChange()
			uni.stopPullDownRefresh()
		},
		onShow() {
			let that = this
			that.token = uni.getStorageSync('token')
			uni.onBluetoothAdapterStateChange(function(res) {
				that.$store.commit("changeBluetooth", res.available);
			})
		},
		watch: {
			isBluetoothTyle() {
				let that = this
				if (!that.isBluetoothTyle) {
					that.$store.commit("changeBluetoothValue", {
						bleTipsText: "重新连接",
						isConnectStatus: 1,
					})
				}
			},
			isConnected: function() {
				let that = this
				if (!that.isConnected) {
					that.$store.commit("changeBluetoothValue", {
						bleTipsText: "重新连接",
						isConnectStatus: 1,
					})
				}
			},
		},
		methods: {

			// 初始化蓝牙
			openBluetoothAdapter() {
				let that = this
				if (that.isConnection == 2) return
				that.$store.commit('changeBluetoothValue', {
					deviceId: "",
					serviceId: "",
					isFood: false,
					foodWeight: 100,
					foodUnit: "g",
					foodNotify: "",
					foodWrite: "",
					unitList: that.$json.unitMinus,
					foodType: 1,
					bleTipsText: "蓝牙搜索中",
					isConnectStatus: 0,
				})
				that.$ble.openBluetoothAdapter()
			},

			// 添加成员
			handleAddUser(ind) {
				let that = this
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: ind == 1 ? "/body/my/userInfo?info=" + JSON.stringify(this.user) : "/body/my/userInfo"
					})
				} else {
					that.$tools("登录后查看更多")
				}
			},
			handleLogin() {
				uni.navigateTo({
					url: "/body/login/login"
				})
			},
			// 详情
			handleTools(name) {
				uni.navigateTo({
					url: "/body/home/body?to=" + name
				})
			},
			// 深度
			handReport() {
				uni.navigateTo({
					url: "/body/report/report"
				})
			},
			// 趋势
			handelCurveDetailed() {
				let that = this
				setTimeout(function() {
					uni.navigateTo({
						url: "/body/curve/curve"
					})
				}, 200)
			},
			// 手动
			handlerRecord() {
				this.$store.commit('changeRecord', true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activs {
		background: #ffc800 !important;
	}

	.body {
		background: #f7f7f7;


		.info {
			margin: 15px 10px;
			padding: 10px;
			height: auto;
			overflow: hidden;
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}

			.weight {
				width: 100%;
				display: flex;
				margin-top: 10px;
				justify-content: space-between;

				.left {
					width: 40%;
					height: 60px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.target {
				color: #999;
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
		}

		.charts {
			width: 50%;
			height: 60px;
		}

		.function {
			display: flex;
			margin: 0 5px;
			width: calc(100% - 10px);
			justify-content: space-between;

			view {
				width: 50%;
			}

			image {
				width: 100%;
			}
		}

		.tools {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 10px;
			padding-left: 3%;
			width: 97%;
			background: #f7f7f7;
			box-shadow: none;
			justify-content: space-between;

			.item {
				width: 40%;
				background: #fff;
				margin-bottom: 15px;
				border-radius: 10px;
				padding: 10px 3%;
				margin-right: 3%;
			}

			.top {
				display: flex;
				align-items: center;

				image {
					width: 22px;
					height: 22px;
					margin-right: 5px;
				}
			}

			.number {
				margin: 5px 0;
			}
		}
	}

	.header {
		width: 100%;
		padding: 15px 0;
		background: $maincolor;

		.top {
			display: flex;
			align-items: center;
		}

		.top2 {
			display: flex;
			align-items: center;
			background: #fff;
			margin: 0 15px;
			padding: 10px 15px;
			border-radius: 10px;
			justify-content: center;
		}

		.headimg {
			width: 55px;
			height: 55px;
			border-radius: 50%;
			margin: 0 10px;
			float: left;
		}

		.info {
			width: calc(100% - 120px);
			float: left;
		}

		.t-icon-qiehuan1 {
			float: right;
		}
	}

	.bluetooth {
		width: calc(100% - 20px);
		background: #fff;
		padding: 8px 0;
		margin-top: 15px;
		margin-left: 10px;
		border-radius: 10px;
		text-align: center;
	}

	.toggle {
		display: flex;
		width: calc(100% - 20px);
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 0;
		margin-top: 8px;

		.toolsItem {
			color: #999;
			margin: 0 10px;

		}

		.active {
			color: #333;
			position: relative
		}

		.active:before {
			content: "";
			position: absolute;
			bottom: 0;
			width: 20px;
			height: 4px;
			background: #54d87c;
			border-radius: 5px;
			left: calc(50% - 10px);
		}
	}
</style>