uniProject/pages/admin/kehu/kehuList.vue

<template>
	<view class="admin-kehu-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 class="jiazheng-search-right">
				<view @click="updateTimeClick" :class="shaixuanStyleUpdate">
					<text>更新时间</text>
					<icon :class="updataJtClass" />
				</view>
				<view @click="luruTimeClick" :class="shaixuanStyleluru">
					<text>录入时间</text>
					<icon :class="luruJtClass" />
				</view>
			</view>
		</view>
		<view class="list-new-btn-box">
			<button type="default" class="phone-green-btn" @click="addKehu">新增客户</button>
		</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="kh-scroll-view">
		
				<uni-list-item v-for="item in data.list" class="ht-list-item-box">
					<template v-slot:body>
						<view class="kh-card-box">
							<view class="card-head-row">
								<view class="del-btn-box" @click.stop="delBtn(item)"><icon class="del-btn"></icon></view>
								<button type="default" class="phone-green-btn ht-head-btn"
									@click.stop="htBtn(item)">合同</button>
								<button type="default" class="phone-green-btn ht-head-btn"
									@click.stop="telBtn(item)">打电话</button>
								<button type="default" class="phone-white-btn ht-head-btn"
									@click.stop="editorBtn(item)">编辑</button>
							</view>
							<view class="card-body-row">
								<view class="body-row"><icon class="user-icon"></icon>{{item.realName}}</view>
								<view class="body-row"><icon class="tel-icon"></icon>{{item.userName}}</view>
								<view class="body-row" v-if="item.idcard"><icon class="idcard-icon"></icon>{{item.idcard}}</view>
								<view class="body-row" v-if="item.createTime"><icon class="data-icon"></icon>录入时间：{{item.createTime}}</view>
								<view class="body-row" v-if="item.updateTime"><icon class="data-icon"></icon>更新时间：{{item.updateTime}}</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>
		<!-- 查询组件 -->
		<search-dialog ref="searchDialogRef" @search-btn="dialogSearchBtn"
			@reset-search="dialogSearchReset"></search-dialog>
		<!-- 删除子账号 -->
		<common-dialog ref="commonDialogRef" :title="deleteTitle" :content="deleteConcent"
			@confirm-btn="deleteQuerenBtn"></common-dialog>
		<!-- 页面底端 -->
		<customTabbarClientVue></customTabbarClientVue>
	</view>
</template>

