|
|
<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 || 0
|
|
|
}
|
|
|
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> |