siyu_app/pages_watch/index/targetInfo.vue

<template>
	<view>
		<uni-nav-bar fixed :border="false" left-icon="left" title="设备信息" :statusBar="true" @clickLeft="$navBack()" @clickRight="updateUser">
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:right>
				<view class="add">保存</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<view class="container">
			<view class="myinfo">
				<view class="myinfo-item">
					<view>昵称</view>
					<view class="myinfo-itemr" @click="openPop('nickName')">
						<text :style="{color: user.nickName ?'#222':'#999'}">{{user.nickName}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="myinfo-item">
					<view>性别</view>
					<template v-if="isFamily">
						<picker @change="bindPickerChange($event,'sex')" :value="sexIndex" :range="sexArray">
							<view class="myinfo-itemr">
								<text :style="{color: user.sex == 1 || user.sex == 2 ?'#222':'#999'}">
									{{user.sex == 1 ? '男' : user.sex == 2 ? '女' :'未知'}}
								</text>
								<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
									mode="aspectFill"></image>
							</view>
						</picker>
					</template>
					<view v-else class="myinfo-itemr">
						<text :style="{color: user.sex == 1 || user.sex == 2 ?'#222':'#999'}">
							{{user.sex == 1 ? '男' : user.sex == 2 ? '女' :'未知'}}
						</text>
					</view>
				</view>
				<view class="myinfo-item">
					<view>手机号</view>
					<template v-if="isFamily">
						<view class="myinfo-itemr" @click="openPop('phone')">
							<text :style="{color: user.phone ?'#222':'#999'}">{{user.phone || '请填写'}}</text>
							<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
								mode="aspectFill"></image>
						</view>
					</template>
					<view v-else class="myinfo-itemr">
						<text :style="{color: user.phone ?'#222':'#999'}">{{user.phone || ''}}</text>
					</view>
				</view>
				<view class="myinfo-item">
					<view>生日</view>
					<view>
						<picker :value="birthday" mode="date" fields="day" @change="birthdayChange">
							<view class="myinfo-itemr">
								<text :style="{color: user.birthday ?'#222':'#999'}">
									{{user.birthday ? user.birthday.substring(0,10) : '请选择'}}
								</text>
								<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
									mode="aspectFill"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="myinfo-item">
					<view>身高</view>
					<view class="myinfo-itemr" @click="openPop('height')">
						<text :style="{color: user.height ?'#222':'#999'}">{{user.height? user.height + 'cm' : '请填写'}}</text>
						<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="myinfo-item">
					<view>体重</view>
					<view class="myinfo-itemr" @click="openPop('weight')">
						<text :style="{color: user.weight ?'#222':'#999'}">{{user.weight? user.weight+'kg' : '请填写'}}</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="myinfo-title">目标</view>
			<view class="myinfo">
				<view class="myinfo-item">
					<view>步数</view>
					<picker @change="bindPickerChange($event,'targetStep')" :value="stepIndex" :range="stepArray">
						<view class="myinfo-itemr">
							<text :style="{color: user.targetStep ? '#222':'#999'}">
								{{user.targetStep ? user.targetStep + '步' :'请选择'}}
							</text>
							<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
								mode="aspectFill"></image>
						</view>
					</picker>
				</view>
				<view class="myinfo-item">
					<view>卡路里</view>
					<picker @change="bindPickerChange($event,'targetCalorie')" :value="kcalIndex" :range="kcalArray">
						<view class="myinfo-itemr">
							<text :style="{color: user.targetCalorie ? '#222':'#999'}">
								{{user.targetCalorie ? user.targetCalorie + '千卡' :'请选择'}}
							</text>
							<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
								mode="aspectFill"></image>
						</view>
					</picker>
				</view>
				<view class="myinfo-item">
					<view>活动小时</view>
					<picker @change="bindPickerChange($event,'targetActivity')" :value="activityIndex" :range="hourArray">
						<view class="myinfo-itemr">
							<text :style="{color: user.targetActivity&& user.targetActivity != 0 ? '#222':'#999'}">
								{{user.targetActivity && user.targetActivity != 0 ? user.targetActivity + '小时' :'请选择'}}
							</text>
							<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
								mode="aspectFill"></image>
						</view>
					</picker>
				</view>
				<view class="myinfo-item">
					<view>锻炼时长</view>
					<picker mode="multiSelector" @change="bindPickerChange($event,'targetSport')" :value="sportIndex" :range="timeArray">
						<view class="myinfo-itemr">
							<text :style="{color: user.targetSport&& user.targetSport != 0 ? '#222':'#999'}">
								{{user.targetSport && user.targetSport != 0 ? timeArray[0][sportIndex[0]] + timeArray[1][sportIndex[1]] :'请选择'}}
							</text>
							<image class="arrow_black" src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"
								mode="aspectFill"></image>
						</view>
					</picker>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="popupbox">
					<view class="popupbox-head">
						<view class="popupbox-cancel" @tap="close">取消</view>
						<text class="popupbox-head-title">{{poptitle}}</text>
						<view class="popupbox-confirm" @tap="confirm">确定</view>
					</view>
					<view class="popupbox-body">
						<view class="inpubox" v-show="poptitle">
							<uni-easyinput :type="type" v-model="inputVal" :trim="true" :inputBorder="false" :primaryColor="'#c0c4cc'"
								:placeholderStyle="placeholderStyle" :placeholder="placeholder" :styles="inpuStyle" maxlength="11" />
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- #ifndef APP-PLUS || H5 -->
			<view class="footer-add" @click="handleAdd">保存</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import simpleScale from "@/pages_watch/components/simpleScale/simpleScale.vue"
	import permision from "@/utils/permission.js"; 
	import { editUser,editFamilyUser,getWatchUserInfo } from "@/api/pages_watch/user.js";
	import { getInfoByDeviceIds } from "@/api/pages_watch/index.js";
	
	export default {
		components: {
			simpleScale,
		},
		data() {
			return {
				defaultName: '',
				selectUserInfo: {},
				isFamily: false,
				btnLoading: false,
				user: {
					nickName: "",
					sex: undefined,
					phone: "",
					birthday: null,
					targetStep: '',
					targetCalorie: '',
					targetSport:'',
					targetActivity: ''
				},
				birthday: "",
				sexArray: ['男', '女'],
				sexIndex: 0,
				poptitle: "",
				placeholder: "",
				inputVal: "",
				type: "text",
				placeholderStyle: "{font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #CCCCCC;}",
				inpuStyle: {
					fontFamily: "PingFang SC, PingFang SC",
					fontWeight: 400,
					fontSize: "28rpx",
					color: "#333"
				},
				stepIndex: 0,
				kcalIndex: 0,
				sportIndex: [0,0],
				activityIndex: 0,
				hourArray: ['1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时', '11小时', '12小时', '13小时', '14小时', '15小时', '16小时', '17小时', '18小时', '19小时', '20小时', '21小时', '22小时', '23小时', '24小时'],
				timeArray:[['0小时','1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时', '11小时', '12小时', '13小时', '14小时', '15小时', '16小时', '17小时', '18小时', '19小时', '20小时', '21小时', '22小时', '23小时', '24小时'],['00分钟','30分钟']]
			}
		},
		computed: {
			stepArray() {
				const start = 3000;
				const end = 30000;
				const step = 1000;
				const array = [...Array(Math.ceil((end - start) / step) + 1).keys()].map(i => start + i * step);
				return array
			},
			kcalArray() {
				const start = 200;
				const end = 1000;
				const step = 50;
				const array = [...Array(Math.ceil((end - start) / step) + 1).keys()].map(i => start + i * step);
				return array
			}
		},
		onLoad(option) {
			this.isFamily = option.selectUser != '0'  
			this.selectUserInfo = option.selectUserInfo ? JSON.parse(option.selectUserInfo) : {}
			if (this.$isLogin()) {
				const user = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')): {}
				this.defaultName = user.nickName
				this.getUserInfo();
			} else {
				this.user = {
					nickName: "",
					sex: undefined,
					phone: "",
					birthday: null,
					targetStep: '',
					targetCalorie: '',
					targetSport:'',
					targetActivity: ''
				}
				this.$showLoginPage()
			}
		},
		methods: {
			getStepScroll(e) {
				this.user.targetStep = e
			},
			getUserInfo() {
				const deviceId = uni.getStorageSync('deviceId') || ''
				const param = {
					deviceId: deviceId,
					isFamily: this.isFamily
				}
				this.user.nickName = param.isFamily ? this.selectUserInfo.name || '' : this.user.nickName || this.defaultName
				getWatchUserInfo(param).then(res => {
					if (res.code == 200) {
						this.user = res.user ? res.user : {
							nickName: "",
							sex: undefined,
							phone: "",
							birthday: null,
							targetStep: '',
							targetCalorie: '',
							targetSport:'',
							targetActivity: ''
						},
						this.user.nickName = param.isFamily ? this.selectUserInfo.name || '' : this.user.nickName || this.defaultName
						this.sexIndex = this.user.sex == 2 ? 1 : 0
						this.birthday = this.user.birthday ? this.user.birthday.substring(0, 10) : null
						this.stepIndex = this.stepArray.findIndex(item=>item == this.user.targetStep) == -1 ? 0 : this.stepArray.findIndex(item=>item == this.user.targetStep)
						this.kcalIndex = this.kcalArray.findIndex(item=>item == this.user.targetCalorie) == -1 ? 0 : this.kcalArray.findIndex(item=>item == this.user.targetCalorie)
						this.activityIndex = this.hourArray.findIndex(item=>item == this.user.targetActivity+'小时') == -1 ? 0 : this.hourArray.findIndex(item=>item == this.user.targetActivity+'小时')
						if(this.user.targetSport) {
							const hour = Math.floor(Number(this.user.targetSport || 0) / 60);
							const minute = Number(this.user.targetSport || 0) % 60 == 0 ? '00' : Number(this.user.targetSport || 0) % 60;
							const one = this.timeArray[0].findIndex(item=>item == hour+'小时') == -1 ? 0 : this.timeArray[0].findIndex(item=>item == hour+'小时')
							const two = this.timeArray[1].findIndex(item=>item == minute+'分钟') == -1 ? 0 : this.timeArray[1].findIndex(item=>item == minute+'分钟')
							this.sportIndex = [one,two]
						}else {
							this.sportIndex = [0,1]
						}
					}
				})
			},
			openPop(type) {
				if(type=="nickName") {
					this.poptitle = '修改昵称'
					this.placeholder = '请输入昵称'
					this.type = 'text'
					this.inputVal = this.user.nickName
				} else if (type=="phone") {
					this.poptitle = '修改手机号'
					this.placeholder = '请输入手机号'
					this.type = 'number'
					this.inputVal = this.user.phone
				} else if (type=="height") {
					this.poptitle = '身高(cm)'
					this.placeholder = '请输入身高'
					this.type = 'number'
					this.inputVal = this.user.height
				} else if (type=="weight") {
					this.poptitle = '体重(kg)'
					this.placeholder = '请输入体重'
					this.type = 'number'
					this.inputVal = this.user.weight
				}
				this.$refs.popup.open()
			},
			confirm() {
				if(this.poptitle=="修改昵称") {
					if (!this.inputVal.trim()) {
						uni.showToast({
							title: '请输入昵称',
							icon: "none"
						})
						return
					}
					this.user.nickName = this.inputVal
				} else if (this.poptitle=="修改手机号") {
					const reg = /^1[3-9]\d{9}$/;
					if (!reg.test(this.inputVal)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
						return
					}
					this.user.phone = this.inputVal
				} else if (this.poptitle=="身高(cm)") {
					const reg = /^[1-9]\d*$/
					if(!reg.test(this.inputVal)) {
						uni.showToast({
							title: "请输入正确的身高",
							icon: "none"
						})
						return
					}
					this.user.height = this.inputVal
				} else if (this.poptitle=="体重(kg)") {
					// 判断字符串为数字且保留一位小数
					const reg = /^\d+(\.\d{1})?$/
					if(!reg.test(this.inputVal) || this.inputVal == 0) {
						uni.showToast({
							title: "请输入正确的体重",
							icon: "none"
						})
						return
					}
					this.user.weight = this.inputVal
				}
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			},
			bindPickerChange(e,type) {
				if(type == 'sex') {
					this.sexIndex = e.detail.value
					this.user.sex = this.sexIndex == 1 ? 2: 1
				}else if(type == 'targetStep') {
					this.stepIndex = e.detail.value
					this.user.targetStep = this.stepArray[e.detail.value]
				}else if(type == 'targetCalorie') {
					this.kcalIndex = e.detail.value
					this.user.targetCalorie = this.kcalArray[e.detail.value]
				} else if(type=='targetSport') {
					this.sportIndex = e.detail.value
					const hour = this.timeArray[0][e.detail.value[0]].replace('小时','')
					const minute = this.timeArray[1][e.detail.value[1]].replace('分钟','')
									
					this.user.targetSport = hour * 60 + Number(minute)
				} else if(type=='targetActivity') {
					this.activityIndex = e.detail.value
					this.user.targetActivity = this.hourArray[e.detail.value].replace('小时','')
				}
			},
			// 生日
			birthdayChange(e) {
				this.birthday = e.detail.value
				this.user.birthday = this.birthday
			},
			// 修改
			updateUser() {
				if(this.isFamily) {
					const param = {
						nickName: this.user.nickName,
						deviceId: this.selectUserInfo.deviceId&&this.selectUserInfo.deviceId.length > 0? this.selectUserInfo.deviceId.join(','):'',
						sex: this.user.sex,
						phone: this.user.phone,
						birthday: this.user.birthday ? this.user.birthday.substring(0, 10) + ' 00:00:00' : "",
						targetStep: this.user.targetStep||0,
						targetCalorie: this.user.targetCalorie||0,
						targetSport: this.user.targetSport||0,
						targetActivity: this.user.targetActivity||0,
						height: this.user.height,
						weight: this.user.weight
					}
					editFamilyUser(param).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if(res.code == 200) {
							this.$navBack()
						}
					})
				} else {
					const param = {
						nickName: this.user.nickName,
						birthday: this.user.birthday ? this.user.birthday.substring(0, 10) + ' 00:00:00' : "",
						targetStep: this.user.targetStep||0,
						targetCalorie: this.user.targetCalorie||0,
						targetSport: this.user.targetSport||0,
						targetActivity: this.user.targetActivity||0,
						height: this.user.height,
						weight: this.user.weight
					}
					editUser(param).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						if(res.code == 200) {
							this.$navBack()
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.footer-add {
		width: 702rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF7700;
		line-height: 98rpx;
		text-align: center;
		margin-top: 24rpx 0;
	}
	.add {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		@include u-flex(row, center, flex-end);
		image {
			flex-shrink: 0;
			width: 48rpx;
			height:  48rpx;
			margin-right: 6rpx;
		}
	}
	.container {
		padding: 24rpx;
		.myinfo-title {
			margin-bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222;
		}
		.myinfo {
			margin-bottom: 24rpx;
			padding: 18rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #757575;
		
			.avatar {
				height: 96rpx;
				width: 96rpx;
			}
		
			&-item {
				height: 104rpx;
				@include u-flex(row, center, space-between);
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.arrow_black {
					height: 48rpx;
					width: 48rpx;
				}
			}
		
			&-itemr {
				@include u-flex(row, center, flex-start);
				font-weight: 500;
				font-size: 30rpx;
				line-height: 36rpx;
				position: relative;
			}
		
			.wx-head {
				position: absolute;
				top: 0;
				right: 0;
				background-color: transparent;
				width: 100%;
				height: 100%;
		
				&::after {
					border: none;
				}
			}
		}
		.popupbox {
			background-color: #f7f7f7;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			&-head {
				padding: 24rpx;
				@include u-flex(row, center, space-between);
				&-title {
					font-size: 30rpx;
				}
			} 
			&-cancel {
				color: #999;
			}
			&-confirm {
				color: #FF7700;
			}
			&-body {
				min-height: 100rpx;
				padding: 24px;
				box-sizing: border-box;
			}
			.inpubox {
				background-color: #fff;
			}
		}
	}
	
</style>