siyu_app/pages/index/components/watchIndex.vue

<template>
	<view class="watch-con">
		<view class="userbox">
			<image class="home_top_bg" src="@/static/images/pages_watch/images/home_top_bg.png" mode="widthFix"></image>
			<view class="user">
				<view class="user-navbox">
					<scroll-view class="tab-bar" :scroll-x="true" :show-scrollbar="false"
						:scroll-into-view="scrollInto">
						<view :class="selectUser == index ? 'user-navitem user-navitem-active':'user-navitem'" :id="'tab'+index"
							v-for="(item,index) in userList" :key="index" @click="handleUser(index)">
							<view>{{item.name}}</view>
							<view class="user-navbox-line" :style="{display: selectUser == index ? 'flex':'none'}">
								<image src="@/static/images/pages_watch/icons/tag_icon.png" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="user-family" @click="navigateToUrl('/pages_watch/index/myfamily/index')">
					<image src="@/static/images/pages_watch/icons/my_family_icon.png" mode="aspectFill"></image>
					<view>我的家人</view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" top="0" bottom="0" :down="downOption" :up="upOption" @down="downCallback">
		
		<view class="watch-con-body">
			<!-- banner -->
			<swiper v-if="userList[selectUser] && userList[selectUser].deviceId && userList[selectUser].deviceId.length > 0" style="height: 350rpx;padding: 0 12rpx;box-sizing: border-box;"
			 :current="activeTab" :duration="300" :previous-margin="userDeviceList.length > 0 &&activeTab == userDeviceList.length ? '92rpx':'0'" :next-margin="activeTab == userDeviceList.length ? '0':'92rpx'" @change="onSwiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in userDeviceList" :key="index">
					<view class="bindbox-banner" :style="{height: activeTab == index ?'308rpx':'260rpx'}">
						<view class="bindbox-head">
							<image class="bindbox-img" src="@/static/images/pages_watch/images/watch_icon.png" mode="aspectFill"></image>
							<view class="bindbox-headr" @tap="navigateToUrl('/pages_watch/index/targetInfo?selectUser='+selectUser+'&selectUserInfo='+ JSON.stringify(userList[selectUser]))">
								<view>
									<view class="bindbox-title textOne" v-show="selectUser == 0">
										{{item.user && item.user.nickName ? item.user.nickName : defaultName || '--' }}
									</view>
									<view class="bindbox-title textOne" v-show="selectUser != 0">
										{{userList[selectUser].name}}
									</view>
									<view>点击查看佩戴者信息</view>
								</view>
								<image src="@/static/images/pages_watch/icons/edit_white_arrow_right_icon.png"></image>
							</view>
						</view>
						<view class="bindbox-info">
							<view class="bindbox-info-l">
								<view class="bindbox-info-name">
									<view>手表</view>
									<view class="bindbox-info-desc">{{item.ble || '--'}}</view>
								</view>
								<view class="bindbox-info-status">
									<view>状态</view>
									<!-- 0-OFFLINE 1-ONLINE 2-UNACTIVE 3-DISABLE 4-NOT EXIST -->
									<view class="bindbox-info-desc">
										{{item.status == 1 ? '在线' : '离线'}}
										<navigator url="/pages_watch/index/equipment/offlineReason" hover-class="none" style="display: inherit;">
											<image class="question_mark_icon" src="@/static/images/pages_watch/icons/question_mark_icon.png" mode="aspectFill"></image>
										</navigator>
									</view>
								</view>
							</view>
							<view style="flex-shrink: 0;margin-left: 30rpx;">
								<view class="status_btn demonstrate_btn" style="margin-bottom: 20rpx;width: 192rpx;" @click="handleGuide">操作视频<image src="@/static/images/pages_watch/icons/edit_white_arrow_right_icon.png"></image>
								</view>
								<view class="bindbox-info-r" @tap="navigateToUrl('/pages_watch/index/equipment/index?selectUser='+selectUser)">
									设备管理
									<image src="@/static/images/pages_watch/icons/arrow_right_orange_icon.png"></image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="add-device" :style="{height: activeTab == userDeviceList.length ?'308rpx':'260rpx', width:activeTab == userDeviceList.length ?'308rpx':'260rpx'}" @click="handleBind">
						<view class="add-device-icon">
							<image src="@/static/images/pages_watch/icons/add_watch_icon.png" mode="aspectFill"></image>
						</view>
						<text>添加手表</text>
					</view>
				</swiper-item>
			</swiper>
			<view class="banner" v-else>
				<image class="banner_bg" src="@/static/images/pages_watch/images/gold_circle_bg.png" mode="heightFix"></image>
				<image class="banner_bg_watch" src="@/static/images/pages_watch/images/watch_img.png" mode="heightFix"></image>
				<view style="position: relative;z-index: 1;">
					<view class="status_text">未绑定</view>
					<view class="status_desc">还没绑定健康手表，扫描 手表二维码去绑定</view>
					<view class="status_btnbox">
						<button class="status_btn binding_btn" :loading="btnLoading" :disabled="btnLoading" @click="handleBind">
							{{btnLoading ? "绑定中...":"立即绑定"}}
							<image v-show="!btnLoading" src="@/static/images/pages_watch/icons/arrow_right_orange_icon.png"></image>
						</button>
						<view class="status_btn demonstrate_btn" @click="handleGuide">操作视频<image src="@/static/images/pages_watch/icons/edit_white_arrow_right_icon.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 24rpx;">
				<!-- 健康风险 -->
				<view class="health-risks">
					<view class="health-risks-title">
						<view class="health-risks-titlel"><text>健康</text>风险</view>
						<navigator url="/pages_watch/message/detail?title=手表通知" hover-class="none" class="health-risks-titler" >
							<text>更多提醒</text>
							<text class="health-risks-msgnum" v-show="alarmTotal > 0">{{alarmTotal}}</text>
							<image src="@/static/images/pages_watch/icons/arrow_right_icon.png"></image>
						</navigator>
					</view>
					<view class="health-risks-msg">
						<view class="health-risks-msgitem" v-for="(item,index) in alarmInfoList" :key="index">
							<view class="textOne health-risks-msgtxt">{{item.description}}</view>
							<view class="health-risks-msgbtn" @tap="navigateToUrl('/pages_watch/message/detail?title=手表通知')">{{item.type == "event"? '去就医':"去查看"}}</view>
						</view>
					</view>
				</view>
				<view class="navbox">
					<view class="tongue-diagnosis" @tap="navigateToUrl('/pages/user/healthRecords/index','健康档案')">
						<view>
							<view class="tongue-diagnosis-title">健康档案</view>
							<view>为您精准诊断</view>
						</view>
						<image src="@/static/images/pages_watch/icons/jkda.png" mode="aspectFill"></image>
					</view>
					<!-- <view class="health-report" @tap="navigateToUrl('/pages_watch/health/healthReport?selectUser='+selectUser,'健康报告')">
						<view>
							<view class="health-report-title">健康报告</view>
							<view>分析健康状态</view>
						</view>
						<image src="@/static/images/pages_watch/icons/health_report_icon.png" mode="aspectFill"></image>
					</view> -->
					<view class="health-report" @tap="navigateToUrl('/pages_watch/health/healthWeekReport?selectUser='+selectUser,'健康周报')">
						<view>
							<view class="health-report-title">健康周报</view>
							<view>分析健康状态</view>
						</view>
						<image src="@/static/images/pages_watch/icons/health_report_icon.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 健康检测 -->
				<view class="box-title">
					<text class="box-title-left">健康监测</text>
					<view class="box-title-right">
						<view class="box-title-rightedit" @tap="navigateToUrl('/pages_watch/healthMonitoring/index')">
							<image src="@/static/images/pages_watch/icons/edit_add_icon.png"></image>
							<text>编辑卡片</text>
						</view>
					</view>
				</view>
				<sports ref='sports' v-if="showSports"></sports>
				<view class="health-monitoring">
					<view class="health-monitoring-item" v-for="(item,index) in indexInfo" :key="index"
						@tap="handleMonitoring(item)">
						<view class="health-monitoring-title">
							<view>
								<view class="health-monitoring-maintitle">{{item.type.type}}</view>
								<view>{{item.type.title}}</view>
							</view>
							<image :src="item.type.icon" mode="aspectFill"></image>
						</view>
						<view class="health-monitoring-res resnum">{{item.data || '--'}}</view>
						<view class="health-monitoring-time">{{item.date && item.date.substring(5,16)}}</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import sports from "@/pages_watch/components/sports/sports.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import permision from "@/utils/permission.js";
	import { getWatchUserInfo,getStatus,editUser,editMyfamily,editDevice } from "@/api/pages_watch/user.js";
	import { alarmInfo, queryIndexWatchData,getBatchData,getInfoByDeviceIds } from "@/api/pages_watch/index.js";
	import { getAppVersion } from '@/api/pages_watch/common.js';
	// import { appCheckUdate,openDownload } from '@/utils/APPUpdate.js'
	const avatar="/static/images/pages_watch/images/my_heads_icon.png";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { 
		    mescrollBody,
			sports
		 },
		data() {
			return {
				avatar,
				mescroll: null,
				downOption: {   //下拉刷新
				 	auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 暂无疗法 ~' // 提示
				 		// btnText: '去看看'
				 	},
					use:false
				},
				userboxWidth: "",
				scrollInto: "tab0",
				activeTab: 0,
				userDeviceList: [],
				// 当前的设备编号
				deviceId: uni.getStorageSync("deviceId"),
				// 当前登录用户的信息
				userInfo: {},
				// 所有家庭成员（包括自己）
				userList: [{
					name: "自己",
					deviceId: [],
					relationship: ""
				}],
				// 选中的家庭成员
				selectUser: 0,
				// 立即绑定按钮loading
				btnLoading: false,
				// 健康风险
				alarmInfoList: [],
				// 健康风险未读提醒
				alarmTotal: 0,
				// 健康监测信息
				indexInfo: [
					{
						data: "",
						date: "",
						type: {
							type: "血糖",
							title: "血糖健康监测",
							icon: "/static/images/pages_watch/icons/blood_sugar_icon.png"
						}
					}
					,{
						data: "",
						date: "",
						type: {
							type: "血压",
							title: "血压健康监测",
							icon:"/static/images/pages_watch/icons/blood_pressure_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "心率",
							title: "心脏健康管理",
							icon:"/static/images/pages_watch/icons/heart_rate_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "血氧",
							title: "血氧风险管控",
							icon:"/static/images/pages_watch/icons/blood_oxygen_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "体温",
							title: "体温健康监测",
							icon:"/static/images/pages_watch/icons/temperature_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "血脂",
							title: "血脂健康监测",
							icon:"/static/images/pages_watch/icons/blood_fat_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "尿酸",
							title: "尿酸健康监测",
							icon:"/static/images/pages_watch/icons/uric_acid_icon.png"
						}
					},
					// {
					// 	data: "",
					// 	date: "",
					// 	type: {
					// 		type: "血酮",
					// 		title: "血酮健康监测",
					// 		icon:"/static/images/pages_watch/icons/blood_ketone_icon.png"
					// 	}
					// },
					{
						data: "",
						date: "",
						type: {
							type: "睡眠",
							title: "睡眠健康监测",
							icon:"/static/images/pages_watch/icons/sleep_icon.png"
						}
					},
				],
				isForce:false,
				showSports: false,
				defaultName: ''
			}
		},
		watch: {
			deviceId: {
				handler(oldVal,newVal) {
					this.getAlarmInfo()
					if(this.$refs.sports) {
						const isFamily = this.selectUser != 0
						this.$refs.sports.getServerData(isFamily)
					}
				},
				immediate: true
			}
		},
		created() {
			//#ifndef H5 || APP-PLUS
			this.userboxWidth = `width:${uni.getStorageSync('menuInfo').menuLeft}`
			//#endif
			uni.$on('getScanCodeInfo',(data)=>{
				const deviceId = data.imei || ""
				this.verifyDeviceId(data,deviceId)
			})
		},
		beforeDestroy() {
			uni.$off("getScanCodeInfo")
		},
		methods: {
			initReady() {
				
			},
			initShow() {
				this.showSports = true
				if (this.$isLogin()) {
					const acindex = this.userDeviceList.length > 0 && this.userDeviceList.length == this.activeTab ? this.userDeviceList.length - 1 : this.activeTab
					this.activeTab = acindex
					const user = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')): {}
					this.defaultName = user.nickName
					this.getUser()
					this.getAlarmInfo()
					this.$nextTick(()=>{
						const isFamily = this.selectUser != 0
						this.$refs.sports.getServerData(isFamily)
					})
				} else {
					setTimeout(()=>{
						this.mescroll.endSuccess();
					}, 500)
				}
				// #ifdef APP-PLUS
				// this.checkUpdateApp();
				// #endif
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.initShow()
			},
			onChangeSubnav(e) {
				this.$emit("onChangeSubnav",e)
			},
			handleGuide() {
				uni.navigateTo({
					url: "/pages_watch/index/equipment/instructions"
				})
			},
			// swiper划动
			onSwiperChange(e) {
				this.activeTab = e.detail.current
				const acindex = this.userDeviceList.length > 0 && this.userDeviceList.length == this.activeTab ? this.userDeviceList.length - 1 : this.activeTab
				this.deviceId = this.userList[this.selectUser].deviceId[acindex] || ""
				uni.setStorageSync("deviceId",this.deviceId)
				// 所有成员的健康监测卡片展示类别一致
				this.getIndexInfo(this.userInfo.monitorDataTypeOrder)
				if(this.$refs.sports) {
					const isFamily = this.selectUser != 0
					this.$refs.sports.getServerData(isFamily)
				}
			},
			getUser() {
				getWatchUserInfo({isFamily: false}).then(res => {
					setTimeout(()=>{
						this.mescroll.endSuccess();
					}, 500)
					if (res.code == 200) {
						this.userInfo = res.user
						uni.setStorageSync("userWatchInfo", JSON.stringify(res.user))
						let otherDevice = this.userInfo.otherDevice ? JSON.parse(this.userInfo.otherDevice) : []
						otherDevice = otherDevice.map(item=>({
							...item,
							deviceId: item.deviceId ? item.deviceId.split(',') : []
						}))
						const arry = [{
							name: "自己",
							deviceId: this.userInfo.deviceId || [],
							relationship: ""
						}]
						
						this.userList = arry.concat(otherDevice)
						if(this.$isEmpty(this.userList[this.selectUser])) {
							// 用户删除家人后没有选中的信息就选中第一个
							this.selectUser = 0
							this.activeTab = 0
						}
						this.deviceId = this.userList[this.selectUser].deviceId&&this.userList[this.selectUser].deviceId.length > 0 ? this.userList[this.selectUser].deviceId[this.activeTab] : ''
						uni.setStorageSync("deviceId",this.deviceId)
						this.getInfoByDeviceIds()
						this.getIndexInfo(this.userInfo.monitorDataTypeOrder)
					}
				}).catch(()=>{
					setTimeout(()=>{
						this.mescroll.endSuccess();
					}, 500)
				})
			},
			// 首页轮播绑定信息
			getInfoByDeviceIds() {
				let ids = this.userList[this.selectUser].deviceId
				if(ids&&ids.length> 0) {
					const param = {
						deviceIds: ids.join(','),
						isFamily: this.selectUser != 0
					}
					getInfoByDeviceIds(param).then(res=>{
						if(res.code == 200) {
							this.userDeviceList = res.data && res.data.length > 0 ? res.data : []
						}
					})
				} else {
					this.userDeviceList	= []
				}
			},
			// 绑定
			async handleBind() {
				if (!this.$isLogin()) {
					this.$showLoginPage()
				} else {
					// #ifdef APP-PLUS
					    if(!plus.runtime.isAgreePrivacy()) {
					    	 uni.showToast({title: "请同意隐私政策",icon: "none"});
					    	 return;
					    }
						let status = await this.checkAppCamera()
						if(status == 1) {
							uni.navigateTo({
								url: '/pages_watch/healthMonitoring/scanCode?typeFun=getScanCodeInfo'
							})
						}
					// #endif
					// #ifdef MP-WEIXIN
						this.checkWXCamera()
					// #endif
				}
			},
			scanQRCode() {
			    uni.scanCode({
			        success(res) {
			            if (res.result) {
			                // 扫描成功，处理二维码内容
			                console.log('扫描结果：', res.scanType,res.result);
							const scanInfo = JSON.parse(res.result)
							const deviceId = scanInfo.dev_info.imei || ""
			                this.verifyDeviceId(scanInfo.dev_info,deviceId)
			            } else {
			                // 扫描失败
			                uni.showToast({
			                    title: '扫描失败',
			                    icon: 'none'
			                });
			            }
			        },
			        fail() {}
			    });
			},
			// 验证设备
			verifyDeviceId(scanInfo,deviceId) {
				// index,0表示自己，如果是自己绑定直接调用修改用户信息接口
				this.btnLoading = true
				if(this.selectUser == 0) {
					editDevice(scanInfo).then(res=>{
						this.btnLoading = false
						if(res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								position: 'top',
								duration: 2000
							})
							this.getUser()
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								position: 'top',
								duration: 2000
							})
						}
					}).catch(err=>{
						this.btnLoading = false
					})
				} else {
					this.bindDeviceId(deviceId)
					// getStatus({deviceId: deviceId}).then(res=>{
					// 	if(res.code == 200) {
					// 		if(res.data === 0 || res.data === 1 || res.data === 2 || res.data === 3) {
					// 			this.bindDeviceId(deviceId)
					// 		} else {
					// 			this.btnLoading = false
					// 			uni.showToast({
					// 				title: '绑定失败',
					// 				icon: "none",
					// 				position: 'top',
					// 				duration: 2000
					// 			})
					// 		}
					// 	}else {
					// 		this.btnLoading = false
					// 		uni.showToast({
					// 			title: res.msg,
					// 			icon: "none",
					// 			position: 'top',
					// 			duration: 2000
					// 		})
					// 	}
					// }).catch(err=>{
					// 	this.btnLoading = false
					// })
				}
			},
			// 绑定设备
			bindDeviceId(deviceId) {
				 let param = this.userList.map((item,idx)=>({
				 	...item,
				 	deviceId: idx == this.selectUser && !item.deviceId.includes(deviceId) ? item.deviceId.concat([deviceId]).join(','): item.deviceId.join(',')
				 }))
				// 去掉自己
				param.splice(0,1)
				editMyfamily({otherDevice: JSON.stringify(param)}).then(res=>{
					this.btnLoading = false
					if(res.code == 200) {
						uni.showToast({
							title: "绑定成功",
							icon: "none",
							position: 'top',
							duration: 2000
						})
						this.getUser()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							position: 'top',
							duration: 2000
						})
					}
				}).catch(err => {
					this.btnLoading = false
					console.log('err', err);
				})
			},
			// 切换绑定的成员信息
			handleUser(index) {
				this.selectUser = index
				this.activeTab = 0
				this.scrollInto = 'tab' + index
				this.deviceId = this.userList[index].deviceId[this.activeTab] || ""
				uni.setStorageSync("deviceId",this.deviceId)
				this.getInfoByDeviceIds()
				// 所有成员的健康监测卡片展示类别一致
				this.getIndexInfo(this.userInfo.monitorDataTypeOrder)
			},
			navigateToUrl(url,title) {
				if (this.$isLogin()) {
					if((title == "健康报告" || title == "健康周报") && !this.deviceId) {
						uni.showToast({
							title: "请先绑定设备",
							icon: "none"
						})
						return
					} 
					uni.navigateTo({
						url: url
					})
				} else {
					this.$showLoginPage()
				}
			},
			// 健康风险预警信息
			getAlarmInfo() {
				if(!this.deviceId) {
					this.alarmInfoList = []
					this.alarmTotal = 0
					return
				}
				const param = {
					deviceId: this.deviceId,
					pageNum: 1,
					pageSize: 3,
				}
				alarmInfo(param).then((res) => {
					if (res.code == 200) {
						this.alarmInfoList = res.rows
						this.alarmTotal = res.unreadNum
					}
				}).catch((err) => {});
			},
			// 健康监测信息
			getIndexInfo(monitorDataTypeOrder) {
				if(!this.deviceId) {
					getBatchData({ids: monitorDataTypeOrder}).then(res => {
						if (res.code == 200) {
							this.indexInfo = res.data.map(item=>({
								data: "",
								date: "",
								type: item
							}))
						}
					}).catch((err) => {});
				} else {
					const param = {
						deviceId: this.deviceId,
						type: monitorDataTypeOrder
					}
					queryIndexWatchData(param).then(res => {
						if (res.code == 200) {
							this.indexInfo = res.data
						}
					}).catch((err) => {});
				}
			},
			handleMonitoring(item) {
				if (this.$isLogin()) {
					if(!this.deviceId) {
						uni.showToast({
							title: "请先绑定设备",
							icon: "none"
						})
						return
					}
					let url = ""
					switch (item.type.type) {
						case "血糖":
							url = "/pages_watch/healthMonitoring/bloodSugar"
							break;
						case "血压":
							url = "/pages_watch/healthMonitoring/bloodPressure"
							break;
						case "心率":
							url = "/pages_watch/healthMonitoring/heartRate"
							break;
						case "血氧":
							url = "/pages_watch/healthMonitoring/bloodOxygen"
							break;
						case "睡眠":
							url = "/pages_watch/healthMonitoring/sleep"
							break;
						case "舌诊":
							url = "/pages/user/tongue/tongueList"
							break;
						case "体温":
							url = "/pages_watch/healthMonitoring/bodyTemperature"
							break;
						case "尿酸":
							url = "/pages_watch/healthMonitoring/uricAcid"
							break;
						case "压力":
							url = "/pages_watch/healthMonitoring/pressure"
							break;
						default:
							url = ""
							break;
					}
					if (url) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.showToast({
							title: '功能开发中...',
							icon: 'none',
							position: 'top',
							duration: 2000
						})
					}
				} else {
					this.$showLoginPage()
				}
			},
			async checkAppCamera() {
				let status = permision.isIOS ? await permision.requestIOS("camera") : await permision.requestAndroid("android.permission.CAMERA")
				if(status === null || status == 1) {
					status == 1 
				} else if(status == 2) {
					uni.showModal({
						content: "相机权限已关闭",
						showCancel: false,
						success: () => {}
					})
				} else if(status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						content: "为了使用相机功能，请点击设置开启相机权限",
						confirmText: "设置",
						success: (res) => {
							if(res.confirm) {
								permision.gotoAppSetting()
							}
						}
					})
				}
				return status
			},
			checkWXCamera() {
				const that = this
				uni.getSetting({
					success(res) {
						// 判断是否拥有此权限进行拉起授权  和 重新授权功能
						if (!res.authSetting['scope.camera']) {
							// 未授权此项权限 拉起授界面
							uni.authorize({
								scope: 'scope.camera',
								success() {
									// 授权成功后 就可以执行 需要权限的  操作函数了
									// 使用已授权的功能
									that.scanQRCode();
								},
								fail(err) {
									/*
									 第一次拒绝授权后必须在 uni.authorize的fail中使用
									 uni.openSetting 才能进入设置界面打开授权按钮
									 */
									uni.showToast({
										title: '您拒绝了授权',
										icon: 'none'
									});
									// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
									uni.showModal({
										title: '是否重新授权相机功能',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success() {
														console.log('开启权限成功');
													},
													fail() {
														console.log('开启权限失败');
													}
												});
											} else if (res.cancel) {
												console.log('拒绝开启开启权限');
											}
										}
									});
								}
							});
						} else {
							that.scanQRCode()
						}
					}
				});
			},
			/* 检查更新 在线更新 */
			checkUpdateApp:function(){
				//  获取manifest.json里的配置信息
				if(this.isForce){
					return;
				}
				let that=this;
				this.isForce=true;
				plus.runtime.getProperty(plus.runtime.appid, function(widgetinfo) {
						// console.log("App widgetinfo:"+JSON.stringify(widgetinfo));
						// 可以根据manifest.json里的应用名称来进行针对性的APP升级
						// if (widgetinfo.name == that.$qconfig.appName) { //APP名称
							// 获取manifest.json里的版本号  
							let platform = uni.getSystemInfoSync().platform;
							let isAndroid=platform=="android";
							let type=isAndroid?1:2;
							getAppVersion(type).then(srcData => {
									this.isForce=false;
									if(srcData.code==200){
										let data = srcData.data;
										let version = widgetinfo.versionCode,//用户当前版本
										appVersion = data.versionCode,//升级包版本
										appName = widgetinfo.name, //app名称
										updata = data.isForce,//是否强制热更新
										appurl = data.url,//升级包地址
										intro = data.note;//升级包提示
										//如果用户版本号小于升级包版本号，先升级	
										let afterVer=that.$qconfig.isAppStore?data.appStoreUpdate:true;
										// let afterVer= true;
										if(data && (version < appVersion) && afterVer){
											uni.showModal({
												title:"更新提示",
												confirmText:"立即升级",
												content:intro,
												cancelText:'确定',
												confirmText:'取消',
												success: (res) => {
													if (res.cancel) {
														openDownload(srcData.data);
													} else if (res.confirm) {
														if(updata==1){
															console.log('用户点击取消');
															uni.showToast({
																title:"请先升级APP版本",
																icon:"none",
																duration:2000
															})
															//退出app
															setTimeout(function(){
																	plus.runtime.quit();
															},2000)
														}
													}
												},
												fail: () => {
													uni.hideLoading();
												}
											})
										}
									}								
								},
								rej => {}
							).catch(()=>{
								//联网失败, 结束加载
								// this.mescroll.endErr();
							});
							
						// } 
				});
			},
					
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.indexSubsection {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.watch-con {
		padding-top: calc(var(--status-bar-height) + 44px + 88rpx);
		padding-bottom: var(--window-bottom);
		min-height: 100vh;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FDF0DA 0%, #FDF4EB 75%, #F5F7FA 100%) no-repeat;
		background-size: 100% 504rpx;
		color: #222222;

		&-body {
			padding: 0 0 32rpx 0;
		}
		.userbox {
			width: 100%;
			overflow: hidden;
			position: fixed;
			z-index: 9999;
			left: 0;
			top: calc(var(--status-bar-height) + 44px);
			.home_top_bg {
				width: 100%;
				position: absolute !important;
				left: 0;
				top: -44px;
				z-index: 0;
			}
		}
		.tab-bar {
			width: 100%;
			flex-direction: row;
			white-space: nowrap;
		}
		.user {
			width: 100%;
			height: 88rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			@include u-flex(row, center, space-between);
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #222222;
			overflow: hidden;
			position: relative;
			&-navbox {
				flex: 1;
				margin-right: 20rpx;
				overflow: hidden;
				@include u-flex(row, center, flex-start);
				font-size: 32rpx;
		
				&-line {
					display: inherit;
					margin-top: 16rpx;
		
					image {
						width: 40rpx;
						height: 12rpx;
					}
				}
			}
		
			&-navitem {
				min-width: 90rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				text-align: center;
				@include u-flex(column, center, center);
				display: inline-flex;
				flex-wrap: nowrap;
				&-active {
					font-size: 40rpx;
					color: #FF7700;
				}
			}
		
			&-family {
				flex-shrink: 0;
				font-weight: 400;
				font-size: 20rpx;
				text-align: center;
		
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		
		.banner {
			height: 312rpx;
			padding: 32rpx;
			margin: 24rpx 24rpx 0 24rpx;
			overflow: hidden;
			background: linear-gradient(180deg, #FBA457 0%, #FE7040 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			color: #FFFFFF;
			box-sizing: border-box;
			position: relative;
		
			.banner_bg {
				width: 414rpx;
				height: 312rpx;
				position: absolute !important;
				right: 0;
				top: 0;
			}
			.banner_bg_watch {
				width: 264rpx;
				height: 307rpx;
				position: absolute !important;
				right: 0;
				top: 0;
			}
			.status_text {
				padding-left: 28rpx;
				line-height: 60rpx;
				font-weight: 600;
				font-size: 48rpx;
				position: relative;
		
				&::after {
					content: "";
					width: 8rpx;
					height: 40rpx;
					background: #FFFFFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		
			.status_desc {
				width: 264rpx;
				padding-top: 20rpx;
				padding-bottom: 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		
			.status_btnbox{
				@include u-flex(row, center, flex-start);
			}
		
			.binding_btn {
				background: #FFFFFF;
				color: #FF7700;
				margin-right: 16rpx !important;
			}
		}
		.status_btn {
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			@include u-flex(row, center, center);
			display: inline-flex;
			font-weight: 500;
			font-size: 26rpx;
			border: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			margin: 0;
			&::after {
				border: none;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.demonstrate_btn {
			image {
				width: 48rpx !important;
				height: 48rpx !important;
			}
		}
		.swiper-item {
			padding: 0 12rpx;
			box-sizing: border-box;
			height: 350rpx;
			@include u-flex(row, center, flex-start);
		}
		.bindbox{
			&-banner{
				width: 100%;
				min-width: 624rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				@include u-flex(column, inherit, center);
				background: linear-gradient( 180deg, #FBA457 0%, #FE7040 100%);
				box-shadow: 0rpx 0rpx 14rpx 6rpx rgba(236,115,69,0.2);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			&-head {
				width: 100%;
				@include u-flex(row, center, flex-start);
			}
			&-img {
				flex-shrink: 0;
				width: 88rpx;
				height: 88rpx;
				padding: 8rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				background: #FEF2E0;
				border-radius: 50%;
			}
			&-headr {
				flex: 1;
				@include u-flex(row, center, space-between);
				overflow: hidden;
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
			&-title {
				font-weight: 600;
				font-size: 36rpx;
				line-height: 60rpx;
			}
			&-info {
				width: 100%;
				margin-top: 46rpx;
				@include u-flex(row, center, space-between);
				.question_mark_icon {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
			&-info-l {
				flex: 1;
				@include u-flex(row, center, flex-start);
			}
			&-info-desc {
				margin-top: 18rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				@include u-flex(row, center, center);
			}
			&-info-name {
				text-align: center;
				padding-right: 30rpx;
				border-right: 2rpx solid rgba(255,255,255,0.2);
			}
			&-info-status {
				padding-left: 30rpx;
				text-align: center;
			}
			&-info-r {
				width: 192rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FF7700;
				line-height: 64rpx;
				text-align: center;
				@include u-flex(row, center, center);
				image {
					height: 32rpx;
					width: 32rpx;
				}
			}
		}
		
		.add-device {
			width: 308rpx;
			height: 308rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 8rpx rgba(236,115,69,0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			@include u-flex(column, center, center);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #757575;
			.add-device-icon {
				width: 144rpx;
				height: 144rpx;
				margin-bottom: 16rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 4rpx dashed #FF7700;
				@include u-flex(column, center, center);
				image {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
		.health-risks {
			margin-top: 20rpx;
			padding: 4rpx 16rpx 16rpx 16rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #FFF1ED 0%, #FFFFFF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 2 2;
		
			&-title {
				padding: 20rpx 12rpx;
				@include u-flex(row, center, space-between);
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
			}
		
			&-titlel {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
		
				text {
					color: #FF7700;
				}
			}
		
			&-titler {
				@include u-flex(row, center, flex-start);
		
				image {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
			}
		
			&-msgnum {
				min-width: 46rpx;
				height: 28rpx;
				padding: 0 12rpx;
				line-height: 28rpx;
				box-sizing: border-box;
				background: linear-gradient(136deg, #EE7D4E 0%, #E86235 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				margin: 0 8rpx;
				flex-shrink: 0;
				text-align: center;
			}
		
			&-msg {
				padding: 20rpx 16rpx 0 16rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				color: #333333;
				font-weight: 400;
				font-size: 26rpx;
			}
		
			&-msgitem {
				margin-bottom: 20rpx;
				@include u-flex(row, center, space-between);
			}
		
			&-msgtxt {
				line-height: 52rpx;
				padding-left: 26rpx;
				position: relative;
		
				&::before {
					content: "";
					width: 8rpx;
					height: 8rpx;
					background: rgba(255, 119, 0, 0.5);
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		
			&-msgbtn {
				min-width: 108rpx;
				height: 48rpx;
				padding: 0 24rpx;
				margin-left: 50rpx;
				box-sizing: border-box;
				line-height: 48rpx;
				background: #FCF0E7;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				flex-shrink: 0;
				font-weight: 500;
				font-size: 20rpx;
				color: #FF7700;
			}
		}
		
		.navbox {
			@include u-flex(row, center, flex-start);
			// gap: 16rpx;
			margin-top: 20rpx;
		
			.tongue-diagnosis {
				flex: 1;
				height: 160rpx;
				margin-right: 16rpx;
				background: linear-gradient(180deg, #FBE2B0 0%, #FFCA80 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #D36208;
				padding: 0 24rpx;
				@include u-flex(row, center, space-between);
		
				image {
					width: 97rpx;
					height: 96rpx;
				}
		
				&-title {
					font-weight: 600;
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
			}
		
			.health-report {
				flex: 1;
				height: 160rpx;
				padding: 0 24rpx;
				background: linear-gradient(180deg, #D6E3FF 0%, #95AFFF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #455FAD;
				@include u-flex(row, center, space-between);
		
				image {
					width: 99rpx;
					height: 105rpx;
				}
		
				&-title {
					font-weight: 600;
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		
		.box-title {
			height: 80rpx;
			margin-top: 20rpx;
			line-height: 80rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
			@include u-flex(row, center, space-between);
		
			&-right {
				flex-shrink: 0;
			}
		
			.arrow_right_icon {
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
				@include u-flex(row, center, flex-start);
		
				image {
					height: 48rpx;
					width: 48rpx;
				}
			}
		
			&-rightedit {
				min-width: 192rpx;
				height: 64rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #757575;
				@include u-flex(row, center, center);
		
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
			}
		}
		
		.health-monitoring {
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			// gap: 16rpx;
			margin-bottom: -16rpx;
			margin-right: -16rpx;
			&-item {
				width: 343rpx;
				min-height: 264rpx;
				margin: 0 16rpx 16rpx 0;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 24rpx 34rpx 24rpx 24rpx;
				box-sizing: border-box;
			}
		
			&-maintitle {
				margin-bottom: 4rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		
			&-title {
				@include u-flex(row, center, space-between);
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
		
				image {
					width: 72rpx;
					height: 72rpx;
					flex-shrink: 0;
				}
			}
		
			.resnum {
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 64rpx;
			}
		
			&-res {
				height: 78rpx;
				margin: 20rpx 0 6rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 48rpx;
				color: #333333;
			}
		
			&-time {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
	
</style>