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 class="toggle">
			<view :class="{'active':toolsIndex==0}" class="toolsItem" @click="handleToolsIndex(0)">身体数据</view>
			<view :class="{'active':toolsIndex==1}" class="toolsItem" @click="handleToolsIndex(1)">饮食数据</view>
			<view :class="{'active':toolsIndex==2}" class="toolsItem" @click="handleToolsIndex(2)">健康工具</view>
		</view>
		<view v-if="token">
			<bodypage v-if="toolsIndex==0"></bodypage>
			<food v-if="toolsIndex==1"></food>
			<card v-if="toolsIndex==2"></card>
		</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 bodypage from "@/components/bodyIndex/bodyHome.vue"
	import food from "@/components/foodIndex/foodHome.vue"
	import card from "@/components/cardIndex/cardHome.vue"
	import drawer from "@/components/bodyIndex/drawer.vue"
	export default {
		data() {
			return {
				token: "",
				// toolsIndex: 0
			}
		},
		components: {
			food,
			bodypage,
			card,
			drawer,
		},
		computed: {
			...mapState(["user", "familayList", 'isBluetoothTyle', "isConnected", "configInfo", "bleValue",
				"homeCardIndex"]),
			info() {
				return this.user
			},
			userList() {
				return this.familayList
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			isConnection() {
				return this.bleValue.isConnectStatus
			},
			bleTipsText() {
				return this.bleValue.bleTipsText
			},
			toolsIndex() {
				return this.homeCardIndex
			}
		},
		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')
			console.log("token",that.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,
					})
				}
			},
			'bleValue.isFood'() {
				let that = this
				if (that.bleValue.isFood) {
					that.$store.commit("changehomeCard", 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("登录后查看更多")
				}
			},
			handleToolsIndex(ind) {
				this.$store.commit("changehomeCard", ind);
			},
			handleLogin() {
				uni.navigateTo({
					url: "/body/login/login"
				})
			},
		}
	}
</script>

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

	.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>