eaXing_app/pagesCenter/billingPage/billingPage.vue

<template>
	<view class="main-page">
		<!-- <view class="message-box">您有一笔58.26元的换电订单未支付，请您尽快支付</view> -->
		<view>
			<view class="content-title">
				<view class="content-name">
					<view class="orders-line"></view>
					<view>{{$t('index.Bill_details')}}</view>
				</view>
				<view>
					<text class="invoice" @click="goInvoice">{{$t('index.Issue_invoice')}}</text>
				</view>
			</view>
			<view>
				<view class="content-list" v-for="(item,index) in orderData.orderList" :key="item.id">
					<view>
						<view class="station-name">{{item.stationName==null?'--':item.stationName}}</view>
						<view class="station-time">{{item.createTime==null?'--':item.createTime}}</view>
					</view>
					<view class="orders-price">￥{{item.totalFee==null?'0':item.totalFee}}</view>
				</view>
			</view>
		</view>
		<!-- position bottom -->
		<!-- <view class="footer-box">
			<view>
				<u-button color="#4C91FF" shape='circle' @click="www">查看未支付订单</u-button>
			</view>
		</view> -->
		
	</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,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onUnload,
		onHide,
		onTabItemTap,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
   import { useI18n } from 'vue-i18n'//zz
    const { t } = useI18n()//zz
	// 
	const orderData = reactive({ //请求的订单列表
		orderList: [
			{
				stationName: 0,
				createTime: 0,
				totalFee: 0
			}
		],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完

	// 
	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(t('index.No_more'));
		}
	})


	// 
	const getOrder = async (type) => {
		await uni.$request({
			url: config.wxUrl_pay + 'app-rest/order/pageSwapOrder?page=' +
				page.value + "&size=" + 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.totalPage //总页数
		}).catch((err) => {
			uni.showToast({
				title: t('index.Load_failure'),
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const goInvoice = () => {
		uni.navigateTo({
			url: './issueInvoice/issueInvoice'
		})
	}
</script>

<style lang='less' scoped>
	.main-page {
		/* background: #F5F7FA; */
		position: relative;

	}

	.message-box {
		height: 72rpx;
		line-height: 72rpx;
		margin: 16rpx 32rpx;
		background: #F5F7FA;
		box-shadow: -2px 2px 8px 0px #7AA7D026;
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
		color: #4C91FF;
	}

	.orders-line {
		width: 4rpx;
		height: 28rpx;
		margin-right: 8rpx;
		border-left: 4rpx solid #4C91FF;
		border-radius: 4rpx;

	}

	.content-title {
		display: flex;
		justify-content: space-between;
		margin: 16rpx 32rpx 24rpx 32rpx;
	}

	.content-name {
		font-size: 32rpx;
		font-weight: 400;
		text-align: left;
		color: #171717;
		display: flex;
		align-items: center;
	}

	.invoice {
		font-size: 28rpx;
		font-weight: 400;
		text-align: right;
		color: #4C91FF;

	}

	.content-list {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		box-shadow: -2px 2px 8px 0px #7AA7D026;
		margin-bottom: 16rpx;
	}

	.station-name {
		color: #171717;
		font-size: 28rpx;
		font-weight: 400;
	}

	.station-time {
		font-size: 20rpx;
		font-weight: 400;
		color: #808080;
		margin-top: 8rpx;
	}

	.orders-price {
		color: #4C91FF;
		font-size: 32rpx;
		font-weight: 400;
		text-align: right;
		line-height: 76rpx;
	}

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

		/deep/.u-button {
			height: 72rpx !important;
		}
	}
	.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>