NDAid/pages/topic/selectwaistline.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class='titlearea'>        
		<text class='title_2'>{{$t('selectwaistline_text1')}}</text>
		<text class='title_member'>{{$t('report_user')}}:{{selectuser.membername}}</text>
		<text class='title_desstr' decode='true'>{{$t('selectwaistline_text2')}}</text>
		<text class='title_desstr' decode='true'>{{$t('selectwaistline_text3')}}</text>
		<text class='title_desstr' decode='true'>{{$t('selectwaistline_text4')}}</text>
		<text class='title_desstr' decode='true'>{{$t('selectwaistline_text5')}}</text>
	</view>
	<view class="info_div info_div_1">
		<view class="text_div">
			<text class="title3">{{$t('waistline')}}:</text>
			<text class="text">{{value}}</text>
			<text class="title3">CM</text>
		</view>
		<!-- <view class="text_div">
			<text class="text">{{chi}}</text>
			<text class="title3">{{$t('waistline_text1')}}</text>
			<text class="text">{{cun}}</text>
			<text class="title3">{{$t('waistline_text2')}}</text>
		</view> -->
	</view>
	<!-- <view class="info_div info_div_2">
		<view class="mybtn" @click="setvalue">{{$t('select')}}</view>
	</view> -->
	<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 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>
</template>

<script>
	import {tohome,tostemlistnext} from "/common/js/common.js"
	import {subanswerbyuserid} from "/common/api/scale.js"
	import {drawruler,getCanvasConfig,getcursorvalue,setcursorvalue,getscrollleft} from "@/common/js/slider_ruler.js"
	export default{
		data(){
			return {
				userinfo:{},
				selectuser:{},
				scaleid:0,
				srid:0,
				sindex:0,
				value:80,
				minvalue:40,
				maxvalue:120,
				selectbutton2:{
					fontSize:'30px',
					width:'500rpx',
					background:'#648EB8',
					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.minvalue; i <= this.maxvalue; i++) {
					let label =i;
					if(i==this.minvalue){
						label = this.$t('less_than')+i
					}
					if(i==this.maxvalue){
						label = this.$t('greater_than')+i
					}
					let item = {
						label:label,
						value:i
					}
					list.push(item)
				}
				return [list]
			},
			chi(){
				var chicun = Math.round(this.value*0.3)
				let value = parseInt(chicun/10)
				return value
			},
			cun(){
				var chicun = Math.round(this.value*0.3)
				let value = chicun%10
				return value
			},
			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")
			},
			change(e){
				let value = e.value[0].value
				this.value =value
			},
			donext(){
				let answer = {
					userid: this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					stemid: 30,
					answertype: 0,
					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)
					}
				})
			},
			setvalue(){
				this.$refs.picker.open();
				let index = (this.value-this.minvalue)
				this.$refs.picker.setIndexs([index],true)
			},
			drawruler(){
				let param ={
					canvasid:'canvas_ruler',
					canvascursorid:'canvas-cursor',
					minvalue:this.minvalue,
					maxvalue:this.maxvalue,
					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);
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('waistline')
			});
			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()
		}
	}
</script>

<style scop>
	.titlearea{
		/* height:400rpx; */
		display:flex;
		flex-direction:column;
		justify-content: center;  
		align-items:center;
	}
	.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:30rpx;
		font-weight:300;
		color:#9C9C9C;
	}
	.info_div{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		gap: 5px;
	}
	.info_div_2{
		margin-top: 20px;
	}
	.info_div_1{
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 10px;
	}
	.info_div .text_div{
		text-align: center;
		letter-spacing: "0.5em";
	}
	.title1{
		color: #363636 ;
		font-size: 30px;
	}
	.text{
		color: #0000CD;
		font-size: 30px;
	}
	.title2{
		color: #363636;
		font-size: 15px;
	}
	.title3{
		color: #363636;
		font-size: 20px;
	}
	.mybtn{
		width: 50%;
		letter-spacing: 10px;
	}
	.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;
	}
</style>