siyu_app/pages_watch/index/equipment/index.vue

<template>
	<view>
		<uni-nav-bar fixed :border="false" backgroundColor="#fff" title="设备管理" :statusBar="true" left-icon="left"
			@clickLeft="$navBack()" @clickRight="refresh" rightWidth="140rpx">
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:right>
				<button class="nav-bar-refresh" :loading="refreshLoading" :disabled="refreshLoading">刷新</button>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<view class="container">
			<!-- #ifndef APP-PLUS || H5 -->
			<view class="refresh-box">
				<button class="nav-bar-refresh" :loading="refreshLoading" :disabled="refreshLoading" @click="refresh">刷新</button>
			</view>
			<!-- #endif -->
			<view class="box">
				<view class="box-item" @click="navigatorUrl()">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management1_icon.png"></image>
						<text>智慧医生</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('运动轨迹')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/sports_trajectory_icon.png" style="border-radius: 10rpx;"></image>
						<text>运动轨迹</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('久坐提醒')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management2_icon.png"></image>
						<text>久坐提醒</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management3_icon.png"></image>
						<text>跌倒检测</text>
					</view>
					<view class="box-itemr">
						<mySwitch :activeValue="1" :inactiveValue="0" :value="info.fallcheck"
							@change="onChange($event,'fallcheck')" />
					</view>
				</view>
				<view class="box-item">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management4_icon.png"></image>
						<text>心脏健康</text>
					</view>
					<view class="box-itemr">
						<mySwitch :activeValue="1" :inactiveValue="0" :value="info.heartHealth"
							@change="onChange($event,'heartHealth')" />
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('心率指导')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management5_icon.png"></image>
						<text>心率指导</text>
					</view>
					<view class="box-itemr">
						<text>{{info.hralarm && info.hralarm.open ? `${info.hralarm.low}-${info.hralarm.high}`: '关闭'}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('血氧预警')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management6_icon.png"></image>
						<text>血氧预警</text>
					</view>
					<view class="box-itemr">
						<text>{{info.spo2alarm&&info.spo2alarm.open ? info.spo2alarm.low + '%' : '关闭'}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-item" @click="navigatorUrl('闹钟&日程')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management7_icon.png"></image>
						<text>闹钟&日程</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('省电设置')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management8_icon.png"></image>
						<text>省电设置</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('常用联系人')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management9_icon.png"></image>
						<text>常用联系人</text>
					</view>
					<view class="box-itemr">
						<text>添加好友/联系人</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('手表通知')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management10_icon.png"></image>
						<text>手表通知</text>
					</view>
					<view class="box-itemr">
						<view class="alarmNum" v-show="alarmNum">{{alarmNum}}</view>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('日期与时间')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management11_icon.png"></image>
						<text>日期与时间</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('翻腕亮屏')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management12_icon.png"></image>
						<text>翻腕亮屏</text>
					</view>
					<view class="box-itemr">
						<text>{{info.lcdgesture&&info.lcdgesture.open ? `${$formatHour(info.lcdgesture.start_hour)}-${$formatHour(info.lcdgesture.end_hour)}`: '关闭'}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('单位设置')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management13_icon.png"></image>
						<text>单位设置</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-item" @click="navigatorUrl('新手指导')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management14_icon.png"></image>
						<text>新手指导</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('手表模式')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management15_icon.png"></image>
						<text>手表模式</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl('设备信息')">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management16_icon.png"></image>
						<text>设备信息</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="navigatorUrl()">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management17_icon.png"></image>
						<text>固件升级</text>
					</view>
					<view class="box-itemr">
						<text>{{info.version}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="box-item" @click="factorySettings">
					<view class="box-iteml">
						<image class="box-item-icon" src="@/static/images/pages_watch/icons/equipment_management18_icon.png"></image>
						<text>恢复出厂</text>
					</view>
					<view class="box-itemr">
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<!-- 解除绑定 -->
			<button class="bind-btn" @click="handleRemoveDevice">解除绑定</button>
		</view>
	</view>
</template>

<script>
import mySwitch from "@/pages_watch/components/mySwitch/mySwitch.vue";
import { editMyfamily } from "@/api/pages_watch/user.js";
import { queryAlarmPageByStatus } from "@/api/pages_watch/message.js"
import {
		getSetUpInfoByDeviceId,
		refresh,
		fallcheck,
		autoaf,
		resetFactory,
		removeDevice
	} from "@/api/pages_watch/index.js";

	export default {
		components: {
			mySwitch
		},
		data() {
			return {
				refreshLoading: false,
				deviceId: uni.getStorageSync("deviceId") || "",
				defaultInfo: {
					fallcheck: 0,
					heartHealth: 0,
					hralarm: {
						open: false,
						low: "",
						high: ""
					},
					spo2alarm: {
						open: false,
						low: ""
					},
					lcdgesture: {
						open: false,
						end_hour: "",
						start_hour: ""
					},
					version: ""
				},
				info: {},
				alarmNum: 0, // 手表通知未读消息
				selectUser: '0'
			}
		},
		onLoad(option) {
			this.selectUser = option.selectUser
			this.info = this.defaultInfo
		},
		onShow() {
			this.refreshLoading = false
			this.deviceId = uni.getStorageSync("deviceId") || ""
			if (this.deviceId) {
				this.getSetUpInfo()
				this.getAlarmNum()
			}
		},
		methods: {
			getSetUpInfo() {
				getSetUpInfoByDeviceId({
					deviceId: this.deviceId
				}).then(res => {
					if (res.code == 200) {
						this.info = res.data || this.defaultInfo
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 获取手表通知未读消息
			getAlarmNum() {
				const param = {
					deviceId: uni.getStorageSync("deviceId") || '',
					pageSize: 10,
					pageNum: 1,
					appStatus: 0
				}
				queryAlarmPageByStatus(param).then(res => {
					const num = res.total || 0
					this.alarmNum = num > 99 ? '99+' : num
				})
			},
			refresh() {
				if (this.$isLogin()) {
					this.refreshLoading = true
					refresh({deviceId: this.deviceId}).then(res => {
						this.refreshLoading = false
						if (res.code == 200) {
							uni.showToast({
								title: res.data ? '刷新成功' : '刷新失败',
								icon: "none",
								position: 'top',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								position: 'top',
								duration: 2000
							})
						}
					}).catch(()=>{
						this.refreshLoading = false
					})
				} else {
					this.$showLoginPage()
				}
			},
			onChange(e, type) {
				this.info[type] = e
				const options = {
					// 跌倒检测开关
					"fallcheck": () => fallcheck({
						deviceId: this.deviceId,
						flag: e == 1 ? true : false
					}),
					// 心脏健康开关
					"heartHealth": () => autoaf({
						deviceId: this.deviceId,
						flag: e == 1 ? true : false
					})
				}
				const option = options[type];
				if (option) {
					option().then(res => {
						if (res.code != 200) {
							this.info[type] = e == 1 ? false : true
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}).catch((err) => {
						this.info[type] = e == 1 ? false : true
						uni.showToast({
							title: err,
							icon: "none"
						})
					})
				}
			},
			// 恢复出厂
			factorySettings() {
				uni.showModal({
					title: '恢复出厂',
					content: '恢复出厂将会清除手表的数据，以及还原手表设置，是否继续?',
					success: (res)=> {
						if (res.confirm) {
							uni.showLoading({
								title: ""
							})
							resetFactory({deviceId: this.deviceId}).then(res=>{
								uni.hideLoading();
								if(res.code == 200) {
									uni.showToast({
										title: '操作成功',
										icon: 'none',
										position: 'top',
										duration: 2000
									})
									this.getSetUpInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(()=>{
								uni.hideLoading();
							})
						}
					}
				});
			},
			navigatorUrl(txt) {
				const title = txt || ""
				if(!txt) {
					uni.showToast({
						title: '功能开发中...',
						icon: 'none',
						position: 'top',
						duration: 2000
					})
					return
				}
				const that = this
				if (txt == '手表通知') {
					uni.navigateTo({
						url: "/pages_watch/message/detail?title=" + title
					})
				} else if (txt == '常用联系人') {
					uni.navigateTo({
						url: "/pages_watch/index/equipment/emergencyContact"
					})
				} else if (txt == '新手指导') {
					uni.navigateTo({
						url: "/pages_watch/index/equipment/instructions"
					})
				} else if (txt == '设备信息') {
					uni.navigateTo({
						url: "/pages_watch/index/equipment/deviceInfo"
					})
				} else if(txt=='闹钟&日程') {
					uni.navigateTo({
						url: "/pages_watch/index/equipment/clockalarm?title=闹钟"
					})
				} else if(txt == '运动轨迹'){
					uni.navigateTo({
						url: "/pages_watch/index/equipment/sportsTrajectory?selectUser="+this.selectUser
					})
				}else {
					uni.navigateTo({
						url: "/pages_watch/index/equipment/set?title=" + title
					})
				}
			},
			// 解除绑定
			handleRemoveDevice() {
				uni.showModal({
					title: '',
					content: '确定解除绑定吗？',
					success: (res)=> {
						if (res.confirm) {
							this.removeDevice()
						}
					}
				});
			},
			removeDevice() {
				uni.showLoading({
					title: ""
				})
				// const myDeviceId = uni.getStorageSync("userWatchInfo") && JSON.parse(uni.getStorageSync("userWatchInfo")).deviceId
				const isFamily = this.selectUser != 0
				if(!isFamily) {
					removeDevice({deviceId: this.deviceId}).then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							uni.switchTab({url: '/pages/index/index' });
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}).catch(()=>{
						uni.hideLoading();
					})
				} else {
					let otherDevice =JSON.parse(uni.getStorageSync("userWatchInfo")).otherDevice || []
					otherDevice = JSON.parse(otherDevice)
					otherDevice = otherDevice.map(item=>({
						...item,
						deviceId: item.deviceId ? item.deviceId.split(',') : []
					}))
					otherDevice.forEach(el=>{
						if(el.deviceId && el.deviceId.includes(this.deviceId)) {
							el.deviceId.splice(el.deviceId.indexOf,1)
						}
					})
					const param = otherDevice.map(item=>({
						...item,
						deviceId: item.deviceId ? item.deviceId.join(',') : ""
					}))
					editMyfamily({otherDevice: JSON.stringify(param)}).then(res=>{
						uni.hideLoading();
						this.btnLoading = false
						if(res.code == 200) {
							uni.switchTab({url: '/pages/index/index' });
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					}).catch(err => {
						this.btnLoading = false
						uni.hideLoading();
						console.log('err', err);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refresh-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 24rpx;
	}
	.nav-bar-refresh {
		display: inline-block;
		min-width: 136rpx;
		height: 52rpx;
		margin: 0;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #FF7700 !important;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		line-height: 52rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF !important;
		&::after {
			border: none;
		}
	}
	 .alarmNum{
		 min-width: 48rpx;
		 height: 48rpx;
		 padding: 0 6rpx;
		 box-sizing: border-box;
		 background: linear-gradient( 180deg, #FA432D 0%, #FD7148 100%);
		 border-radius: 28rpx 28rpx 28rpx 28rpx;
		 border: 3rpx solid #FFFFFF;
		 text-align: center;
		 line-height: 48rpx;
		 font-weight: 500;
		 color: #FFFFFF;
	 }
	.container {
		padding: 24rpx 24rpx 34rpx 24rpx;

		.box {
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			&-item {
				height: 108rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			&-iteml {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			&-itemr {
				font-size: 28rpx;
				color: #999999;
				display: inline-flex;
				align-items: center;
				justify-content: flex-start;
			}

			.arrow_black {
				flex-shrink: 0;
				height: 48rpx;
				width: 48rpx;
			}

			&-item-icon {
				height: 56rpx;
				width: 56rpx;
				margin-right: 24rpx;
			}
		}

		.bind-btn {
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 98rpx;
			color: #FF7700;

			&::after {
				border: none;
			}
		}
	}
</style>