loser/JM-MiniApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
main
JM-MiniApp/pages/index/visionTest.vue

308 lines
7.8 KiB
Vue
Raw Permalink Normal View History

10.22提交
2023-10-23 00:52:34 +08:00
<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'
10.23修改
2023-10-23 23:57:15 +08:00
import api from "@/api/index.js"
10.22提交
2023-10-23 00:52:34 +08:00
const store = useStore()
onLoad((e) => {
10.23修改
2023-10-23 23:57:15 +08:00
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)
10.22提交
2023-10-23 00:52:34 +08:00
})
// 变量
10.23修改
2023-10-23 23:57:15 +08:00
const userInfo = ref(null)
10.22提交
2023-10-23 00:52:34 +08:00
const inputDialog = ref()
const inputDialog2 = ref()
const inputDialog3 = ref()
const step1 = ref('先测右眼，请遮住左眼')
const step2 = ref('请遮住右眼')
10.23修改
2023-10-23 23:57:15 +08:00
const countDown = ref(null) // 倒计时
const countDown_init = 3
10.22提交
2023-10-23 00:52:34 +08:00
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)
10.23修改
2023-10-23 23:57:15 +08:00
const now = ref(1); // 1-右眼；2-左眼
10.22提交
2023-10-23 00:52:34 +08:00
const vision_info = ref({
left:4,
10.23修改
2023-10-23 23:57:15 +08:00
right:4
10.22提交
2023-10-23 00:52:34 +08:00
})
2023.11.23
2023-11-23 23:39:38 +08:00
const is_test = ref(true)
10.22提交
2023-10-23 00:52:34 +08:00
// 函数
function toStart() { // 开始测试
11.28
2023-11-28 22:30:40 +08:00
// if(is_test.value) {
// uni.navigateTo({
// url:'/pages/index/result'
// })
// }
10.22提交
2023-10-23 00:52:34 +08:00
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) {
// 先执行加减分
10.23修改
2023-10-23 23:57:15 +08:00
if(!index || index!=current_img_index.value){ // 不加分
10.22提交
2023-10-23 00:52:34 +08:00
10.23修改
2023-10-23 23:57:15 +08:00
}
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))
}
10.22提交
2023-10-23 00:52:34 +08:00
}
// 换图片
randomFunc()
// 判断是否结束，换眼
if(num.value>8) { // 结束换眼
if(now.value == 2) { // 结束测试
10.23修改
2023-10-23 23:57:15 +08:00
inputDialog3.value.open()
10.22提交
2023-10-23 00:52:34 +08:00
return
}
show_size.value.width = '29px'
10.23修改
2023-10-23 23:57:15 +08:00
countDown.value = countDown_init
10.22提交
2023-10-23 00:52:34 +08:00
step1.value = '测左眼，请遮住右眼'
10.23修改
2023-10-23 23:57:15 +08:00
num.value = 0
10.22提交
2023-10-23 00:52:34 +08:00
now.value = 2
toStart()
}
else{ // 改变尺寸
show_size.value.width = sizes.value[num.value].size+'px'
num.value++
}
}
10.23修改
2023-10-23 23:57:15 +08:00
async function okFunc() { // 结束测试
// inputDialog3.value.open()
2023.11.1修改
2023-11-01 00:33:57 +08:00
uni.showLoading({
mask:true
})
11.28
2023-11-28 22:30:40 +08:00
const params = {
2023.11.1修改
2023-11-01 00:33:57 +08:00
leftEyeVision:vision_info.value.left+'',
rightEyeVision:vision_info.value.right+'',
添加首页图片
2024-01-14 20:13:09 +08:00
userId:userInfo.value?.userId || 0
11.28
2023-11-28 22:30:40 +08:00
}
const res = await api.saveVision(params)
2023.11.1修改
2023-11-01 00:33:57 +08:00
uni.hideLoading()
10.23修改
2023-10-23 23:57:15 +08:00
if(res.code == 0) {
2023.11.1修改
2023-11-01 00:33:57 +08:00
uni.showToast({
title:"保存成功",
icon:"success",
duration:2000,
11.28
2023-11-28 22:30:40 +08:00
success: function (res1){
2023.11.23
2023-11-23 23:39:38 +08:00
// uni.navigateBack()
11.28
2023-11-28 22:30:40 +08:00
uni.redirectTo({
url:"/pages/index/result?res="+encodeURIComponent(JSON.stringify(params))
2023.11.23
2023-11-23 23:39:38 +08:00
})
2023.11.1修改
2023-11-01 00:33:57 +08:00
}
})
10.23修改
2023-10-23 23:57:15 +08:00
}
10.22提交
2023-10-23 00:52:34 +08:00
}
</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">
10.23修改
2023-10-23 23:57:15 +08:00
<view class="content-text" style="color: gray;">
1.适应室内光纤两分钟左右。
2.取坐位或站立、正对手机，检查者眼部跟手机平行，保持手机距离40厘米。
3.先测右眼后测左眼，测试时请遮挡另一只眼睛。
10.22提交
2023-10-23 00:52:34 +08:00
</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>
10.23修改
2023-10-23 23:57:15 +08:00
<uni-popup ref="inputDialog3" :is-mask-click='false'>
10.22提交
2023-10-23 00:52:34 +08:00
<view class="pop-box">
<view class="pb-title">测试结束</view>
<view class="pb-content">
<view class="content-text">
测试结束，当前视力为{{vision_info.left}}(左)，{{vision_info.right}}(右)。
10.23修改
2023-10-23 23:57:15 +08:00
<view style="opacity: 0;">
使用uni-app自带的editor组件，该组件支持App、H5、微信小程序，其他家小程序自身未提供这类解决方案。
</view>
10.22提交
2023-10-23 00:52:34 +08:00
</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{
10.23修改
2023-10-23 23:57:15 +08:00
height: auto;
10.22提交
2023-10-23 00:52:34 +08:00
}
}
.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>
Reference in New Issue Copy Permalink