JM-MiniApp/pages/index/visionTest.vue
2023-11-28 22:30:40 +08:00

308 lines
7.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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组件该组件支持AppH5微信小程序其他家小程序自身未提供这类解决方案
</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>