cloud_admin_app/pagesCenter/billingPage/invoiceTitle/invoiceTitle.vue

<template>
	<view>
		<!-- 发票抬头 -->
		<view class="title-box">
			<view class="content">
				<view class="title-main" @longpress="longpress(item)" @touchend="touchend"
					v-for="(item,index) in orderData.orderList" :key="item.id">
					<view @click="goDetail(item,0)">
						<view class="title-name">{{item.invoiceHeader}}</view>
						<view >
							<view class="title-word">{{item.taxId}}</view>
						</view>
					</view>
					<view class="goAdd">
						<template #right>
							<u-icon @click.stop="goDetail(item,1)" name="arrow-right"></u-icon>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- position bottom -->
		<view class="footer-box">
			<view>
				<u-button color="#4C91FF" shape='circle' @click="goAddInvoice">添加发票抬头</u-button>
			</view>
		</view>
		<!-- modal -->
		<u-modal :show="show" title="删除确认" :showCancelButton="true" @confirm="confirm" @cancel="cancel"
			confirmText="确定">
			<view class="model-inf">是否确定删除{{delName}}</view>
		</u-modal>
	</view>
	<view v-if="orderData.orderList == null || orderData.orderList.length == 0">
		<view class="nonePage">
			<view class="noneBg">
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,getCurrentInstance 
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onUnload,
		onHide,
		onTabItemTap,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	const show = ref(false);
	const orderData = reactive({ //请求的订单列表
		orderList: [],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完
	const islongPress = ref(false) //长按记录变量
	const delName = ref()
	const delList=ref()
	let pages = getCurrentPages() 
	// 
	onShow(() => {
		page.value = 1
		getOrder(0)
	})
	onReachBottom(async () => {
		if (page.value < totalPages.value) {
			page.value += 1
			await getOrder(1)
			orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
		} else {
			uni.$u.toast('没有更多啦');
		}
	})

	// 
	const touchend = () => {
		setTimeout(() => {
			islongPress.value = false
		}, 200)
	}

	const goDetail = (e, type) => {
		if (islongPress.value == false) {
			if (type == 0) {
				setTimeout(function() {
					     let prevPage = pages[pages.length -2] 
						 prevPage.onShow(e);
					uni.navigateBack({
						delta: 1,
					});
				}, 500)
			} else {
				uni.navigateTo({
					url: '../addInvoice/addInvoice?detail=' + JSON.stringify(e)
				})
			}

			console.log("不是长按事件");
		} else if (islongPress.value == true) {
			console.log("长按事件");
		}
	}
	const getOrder = async (type) => {
		await uni.$request({
			url: config.wxUrl_pay + 'pay/invoice/selectList?pageNo=' +
				page.value + "&pageSize=" + 10
		}).then(res => {
			console.log(res, '==========>');
			if (type == 1) {
				orderData.orderAskIng = res.data.data.data //触底加载的列表
			} else {
				orderData.orderList = res.data.data.data //渲染的列表
			}
			totalPages.value = res.data.data.total //总页数
		}).catch((err) => {
			uni.showToast({
				title: '加载失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const longpress = (e) => {
		show.value = true
		delList.value=e
		delName.value = e.invoiceHeader
		console.log("长按事件", e);
	}
	const confirm = () => {
		show.value = false
		uni.$request({
			url: config.wxUrl_pay + "pay/invoice/delHeader?id="+delList.value.id,
			method: 'DELETE',
		}).then(res => {
			uni.$u.toast(res.data.msg)
			page.value = 1
			getOrder(0)
			console.log(res.data.msg, '=======?');
		})
	}
	const cancel = () => {
		show.value = false
	}
	const goAddInvoice = () => {
		uni.navigateTo({
			url: '../addInvoice/addInvoice'
		})
	}
</script>

<style lang="less" scoped>
	.title-box {
		padding-top: 16rpx;

	}

	.content {
		background: #fff;
		padding: 0 32rpx;
	}

	.title-main {

		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 32rpx 0;
	}

	.title-name {
		font-size: 30rpx;
		font-weight: 400;
		text-align: left;
		color: #171717;

	}

	.title-main:last-child {
		border-bottom: 0;
	}

	.title-word {
		font-size: 24rpx;
		font-weight: 400;
		color: #808080;
		margin-top: 8rpx;
	}

	/deep/.u-icon__icon {
		color: #808080 !important;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 16rpx 32rpx;
		background-color: #fff;
		border-top: 1px solid #eee;

		/deep/.u-button {
			height: 72rpx !important;
		}
	}
	.goAdd{
	}
	.nonePage {
		width: 100%;
		height: calc(100vh - 80rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.noneBg {
		width: 336rpx;
		height: 452rpx;
		background: url('@/static/user/none.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
<style lang="less">
	page {
		background-color: #F2F6F7;
		padding-bottom: 120rpx;
	}
</style>