cloud_admin_app/pages/order/appointorder/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>
		</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.orderNo}}</view>
							<view class="">
								<!-- <view
									:class="{'refunded' : item.status== 1 ,'non-payment' : item.status== 0,'payState': item.status== 2}">
									{{['--', '预约成功','预约取消','预约失败','换电成功','换电失败','换电中','预约过期'][item.status === '' ? '--' : item.status] }}
								</view> -->
								<view class="refunded refunded_2" v-if="item.status == 1">
									预约成功
								</view>
								<view class="refunded refunded_5" v-if="item.status == 2">
									预约取消
								</view>
								<view class="refunded refunded_3" v-if="item.status == 3">
									预约失败
								</view>
								<view class="refunded refunded_2" v-if="item.status == 4">
									换电成功
								</view>
								<view class="refunded refunded_3" v-if="item.status == 5">
									换电失败
								</view>
								<view class="refunded refunded_0" v-if="item.status == 6">
									换电中
								</view>
								<view class="refunded refunded_6" v-if="item.status == 7">
									预约过期
								</view>
							</view>
						</view>
						<view>
							<view class="payMoney padding-lr-sm padding-bottom-sm">
								<view class="margin-top-sm">预约电池锁仓仓号：{{item.binNos?item.binNos:'--'}}
								</view>
								<view class="margin-top-sm">预约数量：{{item.batnum?item.batnum:'0'}}块</view>
								<view class="margin-top-sm">预约时间：{{item.startTime}}</view>
								<view class="margin-top-sm">预约到期时间：{{item.endTime}}</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 () => {
		// getOrder(0, picker_array_index.value)
		// getcarinfo()
		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 () => {
		page.value = 1
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else {
			getOrder(0, picker_array_index.value)
		}

	})
	const handle_goaddform = () => {
		uni.navigateTo({
			url: '/pages/order/appointorder/addform/addform'
		})
	}
	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/amt-order/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: '/pages/order/appointorder/detailInf/detailInf?details=' + JSON.stringify(e)
		})
	}
</script>
<style lang="scss" scoped>
	.orderBox {
		width: 100%;
		background: #F7F8FA;
	}

	.select {
		height: 80rpx;
		font-size: 28rpx;
		color: #171717;
		background: #F7F8FA;
		display: flex;
		align-items: center;
		position: relative;
	}

	.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;
		font-size: 24rpx;
	}
	.add_order_cls {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 30rpx;
		.btn_item {
			font-size: 24rpx;
		}
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>