NDAid/pages/topic/selectsbp.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="">
		<navbar :title="$t('blood_pressure')" size="48" :backtext="$t('back')"   color="#fff"></navbar>
	</view>
	<view class="app_content">
		<view class='titlearea'>
			<text class='title_2'>{{$t('selectsbp_text1')}}</text>
			<text class='title_member'>{{$t('report_user')}}：{{selectuser.membername}}</text>
			<text class='title_desstr' decode='true'>{{$t('selectsbp_text2')}}</text>
			<text class='title_desstr' decode='true'>{{$t('selectsbp_text3')}}</text>
			<text class='title_desstr' decode='true'>{{$t('selectsbp_text4')}}</text>
		</view>
		<view class="agevalue">
			<view class="">
				{{$t('blood_pressure')}}:
				&nbsp;{{label}}&nbsp;
				<text class='title2'>{{label_text}}</text>
			</view>
			<!-- <uv-button type="primary" :plain="true" :text="$t('select')" @click="showselectage" :customStyle="selectbutton1" :customTextStyle="selectbutton3"></uv-button> -->
			<view class="showdiv" id="showdiv" :style="{height:style.canvasHeight}">
				<scroll-view style="width:100%;height: 100%;" 
				:scroll-x="true"  @scroll="scroll" :scroll-left="scroll_left" :show-scrollbar="false">
					<canvas :style="{width:style.canvasWidth,height:style.canvasHeight}" 
					canvas-id="canvas_ruler" id="canvas_ruler" :width="canvasWidth">
					</canvas>
				</scroll-view>
				<canvas :style="{width:style.screenWidth,height:style.canvasHeight}"
				canvas-id="canvas-cursor" id="canvas-cursor">
				</canvas>
			</view>
		</view>
		<view class="">
			<uv-picker ref="picker" :columns="columns" @change="change" keyName="value" :showToolbar="false"  fontSize="25px"></uv-picker>
		</view>
		<view class="donext_div">
			<uv-button type="primary" :text="$t('next_step')" @click="donext" :customStyle="selectbutton2" :customTextStyle="selectbutton3"></uv-button>
		</view>
	</view>
</template>

