JM-MiniApp/pages/index/result.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)
	const bg_list = ref([
		"https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/result/result1.jpg",
		"https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/result/result2.jpg",
		"https://jmyl-app.oss-cn-chengdu.aliyuncs.com/miniapp/result/result3.jpg"
	])
	const bg_list_index = ref(0)
	// 函数
	function randomFunc() {
		info.value.left = parseFloat(res_.value.leftEyeVision)
		info.value.right = parseFloat(res_.value.rightEyeVision)
		// 根据测试成绩显示不同的背景图
		if ((info.value.left + info.value.right) / 2 > 5) {
			bg_list_index.value = 0
		} else if ((info.value.left + info.value.right) / 2 < 4.9 && (info.value.left + info.value.right) / 2 > 4.5) {
			bg_list_index.value = 1
		} else if ((info.value.left + info.value.right) / 2 < 4.5) {
			bg_list_index.value = 2
		}
		// bg_index.value = parseInt((Math.random()*store.bgList.length))
		uni.getImageInfo({
			// src:bg_imgs.value[bg_index.value],
			src: bg_list.value[bg_list_index.value],
			success:function(res) {
				avatarUrl.value = uni.getStorageSync('avatarUrl')
				info.value.left = parseFloat(res_.value.leftEyeVision)
				info.value.right = parseFloat(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_list[bg_list_index]" 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>