NDAid/pages/topic/selectcanvas.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="">
		<navbar :title="$t('calculate_BMI')" size="48" :backtext="$t('back')"   color="#fff"></navbar>
	</view>
	<view class="app_content">
		<view class='titlearea'>        
			<text class='title_2'>{{$t('selectcanvas_text1')}}</text>
			<text class='title_member'>{{$t('report_user')}}:{{selectuser.membername}}</text>
			<text class='title_desstr' decode='true'>{{$t('selectcanvas_text2')}}</text>
			<!-- <text class='title_desstr' decode='true'>{{$t('selectcanvas_text3')}}</text> -->
		</view>
		<view class="info_div">
			<view class="text_div">
				<!-- <text class="title1">BMI:</text> -->
				<text class="title1">{{$t("bmi_text")}}:</text>
				<text class="text">{{bmi}}</text>
			</view>
		</view>
		<view class="info_div">
			<view class="text_div">
				<text class="title3">{{$t('height')}}:</text>
				<text class="text">&nbsp;{{heightvalue}}</text>
				<text class="title2">&nbsp;CM</text>
			</view>
			<!-- <view class="mybtn" @click="setheight">{{$t('select')}}</view> -->
			<view class="showdiv" id="showdiv" :style="{height:style.canvasHeight}">
				<scroll-view style="width:100%;height: 100%;" 
				:scroll-x="true"  @scroll="scroll1" :scroll-left="scroll_left_1" :show-scrollbar="false">
					<canvas :style="{width:style.canvasWidth_1,height:style.canvasHeight}" 
					canvas-id="canvas_ruler" id="canvas_ruler" :width="canvasWidth_1">
					</canvas>
				</scroll-view>
				<canvas :style="{width:style.screenWidth_1,height:style.canvasHeight}"
				canvas-id="canvas-cursor" id="canvas-cursor">
				</canvas>
			</view>
		</view>
		<view class="info_div">
			<view class="text_div">
				<text class="title3">{{$t('weight')}}:</text>
				<text class="text">&nbsp;{{weightvalue}}</text>
				<text class="title2">&nbsp;KG</text>
			</view>
			<!-- <view class="mybtn" @click="setweight">{{$t('select')}}</view> -->
			<view class="showdiv" id="showdiv" :style="{height:style.canvasHeight}">
				<scroll-view style="width:100%;height: 100%;" 
				:scroll-x="true"  @scroll="scroll2" :scroll-left="scroll_left_2" :show-scrollbar="false">
					<canvas :style="{width:style.canvasWidth_2,height:style.canvasHeight}" 
					canvas-id="canvas_ruler_2" id="canvas_ruler_2" :width="canvasWidth_2">
					</canvas>
				</scroll-view>
				<canvas :style="{width:style.screenWidth_2,height:style.canvasHeight}"
				canvas-id="canvas-cursor_2" id="canvas-cursor_2">
				</canvas>
			</view>
		</view>
		<!-- <view class="">
			<uv-picker ref="picker" :columns="columns" @change="change" keyName="label" :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>
			<uv-popup ref="popup" mode="bottom" @maskClick="maskClick">
				<view  class="over_percent_div">
					<view class="content">
						<uv-text :text="$t('show_info_text1')" align="center" size="25"></uv-text>
						<uv-text :text="over_percent" type="success" bold="true" align="center" size="30"></uv-text>
						<uv-text :text="$t('show_info_text2')" align="center" size="25"></uv-text>
					</view>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	import {tohome,tostemlistnext} from "/common/js/common.js"
	import {subanswerbyuserid} from "/common/api/scale.js"
	import {querybmipercentage} from "/common/api/health.js"
	import {drawruler,getCanvasConfig,getcursorvalue,setcursorvalue,getscrollleft} from "@/common/js/slider_ruler.js"
	
	export default{
		data(){
			return {
				columns:[],
				userinfo:{},
				selectuser:{},
				scaleid:0,
				srid:0,
				sindex:0,
				heightvalue:170,
				weightvalue:50,
				minheight:90,
				maxheight:210,
				minweight:35,
				maxweight:125,
				selecttype:"height",
				selectbutton2:{
					fontSize:'30px',
					width:'500rpx',
					background:'#3f73b3',
					border:"0px",
				},
				selectbutton3:{
					fontSize:"20px",
					fontWeight:"bold",
					letterSpacing: "0.5em",
				},
				over_percent:"11%",
				timer:false,
				canvasHeight:80,
				canvasWidth_1:1000,
				canvasWidth_2:1000,
				scroll_left_1:0,
				scroll_left_2:0,
			}
		},
		methods:{
			init(){
				this.userinfo = uni.getStorageSync("userinfo")
				this.selectuser = uni.getStorageSync("selectuser")
			},
			setheight(){
				this.columns = this.heightlist
				this.$refs.picker.open();
				let index = this.heightvalue-this.minheight
				this.$refs.picker.setIndexs([index],true)
				this.selecttype="height"
			},
			setweight(){
				this.columns = this.weightlist
				this.$refs.picker.open();
				let index = (this.weightvalue-this.minweight)*2
				this.$refs.picker.setIndexs([index],true)
				this.selecttype="weight"
			},
			change(e){
				let value = e.value[0].value
				switch(this.selecttype){
					case "height":
					this.heightvalue = value
					break;
					case "weight":
						this.weightvalue = value
					break;
				}
			},
			donext(){
				var usrBMI = {
				  userid: this.userinfo.id,
				  fmemberid:this.selectuser.fmemberid,
				  stemid: 2,
				  answertype: 0,
				  answervalue: this.bmi,
				}
				var userheight = {
				  userid: this.userinfo.id,
				  fmemberid:this.selectuser.fmemberid,
				  stemid: 27,
				  answertype: 0,
				  answervalue: this.heightvalue,
				}
				var userweight = {
				  userid: this.userinfo.id,
				  fmemberid:this.selectuser.fmemberid,
				  stemid: 28,
				  answertype: 0,
				  answervalue: this.weightvalue,
				}
				let answer =[]
				answer.push(usrBMI)
				answer.push(userheight)
				answer.push(userweight)
				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,
						});
						querybmipercentage(this.bmi).then(res=>{
							res = res.data
							if(0==res.code){
								this.$refs.toast.show({
									type: 'error',
									message: res.errmsg
								})
								return false
							}
							if(200==res.code){
								this.over_percent = res.resultData+"%"
								this.showinfo()
								let that = this
								this.timer = setTimeout(function(){
									that.closeinfo()
									console.log(123)
								    tostemlistnext(that.sindex,1)
								}, 3000);
							}
						})
					}
				})
			},
			showinfo(){
				this.$refs.popup.open();
			},
			closeinfo(){
				this.$refs.popup.close();
			},
			maskClick(){
				clearTimeout(this.timer)
				this.$refs.popup.close();
				tostemlistnext(this.sindex,1)
			},
			drawruler1(){
				let param ={
					canvasid:'canvas_ruler',
					canvascursorid:'canvas-cursor',
					minvalue:this.minheight,
					maxvalue:this.maxheight,
					interval:1,
					defaultvalue:this.heightvalue,
					precision:0
				}
				drawruler(param)
				this.heightvalue=getcursorvalue()
				this.canvasHeight=getCanvasConfig().canvasHeight
				this.canvasWidth_1=getCanvasConfig().canvasWidth
				this.screenWidth = getCanvasConfig().screenWidth;
				this.scroll_left_1 = getscrollleft()
				// this.scroll_left = this.canvasWidth/2-this.screenWidth/2
			},
			scroll1(e){
				this.heightvalue = setcursorvalue(e.detail.scrollLeft,this.minheight);
			},
			drawruler2(){
				let param ={
					canvasid:'canvas_ruler_2',
					canvascursorid:'canvas-cursor_2',
					minvalue:this.minweight,
					maxvalue:this.maxweight,
					interval:1,
					defaultvalue:this.weightvalue,
					precision:0
				}
				drawruler(param)
				this.weightvalue=getcursorvalue()
				this.canvasHeight=getCanvasConfig().canvasHeight
				this.canvasWidth_2=getCanvasConfig().canvasWidth
				this.screenWidth = getCanvasConfig().screenWidth;
				this.scroll_left_2 = getscrollleft()
				// this.scroll_left = this.canvasWidth/2-this.screenWidth/2
			},
			scroll2(e){
				this.weightvalue = setcursorvalue(e.detail.scrollLeft);
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('calculate_BMI')
			});
			this.init()
		},
		computed:{
			bmi(){
				var value = (this.weightvalue / ((this.heightvalue / 100) * (this.heightvalue / 100))).toFixed(1)
				return value
			},
			heightlist(){
				let list = []
				for (var i = this.minheight; i <= this.maxheight; i++) {
					let item = {
						label:i,
						value:i
					}
					list.push(item)
				}
				return [list]
			},
			weightlist(){
				let list = []
				for (var i = this.minweight; i <= this.maxweight; i+=0.5) {
					let item = {
						label:i,
						value:i
					}
					list.push(item)
				}
				return [list]
			},
			style(){
				let value ={
					canvasHeight:this.canvasHeight+"px",
					canvasWidth_1:this.canvasWidth_1+"px",
					canvasWidth_2:this.canvasWidth_2+"px",
					screenWidth:this.screenWidth+"px"
				}
				return value
			},
		},
		onLoad: function (option) {
			this.scaleid=option.scaleid
			this.srid=option.srid
			this.sindex = option.sindex
		},
		onBackPress:function(option){
			tohome()
			return true
		},
		onReady(){
			this.drawruler1()
			this.drawruler2()
		}
	}
