yueche_app/pages/orderDetail/orderDetail.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/mine/back.png" mode="aspectFill" />

		<!-- 内容区域 -->
		<view class="content">
			<view v-if="info.payState === 1&&info.byState===3" class="status">
				<wd-icon name="clock" color="#001713" size="22" />
				未乘车
			</view>
			<view v-if="info.payState === 1&&info.byState===2" class="status">
				<wd-icon name="check-outline" color="#001713" size="22" />
				已乘车
			</view>
			<view v-if="info.payState === 0" class="status">
				<wd-icon name="money-circle" color="#001713" size="22" />
				待支付
			</view>
			<view v-if="info.payState === 3" class="status">
				<wd-icon name="file-excel" color="#001713" size="22" />
				已取消
			</view>
			<view v-if="statusValue === '预约失败'" class="status">
				<wd-icon name="warning" color="#001713" size="22" />
				预约失败
			</view>

			<!-- 提示区域 -->
			<view class="tips">
				<image class="tips_img" src="@/static/images/orderDetail/tips.png" mode="aspectFill" />
				<view class="tips_text" v-if="(info.payState === 1&&info.byState===3)||(info.payState === 1&&info.byState===1)">
					您已成功预约【 <text>{{info.ciDate}} {{info.route_end}}</text>】大巴班次～请于发车前 15 分钟到达乘车点（<text>{{getRouteParts(info.route_end).prefix}}</text>），凭订单二维码检票乘车
				</view>
				<view class="tips_text" v-if="info.payState === 0">
					您的大巴预约订单尚未支付，为了不影响正常出行，订单将为您保留15分钟，超时自动取消~快点击【立即支付】，及时处理吧！
				</view>
				<view class="tips_text" v-if="info.payState === 1&&info.byState===2">
					您的行程已顺利结束，墨轩约车感谢您的使用！期待下次再见！
				</view>
				<view class="tips_text" v-if="info.payState === 3">
					订单已取消，欢迎您再次预约，祝一天好心情！
				</view>
			</view>

			<!-- 详情区域 -->
			<view class="detail">
				<view class="carMsg">
					<view class="carMsg_time">{{info.ciDate}}</view>
					<view :class="(info.payState === 0 ||info.byState === 3||info.byState === 1)?'carMsg_number':'carMsg_number1'">车牌：{{info.car_number}}</view>
					<view :class="(info.payState === 0 ||info.byState === 3||info.byState === 1)?'carMsg_volume':'carMsg_volume1'">容量：{{info.contain}}座</view>

					<image class="carMsg_line" src="@/static/images/chooseCar/line.png" mode="aspectFill" />

					<!-- <view class="carMsg_start">{{getRouteParts(info.route_end).prefix}}</view> -->
					<view class="carMsg_start">
						<view :class="{ '': true, 'app': index2 > 0 }"  v-for="(item2, index2) in getRouteParts(info.route_end)" :key="index2">{{item2}}</view>
					</view>

					<!-- <view class="carMsg_end">{{getRouteParts(info.route_end).suffix}}</view> -->
				</view>

				<!-- 二维码区域 -->
				<view class="code" v-if="(info.payState === 1&&info.byState===3)||(info.payState === 1&&info.byState===1)">
					<!-- 跟随页面滚动是开发者工具的bug，真机没有问题 -->
					<uv-qrcode ref="qrcode" size="180" :value="info.id"></uv-qrcode>
				</view>

				<view class="info">
					<view>预约号：{{info.row_num}}</view>
					<view>扫码时间段：13：50 - 16：20</view>
					<view>下单时间：{{info.createTime}}</view>
					<view :class="(info.payState === 0 ||info.byState === 3||info.byState === 1)?'info_price':'info_price1'">
						<view>支付金额：</view>
						<view>
							<text class="text">¥</text>
							{{info.payAmount}}
						</view>
					</view>
					
					<view class="box_bottom"> 
						<view class="bottom_time"></view>  
						<view v-if="info.payState==1 &&info.state!=4"> 
							<view class="bottom_btns" v-if="info.byState==3">
								<view class="btn_item pay">退款</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付区域 -->
		<view class="pay" v-if="info.payState === 0">
			<view class="pay_left">
				¥
				<text class="text">{{info.payAmount}}</text>   
			</view>

			<view class="pay_btn" @click="handlePay(info.orderNo)">立即支付</view>
		</view>
		
		<!-- 退款 --> 
		<view v-if="info.payState==1 &&info.state!=4">
			<view class="pay" v-if="info.byState==3||info.byState==1">
				<view class="pay_left">
					¥
					<text class="text">{{info.payAmount}}</text>   
				</view>
			
				<view class="pay_btn" @click="tuiPay(info)">退款</view>
			</view>
		</view>
		
	</view>
	  
	<!-- 选择付款方式弹窗区域 -->
	<wd-popup v-model="popShow_pay" position="bottom" safe-area-inset-bottom :close-on-click-modal="false">
		<view class="pop_pay">
			<view class="pay_title">选择付款方式</view>
			<view class="pay_close" @click="handleClose">
				<wd-icon name="close-bold" color="#ABA6A6" size="22"></wd-icon>
			</view>
	
			<!-- 支付方式列表区域 -->
			<view class="pay_list">
				<!-- 每一个支付方式区域 -->
				<view class="list_item" v-for="(item, index) in payList" :key="index">
					<view class="item_left">
						<image class="img" :src="item.icon" mode="aspectFill"></image>
						{{ item.text }}
					</view>
	
					<view class="item_right">
						<radio style="scale: 0.8" color="#FF8205" :checked="item.isCheck" @click="togglePay(item)" />
					</view>
				</view>
			</view>
	
			<!-- 立即付款按钮区域 -->
			<view class="pay_btn" @click="payTime">立即付款</view>
		</view>
	</wd-popup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { myRequest } from '@/utils/api.ts'