<script>
	import {subanswerbyuserid} from "/common/api/scale.js"
	import {tohome,tostemlistnext} from "/common/js/common.js"
	import {drawruler,getCanvasConfig,getcursorvalue,setcursorvalue,getscrollleft} from "@/common/js/slider_ruler.js"
	export default {
		data() {
			return {
				userinfo:{},
				selectuser:{},
				minhm:60,
				maxhm:210,
				value:110,
				label:"",
				label_text:"",
				scaleid:0,
				srid:0,
				sindex:0,
				answertype:0,
				stemid:6,
				columns_limit_list:[
					 {
						uplimit:119,
						dowlimit:60,
						viewstr:"110",
						sbpstr:this.$t('hg_text1')
					  },
					  {
						uplimit:110,
						dowlimit:110,
						viewstr:"110",
						sbpstr:this.$t('hg_text2')
					  },
					  {
						uplimit:119,
						dowlimit:111,
						viewstr:"110~120",
						sbpstr:this.$t('hg_text3')
					  },
					  {
						uplimit:129,
						dowlimit:120,
						viewstr:"120~130",
						sbpstr:this.$t('hg_text3')
					  },
					  {
						uplimit:139,
						dowlimit:130,
						viewstr:"130~140",
						sbpstr:this.$t('hg_text3')
					  },
					  {
						uplimit:219,
						dowlimit:140,
						viewstr:"140",
						sbpstr:this.$t('hg_text4')
					  }
				],
				selectbutton1:{
					fontSize:'30px',
					width:'500rpx', 
					borderColor:"#3f73b3",
					color:"#3f73b3",
				},
				selectbutton2:{
					fontSize:'30px',
					width:'500rpx',
					background:'#3f73b3',
					border:"0px",
				},
				selectbutton3:{
					fontSize:"20px",
					fontWeight:"bold",
					letterSpacing: "0.5em",
				},
				canvasHeight:80,
				canvasWidth:1000,
				scroll_left:0,
			}
		},
		computed:{
			columns(){
				let list = []
				for (var i = this.minhm; i <= this.maxhm; i++) {
					let label=i+this.$t("hg_text2")
					this.columns_limit_list.map((item,index)=>{						
						if(i>=item.dowlimit&&i<=item.uplimit){
							label=item.viewstr+item.sbpstr
							return label
						}
					})
					let item = {
						label:label,
						value:i
					}
					list.push(item)
				}
				return [list]
			},
			style(){
				let value ={
					canvasHeight:this.canvasHeight+"px",
					canvasWidth:this.canvasWidth+"px",
					screenWidth:this.screenWidth+"px"
				}
				return value
			},
		},
		methods: {
			init(){
				this.userinfo = uni.getStorageSync("userinfo")
				this.selectuser = uni.getStorageSync("selectuser")
				//this.getScreenSize()
				this.showlabel()
			},
			change(e){
				let value = e.value[0].value
				this.value = value
				this.label = e.value[0].label
			},
			showselectage(){
				this.$refs.picker.open();
				let index = this.value-this.minhm
				this.$refs.picker.setIndexs([index],true)
			},
			// showlabel(){
			// 	let index = this.value-this.minhm
			// 	this.label = this.columns[0][index].label
			// },
			showlabel(){
				if(this.value<110){
					this.label=110
					this.label_text = this.$t('hg_text1')
				}
				for(let i=0;i<3;i++){
					let min = 110+i*10
					let max = 110+(i+1)*10
					if(this.value<max&&this.value>=min){
						this.label=min+"~"+max
						this.label_text = this.$t('hg_text3')
					}
				}
				if(this.value>=140){
					this.label=140
					this.label_text = this.$t('hg_text4')
				}
				if(this.value==110){
					this.label=110
					this.label_text = this.$t('hg_text2')
				}
			},
			donext(){
				let answer={
					userid:this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					stemid:this.stemid,
					answertype:this.answertype,
					answervalue:this.value
				}
				let data={
					userid:this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					srid: this.srid,
					scaleid: this.scaleid,
				}
				subanswerbyuserid(answer,data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					if(200==res.code){
						uni.setStorage({
							key: 'srid',
							data: res.resultData,
						});
						tostemlistnext(this.sindex,1)
					}
				})
				//tostemlistnext(this.sindex+1)
			},
			drawruler(){
				let param ={
					canvasid:'canvas_ruler',
					canvascursorid:'canvas-cursor',
					minvalue:this.minhm,
					maxvalue:this.maxhm,
					interval:1,
					defaultvalue:this.value,
					precision:0
				}
				drawruler(param)
				this.value=getcursorvalue()
				this.canvasHeight=getCanvasConfig().canvasHeight
				this.canvasWidth=getCanvasConfig().canvasWidth
				this.screenWidth = getCanvasConfig().screenWidth;
				this.scroll_left = getscrollleft()
				// this.scroll_left = this.canvasWidth/2-this.screenWidth/2
			},
			scroll(e){
				this.value = setcursorvalue(e.detail.scrollLeft);
				this.showlabel()
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('blood_pressure')
			});
			this.init()
		},
		onLoad: function (option) { 
			this.scaleid=option.scaleid
			this.srid=option.srid
			this.sindex = option.sindex
		},
		onBackPress:function(option){
			tohome()
			return true
		},
		onReady(){
			this.drawruler()
			// this.drowtest()
		}
	}
</script>

<style scoped>
	.titlearea{
		display:flex;
		flex-direction:column;
		justify-content: center;  
		align-items:center;
	}
	.title_2{
		margin-top:15rpx;
		font-size:36rpx;
		font-weight:400;
		color:#666666;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	.title_member{
		margin-top:15rpx;
		font-size:36rpx;
		font-weight:400;
		color:#648EB8; 
	}
	.title_desstr{
		width:700rpx;
		margin-left:25rpx;
		margin-top:15rpx;
		font-size:36rpx;
		font-weight:400;
		color:#9C9C9C;
	}
	.agevalue {
		color: #0000FF;
		font-size: 50rpx;
		text-align: center;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.canvasview{
	    position:relative;
	}
	.showdiv{
		position: relative;
		width: 100%;
	}
	.showdiv #canvas_ruler{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.showdiv #canvas-cursor{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		pointer-events:none;
	}
	.title2{
		color: gray;
		font-size: 15px;
	}
</style>