JM-MiniApp/pages/index/visionTest.vue

<script setup>
	// 引入依赖
	import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	import { onLoad } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	import api from "@/api/index.js"
	const store = useStore()
	onLoad((e) => {
		userInfo.value = JSON.parse(store.userInfo)
		countDown.value = countDown_init
		// if(!store.userInfo?.has_operation) { // 未填写手术信息
		// 	setTimeout(()=>{
		// 		// console.log(inputDialog.value)
		// 		inputDialog.value.open()
		// 	},0)
		// }
		setTimeout(()=>{
			// console.log(inputDialog.value)
			inputDialog.value.open()
		},0)
	})
	// 变量
	const userInfo = ref(null)
	const inputDialog = ref()
	const inputDialog2 = ref()
	const inputDialog3 = ref()
	const step1 = ref('先测右眼，请遮住左眼')
	const step2 = ref('请遮住右眼')
	const countDown = ref(null) // 倒计时
	const countDown_init = 3
	const scale_ = ref(1)
	const current_img = ref("") // 当前图片
	const current_img_index = ref(null)
	const sizes = ref([{
			size:23,
			vision:4.2
		},{
			size:19,
			vision:4.2
		},
		{
			size:15,
			vision:4.2
		},{
			size:11,
			vision:4.2
		},{
			size:9,
			vision:4.2
		},{
			size:7,
			vision:4.2
		},{
			size:6,
			vision:4.2
		},{
			size:4,
			vision:4.2
		},{
			size:3,
			vision:4.2
		},
	])
	const show_size = ref({
		width:'29px'
	})
	const num = ref(0)
	const now = ref(1); // 1-右眼；2-左眼
	const vision_info = ref({
		left:4,
		right:4
	})
	const is_test = ref(true)
	// 函数
	function toStart() { // 开始测试
		// if(is_test.value) {
		// 	uni.navigateTo({
		// 		url:'/pages/index/result'
		// 	})
		// }
		inputDialog.value.close()
		inputDialog2.value.open()
		let s = setInterval(() => {
			countDown.value--
			if(countDown.value  == 0) {
				clearInterval(s)
				inputDialog2.value.close()
			}
		},1000)
		randomFunc()
	}
	function toClose() {
		inputDialog.value.close()
	}
	function randomFunc() {
		let ran = Math.ceil(Math.random()*4)
		if(current_img_index.value == ran) {
			randomFunc()
		}
		else{
			current_img.value = "../../static/"+ran+".png"
			current_img_index.value = ran
		}
		// console.log(current_img.value)
	}
	function chooseFunc(index) {
		// 先执行加减分
		if(!index || index!=current_img_index.value){ // 不加分
			
		}
		else{ // 加分
			if(now.value == 1) { // 右眼
				vision_info.value.right+=0.1
				vision_info.value.right = Number(vision_info.value.right.toFixed(1))
			}
			else{ // 左眼
				vision_info.value.left+=0.1
				vision_info.value.left = Number(vision_info.value.left.toFixed(1))
			}
		}
		// 换图片
		randomFunc()
		// 判断是否结束，换眼
		if(num.value>8) { // 结束换眼
			if(now.value == 2) { // 结束测试
				inputDialog3.value.open()
				return
			}
			show_size.value.width = '29px'
			countDown.value = countDown_init
			step1.value = '测左眼，请遮住右眼'
			num.value = 0
			now.value = 2
			toStart()
		}
		else{ // 改变尺寸
			show_size.value.width = sizes.value[num.value].size+'px'
			num.value++
		}
	}
	async function okFunc() { // 结束测试
		// inputDialog3.value.open()
		uni.showLoading({
			mask:true
		})
		const params = {
			leftEyeVision:vision_info.value.left+'',
			rightEyeVision:vision_info.value.right+'',
			userId:userInfo.value.userId
		}
		const res = await api.saveVision(params)
		uni.hideLoading()
		if(res.code == 0) {
			uni.showToast({
				title:"保存成功",
				icon:"success",
				duration:2000,
				success: function (res1){
					// uni.navigateBack()
					uni.redirectTo({
						url:"/pages/index/result?res="+encodeURIComponent(JSON.stringify(params))
					})
				}
			})
			
		}
	}