// 用户信息
const info = ref()
// 用户信息
const userInfo = uni.getStorageSync('carUserInfo')

// 付款方式弹窗显示隐藏控制
const popShow_pay = ref(false)
// 支付方式列表
const payList = ref([
	{
		text: '微信支付',
		icon: '/static/images/pay/wx.png',
		isCheck: false
	},
	{
		text: '电子交通卡支付',
		icon: '/static/images/pay/card.png',
		isCheck: false
	}
])
// 选中的支付方式
const selectedPay = ref(null);
//继续支付订单
const orderNo = ref('');
// 截取箭头前后的文字
const getRouteParts = (str) => {
  if (typeof str === 'string' && str.length > 0) {
  	return str.split('→');
  }
  
  return [];
};

onLoad((options) => {
	if (options.info) {
		info.value = JSON.parse(decodeURIComponent(options.info))
		console.log(info.value,'单')
	}
})

// 点击支付按钮回调
const handlePay = (item) => {
	popShow_pay.value = true
	orderNo.value=item
}

// 点击弹窗关闭按钮回调
const handleClose = () => {
	popShow_pay.value = false
}
// 切换支付方式（单选逻辑）
const togglePay = (item) => {
  // 先重置所有支付方式为未选中
  payList.value.forEach(pay => {
    pay.isCheck = false;
  });
  // 标记当前点击的支付方式为选中
  item.isCheck = true;
  selectedPay.value = item; // 同步选中的支付方式
};

//立即支付
const payTime = () => {
	if (!selectedPay.value) {
		uni.showModal({
			content:'请选择支付方式'
		})
	    return;
	  }
	if(selectedPay.value.text=='微信支付'){
		payWei()
	}else if(selectedPay.value.text=='电子交通卡支付'){
		
	}
}
//微信支付 
const payWei = async () => {
	const res = await myRequest({
		url: '/tAppcontinuePay.action',
		// method: 'POST', // 明确指定请求方法为POST
		data: {
			order_num:orderNo.value,
		}
	})
	if(res.code==200){
		payParams.value = res.data; // 存储微信支付所需参数
		invokeWechatPay(); // 调起支付
	}else{
		uni.showToast({ title: res.message });
	}
}

// 调起微信支付
const invokeWechatPay = () => {
  uni.requestPayment({
    ...payParams.value,
    success: (res) => {
      uni.showToast({ title: '支付成功' });
      // 支付成功后逻辑（如跳转到订单详情）
	  setTimeout(function() {
	  	getMyData()
	  }, 1000)
	  
    },
    fail: (err) => {
      uni.showToast({ title: '支付失败', icon: 'none' });
      console.error('支付失败', err);
    }
  });
};

