168 lines
3.9 KiB
Vue
168 lines
3.9 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) => {
|
|
res_.value = JSON.parse(decodeURIComponent(e.res))
|
|
console.log(res_.value)
|
|
console.log(store.bgList)
|
|
if(store.bgList.length>0) {
|
|
bg_imgs.value = store.bgList
|
|
}
|
|
randomFunc()
|
|
})
|
|
// 变量
|
|
const res_ = ref(null)
|
|
const userInfo = ref(null)
|
|
const bg_imgs = ref([
|
|
// {url:'/static/result1.jpg'},
|
|
// {url:'/static/result2.jpg'},
|
|
// {url:'/static/result3.jpg'},
|
|
])
|
|
const bg_index = ref(0)
|
|
const avatarUrl = ref(null)
|
|
const info = ref({left:'',right:''})
|
|
const show_ = ref(false)
|
|
// 函数
|
|
function randomFunc() {
|
|
bg_index.value = parseInt((Math.random()*store.bgList.length))
|
|
uni.getImageInfo({
|
|
// src:bg_imgs.value[bg_index.value],
|
|
src:bg_imgs.value[bg_index.value].url,
|
|
success:function(res) {
|
|
avatarUrl.value = uni.getStorageSync('avatarUrl')
|
|
info.value.left = res_.value.leftEyeVision
|
|
info.value.right = res_.value.rightEyeVision
|
|
show_.value = true
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="visionTestBox page-box">
|
|
<!-- <view class="actionBox" :style="{background:`url(${bg_imgs[bg_index]})`}">
|
|
测试
|
|
</view> -->
|
|
<view class="actionBox">
|
|
<view class="img-box">
|
|
<image style="width: 100%;" :src="bg_imgs[bg_index].url" mode="widthFix"></image>
|
|
<view v-if="show_" class="avatar-box">
|
|
<image :src="avatarUrl" mode="widthFix"></image>
|
|
</view>
|
|
<view v-if="show_" class="res-text-row">
|
|
<view class="rtr-left">{{info.left}}</view>
|
|
<view class="rtr-right">{{info.right}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.avatar-box{
|
|
width: 100%;
|
|
position: absolute;
|
|
top:280rpx;
|
|
image{
|
|
width: 260rpx;
|
|
margin: 0px auto;
|
|
display: block;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.img-box{
|
|
position: relative;
|
|
.res-text-row{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 47%;
|
|
font-weight: 900;
|
|
color:gray;
|
|
.rtr-left{
|
|
margin-left: 20%;
|
|
}
|
|
}
|
|
}
|
|
.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> |