</script>
<template>
	<view class="visionTestBox page-box">
		<view class="actionBox">
			<!-- 测试区域 -->
			<view class="ab-show-box">
				<image :src="current_img" :style="show_size" mode="widthFix"></image>
			</view>
			<!-- 操作区域 -->
			<view class="ab-action-box">
				<view class="ac-row">
					<image @tap="chooseFunc(1)" class="ac-row-card" src="../../static/1.png" mode=""></image>
				</view>
				<view class="ac-row">
					<image @tap="chooseFunc(3)" class="ac-row-card" src="../../static/3.png" mode=""></image>
					<view @tap="chooseFunc(0)" class="ac-row-card ac-row-card-text">看不清</view>
					<image @tap="chooseFunc(4)" class="ac-row-card" src="../../static/4.png" mode=""></image>
				</view>
				<view class="ac-row">
					<image @tap="chooseFunc(2)" class="ac-row-card" src="../../static/2.png" mode=""></image>
				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" :is-mask-click='true'>
			<view class="pop-box">
				<view class="pb-title">测试须知</view>
				<view class="pb-content">
					<view class="content-text" style="color: gray;">
						1.适应室内光纤两分钟左右。
						2.取坐位或站立、正对手机，检查者眼部跟手机平行，保持手机距离40厘米。
						3.先测右眼后测左眼，测试时请遮挡另一只眼睛。
					</view>
					<view class="okBtn" @tap="toStart">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog2" :is-mask-click='false' style="width: 100%;">
			<view class="pop-box">
				<view class="pb-title">测试须知</view>
				<view class="pb-content">
					<view class="content-text">
						<view class="ct-title">{{countDown}}</view>
						<view>{{step1}}</view>
					</view>
					<!-- <view class="okBtn" @tap="toStart">确定</view> -->
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog3" :is-mask-click='false'>
			<view class="pop-box">
				<view class="pb-title">测试结束</view>
				<view class="pb-content">
					<view class="content-text">
						测试结束，当前视力为{{vision_info.left}}(左)，{{vision_info.right}}(右)。
						<view style="opacity: 0;">
							使用uni-app自带的editor组件，该组件支持App、H5、微信小程序，其他家小程序自身未提供这类解决方案。
						</view>
						
					</view>
					<view class="okBtn" @tap="okFunc">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	.visionTestBox,.actionBox{
		height: 100%;
	}
	.actionBox{
		.ab-show-box{
			// width: 100%;
			height: 50%;
			border: 2rpx solid #d0d0d0;
			margin: 10rpx;
			margin-top: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				height: auto;
			}
		}
		.ab-action-box{
			.ac-row{
				display: flex;
				align-items: center;
				justify-content: center;
				.ac-row-card-text{
					padding: 10rpx !important;
					width: 80rpx !important;
					height: 80rpx !important;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.ac-row-card{
					// white-space: nowrap;
					margin: 20rpx;
					font-size: 24rpx;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					padding: 30rpx;
					box-shadow: 2rpx 20rpx 40rpx #dfdfdf;
				}
			}
		}
	}
	.content-text{
		margin-bottom: 20rpx;
		.ct-title{
			text-align: center;
			font-size: 34px;
			color: #26758d;
		}
	}
	.okBtn{
		width: 100%;
		color: white;
		background-color: #26758d;
		padding: 20rpx;
		text-align: center;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.pop-box{
		.pb-title{
			text-align: center;
			margin-bottom: 40rpx;
		}
		background-color: white;
		padding: 20rpx;
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
	}
</style>