179crm_user_app/pages_echarts/bloodPressureDetail.vue

<template>
	<view class="container">
		<view class="datebox">
			<picker mode="date" fields="day" :value="date" :start="startDate" :end="endDate" @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" :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">{{sbp}}</text>
					<text>mmHg</text>
				</view>
			</view>
			<view class="scale">
				<simpleScale ref="simpleSBPScale" :minVal="0" :maxVal="300" :int="true" :single="10" :h="h" :active="sbp"  :style="style"
					@value="getSBPScroll" />
			</view> 
			<view class="datebox-detail-header flex-bt" style="margin-top: 48rpx;">
				<view>舒张压</view>
				<view class="datebox-detail-header-right">
					<text class="num">{{dbp}}</text>
					<text>mmHg</text>
				</view>
			</view>
			<view class="scale">
				<simpleScale ref="simpleDBPScale" :minVal="0" :maxVal="300" :int="true" :single="10" :h="h" :active="dbp" :style="style"
					@value="getDBPScroll" />
			</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 { bpInfo } 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'),
				// 收缩压
				sbp: "0",
				// 舒张压
				dbp: "0",
				loading: false,
				style: {
					line: '#ccc',
					bginner: '#fbfbfb',
					bgoutside: '#ffffff',
					fontColor: '#333',
					fontSize: 16
				},
				h: uni.upx2px(88)
			}
		},
		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()
			}
			
			// const param = JSON.parse(option.param)
			// this.date = param.createTime && param.createTime.split(' ')[0]
			// this.time = param.createTime && param.createTime.substring(11, 16)
			// this.active = String(param.num || 0)
			this.$nextTick(()=>{
				this.$refs.simpleSBPScale.init()
				this.$refs.simpleDBPScale.init()
			})
		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
				this.getList()
			},
			bindTimeChange(e) {
				this.time = e.detail.value
				this.getList()
			},
			getSBPScroll(e) {
				this.sbp = e
			},
			getDBPScroll(e) {
				this.dbp = e
			},
			getDataById(){
				getDataById({id:this.id}).then(
					res => {
						if(res.code==200){
							this.date=res.data.measurementDate
							this.time=res.data.measurementTime
							this.sbp= res.data.value1?String(res.data.value1):'0'
							this.dbp= res.data.value1?String(res.data.value2):'0'
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit(){
				var data={
					userId:this.userId,
					"measurementType": 3, //测量类型（0-腰围，1-臀围，2-血糖，3-血压，4-尿酸 5-BMI）
					"value1": this.sbp, //数值1（测量值1 测量值只有一个时默认填写/身高cm/舒张压）
					"value2": this.dbp,
					"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('refreshBloodPressureList');
								 // uni.$emit('refreshBloodPressure');
								 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('refreshBloodPressureList');
								// uni.$emit('refreshBloodPressure');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			}
		}
	}
</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>