<script setup>
import {ref,reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import * as khApi from "@/api/kehu.js"
import searchDialog from "./components/search.vue";
import commonDialog from '@/components/dialog/commonDialog.vue';
import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
const searchDialogRef = ref(null);
// 排序
let updataJtClass = ref('');
let luruJtClass = ref('');
let shaixuanStyleUpdate = ref('saixuan-item-box');
let shaixuanStyleluru = ref('saixuan-item-box');
let isFirstClickUpdate = ref('true')
let isFirstClickluru = ref('true')

const data = reactive({
	khTel: '',
	khRealName: '',
	list: [], // 列表
	loading: false,
	page: 0,
	size: 10,
	sortRule: '', //排序规则（1降序，2升序
	sortType: '', //排序类型（1更新时间，2录入时间）
	state: 'more',
	contentText: {
		contentdown: '查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	}
})

// 删除
const commonDialogRef = ref(null)
const deleteTitle = ref('删除')
const deleteConcent = ref('你确定要执行这个操作吗')
const deletKhId = ref(null)
	
// 返回
function goUpPage() {
	uni.redirectTo({
		url: `/pages/admin/ShouYe/shouye`
	})
}
/********** 查询  **********/
function toggle() {
	searchDialogRef.value.handleShow();
}
function dialogSearchBtn(opt, searchInput) {
	if (opt == 2) {
		data.khRealName = searchInput
		data.khTel = '';
	} else {
		data.khRealName = '';
		data.khTel = searchInput
	}
	onRefresh()
}
function dialogSearchReset() {
	data.khTel = '';
	data.khRealName = '';
}

/********** 排序  **********/
function updateTimeClick() {
	data.sortType = 1
	const isFirst = isFirstClickUpdate.value == 'true';
	const isSecond = isFirstClickUpdate.value == 'false';
	if (isFirst) {
		shaixuanStyleUpdate.value = 'saixuan-item-box saixuan-active';
		updataJtClass.value = 'saixuan-jt-default';
		isFirstClickUpdate.value = 'false';
		data.sortRule = 1
	} else if (isSecond) {
		shaixuanStyleUpdate.value = 'saixuan-item-box saixuan-active';
		updataJtClass.value = 'saixuan-jt-click';
		isFirstClickUpdate.value = 'empty';
		data.sortRule = 2
	} else {
		shaixuanStyleUpdate.value = 'saixuan-item-box';
		updataJtClass.value = '';
		isFirstClickUpdate.value = 'true';
		data.sortRule = 0
	}
	data.page = 0;
	refreshData()
}

function luruTimeClick() {
	data.sortType = 2
	const isFirst = isFirstClickluru.value == 'true';
	const isSecond = isFirstClickluru.value == 'false';
	if (isFirst) {
		shaixuanStyleluru.value = 'saixuan-item-box saixuan-active';
		luruJtClass.value = 'saixuan-jt-default';
		isFirstClickluru.value = 'false';
		data.sortRule = 1
	} else if (isSecond) {
		shaixuanStyleluru.value = 'saixuan-item-box saixuan-active';
		luruJtClass.value = 'saixuan-jt-click';
		isFirstClickluru.value = 'empty';
		data.sortRule = 2
	} else {
		shaixuanStyleluru.value = 'saixuan-item-box';
		luruJtClass.value = '';
		isFirstClickluru.value = 'true';
		data.sortRule = 0
	}
	data.page = 0;
	refreshData()
}

/********** 新增  **********/
function addKehu(){
	uni.redirectTo({
		url: '/pages/admin/kehu/kehuInfo'
	})
}

/********** 查询  **********/
function onScrolltolower() {
		getMore()
}

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

function refreshData() {
	const opt = {
		sortType:data.sortType,
		sortRule:data.sortRule,
		userName: data.khTel,
		realName: data.khRealName,
		page: data.page,
		size: data.size,
		status: data.status
	}
	data.list = [];
	// 数学
	data.state = 'loading';
	data.page++;
	opt.page = data.page;
	khApi.getKehuList(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 = {
		sortType:data.sortType,
		sortRule:data.sortRule,
		userName: data.khTel,
		realName: 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;
	khApi.getKehuList(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 delBtn(item) {
	deletKhId.value = item.id;
	commonDialogRef.value.handleShow();
}
function deleteQuerenBtn() {
	khApi.getKehuDelete({
		ids: [deletKhId.value]
	}).then(res => {
		if (res.code == 0) {
			uni.showToast({
				title: '成功'
			})
			data.page = 0;
			refreshData();
		} else {
			uni.showToast({
				title: '失败'
			})
		}
	})
}

// 合同
function htBtn(data){
	uni.navigateTo({
		url: `/pages/admin/Hetong/sanfangHetong?khName=${data.realName}&from=kehu`
	})
}

// 打电话
function telBtn(data) {
	console.log('打电话data', data);
	if (data.userName) {
		uni.makePhoneCall({
			phoneNumber: data.userName
		});
	} else {
		uni.showToast({
			title: `无电话号`,
			icon: 'none',
			duration: 2000
		})
		return false
	}
}

// 编辑
function editorBtn(data){
	uni.redirectTo({
		url: `/pages/admin/kehu/kehuInfo?id=${data.id}&userId=${data.userId}`
	})
}

onLoad((options) => {
	getMore()
})
</script>

<style>

</style>