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'
	const store = useStore()
	onLoad((e) => {
		if(!store.userInfo?.has_operation) { // 未填写手术信息
			setTimeout(()=>{
				// console.log(inputDialog.value)
				inputDialog.value.open()
			},0)
		}
	})
	// 变量
	const inputDialog = ref()
	const inputDialog2 = ref()
	const inputDialog3 = ref()
	const step1 = ref('先测右眼，请遮住左眼')
	const step2 = ref('请遮住右眼')
	const countDown = ref(5)
	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)
	const vision_info = ref({
		left:4,
		right:4.1
	})
	// 函数
	function toStart() { // 开始测试
		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){ // 扣分
			
		}
		// 换图片
		randomFunc()
		
		// 判断是否结束，换眼
		if(num.value>8) { // 结束换眼
			if(now.value == 2) { // 结束测试
				
				return
			}
			show_size.value.width = '29px'
			countDown.value = 5
			step1.value = '测左眼，请遮住右眼'
			num.value = 8
			now.value = 2
			toStart()
		}
		else{ // 改变尺寸
			show_size.value.width = sizes.value[num.value].size+'px'
			num.value++
		}
	}
	function okFunc() { // 结束测试
		inputDialog3.value.open()
	}
</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">
						使用uni-app自带的editor组件，该组件支持App、H5、微信小程序，其他家小程序自身未提供这类解决方案。
					</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='true'>
			<view class="pop-box">
				<view class="pb-title">测试结束</view>
				<view class="pb-content">
					<view class="content-text">
						测试结束，当前视力为{{vision_info.left}}(左)，{{vision_info.right}}(右)。
					</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{
				// width: 29px;
			}
		}
		.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>