uniProject/pages/admin/Hetong/sanfangHetong.vue

<template>
	<view class="admin-sfht-list">
		<view class="phone-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">三方合同</text>
			<uni-icons class="nav-bar-right-icon bar-ml10" type="search" size="20" @click="toggle('top')"></uni-icons>
		</view>
		<view class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text class="select-text">{{data.statusText}}</text>
				<icon class="select-jt-default" />
			</view>
		</view>

		<view class="list-new-btn-box">
			<button type="default" class="phone-green-btn" @click="handleAdd">新增合同</button>
		</view>

		<!-- 状态面板 -->
		<view class="all-type-box" v-show="isOpen" @click="clickAlltype">
			<view class="phone-radio-group data-check-radio-group">
				<!-- 技能块展示 -->
				<view v-for="item in listStatus" @click="handleSelectStatus(item)" :key="item.status"
					class="phone-radio-item">
					{{ item.statusText }}
				</view>
			</view>
		</view>

		<view>
			<search-dialog ref="searchDialogRef" :shenfen="shenfen" @search-btn="dialogSearchBtn"
				@reset-search="dialogSearchReset"></search-dialog>
		</view>

		<!-- 无限滚动容器 -->
		<view>
			<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
				:refresher-threshold="50" @scrolltolower="onScrolltolower" refresher-background="transparent"
				@refresherrefresh="onRefresh">
				<uni-list class="sfht-scroll-view">
					<uni-list-item v-for="item in data.list" class="sfht-list-item-box">
						<template v-slot:body>
							<view class="sfht-card-box">
								<view class="card-head-row">
									<view @click="handleDelete(item)" class="del-btn-box">
										<icon class="del-btn"></icon>
									</view>
									<button type="default" class="phone-green-btn ht-head-btn">推送</button>
									<button type="default" class="phone-green-btn ht-head-btn"
										@click.stop="handlePreview(item)">预览</button>
									<button type="default" class="phone-white-btn ht-head-btn"
										@click.stop="handleEditor(item)">编辑</button>
								</view>
								<view class="card-body-row">
									<view class="body-row">
										<view class="title-text">
											<icon class="user-icon"></icon>家政人员名称
										</view>
										<view class="value-text">{{item.realName}}</view>
									</view>
									<view class="body-row">
										<view class="title-text">
											<icon class="idcard-icon"></icon>客户名称
										</view>
										<view class="value-text">{{item.khName}}</view>
									</view>
								</view>
								<view class="card-body-row">
									<view class="body-row">
										<view class="title-text">
											<icon class="date-icon"></icon>合同开始时间
										</view>
										<view class="value-text">{{item.startDate}}</view>
									</view>
									<view class="body-row">
										<view class="title-text">
											<icon class="date-icon"></icon>合同结束时间
										</view>
										<view class="value-text">{{item.endDate}}</view>
									</view>
									<view class="body-row">
										<view class="title-text">
											<icon class="htzt-icon"></icon>合同状态
										</view>
										<view class="status-0" v-if="item.status== 0">待签字</view>
										<view class="status-1" v-if="item.status== 1">待审核</view>
										<view class="status-2" v-if="item.status== 2">有效</view>
										<view class="status-3" v-if="item.status== 3">失效</view>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="data.state" @click="getMore(0)"
						:contentText="data.contentText"></uni-load-more>
				</uni-list>
			</scroll-view>
		</view>

		<!-- 删除子账号 -->
		<common-dialog ref="commonDialogRef" title="删除确认" content="你确定要执行这个操作吗"
			@confirm-btn="handleDeleteConfirm"></common-dialog>

		<customTabbarAdminVue :current-tab="1"></customTabbarAdminVue>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import * as httpApi from "@/api/sanfang.js"
	import searchDialog from "./components/search.vue";
	import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import {
		getSanfangDelete
	} from "../../../api/sanfang";

	const searchDialogRef = ref(null);
	const commonDialogRef = ref(null)
	const data = reactive({
		status: 0,
		statusText: '待签字',
		state: 'more',
		list: [], // 考试列表
		loading: false,
		jzRealName: '',
		khRealName: '',
		page: 0,
		size: 10,
	})
	const isOpen = ref(false)

	const active = ref(null);

	const listStatus = ref([{
			statusText: '有效',
			status: 2,
		},
		{
			statusText: '待审核',
			status: 1,
		},
		{
			statusText: '待签字',
			status: 0,
		}, {
			statusText: '失效',
			status: 3,
		}
	])
	const shenfen = ref(null);

	function toggle() {
		searchDialogRef.value.handleShow();
	}

	function goUpPage() {
		uni.redirectTo({
			url: '/pages/admin/ShouYe/shouye'
		})
	}

	function clickAlltype() {
		isOpen.value = !isOpen.value;
	}

	function handleSelectStatus(item) {
		data.status = item.status;
		data.statusText = item.statusText;

		onRefresh();
	}

	function handleAdd() {
		uni.navigateTo({
			url: '/pages/admin/Hetong/addSanfangHetong'
		})
	}

	function handleDelete(item) {
		active.value = item;
		commonDialogRef.value.handleShow();
	}

	function handleDeleteConfirm() {
		httpApi.getSanfangDelete({
			id: active.value.id
		}).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: '成功'
				})
				onRefresh();
			} else {
				uni.showToast({
					title: '失败'
				})
			}
		})
	}

	function handleEditor(item) {
		uni.navigateTo({
			url: `/pages/admin/Hetong/addSanfangHetong?flag=editor&id=${item.id}`
		})
	}

	function handlePreview(item) {
		uni.navigateTo({
			url: `/pages/admin/Hetong/previewHetong?id=${item.id}`
		})
	}

	function dialogSearchBtn(opt, searchInput) {
		if (opt == 2) {
			data.khRealName = searchInput
			data.jzRealName = '';
		} else {
			data.khRealName = '';
			data.jzRealName = searchInput
		}

		onRefresh()
	}

	function dialogSearchReset() {
		data.jzRealName = '';
		data.khRealName = '';
	}

	function onScrolltolower() {
		getMore()
	}

	function onRefresh() {
		if (data.loading) return;
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	function refreshData() {
		const opt = {
			jzRealName: data.jzRealName,
			khRealName: data.khRealName,
			page: data.page,
			size: data.size,
			status: data.status
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		httpApi.getSanfangList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
			} else {
				data.state = 'no-more';
			}
		}).catch(err => {
			data.state = 'more';
		}).finally(() => {
			data.loading = false;
		})
	}

	function getMore() {
		const opt = {
			jzRealName: data.jzRealName,
			khRealName: data.khRealName,
			page: data.page,
			size: data.size,
			status: data.status
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		httpApi.getSanfangList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;
			if (res.data.total > data.list.length) {
				data.state = 'more';
			} else {
				data.state = 'no-more';
			}
		}).catch(err => {
			data.state = 'more';
		}).finally(() => {
			data.loading = false;
		})
	}

	onLoad((options) => {
		console.log('options', options)
		const {
			from,
			jzName,
			khName
		} = options;
		if (jzName) {
			data.jzRealName = jzName;
			shenfen.value = 'jz'
			nextTick(() => {
				searchDialogRef.value.handleSetValue(jzName)
			})
		}
		if (khName) {
			data.khRealName = khName
			shenfen.value = 'kh'
			nextTick(() => {
				searchDialogRef.value.handleSetValue(khName)
			})
		}
	})

	onShow(() => {
		onRefresh()
	})
</script>

<style>

</style>