</script>

<style scoped>
	.titlearea{
	    height:400rpx;
	    display:flex;
	    flex-direction:column;
	    justify-content: center;  
	    align-items:center;
		margin-bottom: 30px;
		font-size: 13px;
	}
	.title_2{
	    margin-top:15rpx;
	    font-size:36rpx;
	    font-weight:400;
	    color:#666666 
	}
	.title_member{
	    margin-top:30rpx;
	    font-size:36rpx;
	    font-weight:400;
	    color:#648EB8; 
	}
	.title_desstr{
	    width:700rpx;
	    margin-left:25rpx;
	    margin-top:30rpx;
	    font-size:36rpx;
	    font-weight:400;
	    color:#9C9C9C;
	}
	.info_div:first{
		margin-top: 10px;
	}
	.info_div{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		gap: 5px;
	}
	
	.info_div .text_div{
		text-align: center;
		letter-spacing: "0.5em";
	}
	.title1{
		color: gray;
		font-size: 30px;
	}
	.text{
		color: #0000CD;
		font-size: 30px;
	}
	.title2{
		color: gray;
		font-size: 15px;
	}
	.title3{
		color: gray;
		font-size: 20px;
	}
	.mybtn{
		width: 50%;
		letter-spacing: 10px;
	}
	.over_percent_div{
		width: 100%;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.over_percent_div .content{
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center; 
		gap: 20px;
		justify-content: center;
	}
	.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;
	}
	.showdiv #canvas_ruler_2{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.showdiv #canvas-cursor_2{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		pointer-events:none;
	}
</style>