cloud_admin_app/pages/order/swaporder/order.vue

<template>
	<!-- v-if="orderShow==true" -->
	<view class="orderBox">
		<view class="select padding-lr-sm margin-top-sm margin-bottom-xs">
			<view class="padding-lr-xs flex">
				订单状态:

				<picker @change="bindPickerChange" :value="picker_array_index" :range="picker_array">
					<view class="uni-input">{{picker_array[picker_array_index]}}</view>
				</picker>
				<view class="padding-lr-xs">
					<text class="lg text-gray cuIcon-unfold "></text>
				</view>
			</view>

			<!-- <u-datetime-picker v-model="chooseValue" mode="year-month" :show="timeShow" @confirm="confirm"
				@cancel="cancel" :immediateChange='true'>
			</u-datetime-picker> -->
			<!-- <uv-action-sheet ref="actionSheet" :actions="actionSheetlist" title="" :closeOnClickOverlay="false"
				:closeOnClickAction="false" </uv-action-sheet> -->

		</view>
		<view>
			<view class="cu-card" v-for="(item,index) in orderData.orderList" :key="item.id"
				v-if="orderData.orderList!=null">
				<view class="cu-item shadow" @click="goDetail(item)">
					<view>
						<view class="flex solid-bottom padding-sm justify-between flex-wrap">
							<view class="orderNumber">{{item.stationNo}}</view>
							<view class="">
								<view class="refunded refunded_0" v-if="item.payStatus == 0">
									待确认
								</view>
								<view class="refunded refunded_1" v-if="item.payStatus == 1">
									待支付
								</view>
								<view class="refunded refunded_2" v-if="item.payStatus == 2">
									已完成
								</view>
								<view class="refunded refunded_3" v-if="item.payStatus == 3">
									支付失败
								</view>
								<view class="refunded refunded_4" v-if="item.payStatus == 4">
									已退款
								</view>
								<view class="refunded refunded_5" v-if="item.payStatus == 5">
									已挂起
								</view>
								<view class="refunded refunded_6" v-if="item.payStatus == 6">
									已关闭
								</view>
							</view>
						</view>
						<view>
							<view class="payMoney padding-lr-sm padding-bottom-sm">
								<view class="margin-top-sm">车牌号：{{item.vehicleNo?item.vehicleNo:'--'}}
								</view>
								<view class="margin-top-sm">付款金额：{{item.actualPay?item.actualPay / 100:'0'}}元</view>
								<view class="margin-top-sm">交易时间：{{item.orderTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</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 {
		globalStore
	} from '../../../stores/globalData.js';
	const logIn = globalStore()

	import {
		useCounterStore
	} from '@/stores/counter.js';
	const detailBack = useCounterStore()
	const picker_array_index = ref(7)
	const picker_array = ref(['待确认', '待支付',
		'已完成',
		'支付失败',
		'已退款',
		'已挂起',
		'已关闭',
		'全部'
	])
	const orderShow = ref() //判断是否登录展示订单
	const orderData = reactive({ //请求的订单列表
		orderList: [],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完
	const chooseValue = ref(Date.now());
	const timeShow = ref(false)
	const chooseDay = ref()
	onShow(async () => {
		orderShow.value = logIn.isLogin //有无数据展示判断
		// if (detailBack.value == true) {
		// chooseDay.value = await getDay(0)//获取当前时间年月
		// page.value = 1 //点击查询页面请求第一页
		// getOrder(0, picker_array_index.value)
		// } else {
		// console.log(chooseValue._rawValue,'chooseValue._rawValue.');
		// chooseValue._rawValue=chooseValue._value=Date.now()
		//    console.log(chooseValue,chooseValue.value,'llllllllllll',chooseValue._rawValue) 

		// }
		page.value = 1
		getOrder(0, picker_array_index.value)
	})
	onTabItemTap(async (e) => {
		// console.log(e);
		if (e.index == 1) {
			if (!uni.getStorageSync("userInfo")) {
				uni.showToast({
					title: '请先完成登录',
					duration: 2000,
					icon: 'error'
				});
				return;
			} else {
				chooseDay.value = await getDay(0)
				page.value = 1
				getOrder(0, picker_array_index.value)
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 0 // 滚动动画的时长
				})
			}
		}
	})
	onLoad(async () => {
		chooseDay.value = await getDay(0) //获取当前时间年月
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else {
			getOrder(0, picker_array_index.value)
		}

	})
	onUnload(() => {
		// console.log('销毁');
	})
	onHide(async () => {
		// detailBack.value = false
		// page.value = 1
		// console.log('隐藏');
	})
	const bindPickerChange = (data) => {
		// console.log(data,'data');
		picker_array_index.value = data.detail.value
		getOrder(0, data.detail.value)
	}

	onPullDownRefresh(async () => {
		chooseDay.value = await getDay(0)
		page.value = 1
		getOrder(0, picker_array_index.value)
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	onReachBottom(async () => {
		// console.log(totalPages.value, 'totalPages.value');
		if (page.value < totalPages.value) {
			page.value += 1
			await getOrder(1, picker_array_index.value)
			orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
		} else {
			uni.$u.toast('没有更多啦');
		}
	})
	const getOrder = async (type, data) => {

		let params = {
			pageNo: page.value,
			pageSize: 10,
			payStatus: data
		}
		if (data == 7) {
			delete params.payStatus
		}
		await uni.$request({
			url: config.baseUrl + 'app-api/cloud/swapOrder/page',
			method: 'GET',
			data: params
		}).then(res => {
			// console.log(res, '==========>');
			if (type == 1) {
				orderData.orderAskIng = res.data.data.list //触底加载的列表
			} else {
				orderData.orderList = res.data.data.list //渲染的列表
			}
			// console.log(orderData.orderList);
			totalPages.value = res.data.data.total //总页数
		}).catch((err) => {
			uni.showToast({
				title: '订单加载失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const confirm = () => {
		setTimeout(() => {
			let n = new Date(chooseValue._rawValue)
			let year = n.getFullYear()
			let month = n.getMonth() + 1
			console.log('month: ', month, toString.call(month));
			month = month < 10 ? ('0' + month) : month
			let res = year + '-' + month
			chooseDay.value = res
			timeShow.value = false
			page.value = 1 //点击查询页面请求第一页
			getOrder(0, res)
		}, 500)
	}
	const cancel = () => {
		timeShow.value = false
	}
	const actionSheet = ref(null)
	const getMouth = () => {
		console.log('1');
		// timeShow.value = true
		actionSheet.value.open()
	}
	const getDay = (day) => {
		var today = new Date();
		var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
		today.setTime(targetday_milliseconds);
		var tYear = today.getFullYear();
		var tMonth = today.getMonth();
		var tDate = today.getDate();
		tMonth = doHandleMonth(tMonth + 1);
		tDate = doHandleMonth(tDate);
		// return tYear + "-" + tMonth + "-" + tDate;
		return tYear + "-" + tMonth;
	}
	const doHandleMonth = (month) => {
		var m = month;
		if (month.toString().length == 1) {
			m = "0" + month;
		}
		return m;
	}
	const goDetail = (e) => {
		uni.navigateTo({
			url: './detailInf/detailInf?details=' + JSON.stringify(e)
		})
	}
</script>
<style lang="scss" scoped>
	.orderBox {
		width: 100%;
		background: #F7F8FA;
	}

	.select {
		height: 40rpx;
		font-size: 28rpx;
		color: #171717;
		background: #F7F8FA;
	}

	.payState {
		padding: 4rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 8px;
		color: #4C91FF;
		font-size: 28rpx;
	}

	.payMoney {
		display: flex;
		flex-direction: column;
	}

	.orderNumber {
		font-weight: 500;
		line-height: 50rpx;
	}

	.nonePage {
		width: 100%;
		height: calc(100vh - 70rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.non-payment {
		color: #FF7B0E;
		border: 1px solid #FF7B0E;
		padding: 4rpx 16rpx;
		border-radius: 8px;
		font-size: 28rpx;
	}

	.refunded {
		padding: 4rpx 16rpx;
		border-radius: 8px;
		font-size: 22rpx;
	}

	.refunded_0 {
		color: #06efef;
		border: 1px solid #06efef;
	}
	.refunded_1 {
		color: #00aaff;
		border: 1px solid #00aaff;
	}
	.refunded_2 {
		color: #00aa00;
		border: 1px solid #00aa00;
	}
	.refunded_3 {
		color: #aa0000;
		border: 1px solid #aa0000;
	}
	.refunded_4 {
		color: #ffff00;
		border: 1px solid #ffff00;
	}
	.refunded_5 {
		color: #55557f;
		border: 1px solid #55557f;
	}
	.refunded_6 {
		color: #aaaa7f;
		border: 1px solid #aaaa7f;
	}

	.noneBg {
		width: 336rpx;
		height: 452rpx;
		background: url('../../../static/order/order.png') no-repeat;
		background-size: 100% 100%;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>