hd-miniprogram/src/minePages/order/index.vue

<template>
	<up-navbar
	  title="我的订单"
	  bgColor="#00aa7f"
	  :autoBack="true"
	  leftIconColor="#fff"
	  titleStyle="color:#fff"
	  :placeholder="true"
	/>
	<view class="content">
		<view class="tabct">
			<up-tabs
			  :list="statelist" 
			  :scrollable="false"
			  @click="tabshand"
			  lineColor="#00aa00"
			/>
		</view>
		<view class="lisct">
			<view v-for="n in list" :key="n.orderNo" class="list">
				<view class="zoddu">
					<view>
						<view>订单号</view>
						<view style="font-size: 28rpx;">{{n.orderNo}}</view>
					</view>
					<view>
						<view>车牌号</view>
						<view>{{n.plateNum}}</view>
					</view>
					<view>
						<view>换电站</view>
						<view>{{n.stationName}}</view>
					</view>
					<view v-if="n.status == 6 || n.status == 7">
						<view>订单金额</view>
						<view>{{n.amount}}元</view>
					</view>
					<view>
						<view>订单状态</view>
						<view>{{dsta(n.status)}}</view>
					</view>
					<view>
						<view style="color: #5f5f5f;">{{n.orderTime}}</view>
						<view style="color: #009688;" @tap="getbz(n.orderNo)">查看换电详情</view>
					</view>
				</view>
				<view v-if="n.status == 6" class="qxyy" @tap="topay(`/minePages/payment/index?orderNo=${n.orderNo}&amount=${n.amount}&plateNum=${n.plateNum}&stationName=${n.stationName}`)">去支付</view>
			</view>
		</view>
		<up-empty v-if="list.length == 0" mode="list" text="暂无订单" />
		<up-loadmore v-else :status="status" color="#c0c4cc" lineColor="#c0c4cc" />
	</view>
	<up-popup
	 :show="show" 
	 closeable
	 mode="center" 
	 @close="bzclose"
	 >
		<view class="hdbzcont">
			<up-steps v-if="show" :current="bzlist.length" direction="column">
				<up-steps-item v-for="n in bzlist" :title="hdbzname(n.step)" :desc="n.stepTime" />
			</up-steps>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { orderlist,dzbzxq } from '@/utils/service'
	import { onShow,onReachBottom } from '@dcloudio/uni-app'
	
	onShow(() => {
		pageNo.value = 1
		list.value.splice(0)
		getlist()
	})
	
	function hdbzname(n:string|number) {
		if(n == 1){
			return '车辆进站'
		}else if(n == 2){
			return '车辆到达指定位置'
		}else if(n == 3){
			return '启动对中机构'
		}else if(n == 4){
			return '取新电池'
		}else if(n == 5){
			return '拆旧电池'
		}else if(n == 6){
			return '装新电池'
		}else if(n == 7){
			return '放旧电池'
		}else if(n == 8){
			return '换电完成'
		}
	}

	
	//订单状态  1-已创建，2-换电中，3-换电完成，4-充电中，5-充电完成，6-待结算，7-已完成，9-已取消
	const statelist = reactive([  
	    { name: '全部'}, 
		{ name: '进行中', status:'1,2,3,4,5' },
	    { name: '待支付', status:'6' },  
	    { name: '已完成', status:'7'}
	])
	
	let status = ref('nomore')  //loadmore loading
	
	let list = ref<any[]>([])
	let pageNo = ref(1)
	let stanum = ref('')
	//点击tabs
	function tabshand(n:any){
		pageNo.value = 1
		list.value.splice(0)
		stanum.value = n.status
		getlist()
	}
	function getlist() {
		let qsobj = {
			userId:uni.getStorageSync('wxuid'),
			pageSize:30,
			pageNo:pageNo.value
		}
		if(stanum.value){
			qsobj = Object.assign(qsobj,{status:stanum.value})
		}
		status.value = 'loading'
		orderlist(qsobj).then((rps:any) => {
			if(rps.data.total > 0){
				list.value = [...list.value,...rps.data.records] 
				if(list.value.length == rps.data.total){
					status.value = 'nomore'
				}else{
					status.value = 'loadmore'
					pageNo.value++
				}
			}
		})
	}
	//查看换电步骤
	let show = ref(false)
	let bzlist = ref<any[]>([])
	function getbz(orderNo:any) {
		bzlist.value.splice(0)
		show.value = true
		dzbzxq(orderNo).then((rps:any) => {
			bzlist.value = rps.data
		})
	}
	
	function bzclose(){
		show.value = false
	}
	
	function dsta(n:any) {
		if(n == 6){
			return '待支付'
		}
		if(n == 7){
			return '已完成'
		}
		if(n == 9){
			return '已取消'
		}
		return '进行中'
	}
	
	function topay(url:string) {
		uni.navigateTo({
			url
		})
	}
	
	//初始加载
	//getlist()
	
	onReachBottom(() => {
		if(status.value == 'loadmore'){
			getlist()
		}
	})
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.content{
		padding-bottom: 30rpx;
		.tabct{
			position: fixed;
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			background: #fff;
		}
		.lisct{
			padding-top: 130rpx;
			.list{
				margin:0 25rpx 40rpx;
				//padding: 25rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 10px 2px rgba(190, 190, 190, 0.5);
				background: #fff;
				.zoddu{
					padding: 25rpx;
					//margin-bottom: 30rpx;
					//padding-top: 20rpx;
					//border-top: 1px dashed #ccc;
					>view{
						display: flex;
						padding-bottom: 20rpx;
						justify-content: space-between;
						>view:last-child{
							color: #7a7a7a;
						}
					}
					>view:last-child{
						padding-bottom: 0;
					}
				}
				.qxyy{
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 0 0 20rpx 20rpx;
					color: #fff;
					text-align: center;
					background: #00aa00;
				}
			}
		}
	}
	.hdbzcont{
		box-sizing: border-box;
		width: 85vw;
		padding: 30rpx;
		background: #fff;
	}
</style>