JM-MiniApp/pages/index/visionList.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,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
	import emptyCard from "@/components/emptyCard.vue"
	import {ref,onMounted,nextTick,watch} from "vue"
	import api from '@/api/index.js'
	import util from "@/utils/index.js"
	import {useStore} from '@/store/index.js'
	// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue' 
	const store = useStore()
	// 生命周期
	onLoad((e) => {
		if(store.userInfo){
			let user_info = JSON.parse(store.userInfo)
			queryParams.value.userId = user_info.userId
		}
		getList()
	})
	onPullDownRefresh(()=> { // 下拉刷新
		init()
		getList()
	})
	onReachBottom(() => { // 上滑触底
		queryParams.value.page++	
		getList()
	})
	// 变量
	const list = ref([])
	const queryParams = ref({
		page:1,
		pageSize:10,
		userId:0
	})
	// 函数
	function init(){
		list.value = []
		queryParams.value.page = 1
		queryParams.value.pageSize = 10
	}
	async function getList() {
		const res = await api.getVisionList(queryParams.value)
		if(res.code === 0) {
			if(res.data.list && res.data.list.length > 0) {
				list.value.push(...res.data.list)
			}
			else{
				queryParams.value.page--
			}
		}
		else{
			uni.showToast({
				title:"获取失败",
				icon:"error",
				duration:2000
			})
		}
	}
	function toResult(params) {
		console.log(params)
		uni.redirectTo({
			url:"/pages/index/result?res="+encodeURIComponent(JSON.stringify(params))
		})
	}
	// encodeURIComponent(JSON.stringify(params))
</script>
<template>
	<view class="visinoListBox page-box">
		<view class="vl-item-box" v-if="list.length > 0">
			<view class="vl-item" v-for="(item,i) in list" @tap="toResult(item)">
				<view class="vl-title">{{util.timestampToDate(item.CreatedAt)}}</view>
				<view class="vl-row-box">
					<view class="vl-row">
						<view class="vlr-left">右眼</view>
						<view class="vlr-right">{{item.rightEyeVision}}</view>
					</view>
					<view class="vl-row">
						<view class="vlr-left">左眼</view>
						<view class="vlr-right">{{item.leftEyeVision}}</view>
					</view>
				</view>
			</view>
		</view>
		<emptyCard v-else></emptyCard>
	</view>
</template>
<style scoped lang="scss">
	.visinoListBox{
		.vl-item-box{
			padding: 20rpx;
			.vl-item{
				margin-bottom: 20rpx;
				padding: 20rpx;
				/* border: 1px solid #eaeaea; */
				border-radius: 20rpx;
				box-shadow: 5px 5px 5px #f3f3f3;
				.vl-title{
					border-left: 10rpx solid #26758d;
					padding-left: 5px;
					margin-bottom: 10px;
				}
				.vl-row-box{
					.vl-row{
						display: flex;
						align-items: center;
						.vlr-left{
							margin-right:20rpx
							;color: gray;
						}
						.vlr-right{
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>