energy-front/pages/home/mytrip/order.vue

<template>
	<view class="content">
		<headerTopsTips></headerTopsTips>
		<!--  -->
		<uni-nav-bar left-icon="left" title="我的行程" rightText="计费规则" backgroundColor="#e6eafa"
			@clickLeft="handlegoback" />
		<!--  -->
		<view class="main_info">
			<scroll-view scroll-y="true" class="scroll-Y" style="width: 100%; height: calc(100vh - 100px);">
				<view class="item_pay" v-for="(item,index) in content_list" :key="index">
					<view class="">
						<view>
							<text class="icon iconfont icon-time"></text>
							<text style="margin-left: 10rpx;">{{item.createTime}}</text>
						</view>
						<view class="">
							<text style="margin-left: 10rpx;font-size: 13px;">行程消费:</text>
							<text style="margin-left: 10rpx;font-size: 12px;">￥{{item.actualPay / 100}} 元</text>
							<text style="margin-left: 10rpx;font-size: 13px;">订单状态:</text>
							<text style="margin-left: 10rpx;font-size: 12px;" :class="handle_class_status(item.status)"
								@click="pay_order(item.id,item.status)">{{handle_status(item.status)}}</text>
						</view>
					</view>
					<view @click="handlegodetail(item)">
						>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import orderApi from '@/sheep/api/home/order';
	import mapnvueApi from '@/sheep/api/home/mapnvue';
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	import {
		ref
	} from 'vue'
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';

	onShow(() => {})
	const content_list = ref([])

	function handlegoback() {
		uni.navigateBack()
	}

	function handlegodetail(data) {
		let params = {
			rideId: data.id,
		}
		handlegetpath_list(params, data)
	}
	// 
	function handle_status(val) {
		switch (val) {
			case 1:
				return '骑行中';
				break;
			case 2:
				return '待支付';
				break;
			case 3:
				return '已支付';
				break;
			case 4:
				return '取消';
				break;
		}
	}

	function handle_class_status(val) {
		switch (val) {
			case 1:
				return 'text_ing';
				break;
			case 2:
				return 'text_no';
				break;
			case 3:
				return 'text_yes';
				break;
			case 4:
				return '';
				break;
		}
	}
	// 
	async function pay_order(val, status) {
		let coms = {
			rideId: val
		}
		if (status == 2) {
			const {
				data,
				code
			} = await mapnvueApi.business_pay(coms)
			if (code == 0) {
				sheep.$router.go('/pages/pay/index', {
					id: data,
					type: '结束行程'
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: '支付失败'
				})
			}
		} else {
			return
		}
	}
	// 
	async function handlegetpath_list(params, data) {
		const response = await orderApi.detailorder(params)
		// console.log(response, '------')
		let data_is = response.data
		let array = []
		for (var i = 0; i < data_is.length; i++) {
			let str = {
				longitude: data_is[i].longitude,
				latitude: data_is[i].latitude
			}
			// console.log(str,'str')
			array.push(str)
		}
		sheep.$router.go('/pages/home/mytrip/tripmain', {
			arrays: JSON.stringify(array),
			actualPay: data.actualPay,
			vehicleId: data.vehicleId,
			endTime: data.endTime,
			ridingTime: data.ridingTime
		})
	}

	async function getlist(val) {
		// console.log('1')
		let data = {
			pageNo: 1,
			pageSize: 10,
			status: val || ''
		}
		// console.log(uni.getStorageSync('token'))
		const response = await orderApi.searchCart(data)
		// console.log(response, 'response')
		content_list.value = response.data.list
	}
	onLoad((options) => {
		// console.log(options, 'options')
		getlist(options.status)
	})
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: #eee;
	}

	.main_info {
		padding: 20rpx;
		box-sizing: border-box;

		.item_pay {
			margin-bottom: 20rpx;
			height: 150rpx;
			width: 100%;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
			align-items: center;

			>view:first-child {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}

	.text_ing {
		color: skyblue;
	}

	.text_no {
		color: #0b54ff;
		text-decoration: underline;
	}

	.text_yes {
		color: #22ff22;
	}

	.text_ing {
		color: skyblue;
	}
</style>