JM-MiniApp/pages/index/note_list.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 mySwiper from "@/components/mySwiper.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' 
	import ccNewsTabs from '@/uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue' 
	const store = useStore()
	// 生命周期
	onLoad((e) => {
		c_index.value = parseInt(e.index)
		list_box.value[c_index.value].queryParams.state = c_index.value==0?1:c_index.value==1?2:3	
		if(store.systemInfo) {
			swiper_h.value = store.systemInfo.windowHeight
		}
		getList()
	})
	onPullDownRefresh(()=> { // 下拉刷新
		init()
		getList()
	})
	onReachBottom(() => { // 上滑触底
		list_box.value[c_index.value].queryParams.page++	
		getList()
	})
	// 变量
	const inputDialog = ref()
	const state_index = ref(0)
	const swiper_h = ref(0)
	const list = ref([])
	const list_box = ref([
		{
			show_index:0,
			state:1,
			list:[],
			queryParams:{
				page:1,
				pageSize:10,
				statet:1
			}
		},
		{
			show_index:1,
			state:2,
			list:[],
			queryParams:{
				page:1,
				pageSize:10,
				statet:2
			}
		},
		{
			show_index:1,
			state:3,
			list:[],
			queryParams:{
				page:1,
				pageSize:10,
				statet:3
			}
		}
	])
	const queryParams = ref({
		page:1,
		pageSize:10,
		state:1
	})
	const c_index = ref(-1)
	const tabArr = ref([
		{
		            name: '手术前',
		            id: '1',
		},
		{
		            name: '手术中',
		            id: '2',
		},
		{
		            name: '手术后',
		            id: '3',
		}
	])
	// 函数
	function init(){
		// list.value = []
		list_box.value[c_index.value].list = []
		list_box.value[c_index.value].queryParams.page = 1
		list_box.value[c_index.value].queryParams.pageSize = 10
	}
	function queryStateInitFunc() {
		list_box.value[c_index.value].queryParams.state = c_index.value?0:1
	}
	async function getList() {
		uni.showLoading({
			mask:true
		})
		let operation_info = null
		if(uni.getStorageSync('operation_info')) {
			operation_info = JSON.parse(uni.getStorageSync('operation_info'))
		}
		if(operation_info && operation_info.hospitalId) {
			const res = await api.getHospitalInfo2({
				hospitalId:operation_info.hospitalId,
				timeNum:list_box.value[c_index.value].queryParams.statet
			})
			// return 
			// const res = await api.getTodoist(list_box.value[c_index.value].queryParams)
			if(res.code === 0) {
				if(res.data && res.data.length > 0) {
					// list_box.value[c_index.value].list.push(...res.data)
					list_box.value[c_index.value].list = res.data
				}
				else{
					list_box.value[c_index.value].queryParams.page--
				}
			}
			else{
				uni.showToast({
					title:res.msg,
					icon:"error",
					duration:2000,
					mask:true,
					success() {
						if(res.code === 7) // 登录失败
						{
							store.afterFailLogin(2000)
						}
					}
				})
			}
		}
		uni.hideLoading();
	}
	function tabChange(currentIndex) {
		c_index.value = currentIndex
		// if(list_box.value[c_index.value].list.length === 0) {
		// 	queryStateInitFunc()
		// 	getList()
		// }
		
	}
	function scroll_func(e) {
		c_index.value = e.detail.current
		if(list_box.value[c_index.value].list.length === 0) {
			queryStateInitFunc()
			getList()
		}
	}
	const handle_info = ref(null)
	const handle_info_index = ref(0)
	function handle_func(item,i) {
		// handle_info.value = item
		// handle_info_index.value = i
		// inputDialog.value.open()
	}
	function finishFunc() {
		// api.todoFinished
		uni.showModal({
			title:'温馨提示',
			content:"确定要完成该事务吗？",
			success:async function(res) {
				if(res.confirm) {
					const res_ = await api.todoFinished({
						id:handle_info.value.ID,
						state:1
					})
					uni.showToast({
						title:res_.msg,
						icon:"error",
						duration:2000,
						mask:true,
						success() {
							if(res_.code === 0) {
								list_box.value[c_index.value].list.splice(handle_info_index.value,1)
								list_box.value[0].list = []
								inputDialog.value.close()
							}
						}
					})
				}
			}
		})
	}
</script>
<template>
	<view class="todoBox page-box">
		<cc-newsTabs :tabArr="tabArr" :o_index="c_index" @tabChange="tabChange"></cc-newsTabs>
		<swiper :current="c_index" @change="scroll_func" :style="{'--size':swiper_h+'px'}" class="swiper" circular :indicator-dots="false" :autoplay="false" >
			<swiper-item v-for="(item1) in list_box" :key="item1">
				<view class="todoBox">
					<template v-if="item1.list.length>0" >
						<view v-for="(item,i) in item1.list" @tap="handle_func(item,i)" :key="i" class="td-item swiper-item uni-bg-green">
							<view class="td-content text-ellipsis-2">
								<!-- {{item.content}} -->
								<image
								style="width: 100%;"
									:src="item.content"
									mode="widthFix"
								/>
							</view>
							<view class="td-info small-text">
								{{util.timestampToDate(item.CreatedAt)}}
							</view>
						</view>
					</template>
					<template v-else>
						<emptyCard />
					</template>
					
				</view>
			</swiper-item>
		</swiper>
		<uni-popup ref="inputDialog" >
			<view class="pop-box">
				<view class="pb-title">注意事项</view>
				<view class="pb-content">
					<view class="pb-item">
						<!-- <view class="pb-item-left">事项说明</view> -->
						<view class="pb-item-right">
							{{handle_info?.content}}
						</view>
					</view>
					<!-- <view class="pb-item">
						<view class="pb-item-left">创建时间</view>
						<view class="pb-item-right">
							{{util.timestampToDate(handle_info?.CreatedAt)}}
						</view>
					</view> -->
					<!-- <view v-if="!handle_info?.state" class="pb-item pb-item-btn" @tap="finishFunc">完成该事务</view> -->
				</view>
			   
			</view>
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	.swiper{
		height: var(--size);
	}
	.todoBox{
		padding: 20rpx;
		.td-item{
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eaeaea;
			margin-bottom: 20rpx;
			.td-content{
				padding-bottom:20rpx;
			}
			.td-info{
				text-align: right;
			}
		}
	}
	.pb-item-btn{
		padding: 20rpx 0;
		text-align: center;
		color: white;
		background: #26758d;
		justify-content: center;
		width: 66%;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	.pop-box{
		.pb-title{
			text-align: center;
			margin-bottom: 40rpx;
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: 900;
		}
		background-color: white;
		padding: 20rpx;
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	.pb-item{
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		// justify-content: space-between;
		.pb-item-left{
			width: 30%;
			color: gray;
		}
		.pb-item-right{
			position: relative;
			margin-left: 10rpx;
			width: 75%;
		}
	}
	:deep(){
		.uni-popup__wrapper{
			width: 100%;
		}
	}
</style>