JM-MiniApp/pages/index/done.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()
	import emptyCard from "@/components/emptyCard.vue"
	// 生命周期
	onLoad((e) => {
		if(uni.getStorageSync('userInfo')) {
			user_info.value = JSON.parse(uni.getStorageSync('userInfo'))
		}
		c_index.value = parseInt(e.state_index)
		list_box.value[c_index.value].queryParams.isFinish = c_index.value?0:1	
		if(store.systemInfo) {
			swiper_h.value = store.systemInfo.windowHeight
		}
		getList()
	})
	onPullDownRefresh(()=> { // 下拉刷新
		init()
		getList()
	})
	onReachBottom(() => { // 上滑触底
		list_box.value[c_index.value].queryParams.page++	
		getList()
	})
	// 变量
	const user_info = ref(null)
	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,
				isFinish:1
			}
		},
		{
			show_index:1,
			state:0,
			list:[],
			queryParams:{
				page:1,
				pageSize:10,
				isFinish:1
			}
		}
	])
	const queryParams = ref({
		page:1,
		pageSize:10,
		isFinish:1
	})
	const c_index = ref(-1)
	const tabArr = ref([
		{
		            name: '已完成',
		            id: '1',
		},
		{
		            name: '待完成',
		            id: '2',
		}
	])
	// 函数
	function subscribeFunc() {
		uni.requestSubscribeMessage({
	         tmplIds: ['PgxoZOOSDgBcmIGd_EVLDnYUmL3eu6NQTAZCsHQeuWY'],
	         success: (res) => {
	             console.log(res);
	         },
			fail(res) {
				 console.log(res);
			}
	    })
	}
	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.isFinish = c_index.value?0:1
	}
	async function getList() {
		uni.showLoading({
			mask:true
		})
		list_box.value[c_index.value].queryParams.userId = user_info.value?.userId || 0
		const res = await api.getTodoist(list_box.value[c_index.value].queryParams,user_info.value?.userId || 0)
		uni.hideLoading();
		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)
					}
				}
			})
		}
	}
	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()
		subscribeFunc()
	}
	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,
						isFinish:1
					})
					uni.showToast({
						title:res_.msg,
						icon:"success",
						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,i1) in list_box">
				<view class="todoBox">
					<view v-for="(item,i) in item1.list" v-if="item1.list.length>0" @tap="handle_func(item,i)" class="td-item swiper-item uni-bg-green">
						<view class="td-content text-ellipsis-2">
							{{item.content}}
						</view>
						<view class="td-info small-text">
							{{util.timestampToDate(item.CreatedAt)}}
						</view>
					</view>
					<emptyCard v-else></emptyCard>
				</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">
							{{handle_info?.remindPeriod?'手术前':'手术后'}}
						</view>
					</view>
					<view class="pb-item">
						<view class="pb-item-left">用药频率</view>
						<view class="pb-item-right">
							{{handle_info?.frequency}}
						</view>
					</view>
					<view class="pb-item">
						<view class="pb-item-left">提醒时间</view>
						<view class="pb-item-right">
							{{handle_info?.remindTime}}
						</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?.isFinish" 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>