NDAid/pages/topic/selectage.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class='titlearea'>        
		<text class='title_2'>{{$t('selectage_test1')}}</text>
		<text class='title_member'>{{$t('report_user')}}:{{selectuser.membername}}</text>
		<text class='title_desstr' decode='true'>{{$t('selectage_test2')}}</text>
	</view>
	<view class="agevalue">
		<view class="">
			{{$t('select_age')}}:
			<text class='strage' v-show="viewage<=29">29{{$t("select_age_3")}}</text>
			<text class='strage' v-show="viewage>29&&viewage<70">{{viewage}}{{$t("select_age_1")}}</text>
			<text class='strage' v-show="viewage>=70">70{{$t("select_age_2")}}</text>
		</view>
		<!-- <uv-button type="primary" :plain="true" :text="$t('select')" @click="showselectage" :customStyle="selectbutton1" :customTextStyle="selectbutton3"></uv-button> -->
	</view>
	<!-- <view class="">
		<uv-picker ref="picker" :columns="columns" @confirm="confirm" @change="change" keyName="label" :showToolbar="false"  fontSize="25px"></uv-picker>
	</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="donext_div">
		<uv-button type="primary" :text="$t('next_step')" @click="donext" :customStyle="selectbutton2" :customTextStyle="selectbutton3"></uv-button>
	</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 {
				minage:18,
				maxage:80,
				userinfo:{},
				selectuser:{},
				viewage:35,
				selectbutton1:{
					fontSize:'30px',
					width:'500rpx', 
					borderColor:"#648EB8",
					color:"#648EB8",
				},
				selectbutton2:{
					fontSize:'30px',
					width:'500rpx',
					background:'#648EB8',
					border:"0px",
				},
				selectbutton3:{
					fontSize:"20px",
					fontWeight:"bold",
					letterSpacing: "0.5em",
				},
				scaleid:0,
				srid:0,
				sindex:0,
				stemid:1,
				answertype:0,
				canvasHeight:80,
				canvasWidth:1000,
				scroll_left:0,
			}
		},
		computed:{
			columns(){
				let list = []
				for (var i = this.minage; i <= this.maxage; i++) {
					let label=i+this.$t('select_age_1');
					if(i<=this.minage){
						label=i+this.$t('select_age_3');
					}
					if(i>=this.maxage){
						label=i+this.$t('select_age_2');
					}
					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()
			},
			showselectage(){
				this.$refs.picker.open();
				let index = this.viewage-this.minage
				this.$refs.picker.setIndexs([index],true)
			},
			confirm(e){
				let value = e.value[0].value
				this.viewage = value
			},
			change(e){
				let value = e.value[0].value
				this.viewage = value
			},
			donext(){
				let answer={
					userid:this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					stemid:this.stemid,
					answertype:this.answertype,
					answervalue:this.viewage
				}
				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.minage,
					maxvalue:this.maxage,
					interval:1,
					defaultvalue:this.viewage,
					precision:0
				}
				drawruler(param)
				this.viewage=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.viewage = setcursorvalue(e.detail.scrollLeft);
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('select_age')
			});
			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{
    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: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;
}
</style>