254 lines
6.1 KiB
Vue
254 lines
6.1 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'
|
||
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> |