adultDeviceApp/pages/index/index.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header-con" :style="{background:appTheme}">
			<view class="header" v-if="token">
				<view class="left">
					<image :src="user.headimg" class="headimage mr-10" @click="handleDrawer"></image>
					<view>
						<view class="name" @click="handleDrawer">
							<text class="overflow">{{user.name}}</text>
							<icon class="iconfont icon-yqfqiehuan"></icon>
						</view>
						<view class="age">
							<view>
								性别:{{!user.sex?"未知":user.sex==1?'男':'女'}}
							</view>
							<view>
								年龄:{{user.mage?user.mage:"0岁"}}
							</view>
						</view>
					</view>
				</view>
				<view class="celiang_r" @click="handleBluetoothClick">
					<icon class="t-icon t-icon-tizhongcheng"></icon>
					<text>上秤测量</text>
				</view>
			</view>
			<view class="header2" v-else @click="handleLogin">
				<view class="text"><text>登录</text>查看更多信息</view>
			</view>
		</view>
		<!-- 工具 -->
		<view class="tools_l">
			<view v-for="(item,index) in toollist" :key="index" class="list" @click="clickTool(item.id)">
				<image :src="item.icon"></image>
				<view class="text">{{item.title}}</view>
			</view>
			<!-- 客服 -->
			<message v-if="token&&configBox.serviceappid"></message>
		</view>
		<!-- 报告 -->
		<view class="myinfo myinfoPage borderT15" v-if="MeasureResult&&infoList.length">
			<view class="h2">
				<view><text></text>健康评分</view>
			</view>
			<view class="box">
				<view class="left">
					<view class="circleprogress">
						<view class="wrapper">
							<view class="leftprogress" :style="{ width: MeasureResult.cmi + '%'}">
							</view>
						</view>
						<view class="fen">
							<view>{{MeasureResult.cmi}}</view>分
						</view>
					</view>
				</view>
				<view class="right">
					<view class="item">
						<view><text>{{MeasureResult.height}}</text>cm</view>
						<view class="tivon">身高</image>
						</view>
					</view>
					<view class="item">
						<view><text>{{MeasureResult.weight}}</text>kg</view>
						<view>体重</view>
					</view>
					<view class="item">
						<view><text>{{MeasureResult.bodyage?MeasureResult.bodyage:'-'}}</text>岁</view>
						<view>体龄</view>
					</view>
					<view class="item">
						<view><text class="f-15">{{MeasureResult.body?MeasureResult.body:'-'}}</text></view>
						<view>体型</view>
					</view>
				</view>
			</view>
		</view>
		<view class="myinfo myinfoPage borderT15">
			<view class="h2">
				<view><text></text>健康分析</view>
				<view class="more" v-if="MeasureResult&&infoList.length">测量时间：{{user.lasthearttime}}</view>
			</view>
			<view v-if="MeasureResult&&infoList.length">
				<view class="box1">
					<uni-collapse accordion>
						<uni-collapse-item class="list" v-for="(item,index) in infoList" :key="index">
							<template v-slot:title>
								<uni-list-item class="block">
									<view class="name">
										<icon class="t-icon iconfont" :class="'t-icon-'+item.name"></icon>
										{{item.title}}
									</view>
									<view class="val" v-if="item.title=='肥胖等级'">
										{{item.level?item.level:'-'}}
									</view>
									<view class="val" v-else>{{item.value?item.value:'0'}}{{item.unit}}</view>
									<view class="level">
										<view class="btnf" :style="{backgroundColor:item.color}">{{item.level}}</view>
									</view>

								</uni-list-item>
							</template>
							<view class="desc">
								<view v-if="item.desc">{{item.desc}}</view>
								<view class="scale" v-if="item.ishasscale">本次评分：{{item.scale}}</view>
								<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
									<view class="bi" v-if="item.title!='基础代谢'">
										<view :style="'left:'+item.offset+'%'" class="peobox">
											<view class="xx"></view>
										</view>
										<view class="item" v-for="(ite , ind) in item.list" :key="ind"
											:style="{backgroundColor:ite.color}">
											<view class="span1">{{ite.text}}</view>
											<view class="span" v-if="ind<item.list.length-1">{{ite.maxvalue}}</view>
										</view>
									</view>
									<view v-else>
										<view class="kcalClass" v-if="item.list&&item.list.length">
											标准值:{{item.list[0].maxvalue}}kcal
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
			<view v-else class="nolist">
				<icon class="iconfont icon-zanwu"></icon>
			</view>
		</view>
		<view class="introction" v-if="MeasureResult&&infoList.length">
			<icon class="t-icon t-icon-tishi"></icon>
			<span>此测量数据仅供参考，不可代替医学专业测试！</span>
		</view>
		<!-- 提醒设置 -->
		<view class="tipList borderRadius borderT15 mb-15" v-if="tmplIdList.length">
			<view class="h2">
				<view><text></text>提醒设置</view>
			</view>
			<view class="item_box">
				<view class="item_box_tips" v-for="(text,id) in checkList" :key="id" @click="switch1Change(text.index)">
					{{text.title}}
					<image class="iconfont"
						:src="isShowEle == text.index?'../../static/switch-off.png':'../../static/switch-ON.png'" />
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="f_banner borderT15" v-if="fimages.length">
			<swiper class="swiper" indicator-dots="true" autoplay="true">
				<swiper-item v-for="(image, index) in fimages" :key="index" @click="detail(image)">
					<image :src="image.headimg" />
				</swiper-item>
			</swiper>
		</view>
		<view class="endtext mt-15" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
		<!-- denglu -->
		<userLogin></userLogin>
		<!-- 手动记录 -->
		<manuaRecord></manuaRecord>
		<!-- 左侧 -->
		<leftdrawer></leftdrawer>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import userLogin from '@/components/userLogin.vue'
	import leftdrawer from "@/components/drawer/drawer.vue"
	import message from "@/components/message.vue"
	import manuaRecord from '@/components/target/manuaRecord.vue';
	export default {
		components: {
			leftdrawer,
			userLogin,
			message,
			manuaRecord
		},
		computed: {
			...mapState(["user", "MeasureResult", "configBox", "appTheme", "devHomePram"]),
		},
		async onLoad(options) {
			let that = this;
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: that.appTheme,
			});
			that.token = uni.getStorageSync('token')
			if (options && options.userid) {
				that.userId = options.userid
			}
			await that.login()

			// let value = "a900260e1501003200000000021d03fa1600ae9a"
			let value = "a900260710020064451100f99a"
			let dw = value.substring(19, 20)
			let type = value.substring(8, 10)
			let typeInfo = value.substring(10, 12)
			let weight = parseInt(value.substring(12, 18), 16)
			console.log("value", type, typeInfo, weight, dw ,value.substring(12, 18))
		},
		onShow() {
			this.token = uni.getStorageSync('token')
		},
		onTabItemTap() {
			this.$store.commit("changeDrawe", false)
			this.$store.commit("changeRecord", false);
		},
		watch: {
			MeasureResult() {
				let that = this
				console.log("MeasureResult更新")
				if (!that.MeasureResult) return
				that.infoList = that.MeasureResult.list
				// this.handleToggle(0)
			},
			appTheme() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.appTheme,
				});
			}
		},
		methods: {
			login() {
				let that = this
				console.log('userId', that.userId)
				uni.login({
					success(res) {
						if (res.code) {
							if (res.errMsg = "login:ok") {
								that.$model.onlogin({
									code: res.code,
									userid: that.userId
								}).then(res => {
									if (res.code == 2) {
										that.token = null
										uni.clearStorageSync()
										that.$store.commit("changeLogout", false);
										uni.setStorageSync('tenantid', res.data.tenantid)
										uni.setStorageSync('sessionid', res.data.sessionid)
										uni.setStorageSync('iswxphone', res.data.iswxphone)
										that.$store.dispatch("getConfig", {
											tenantId: uni.getStorageSync('tenantid')
										})
										return
									}
									if (res.code == 0) {
										that.token = res.data.token
										uni.setStorageSync('token', res.data.token)
										uni.setStorageSync('userid', res.data.userid)
										uni.setStorageSync('tenantid', res.data.tenantid)
										uni.setStorageSync('sessionid', res.data.sessionid)
										uni.setStorageSync('iswxphone', res.data.iswxphone)
										uni.setStorageSync('refreshtoken', res.data.refreshtoken)
										that.$store.dispatch("getConfig", {
											tenantId: uni.getStorageSync('tenantid')
										})
										that.getFamilyList()
									}
								}).catch(e => {})
							}
						}
					}
				})
			},
			getFamilyList() {
				let that = this
				let isfamily
				let id = uni.getStorageSync('familyid')
				that.$model.getFamilyList({}).then(res => {
					that.$store.commit("changeFamilay", res)
					if (id) {
						if (!isNaN(id) && typeof id === "number") {
							isfamily = true
						} else {
							isfamily = false
						}
					} else {
						isfamily = true
					}
					that.$model.getUserInfo({
						familyid: isfamily ? res[0].familyid : uni.getStorageSync('familyid')
					}).then(res => {
						that.$store.commit('changeUser', res.data)
						if (!res.data.height || !res.data.mage || !res.data.birthday) {
							uni.redirectTo({
								url: `/pageTwo/login/userinfo`
							})
							return
						}
						that.$store.dispatch("getResult", {
							birthday: res.data.birthday,
							familyid: res.data.familyid,
							height: res.data.height,
							sex: res.data.sex,
						})
						that.GetTplList()
						that.GetSubscribeInfo()
						that.getBannerList()
					});
				}).catch(e => {})
			},
			//消息模板列表
			GetTplList() {
				let that = this
				that.$model.GetTplList({}).then(res => {
					if (res.code == 0) {
						console.log("消息模板列表", res.data)
						res.data.forEach(item => {
							that.tmplIdList.push(item.id)
						})
					}
				})
			},
			//消息订阅状态
			GetSubscribeInfo() {
				let that = this
				that.$model.GetSubscribeInfo({}).then(res => {
					console.log("消息模板状态", res)
					if (res.code == 0) {
						that.isShowEle = res.data.type
					}
				})
			},
			//消息提醒
			switch1Change(ind) {
				let that = this
				if (that.isShowEle != ind) { //允许提醒
					wx.requestSubscribeMessage({
						tmplIds: that.tmplIdList,
						success(res) {
							let list = {}
							let subList = []
							that.tmplIdList.forEach(item => {
								list = {
									"tplId": item,
									"status": res[item],
								}
							})
							subList.push(list)
							that.$model.GetSubscribe({
								type: ind,
								list: subList,
							}).then(res => {
								console.log("res", res)
								if (res.code != 0) return
								that.isShowEle = ind
							})
						},
						fail(res) {
							that.$tools.msg("订阅失败")
						}
					})
				} else { //取消提醒
					that.$model.Getunsubscribe({
						type: 1,
					}).then(res => {
						if (res.code == 0) {
							that.$tools.msg("取消提醒成功")
							that.isShowEle = 0
							return
						}
					})
				}
			},
			// 轮播
			getBannerList() {
				this.$model.getBannerList({}).then(res => {
					this.fimages = res.data
				})
			},
			// 上称测量
			handleBluetoothClick() {
				let that = this
				if (!that.token) {
					uni.redirectTo({
						url: '/pageTwo/login/login'
					})
					// that.$store.commit("changeUserLogin", true)
					return
				}
				uni.openBluetoothAdapter({
					success: e => {
						that.$store.commit("changeBluetooth", true);
						// if (that.devHomePram && that.devHomePram.t && that.devHomePram.sn) {
						//   that.$tools.handlePages(that.devHomePram.t, that.devHomePram.sn)
						//   return
						// }
						uni.navigateTo({
							url: "/pages/search/devType"
						})
						console.log('初始化蓝牙成功:' + e.errMsg);
					},
					fail: err => {
						console.log('初始化蓝牙失败:' + err.errMsg);
						return this.$tools.getBluetoothAdapter(err)
					}
				});
			},
			// 切换
			handleToggle(index) {
				let that = this
				if (!that.MeasureResult) return
				let str = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
				for (var i = 0; i < str.length; i++) {
					if (i == index) {
						if (index == 0 && str[0].showCon == false) {
							str[0].showCon = true
						} else {
							str[i].showCon = !str[i].showCon
						}
					} else {
						str[i].showCon = false
					}
				}
				that.infoList = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
			},
			// 工具
			clickTool(ind) {
				let that = this
				if (!that.token) {
					uni.redirectTo({
						url: '/pageTwo/login/login'
					})
					// that.$store.commit("changeUserLogin", true)
					return
				}
				if (ind == 0) {
					that.$store.commit("changeRecord", true)
					return
				}
				if (ind == 1) {
					uni.navigateTo({
						url: "/pageTwo/survey/survey"
					})
					return
				}
				if (ind == 2 && that.configBox.referappid) {
					console.log("跳转儿童小程序", uni.getStorageSync('userid'))
					uni.navigateToMiniProgram({
						appId: that.configBox.referappid,
						path: 'pages/index/index?userid=' + uni.getStorageSync('userid'),
						// envVersion: "develop",
						extraData: {},
					})
					return
				}
				if (ind == 3) {
					uni.navigateTo({
						url: "/pageTwo/me/history"
					})
					return
				}
			},

			detail(e) {
				if (e.type == 1) {
					uni.navigateTo({
						url: "/pageTwo/zixun/detail?id=" + e.id
					})
					return
				}
				if (e.type == 2) {
					uni.navigateTo({
						url: "/pageTwo/zixun/detail?url=" + e.content
					})
					return

				}
				if (e.type == 3) {
					uni.navigateToMiniProgram({
						appId: e.content,
						path: e.path,
						extraData: {},
					})
					return
				}
			},
			// 登录
			handleLogin() {
				uni.redirectTo({
					url: '/pageTwo/login/login'
				})
				// that.$store.commit("changeUserLogin", true)
			},
			handleDrawer() {
				this.$store.commit("changeDrawe", true);
			},
		},
		data() {
			return {
				fimages: [],
				userId: null,
				token: null,
				deviceId: "",
				isShowEle: 0,
				infoList: [],
				tmplIdList: [],
				toollist: [{
						icon: '/static/tool1.png',
						title: '手动记录',
						id: 0
					}, {
						icon: '/static/tool2.png',
						title: '体质评估',
						id: 1
					},
					{
						icon: '/static/tool3.png',
						title: '儿童测量',
						id: 2
					},
					{
						icon: '/static/tool4.png',
						title: '历史记录',
						id: 3
					},

				],
				checkList: [{
						title: '每周提醒',
						index: 1,
					},
					{
						title: '每月提醒',
						index: 2,
					},
					{
						title: '半年提醒',
						index: 3,
					},
					{
						title: '一年提醒',
						index: 4,
					}
				],
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		margin-top: 115px;
		background-color: #f7f7f7;
		padding-bottom: 15px;

		// 工具
		.tools_l {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding-top: 10px;
			background: #fff;
			justify-content: space-between;

			.list {
				width: 25%;
				text-align: center;
				font-size: 14px;
				margin-bottom: 15px;

				.text {
					margin-top: 5px;
					color: #666;
					font-size: 12px;
				}
			}

			image {
				width: 35px;
				height: 35px;
			}
		}

		.myinfo {
			background: #fff;
			margin-top: 15px;
		}

		// 消息提醒

		.tipList {
			background: #fff;
			margin-top: 10px;

			.item_box {
				display: flex;
				align-items: center;
				align-content: center;
				flex-wrap: wrap;
				margin: 0 15px;
			}

			.item_box_tips {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: start;
				margin-bottom: 10px;

				.t-icon,
				.iconfont {
					width: 35px;
					height: 35px;
					margin-left: 10px;
				}
			}

			:nth-child(even).item_box_tips {
				text-align: right;
				justify-content: flex-end;
			}
		}

		// 标题
		.h2 {
			color: #333;
			font-weight: bold;
			padding: 10px 15px;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			text {
				display: inline-block;
				background: $btncolor;
				width: 8px;
				height: 12px;
				margin-right: 5px;
				font-size: 32rpx;
			}

			.more {
				font-size: 14px;
				font-weight: 500;
				color: #666;
			}
		}

		// banner
		.f_banner {
			width: 100%;
			height: 330rpx;
			margin-top: 30rpx;
			bottom: 52px;

			/deep/swiper {
				height: 330rpx;
			}

			image {
				width: 100%;
				height: 100%;
				background-size: 100%;
			}
		}

		.unusual {
			font-size: 14px;
			border-radius: 8px;
			text-align: center;
			color: #e83a1e;
			background: #f7e4c8;
			padding: 5px 0;
		}

		.introction {
			display: flex;
			margin-top: 10px;
			margin-left: 15px;
			font-size: 12px;
			color: #666;

			.t-icon {
				width: 15px;
				height: 15px;
				margin-right: 5px;

			}
		}

		.val0 {
			position: absolute;
			left: 40%;
			margin-left: 3px;
		}
	}

	/deep/uni-collapse {
		width: 100% !important;
	}

	/deep/.uni-collapse-item {
		width: 100% !important;
	}

	/deep/.uni-collapse-item__title-arrow {
		margin-right: 0 !important;
	}

	/deep/.uni-collapse-item__wrap-content.uni-collapse-item--border {
		border-bottom-width: 0
	}
</style>