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">{{$t("infoGender")}}：{{info.gender==1?$t("infoMan"):info.gender==2?$t("infoWoman"):$t("infoUnknown")}}</text>
						<text class="ml-10">{{$t("infoAge")}}：{{info.age}}{{$t("infoAgeunit")}}</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">
					{{$t("msgAddUser")}}~
				</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">
				{{$t("msgLoginTips")}}
			</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>{{$t("LongestConsecutive")}}{{ite.name}}</text>
						<text>{{ite.ideal_weight}}</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="function mt-15">
				<view class="tools_g">
					<view class="gongju" @click="handlerRecord">
						<view class="right mr-15">
							<text>{{$t("manualRecording")}}</text>
							{{$t("Record")}}>
						</view>
					</view>
					<view class="gongju2 " @click="handReport">
						<view class="right mr-15">
							<text>{{$t("depthReport")}}</text>
							{{$t("Enter")}}>
						</view>
					</view>
				</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>
		</view>
		<view class="nolist" v-else>
			<image src="/static/none.png"></image>
			<text>{{$t("msgNoMoreData")}}</text>
		</view>
		<!--  -->
		<view class="f_banner footbox" v-if="configInfo.banner.length">
			<swiper class="swiper" circular="true">
				<swiper-item v-for="(ite,index) in configInfo.banner" @click="$tools.NewsPtype(ite)">
					<image :src="ite.pic" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--  -->
		<!-- 手动记录 -->
		<record></record>
		<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
			uni.setNavigationBarTitle({
				title: this.$t('titleHealth'),
			})
			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: that.$t("ConnectionTimeout"),
						isConnectStatus: 1,
					})
				}
			},
			isConnected: function() {
				let that = this
				if (!that.isConnected) {
					that.$store.commit("changeBluetoothValue", {
						bleTipsText: that.$t("ConnectionTimeout"),
						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: that.$t("SearchBluetooth"),
					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(that.$t("msgLoginTips"))
				}
			},
			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 10px;
			width: calc(100% - 20px);
			justify-content: space-between;

			view {
				width: 50%;
			}

			image {
				width: 100%;
			}
		}

		.tools {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 10px;
			padding-left: 3%;
			margin-bottom: 0;
			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);
		}
	}

	.tools_g {
		width: 100% !important;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;

		.gongju,
		.gongju2 {
			background: #fff;
			display: flex;
			width: 47% !important;
			height: 70px;
			align-items: center;
			position: relative;
			justify-content: flex-end;
			background: url(@/static/g1.png) no-repeat;
			background-size: 100% 100%;

			.right {
				font-size: 12px;
				color: #F5AC3D;
				text-align: right;
				margin-right: 15px;

				text {
					display: block;
					width: 100%;
					font-size: 16px;
					margin-bottom: 8px;
					font-weight: bold;
				}
			}
		}

		.gongju::before {
			content: "";
			position: absolute;
			width: 40px;
			height: 40px;
			left: 13px;
			top: 16px;
			background: url(@/static/g.png) no-repeat;
			background-size: 100% 100%;
		}

		.gongju2 {
			background: url(@/static/g2.png) no-repeat;
			background-size: 100% 100%;

			.right {
				color: #63AB90;
			}
		}

		.gongju2::before {
			content: "";
			position: absolute;
			width: 40px;
			height: 40px;
			left: 10px;
			top: 20px;
			background: url(@/static/g02.png) no-repeat;
			background-size: 100% 100%;
		}
	}
	
	
</style>