179crm_user_app/pages_echarts/waistLineDetail.vue

<template>
	<view class="container">
		<view class="datebox">
			<picker mode="date" :value="date" :start="startDate"  @change="bindDateChange">
				<view class="datebox-item border-line flex-bt">
					<view>日期</view>
					<view class="datebox-item-right">
						<text :class="date ? '':'default'">{{date ? date : "请选择日期"}}</text>
						<image src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
			</picker>
			<picker mode="time" fields="second" :value="time" @change="bindTimeChange" >
				<view class="datebox-item flex-bt">
					<view>测量时间</view>
					<view class="datebox-item-right">
						<text :class="time ? '':'default'">{{time ? time : "请选择测量时间"}}</text>
						<image src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
			</picker>
		</view>
		<view class="datebox-detail">
			<view class="datebox-detail-header flex-bt">
				<view>腰围</view>
				<view class="datebox-detail-header-right">
					<text class="num">{{active}}</text>
					<text>CM</text>
				</view>
			</view>
			<view class="scale">
				<simpleScale ref="simpleScale" :minVal="0" :maxVal="200" :int="false" :single="10" :h="h" :active="active" :style="style"
					@value="getScroll" />
			</view>
		</view>
		<view class="h40"></view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">记录</view>
		</view>
	</view>
</template>

<script>
import {addData,getDataById,getLatest,updateData} from '@/api/healthUser.js'
	import simpleScale from "@/pages_echarts/components/simpleScale/simpleScale.vue"
	// import { bgInfo } from "@/api/pages_watch/healthMonitoring.js"
	export default {
		components: {
			simpleScale
		},
		data() {
			return {
				// 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
				startDate:this.utils.timeFormat(new Date()) ,
				// 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
				endDate: this.utils.timeFormat(new Date()),
				date: this.utils.timeFormat(new Date(),'yyyy-mm-dd'),
				time: this.utils.timeFormat(new Date(),'hh:MM:ss'),
				active: "0",
				loading: false,
				style: {
					line: '#ccc',
					bginner: '#fbfbfb',
					bgoutside: '#ffffff',
					fontColor: '#333',
					fontSize: 16
				},
				h: uni.upx2px(88),
				form:null
			}
		},
		onLoad(options) {
			console.log(options)
			this.type=options.type;
			this.userId=options.userId
			if(this.type=='edit'){
				this.id=options.id;
				this.getDataById();
				// this.listByIndicator()
			}
			this.$nextTick(()=>{
				this.$refs.simpleScale.init()
			})
		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
				// this.getList()
			},
			bindTimeChange(e) {
				// console.log(e,'e')
				this.time = e.detail.value+':00'
				// this.getList()
			},
			getScroll(e) {
				// console.log(e,'e')
				this.active = e
			},
			getDataById(){
				getDataById({id:this.id}).then(
					res => {
						if(res.code==200){
							this.date=res.data.measurementDate
							this.time=res.data.measurementTime
							this.active= String(res.data.value1)
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit(){
				var data={
					userId:this.userId,
					"measurementType": 0, //测量类型（0-腰围，1-臀围，2-血糖，3-血压，4-尿酸 5-BMI）
					"value1": this.active, //数值1（测量值1 测量值只有一个时默认填写/身高cm/舒张压）
					"measurementDate": this.date, //测量日期 yyyy-MM-dd
					"measurementTime":this.time//测量时间 HH:mm:ss
				}
				if(this.type=="add"){
					this.addData(data)
				}
				else if(this.type=="edit"){
					data.id=this.id
					this.updateData(data)
				}
			},
			addData(data){
				addData(data).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								uni.$emit('refreshWaistLineList');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			updateData(data){
				updateData(data).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "更新成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshWaistLineList');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getLatest(){
				var data={
					userId:this.userId,
					measurementType:0
				}
				getLatest(data).then(
					res => {
						if(res.code==200){
							if(res.data==null){
								this.type='add'
							}else{
								this.type='edit'
								this.form = res.data;
							}
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
		
			// 查询数据
			getList() {
				this.loading = true
				const param = {
					startTime: this.date.replace(/-/g, '/') +" " +this.time + ":00",
					endTime: this.date.replace(/-/g, '/') +" " + this.time + ":59",
					deviceId: uni.getStorageSync("deviceId"),
				}
				bgInfo(param).then(res => {
					this.loading = false
					if (res.code == 200) {
						if(res.data && res.data.length > 0) {
							this.date = res.data[0].createTime && res.data[0].createTime.split(' ')[0]
							this.time = res.data[0].createTime && res.data[0].createTime.substring(11, 16)
							this.active = String(res.data[0].bloodGlucose || 0)
						} else {
							this.active = "0"
						}
						
					} else {
						this.active = "0"
					}
					this.$nextTick(()=>{
						this.$refs.simpleScale.init()
					})
				}).catch(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.flex-bt {
		@include u-flex(row, center, space-between);
	}
	.default {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.container {
		padding: 20rpx 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	.btn-box {
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.sub-btn {
			width: 388rpx;
			height: 72rpx;
			line-height: 72upx;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #FF5039;
			border-radius: 44upx;
			margin-bottom: 40upx;
		}
	}
	.datebox {
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		&-item {
			height: 120rpx;
			&-right {
				font-weight: 400;
				font-size: 32rpx;
				@include u-flex(row, center, flex-start);
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.datebox-detail {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 40rpx 32rpx;
		&-header-right {
			flex-shrink: 0;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			.num {
				font-size: 48rpx;
				color: #333333;
				margin-right: 14rpx;
			}
		}
	}
	.scale {
		height: 176rpx;
		margin-top: 36rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(170,170,170,0.1);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #ECECEC;
		// width: 200rpx;
		// height: 600rpx;
	}
</style>