308 lines
7.8 KiB
Vue
308 lines
7.8 KiB
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 || 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> |