//点击退款
const tuiPay = async (item) => {
	const res = await myRequest({
		url: '/tApprefund.action',
		// method: 'POST', // 明确指定请求方法为POST
		data: {
			order_num:item.orderNo,
			id:item.id
		}
	})
	if(res.code==200){
		uni.showToast({ title: '退款成功' });
		setTimeout(function() {
			uni.switchTab({
				url:'/pages/order/order'
			})
		}, 1000)
	}else{
		uni.showToast({ title: res.message });
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	color: #001713;
	background-color: #fff;
	overflow-y: auto;

	.banner {
		width: 100%;
		height: 482rpx;
	}

	.content {
		position: absolute;
		top: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx 260rpx;
		width: 100%;

		.status {
			font-size: 48rpx;
		}

		.tips {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 26rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.tips_img {
				width: 56rpx;
				height: 74rpx;
			}

			.tips_text {
				flex: 1;
				margin-left: 16rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #001713;
			}
		}

		.detail {
			padding: 0 30rpx 40rpx;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.carMsg {
				position: relative;
				width: 100%;
				height: 250rpx;
				font-size: 32rpx;
				color: #001713;

				.carMsg_time {
					position: absolute;
					top: 36rpx;
					font-size: 36rpx;
					color: #001713;
				}

				.carMsg_number {
					position: absolute;
					top: 44rpx;
					right: 0;
					font-size: 24rpx;
					color: #f86818;
				}
				.carMsg_number1{
					position: absolute;
					top: 44rpx;
					right: 0;
					font-size: 24rpx;
					color: #001713;
				}

				.carMsg_volume {
					position: absolute;
					top: 86rpx;
					right: 0;
					font-size: 24rpx;
					color: #f86818;
				}
				.carMsg_volume1{
					position: absolute;
					top: 86rpx;
					right: 0;
					font-size: 24rpx;
					color: #001713;
				}

				.carMsg_line {
					position: absolute;
					top: 128rpx;
					left: 0;
					width: 14rpx;
					height: 88rpx;
				}

				.carMsg_start {
					position: absolute;
					top: 106rpx;
					left: 40rpx;
					width: 460rpx;
				}
				.app{
					margin-top: 1px;
				}

				.carMsg_end {
					position: absolute;
					top: 185rpx;
					left: 40rpx;
					width: 460rpx;
				}
			}

			.code {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 540rpx;
				border-top: 2rpx dotted #ff8205;
			}

			.info {
				padding: 40rpx 0 0;
				line-height: 50rpx;
				font-size: 28rpx;
				border-top: 2rpx solid #ebecf1;

				.info_price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #ff8205;

					.text {
						font-size: 24rpx;
					}
				}
				.info_price2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #001713;
				
					.text {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.pay {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		height: 240rpx;
		color: #dc2626;
		box-shadow: 0px -3px 6px #ccc;
		background-color: #fff;

		.pay_left {
			font-size: 36rpx;

			.text {
				font-size: 48rpx;
			}
		}

		.pay_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 272rpx;
			height: 94rpx;
			font-size: 36rpx;
			color: #ff8205;
			border-radius: 64rpx;
			border: 2rpx solid #ff8205;
		}
	}
}
// 选择付款方式弹窗
.pop_pay {
	height: 566rpx;
	color: #001713;
	font-size: 28rpx;

	.pay_title {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 32rpx;
		border-bottom: 18rpx solid #ff8205;
	}

	.pay_close {
		position: absolute;
		top: 24rpx;
		right: 42rpx;
	}

	.pay_list {
		box-sizing: border-box;
		padding: 55rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 265rpx;

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 32rpx 0 46rpx;

			.item_left {
				display: flex;
				align-items: center;

				.img {
					margin-right: 26rpx;
					width: 54rpx;
					height: 54rpx;
				}
			}

			.item_right {
			}
		}
	}

	.pay_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		width: 720rpx;
		height: 94rpx;
		font-size: 36rpx;
		color: #fff;
		border-radius: 50rpx;
		background-color: #ff8205;
	}
}
</style>