cloud_admin_app/pagesCenter/subscribe/subscribe.vue

<template>

	<view class="orderBox" v-if="orderShow==true">
		<view>
			<view class="cu-card" v-for="(item,index) in orderData.orderList" :key="item.id"
				v-if="orderData.orderList.length!=0">
				<view class="cu-item shadow">
					<view>
						<view class="flex justify-between flex-wrap">
							<view class="orderNumber">{{item.stationName}}</view>
							<view class="" >
								<view v-if="item.status == 1"
									:class="{'payState' : item.auditStatus== 1 ,'non-payment' : item.auditStatus== 0,'refunded': item.auditStatus== 2}">
									{{['待审核','审核通过','审核驳回'][item.auditStatus === '' ? '--' : item.auditStatus] }}
								</view>
								<view class="cancelState" v-else>
									预约取消
								</view>
							</view>
						</view>
						<view>
							<view class="payMoney ">
								<view class=" order-time ">预约时间:{{item.startTime.substr(0,16).replace(/-/g, '.')}} - {{item.endTime.substr(0,16).replace(/-/g, '.')}}
								</view>
								<view class="flex justify-between ">
									<view class="">发起时间:{{item.createTime}}</view>
									<view class="flex details">
										<view class="cancel-order" @click="cancelOrder(item.id)" v-if=" item.status== 1 && item.auditStatus==0 && item.expired==false">
											取消预约</view>
										<view @click="goDetail(item.stationNo,item.id,item.status,item.expired,item.auditStatus)">查看详情</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="cancelShow" title="取消预约" :showCancelButton="true" @confirm="orderConfirm" @cancel="orderCancel"
			confirmText="确定">
			<view class="cancel-inf">是否取消本次换电预约</view>
		</u-modal>
	</view>
	<view v-if="orderShow==false || 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,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		globalStore
	} from '../../stores/globalData.js';
	const logIn = globalStore()

	const orderShow = ref() //判断是否登录展示订单
	const orderData = reactive({ //请求的订单列表
		orderList: [],
		orderAskIng: []
	})
	const page = ref(1) //触底加载增加的页数
	const totalPages = ref() //总页数，用于判断是否加载完


	const cancelShow = ref(false)
	const orderId = ref()


	onShow(async () => {
		orderShow.value = logIn.isLogin //是否登录 有无数据展示判断
		page.value = 1
		getOrder(0)
	})

	onLoad(async () => {

	})
	onUnload(() => {
		// console.log('销毁');
	})
	onHide(async () => {

	})

	onReachBottom(async () => {
		// console.log(totalPages.value, 'totalPages.value');
		if (page.value < totalPages.value) {
			page.value += 1
			await getOrder(1)
			orderData.orderList = orderData.orderList.concat(orderData.orderAskIng)
		} else {
			uni.$u.toast('没有更多啦');
		}
	})
	onPullDownRefresh(async () => {
		orderShow.value = logIn.isLogin
		page.value = 1
		getOrder(0)
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	const goDetail = (station,orderId,status,expired,auditStatus) => {
		let flag;
		if(status!= 0 && expired==false && auditStatus==0){
			flag=true
		}else{
			flag=false
		}
		
		uni.navigateTo({
			url: '../../pages/index/stationDetails/stationDetails?station=' + JSON.stringify(station)+
			'&appointment=' + JSON.parse(1)+'&appointmentId=' + JSON.stringify(orderId)+'&appointmentFlag=' + JSON.stringify(flag)
		})

	}
	const getOrder = async (type) => {
		let pageData = {
			pageSize: 10,
			pageNum: page.value
		}
		await uni.$request({
			url: config.wxUrl_baseinfo + 'app-rest/stationReservation/pageFromApp',
			method: 'POST',
			data: pageData
		}).then(res => {
			if (type == 1) {
				orderData.orderAskIng = res.data.data.list //触底加载的列表
			} else {
				orderData.orderList = res.data.data.list //渲染的列表
			}
			totalPages.value = res.data.data.pages //总页数
		}).catch((err) => {
			uni.showToast({
				title: '列表加载失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const orderConfirm = () => {
		cancelShow.value = false
		let data = {
			status: 0,
			id: orderId.value
		}
		uni.$request({
			url: config.wxUrl_baseinfo +
				"app-rest/stationReservation/update",
			method: 'POST',
			data: data,
		}).then(res => {
			console.log(res, 'nnnnn');
			uni.$u.toast(res.data.msg)
			page.value = 1
			getOrder(0)
		}).catch(err => {
			// uni.$u.toast(err.data.msg)
		})
	}

	const cancelOrder = (data) => {
		cancelShow.value = true
		orderId.value = data
	}
	const orderCancel = () => {
		cancelShow.value = false
	}
</script>
<style lang="scss" scoped>
	.orderBox {
		width: 100%;
		background: #F7F8FA;
	}

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

	.payState {
		padding: 8rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 4px;
		color: #4C91FF;
		font-size: 20rpx;
	}
	.cancelState{
		padding: 8rpx 16rpx;
		border: 1px solid #26C3C0;
		border-radius: 4px;
		color: #26C3C0;
		font-size: 20rpx;
	}
	.payMoney {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
	}

	.orderNumber {
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
	}

	.order-time {
		margin-bottom: 16rpx;
	}

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

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

	.refunded {
		color: #F2634F;
		border: 1px solid #F2634F;
		padding: 8rpx 16rpx;
		border-radius: 4px;
		font-size: 20rpx;
	}

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

	.cu-card>.cu-item {
		margin: 0 0rpx 24rpx 0rpx;
		padding: 24rpx;
		box-shadow: -2px 2px 8px 0px #7AA7D026;
	}

	.details {
		font-size: 28rpx;
		font-weight: 400;
		color: #4C91FF;

	}

	.cancel-order {
		margin-right: 24rpx;
	}

	.cancel-inf {
		font-size: 28rpx;
		font-weight: 400;
		color: #808080;

	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>