sports-miniapp/src/pages/index/toBeUsed/index.vue

<!-- 订单类型orderType：0-学校 1-包场 2-无固定场 3-个人赛 4-团队赛 5-课程 -->
<template>
	<view class="content" v-if="!loading">
		<view class="t-order-timer" v-if="orderDetailInfo?.orderStatus == '待付款'">
			<view class="timer-text">请在<text style="color: #FB5B5B;">{{ downTime }}</text>内支付</view>
			<view class="timer-btn">
				<view class="cancel-btn" @click="cancelOrder(orderDetailInfo?.id)">取消订单</view>
				<view class="pay-btn" @click="submitPay(orderDetailInfo?.id)">立即支付￥{{ orderDetailInfo?.price }}</view>
			</view>
		</view>
		<view class="t-header" v-else>
			<view class="title">{{ orderDetailInfo?.orderStatus }}</view>
			<view style="display: flex;gap: 10rpx;flex-wrap: wrap;">
				<view class="time" v-for="item in orderDetailInfo?.proInfoList" :key="item.id">
					<block v-if="item.userName">
						<!-- v-if="item.type != 6" -->
						<text style="color: #FB5B5B;" v-if="item.type != 6">{{ item.userName }}</text>
						<!-- 0-待付款 1-待使用 2-已使用 3-已到期 4-已取消 5-退款中 6已退款 -->
						<text v-if="item.type != 6">{{ getStatusText(item.orderStatus) }}</text>
						<!-- <text v-if="orderDetailInfo?.orderStatus == '待使用'">，请按课表到上课地点按时上课。</text> -->
					</block>
				</view>
			</view>
		</view>
		<view class="t-booking-card" v-if="orderDetailInfo?.advanceTime">
			<view class="booking-text">
				<view class="b-title">请您提前联系场馆进行预约</view>
				<view class="b-text">请提前{{ orderDetailInfo?.advanceTime }}小时预约>场馆确认>到馆消费</view>
			</view>
			<view class="booking-btn" @click="submitBooking">立即预约</view>
		</view>
		<!-- 场地 -->
		<view class="c-scheduled-card" v-if="orderPageInfo?.orderType == 0 || orderPageInfo?.orderType == 1">
			<view class="title">预定信息</view>
			<view class="schedule-address">
				<view class="text">场馆</view>
				<view class="name">{{ orderDetailInfo?.siteName }}</view>
			</view>
			<view class="schedule-address">
				<view class="text">场次</view>
				<view class="">
					<view class="time-box" v-for="item in orderDetailInfo?.proInfoList" :key="item.id">
						<view class="time" v-if="item.type != 6">{{ item.useDateStr }} {{ item.frameTimeStr }} {{
							item.productName }}</view>
						<!-- <view class="status" v-if="orderPageInfo?.orderType == 1">已退款</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="t-shoping-card"
			v-if="orderPageInfo?.orderType == 2 || orderPageInfo?.orderType == 5 || orderPageInfo?.orderType == 3 || orderPageInfo?.orderType == 4">
			<view class="venue-address" v-if="orderPageInfo?.orderType == 2">
				<view class="address">
					<zzx-icon name="venue-icon4" size="14"></zzx-icon>
					<view class="name">{{ orderDetailInfo?.siteName }}</view>
					<view class="venue-tags">{{ orderDetailInfo?.runStatus == 0 ? '营业中' : '休息中' }}</view>
				</view>
				<view class="check-all">
					<text>查看所有可用场馆</text>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
				</view>
			</view>
			<view class="t-shoping-info">
				<image class="shoping-img"
					:src="orderDetailInfo?.appCourses?.cover || orderDetailInfo?.proInfoList[0].productImage" mode="">
				</image>
				<view class="shoping-info">
					<view class="name">{{ orderDetailInfo?.appCourses?.name ||
						orderDetailInfo?.proInfoList[0].productName
					}} &nbsp;<text style="font-weight: normal;color: #AAAAAA;font-size: 22rpx;">x{{
							orderDetailInfo?.proInfoList?.length }}</text></view>
					<!-- refundType:退款类型;0可退/到期自动退 1限时退 2不可退" -->
					<view class="shoping-refund" v-if="orderDetailInfo?.runType == 0">全天</view>
					<view class="shoping-refund"
						v-if="orderDetailInfo?.runType != null && orderDetailInfo?.runType != 0">
						{{ orderDetailInfo?.startTime }}-{{ orderDetailInfo?.endTime }}
					</view>
					<view class="shoping-refund" style="display: flex;align-items: center;"
						v-if="orderDetailInfo?.gameScheduleNum"
						@click="RouterUtils.to_page(`/pages/index/gamePlan/index?orderId=${orderDetailInfo?.id}`)">
						<text>{{ orderDetailInfo?.appGameScheduleVOList[0].name }}</text>
						<text>{{ orderDetailInfo?.gameScheduleNum }}场</text>
						<zzx-icon name="ashRight" size="10"></zzx-icon>
					</view>
					<view class="shoping-refund">
						<!-- 退款类型;0可退/到期自动退 1限时退 2不可退-->
						<text v-if="orderDetailInfo?.refundType == 0 || orderDetailInfo?.refundType == 1">随时退·过期退</text>
						<text v-if="orderDetailInfo?.refundType == 2">不支持退款</text>
					</view>
					<view class="shoping-price" @click="pricePopup.open()">
						<view class="price">￥{{ orderDetailInfo?.totalPrice.toFixed(2) }}</view>
						<view class="text">
							<text>实付</text>
							<text class="mini-text">￥</text>
							<text class="price-big">{{ orderDetailInfo?.price.toFixed(2) }}</text>
							<zzx-icon name="ashRight" size="10"></zzx-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="t-shoping-address"
				@click="RouterUtils.to_page(`/pages/index/verificationRecord/index?orderId=${orderDetailInfo?.id}&proInfoList=${JSON.stringify(orderDetailInfo?.proInfoList)}`)"
				v-if="orderPageInfo?.orderType == 5">
				<view class="address">上课地点：{{ orderDetailInfo?.courseSiteAddress }}</view>
				<view class="course-time">
					<text>{{ orderDetailInfo?.appCourses?.classNum }}课时
						{{ DateUtils.formatDateToMMDD(orderDetailInfo?.appCourses?.startTime) + '-' +
							DateUtils.formatDateToMMDD(orderDetailInfo?.appCourses?.endTime) }}</text>
					<zzx-icon name="ashRight" size="10"></zzx-icon>
				</view>
			</view>
			<view class="t-invite" v-if="orderPageInfo?.orderType == 5">
				<button class="g-share-btn" open-type="share"></button>
				邀请好友报名
			</view>
			<view class="t-shoping-address-eventInfo"
				v-if="countdownVisible && orderDetailInfo?.orderType == 3 || orderDetailInfo?.orderType == 4">
				<view class="time">{{ days }}</view>
				<view class="unit">天</view>
				<view class="time">{{ hours }}</view>
				<view class="unit">:</view>
				<view class="time">{{ minutes }}</view>
				<view class="unit">:</view>
				<view class="time">{{ seconds }}</view>
				<view class="">后比赛开始</view>
			</view>
		</view>
		<!-- 待使用展示 -->
		<view class="t-qrcode-card"
			v-if="orderPageInfo?.orderType == 0 || orderPageInfo?.orderType == 2 || orderPageInfo?.orderType == 5 || orderPageInfo?.orderType == 1 || orderPageInfo?.orderType == 3 || orderPageInfo?.orderType == 4 && orderDetailInfo?.orderStatus != 0">
			<block v-if="orderDetailInfo?.orSchoolCourse != 1 && hasPendingUsageItems && orderPageInfo?.orderType != 0">
				<view class="qrcode-box">
					<view class="item-qrcode">
						<uv-qrcode ref="qrcode" size="100px" :value="orderDetailInfo?.id"></uv-qrcode>
					</view>
				</view>
				<view class="download-qrcode" @click="download_qrcode">下载到手机</view>
			</block>
			<view v-if="orderDetailInfo?.orderType == 0 || orderDetailInfo?.orderType == 5"
				style="color: #222;font-size: 26rpx;">通过学校门口闸机时，通过人脸自动核验</view>
			<view class="t-todeused" v-for="(item, index) in orderDetailInfo?.proInfoList" :key="item.id">
				<view class="todeused">
					<view class="text">
						<text v-if="item.orderStatus == 0">待付款</text>
						<text v-if="item.orderStatus == 1">待使用</text>
						<text v-if="item.orderStatus == 2">已使用</text>
						<text v-if="item.orderStatus == 3">已到期</text>
						<text v-if="item.orderStatus == 4">已取消</text>
						<text v-if="item.orderStatus == 5">退款中</text>
						<text v-if="item.orderStatus == 6">已退款</text>
					</view>
					<view class="time">
						<!-- {{ orderDetailInfo?.appCourses?.endTime || orderDetailInfo?.endTime }} -->
						{{ item.expireTime }}
						到期
					</view>
				</view>
				<!-- orderStatus：0-待付款 1-待使用 2-已使用 3-已到期 4-已取消 5-退款中 6已退款 -->
				<!-- type：0-学校 1-包场 2-无固定场 3-个人赛 4-团队赛 5-课程 6-保险 -->
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="order-num" @click="selectOrderInfo(item, index)">
						<text v-if="item.type != 6">{{ item.ticketNo }}&nbsp;&nbsp; {{ item.userName }}
							{{item.classGroupingName }} {{ item.coachName }}</text>
							<text v-if="!item.classGroupingName&& item.type ==5">暂未分班</text>
						<zzx-icon v-if="item.type != 6" name="ashRight" size="12"></zzx-icon>
						<!-- <text v-if="item.type != 6 && orderPageInfo?.orderType == 1">{{ item.expireTime }}到期</text> -->
					</view>
					<!-- &&item.type != 5 -->
					<view class="application-btn" @click="openRefund(item)"
						v-if="(item.type == 1 || item.type == 2) && (item.orderStatus == 1 && orderDetailInfo?.refundType != 2)">
						申请退款</view>
				</view>
			</view>
		</view>
		<view class="t-address-card">
			<view class="address">
				<zzx-icon name="location"></zzx-icon>
				<view class="">{{ orderDetailInfo?.courseSiteAddress ||
					orderDetailInfo?.schoolAddress || orderDetailInfo?.gameAddress }}</view>
			</view>
			<view class="nav-info">
				<view class="nav" @click="open_map">
					<zzx-icon name="navigation" size="14"></zzx-icon>
					<view class="nav-text">导航</view>
				</view>
				<view class="phone" @click="open_phone" v-if="orderDetailInfo?.phone">
					<zzx-icon name="phone" size="14"></zzx-icon>
					<view class="">电话</view>
				</view>
			</view>
		</view>
		<view class="t-use-card" v-if="orderDetailInfo?.earlyRefundTime">
			<view class="use-tips">
				<view class="title">退改规则</view>
				<view class="text">
					每场次开场前{{ orderDetailInfo?.earlyRefundTime }}分钟之前可随时退款，之后不可退款，如您有疑问，可联系场馆
				</view>
			</view>
		</view>
		<view class="t-use-card">
			<view class="use-tips">
				<view class="title">{{ orderPageInfo?.orderType == 1 ? '温馨提示' : '使用须知' }}</view>
				<view class="text">
					<rich-text :nodes="fixImgStyle(orderDetailInfo?.reminder)"></rich-text>
				</view>
			</view>
		</view>
		<view class="t-use-card" v-if="orderDetailInfo?.insureOrderInfoList">
			<view class="use-tips">
				<view class="title">参赛意外险</view>
				<view class="t-use-insureOrder">
					<view class="insureOrder-title">被保人</view>
					<view class="insureOrder-text" v-if="orderDetailInfo?.insureOrderInfoList">
						{{ orderDetailInfo?.insureOrderInfoList.length }}人(<text
							v-for="(name, index) in orderDetailInfo?.insureOrderInfoList" :key="name.id">{{
								name.familyUserName
							}}{{ index < orderDetailInfo?.insureOrderInfoList.length - 1 ? ',' : '' }}</text>)</view>
				</view>
				<view class="t-use-insureOrder">
					<view class="insureOrder-title">生效时间</view>
					<view class="insureOrder-text" v-if="orderDetailInfo?.insureOrderInfoList">
						{{ orderDetailInfo?.insureOrderInfoList[0].assertStartTime?.slice(0, 10) }}至{{
							orderDetailInfo?.insureOrderInfoList[0].assertEndTime?.slice(0, 10) }}
					</view>
				</view>
				<view class="t-use-insureOrder">
					<view class="insureOrder-title">保费总金额</view>
					<view class="insureOrder-text" v-if="orderDetailInfo?.insureOrderInfoList">￥{{
						orderDetailInfo?.insureOrderInfoList.length * orderDetailInfo?.insureOrderInfoList[0].money }}
					</view>
				</view>
			</view>
		</view>
		<view class="t-use-card"
			v-if="orderPageInfo?.orderType == 5 && queryWaitSignList?.length > 0 && orderDetailInfo?.orderStatus != 0">
			<view class="use-tips t-contract-list">
				<view class="title">电子合同</view>
				<view class="text contract-list">
					<view class="item-no-sign">
						<view class="sign-title">未签署:</view>
						<view class="sign-names-container">
							<view class="sign-name" v-for="item in notSignList" :key="item.id" @click="checkSign(item)">
								{{ item.fullName }}
							</view>
						</view>
					</view>
					<view class="item-sign">
						<view class="sign-title">已签署:</view>
						<view class="sign-names-container">
							<view class="sign-name" v-for="item in signList" :key="item.id" @click="checkSign(item)">
								{{ item.fullName }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="check-all" @click="goToContract">
				<text>查看详情</text>
				<zzx-icon name="ashRight" size="12"></zzx-icon>
			</view> -->
		</view>
		<view class="t-order-info-card">
			<view class="title">订单信息</view>
			<view class="info-list">
				<view class="item-left">实际付款</view>
				<view class="item-right">￥{{ orderDetailInfo?.price }}</view>
			</view>
			<view class="info-list">
				<view class="item-left">手机号码</view>
				<view class="item-right">{{ orderDetailInfo?.phoneNumber || orderDetailInfo?.phone }}</view>
			</view>
			<view class="info-list">
				<view class="item-left">订单编号</view>
				<view class="item-right">{{ orderDetailInfo?.orderCode }}</view>
			</view>
			<view class="info-list">
				<view class="item-left">下单时间</view>
				<view class="item-right">{{ orderDetailInfo?.createTime }}</view>
			</view>
			<view class="info-list">
				<view class="item-left">付款时间</view>
				<view class="item-right">{{ orderDetailInfo?.payTime || '--' }}</view>
			</view>
		</view>
		<!-- 团队赛 -->
		<view class="t-team-card" v-if="orderDetailInfo?.gameCertification">
			<view class="t-team-card-title">
				<view class="title">队名</view>
				<view class="team-name">{{ gameCertificationList?.teamName }}</view>
			</view>
			<view class="t-taem-card-info">
				<view class="item-info">队徽</view>
				<view class="item-img">
					<image
						@click="_previewImage([gameCertificationList?.teamEmblemImg], gameCertificationList?.teamEmblemImg)"
						:src="gameCertificationList?.teamEmblemImg" mode="scaleToFill" />
				</view>
			</view>
			<view class="t-taem-card-info" v-for="(item, index) in gameCertificationList?.certificationDTOS"
				:key="index">
				<view class="item-info">{{ item.name }}</view>
				<view class="item-img">
					<image v-for="(img, imgIndex) in item.certificationImg.split(',')" :key="imgIndex"
						@click="_previewImage(item.certificationImg.split(','), img)" :src="img" mode="scaleToFill" />
				</view>
			</view>
		</view>
		<view class="t-morefeatures-card" v-if="orderPageInfo?.orderType == 3 || orderPageInfo?.orderType == 4">
			<view class="morefeatures-title">更多功能</view>
			<view class="morefeatures-btn"
				@click="RouterUtils.to_page(`/pages/index/gameResult/index?orderId=${orderDetailInfo?.id}`)">查看成绩</view>
		</view>
		<!-- 已使用展示 -->
		<view class="appraise-btn"
			v-if="orderPageInfo?.orderType != 3 && orderDetailInfo?.orderStatus == '已使用' && orderDetailInfo?.orEvaluate == 0 && orderDetailInfo?.type != 3 && orderDetailInfo?.type != 4"
			@click="RouterUtils.to_page(`/pages/index/writeComments/index?siteId=${orderDetailInfo?.addressSiteId}&orderId=${orderDetailInfo?.id}&siteName=${orderDetailInfo?.siteName}`)">
			写评价
		</view>
	</view>
	<zs-loading v-else></zs-loading>
	<!-- 价格详情弹窗 -->
	<uni-popup ref="pricePopup" :safe-area="false" type="bottom">
		<view class="price-detail" v-if="orderDetailInfo">
			<view class="price-title">价格明细</view>
			<view class="price-list">
				<view class="price-total">
					<view class="text">商品总价(共2件)</view>
					<view class="price">￥{{ orderDetailInfo?.totalPrice }}</view>
				</view>
				<view class="price-total">
					<view class="text">团购优惠</view>
					<view class="price">-￥{{ orderDetailInfo?.tdiscounts || '0' }}</view>
				</view>
				<view class="price-total">
					<view class="text">实付金额</view>
					<view class="price">￥{{ orderDetailInfo?.price }}</view>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- 退款 -->
	<uni-popup ref="refundPopup" :safe-area="false" type="bottom">
		<view class="refund-detail">
			<view class="refund-title">申请退款</view>
			<view class="refund-text">{{ refundInfo?.productName }}</view>
			<view class="refund-num-card">
				<!-- <view class="refund-number">
					<view class="text">退款数量<text style="color: #AAAAAA ;">(上限{{refundNumber?.length}}张)</text></view>
					<view class="price-stepper">
						<view class="minus" @click="refundMinus">-</view>
						<input type="number" style="text-align: center;" v-model="refundCountTotal" />
						<view class="add" @click="refundAdd">+</view>
					</view>
				</view> -->
				<!-- 包场 -->
				<!-- <view class="c-scheduled-card">
					<view class="title">退款信息</view>
					<view class="schedule-address">
						<view class="text">场馆</view>
						<view class="name">{{ refundInfo?.address }}</view>
					</view>
				</view> -->
				<view class="refund-price">
					<view class="p-text">退款金额<text style="color: #AAAAAA ;">(实付金额)</text></view>
					<view class="p-price">￥{{ refundInfo?.price }}</view>
				</view>
				<view class="refund-account">
					<view class="a-text">退款账户</view>
					<view class="a-account">原支付账户</view>
				</view>
				<view class="refund-tips"><text style="color: #FB5B5B;">1-3个工作日</text>内到账</view>
			</view>
			<view class="refund-cause-card">
				<view class="c-title">退款原因<text style="color: #AAAAAA ;">(必选)</text></view>
				<view class="c-cause-list">
					<view class="cause-list" v-for="item in refundList" :key="item.id" @click="selectRefundType(item)">
						<view class="cause">{{ item.name }}</view>
						<zzx-icon :name="isSelectType == item.id ? 'selected' : 'unchecked'" size="14"></zzx-icon>
					</view>
				</view>
			</view>
			<view class="refund-tips">
				<view class="tips-icon">!</view>
				<view class="tips-text">退款申请一经提交，不可取消</view>
			</view>
			<view style="height: 130rpx;"></view>
			<view class="refund-btn-box">
				<view class="refund-btn" @click="refund_btn">申请退款</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { TipsUtils, RouterUtils, DateUtils, _previewImage, fixImgStyle } from '@/utils/util'
import { onLoad, onShow, onShareAppMessage, onUnload } from '@dcloudio/uni-app';
import { http } from '@/utils/http'
import zsLoading from '@/components/zzx-loading/zzx-loading.vue'
const qrcode = ref();
const pricePopup = ref();  //价格
const refundPopup = ref();  //退款
const selected = ref(false);
const orderPageInfo = ref();
const refundList = ref([{
	id: 1,
	name: '价格不划算'
}, {
	id: 2,
	name: '场地无法提供使用'
}, {
	id: 3,
	name: '不需要了'
}, {
	id: 4,
	name: '重新购买'
}, {
	id: 5,
	name: '场馆要求改用其他方式/平台付款'
}, {
	id: 6,
	name: '其他原因'
}])
onLoad((option) => {
	orderPageInfo.value = option
	console.log(option, '路由参数');
})
onShow(() => {
	getOrderDetailInfo()
})
onUnload(() => {
	console.log('点击了返回按钮');
	if (orderPageInfo.value.isPayOrder != 1) {
		uni.switchTab({
			url: '/pages/index/index'
		});
		return true;
	}
});
onShareAppMessage((res) => {
	if (res.from === 'button') {// 来自页面内分享按钮
		console.log(res.target)
	}
	return {
		title: `邀请您报名《${orderDetailInfo?.value.appCourses?.name}》`,
		path: `/pages/index/courseDetail/index?id=${orderDetailInfo?.value.appCourses?.id}`,
		imageUrl: orderDetailInfo?.value.appCourses?.cover,
	}
})

onMounted(() => {
})

// 子订单状态映射
const statusMap = {
	0: '待付款',
	1: '待使用',
	2: '已使用',
	3: '已到期',
	4: '已取消',
	5: '退款中'
}

// 判断是否有待使用的项目
const hasPendingUsageItems = computed(() => {
	if (!orderDetailInfo.value?.proInfoList || !Array.isArray(orderDetailInfo.value.proInfoList)) {
		return false;
	}
	// 检查是否有任意一项的orderStatus为1（待使用）
	return orderDetailInfo.value.proInfoList.some(item => item.orderStatus === 1);
});

// 获取状态文本的函数
const getStatusText = (status: number): string => {
	return statusMap[status as keyof typeof statusMap] || ''
}

// ===========发起退款start===========
const refundInfo = ref()
const refundCountTotal = ref(0);
const refundNumber = ref([])
const openRefund = (e) => {
	refundNumber.value = orderDetailInfo?.value.proInfoList.filter(item => item.orderStatus == 1)
	refundInfo.value = e
	refundCountTotal.value = 0
	refundFromData.value.orderProInfoIds = e.id
	refundPopup?.value.open()
}

const refundMinus = () => {
	if (refundCountTotal.value > 0) {
		refundCountTotal.value--
	}
}

const refundAdd = () => {
	if (refundCountTotal.value > (refundNumber.value.length - 1)) return TipsUtils.tips_toast('已达可退款上限')
	refundCountTotal.value++
}

const isSelectType = ref()
const selectRefundType = (item) => {
	refundFromData.value.reason = item.name
	isSelectType.value = item.id
}
// 确定退款
const refundFromData = ref({
	orderCode: '',
	orderProInfoIds: '',
	reason: '',
	type:1
})
const refund_btn = async () => {
	if (refundFromData.value.reason == '') {
		return TipsUtils.tips_toast('请选择退款原因')
	}
	refundFromData.value.orderCode = orderDetailInfo?.value.orderCode
	let res: any = await TipsUtils.tips_alert('确定要申请退款吗？', true)
	if (res.confirm) {
		http.post('/order/refundOrder', refundFromData.value, { loading: true }).then((res) => {
			TipsUtils.tips_toast(res.result.message)
			RouterUtils.to_page(`/pages/index/refundDetail/index?orderId=${orderDetailInfo?.value.id}&orderProInfoId=${refundFromData.value.orderProInfoIds}`)
			refundPopup?.value.close()
		})
	}
}
// ===========发起退款end===========

// 查看子订单状态
// <!-- orderStatus：0-待付款 1-待使用 2-已使用 3-已到期 4-已取消 5-退款中 6已退款 -->
const selectOrderInfo = (e: any, i: number) => {
	if (e.orderStatus == 5 || e.orderStatus == 6) {
		RouterUtils.to_page(`/pages/index/refundDetail/index?orderId=${orderDetailInfo?.value.id}&orderProInfoId=${e.id}`)
	} else {
		RouterUtils.to_page(`/pages/index/tryUseRecord/index?ticketNo=${e.ticketNo}&proInfoList=${JSON.stringify(orderDetailInfo?.value.proInfoList)}&selectValue=${i}`)
	}
}
const download_qrcode = () => { //下载二维码，增加授权判断
	// #ifdef MP-WEIXIN
	uni.authorize({
		scope: 'scope.writePhotosAlbum',
		success() {
			uni.showLoading()
			qrcode.value.save({
				success: (res: any) => {
					uni.hideLoading()
					TipsUtils.tips_toast('下载成功')
				},
				fail: (err: any) => {
					console.log(err, '下载失败');
					uni.hideLoading()
				}
			});
		},
		fail() {
			uni.showModal({
				title: '提示',
				content: '需要授权保存到相册，是否去设置？',
				success: (res: any) => {
					if (res.confirm) {
						uni.openSetting();
					}
				}
			});
		}
	});
	// #endif
	// #ifndef MP-WEIXIN
	uni.showLoading()
	qrcode.value.save({
		success: (res: any) => {
			uni.hideLoading()
			TipsUtils.tips_toast('下载成功')
		},
		fail: (err: any) => {
			console.log(err);
			uni.hideLoading()
		}
	});
	// #endif
}

const submitBooking = () => {
	uni.makePhoneCall({
		phoneNumber: orderDetailInfo.value.phone
	});
}

// 打开地图
const open_map = () => {
	uni.openLocation({
		latitude: orderDetailInfo.value.latitude,
		longitude: orderDetailInfo.value.longitude,
		name: orderDetailInfo.value.siteName || orderDetailInfo.value.schoolAddress,
		address: orderDetailInfo.value.courseSiteAddress,
		success: function () {
			console.log('success');
		}
	});
}

// 拨打电话
const open_phone = () => {
	uni.makePhoneCall({
		phoneNumber: orderDetailInfo.value.phone
	});
}

// 订单状态 0-待付款 1-待使用 2-已使用 3-已到期 4-已取消 5-退款中 6已退款
const orderDetailInfo = ref()
const loading = ref(true)
const gameCertificationList = ref({})
const downTime = ref(null)
const createTime = ref(null)
const getOrderDetailInfo = (() => {
	http.get('/order/queryOrderInfo', { data: { orderId: orderPageInfo.value.orderId }, loading: true }).then((res) => {
		if (res.result.orderStatus == 0) {
			createTime.value = new Date(res.result.createTime);
			downTimeFun(); // 在获取到待付款订单信息时启动倒计时
		}
		switch (res.result.orderStatus) {
			case 0:
				res.result.orderStatus = '待付款'
				break;
			case 1:
				res.result.orderStatus = '待使用'
				break;
			case 2:
				res.result.orderStatus = '已使用'
				break;
			case 3:
				res.result.orderStatus = '已到期'
				break;
			case 4:
				res.result.orderStatus = '已取消'
				break;
			case 5:
				res.result.orderStatus = '退款中'
				break;
			case 6:
				res.result.orderStatus = '已退款'
			default:
				break;
		}
		orderDetailInfo.value = res.result
		gameCertificationList.value = JSON.parse(res.result.gameCertification || '{}')
		loading.value = false
		getQueryWaitSignList(res.result.id)
		// 初始化倒计时（如果订单类型是比赛相关）
		if ((res.result.orderType == 3 || res.result.orderType == 4) && res.result.appGameScheduleVOList?.length > 0) {
			const gameStartTime = res.result.gameStartTime;
			if (gameStartTime) {
				startCountdown(gameStartTime);
			}
		}
	})
})

// 倒计时
let callCount = 0;
const downTimeFun = () => {
	const endTime = new Date(createTime.value.getTime() + 15 * 60 * 1000);
	const remainingTime = endTime - new Date();
	if (remainingTime > 0) {
		const minutes = Math.floor(remainingTime / (1000 * 60));
		const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
		downTime.value = `${minutes.toString().padStart(2, '0')}分${seconds.toString().padStart(2, '0')}秒`;
		const timer = setInterval(() => {
			const now = new Date();
			const newRemainingTime = endTime - now;
			if (newRemainingTime <= 0) {
				clearInterval(timer);
				downTime.value = "00:00";
				if (callCount < 3) {
					callCount++;
					getOrderDetailInfo();
				}
				return;
			}
			const newMinutes = Math.floor(newRemainingTime / (1000 * 60));
			const newSeconds = Math.floor((newRemainingTime % (1000 * 60)) / 1000);
			downTime.value = `${newMinutes.toString().padStart(2, '0')}分${newSeconds.toString().padStart(2, '0')}秒`;
		}, 1000);
	} else {
		if (callCount < 3) {
			callCount++;
			setTimeout(() => {
				getOrderDetailInfo();
			}, 500)
		}
		downTime.value = "00:00";
	}
}

// ==================赛事倒计时start==================
// 添加倒计时相关响应式数据
const countdownVisible = ref(false);
const days = ref('00');
const hours = ref('00');
const minutes = ref('00');
const seconds = ref('00');
let countdownTimer: any = null;
// 添加倒计时函数
const startCountdown = (startTime: string) => {
	const startDate = new Date(startTime);
	startDate.setHours(0, 0, 0, 0);
	const now = new Date();
	let timeDifference = startDate.getTime() - now.getTime();
	if (timeDifference <= 0) {
		countdownVisible.value = false;
		return;
	}
	countdownVisible.value = true;
	// 清除之前的定时器
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
	// 立即更新一次显示
	updateCountdown(timeDifference);
	countdownTimer = setInterval(() => {
		timeDifference = startDate.getTime() - new Date().getTime();

		if (timeDifference <= 0) {
			clearInterval(countdownTimer);
			countdownVisible.value = false;
			return;
		}
		updateCountdown(timeDifference);
	}, 1000);
};
// ==================赛事倒计时end==================
// 更新倒计时显示
const updateCountdown = (timeDifference: number) => {
	// 计算天、小时、分钟、秒
	const totalSeconds = Math.floor(timeDifference / 1000);
	const totalMinutes = Math.floor(totalSeconds / 60);
	const totalHours = Math.floor(totalMinutes / 60);
	const totalDays = Math.floor(totalHours / 24);

	days.value = totalDays.toString().padStart(2, '0');
	hours.value = (totalHours % 24).toString().padStart(2, '0');
	minutes.value = (totalMinutes % 60).toString().padStart(2, '0');
	seconds.value = (totalSeconds % 60).toString().padStart(2, '0');
};


// ==================提交支付start==================
const orderCode = ref()
const orderId = ref()
const submitPay = (e: any) => {
	http.put(`/order/payOrder?appOrderId=${e}`, {}, { loading: true }).then((res) => {
		orderCode.value = res.result.orderCode
		orderId.value = res.result.orderId
		paymentOrder(res.result.params)
	})
}
const paymentOrder = (payInfo: object) => {
	// getOrderQuery(orderCode.value, orderId.value)
	console.log(payInfo, '支付参数');
	uni.requestPayment({
		provider: 'wxpay',
		...payInfo,
		success: function (res) {
			console.log('支付成功', res);
			setTimeout(() => {
				getOrderQuery(orderCode.value, orderId.value)
			}, 500)
		},
		fail: function (err) {
			console.log('支付失败', err);
			// TipsUtils.tips_toast('支付失败，请稍后重试');
		}
	});
}

const getOrderQuery = (orderCode: string, orderId: string, retryCount = 0) => {
	http.get('/order/orderQuery', { data: { orderCode: orderCode }, loading: true }).then((res) => {
		if (res.result == '100001') {
			TipsUtils.tips_toast('支付成功');
			getOrderDetailInfo()
		} else if (retryCount <= 3) {
			setTimeout(() => {
				getOrderQuery(orderCode, orderId, retryCount + 1)
			}, 1000)
		} else {
			if (res.result == '100003') {
				console.log('查询中，但已达到最大查询次数')
			} else if (res.result == '100002') {
				console.log('查询失败')
			} else if (res.result == '100004') {
				console.log('支付失败')
				TipsUtils.tips_toast('支付失败')
			}
		}
	}).catch((error) => {
		console.error('查询订单失败：', error)
		if (retryCount < 2) {
			setTimeout(() => {
				getOrderQuery(orderCode, orderId, retryCount + 1)
			}, 1000)
		}
	})
}
// ==================提交支付end==================

// 取消订单
const cancelOrder = async (e: any) => {
	let res: any = await TipsUtils.tips_alert('确定取消订单吗？', true)
	if (res.confirm) {
		http.put(`/order/cancelOrder?orderId=${e}`, {}, { loading: true }).then((res: any) => {
			TipsUtils.tips_toast('订单已取消')
			getOrderDetailInfo()
		})
	}
}

const queryWaitSignList = ref([]) // 合同信息
const notSignList = ref([]) // 未签署
const signList = ref([]) // 已签署
const getQueryWaitSignList = (orderId: string) => {
	http.get('/esign/queryWaitSignList', { data: { orderId: orderId }, loading: true }).then((res) => {
		notSignList.value = res.result.filter((item: any) => item.isSign == 0)
		signList.value = res.result.filter((item: any) => item.isSign == 1)
		queryWaitSignList.value = res.result
	})
}

// 签署未完成
const checkSign = (e: any) => {
	get_UserIdentityInfo(e.familyId)
}

// 已签署
const checkItemSign = (item: any) => {
	console.log(item);
	http.get('/esign/fileDownloadUrl', { data: { signFlowId: item.signFlowId }, loading: true }).then((res) => {
		uni.downloadFile({
			url: res.result[0].downloadUrl,
			timeout: 30000,
			success: function (res) {
				if (res.statusCode === 200) {
					uni.openDocument({
						filePath: res.tempFilePath,
						fileType: 'pdf',
						showMenu: true,
						success: function (res) {
							console.log('打开文档成功');
						},
						fail: function (err) {
							console.log('打开文档失败', err);
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function (saveRes) {
									console.log('文件保存成功', saveRes.savedFilePath);
								}
							});
						}
					});
				} else {
					console.error('下载失败，状态码：', res.statusCode);
				}
			},
			fail: function (err) {
				console.error('下载失败', err);
			}
		});
	});
}


// 查询授权
const get_UserIdentityInfo = (familyId: string) => {
	http.get('/esign/getUserIdentityInfo', { data: { familyId: familyId }, loading: true }).then((res) => {
		if (res.result) {
			get_createSign(familyId)
		} else {
			getAuthUrl(familyId)
		}
	})
}

// 发起签署
const get_createSign = (familyId: string) => {
	http.get('/esign/createSign', { data: { orderCode: orderDetailInfo.value.orderCode, familyId: familyId }, loading: true }).then((res) => {
		getSignUrl(res.result)
	})
}

// 未授权跳转链接
const getAuthUrl = (familyId: string) => {
	http.get('/esign/getAuthUrl', { data: { familyId: familyId }, loading: true }).then((res) => {
		RouterUtils.to_page(`/pages/index/signWebview/index?url=${res.result}`)
	})
}

// 获取签署链接
const getSignUrl = (signFlowId: string) => {
	http.get('/esign/getSignUrl', { data: { signFlowId: signFlowId }, loading: true }).then((res) => {
		RouterUtils.to_page(`/pages/index/signWebview/index?url=${res.result}`)
	})
}
</script>

<style lang="less" scoped>
.t-order-timer {
	margin-top: 20rpx;

	.timer-text {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.timer-btn {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 20rpx;

		.cancel-btn {
			width: 226rpx;
			height: 68rpx;
			background: #E6E6E6;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #AAAAAA;
			text-align: center;
			line-height: 68rpx;
		}

		.pay-btn {
			width: 440rpx;
			height: 68rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			text-align: center;
			line-height: 68rpx;
		}
	}
}

.t-header {
	margin-top: 20rpx;

	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.time {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #AAAAAA;

		&>text {
			font-size: 28rpx;
			color: #222222;
		}
	}
}

.t-booking-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #FFFFFF;
	border-radius: 32rpx;
	padding: 20rpx;
	margin-top: 20rpx;

	.booking-text {
		.b-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.b-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}

	.booking-btn {
		width: 152rpx;
		height: 48rpx;
		background: #C8FF0C;
		border-radius: 8rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		line-height: 48rpx;
	}
}

.c-scheduled-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.schedule-address {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;

		.text {
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.name {
			font-weight: bold;
			font-size: 24rpx;
			color: #222222;
		}

		.time-box {
			height: 60rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;

			.time {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
				margin-bottom: 20rpx;
			}

			.status {
				margin-bottom: 20rpx;
				width: 112rpx;
				height: 40rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #AAAAAA;
				text-align: center;
				line-height: 40rpx;
			}

		}
	}
}

.t-shoping-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.venue-address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F0F0F0;
		padding-bottom: 20rpx;

		.address {
			display: flex;
			align-items: center;
			gap: 4rpx;

			.name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.venue-tags {
				width: 98rpx;
				height: 32rpx;
				background: rgba(77, 217, 81, 0.2);
				border-radius: 8rpx;
				font-size: 22rpx;
				color: #4DD951;
				text-align: center;
				line-height: 32rpx;
			}
		}

		.check-all {
			font-size: 24rpx;
			color: #AAAAAA;
			display: flex;
			align-items: center;
			gap: 8rpx;
			width: 280rpx;
			&>text {
				margin-bottom: 10rpx;
			}
		}
	}

	.t-shoping-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 4rpx;

		.shoping-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 32rpx;
		}

		.shoping-info {
			width: 450rpx;

			.name {
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.shoping-refund {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.shoping-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-weight: 600;
					font-size: 30rpx;
					color: #FB5B5B;
				}

				.text {
					&>text:first-child {
						font-size: 28rpx;
						color: #222222;
					}

					.price-big {
						font-weight: 600;
						font-size: 30rpx;
						color: #FB5B5B;
					}
				}
			}
		}
	}

	.t-shoping-address {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #AAAAAA;

		.address {
			border-top: 1rpx solid #F0F0F0;
			height: 56rpx;
			line-height: 60rpx;
		}

		.course-time {
			border-bottom: 1rpx solid #F0F0F0;
			height: 58rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
	}

	.t-shoping-address-eventInfo {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		border-top: 1rpx solid #F0F0F0;
		height: 80rpx;

		.time {
			width: 60rpx;
			height: 60rpx;
			background: rgba(200, 255, 12, 0.5);
			border-radius: 16rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.t-invite {
		margin-top: 24rpx;
		font-size: 28rpx;
		color: #FDD143;
		text-align: center;
		position: relative;

		.g-share-btn {
			position: absolute;
			top: -10rpx;
			width: 600rpx;
			height: 60rpx;
			opacity: 0;
		}
	}
}

.t-qrcode-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.qrcode-box {
		height: 200rpx;
		position: relative;

		.item-qrcode {
			position: absolute;
			margin-left: 35%;
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}
	}

	.download-qrcode {
		margin: auto;
		margin-top: 24rpx;
		width: 226rpx;
		height: 68rpx;
		background: #C8FF0C;
		border-radius: 60rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		line-height: 68rpx;
	}

	.t-todeused {
		margin-top: 20rpx;

		.todeused {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-todeused {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			.text {
				font-size: 28rpx;
				color: #222222;
			}

			.time {
				font-size: 28rpx;
				color: #AAAAAA;
			}
		}

		.order-num {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #AAAAAA;
			display: flex;
			align-items: center;
			gap: 8rpx;

			&>text {
				margin-bottom: 8rpx;
			}

			.t-use-status {
				width: 100rpx;
				height: 40rpx;
				background: #C8FF0C;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #222222;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.application-btn {
			width: 152rpx;
			height: 44rpx;
			background: #C8FF0C;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #222222;
			text-align: center;
			line-height: 44rpx;
		}
	}
}

.t-scheduled-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.s-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.t-scheduled-list {
		.item-list {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.list-left {
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.list-right {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}
		}
	}
}

.t-address-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.address {
		display: flex;
		align-items: center;
		gap: 4rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
	}

	.nav-info {
		display: flex;
		align-items: center;
		text-align: center;
		gap: 32rpx;
		font-size: 22rpx;
		color: #222222;
	}
}

.t-use-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.use-tips {
		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #AAAAAA;
		}

		.t-use-insureOrder {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 660rpx;
			margin-top: 20rpx;

			.insureOrder-title {
				font-size: 28rpx;
				color: #AAAAAA;
			}

			.insureOrder-text {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}

	.t-contract-list {
		.contract-list {
			.item-no-sign {
				display: flex;
				flex-wrap: wrap;

				.sign-title {
					white-space: nowrap;
					margin-right: 20rpx;
				}

				.sign-names-container {
					display: flex;
					flex-wrap: wrap;
					flex: 1;
					gap: 20rpx;
				}

				.sign-name {
					padding: 4rpx 10rpx 4rpx 10rpx;
					border-radius: 8rpx;
					background: #F6F6F6;
					font-size: 24rpx;
					color: #AAAAAA;
					white-space: nowrap;
				}
			}

			.item-sign {
				display: flex;
				flex-wrap: wrap;

				.sign-title {
					white-space: nowrap;
					margin-right: 20rpx;
				}

				.sign-names-container {
					display: flex;
					flex-wrap: wrap; 
					flex: 1;
					gap: 20rpx;
				}

				.sign-name {
					padding: 4rpx 10rpx 4rpx 10rpx;
					border-radius: 8rpx;
					background: #F6F6F6;
					font-size: 24rpx;
					color: #AAAAAA;
					white-space: nowrap;
				}
			}
		}
	}

	.check-all {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 24rpx;
		color: #AAAAAA;

		&>text {
			margin-bottom: 10rpx;
		}
	}
}

.t-order-info-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.info-list {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-top: 20rpx;

		.item-left {
			font-size: 28rpx;
			color: #AAAAAA;
		}

		.item-right {
			font-size: 28rpx;
			color: #222222;
		}
	}
}

.t-team-card {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.t-team-card-title {
		display: flex;
		align-items: center;
		gap: 30rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.team-name {
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}

	.t-taem-card-info {
		margin-top: 28rpx;

		.item-info {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.item-img {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 10px;

			&>image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 32rpx;
				object-fit: cover;
			}
		}
	}
}

.t-morefeatures-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;

	.morefeatures-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.morefeatures-btn {
		width: 226rpx;
		height: 68rpx;
		background: #C8FF0C;
		border-radius: 60rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		line-height: 68rpx;
	}
}

.appraise-btn {
	margin-top: 20rpx;
	width: 686rpx;
	height: 100rpx;
	background: #C8FF0C;
	border-radius: 60rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	text-align: center;
	line-height: 100rpx;
}

.price-detail {
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 20rpx;

	.price-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		text-align: center;
	}

	.price-list {
		.price-total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			.text {
				font-size: 28rpx;
				color: #222222;
			}

			.price {
				font-weight: bold;
				font-size: 28rpx;
				color: #FB5B5B;
			}
		}
	}
}

.refund-detail {
	background: #F6F6F6;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 20rpx;
	max-height: 1200rpx;
	overflow: auto;

	.refund-title {
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.refund-text {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.refund-num-card {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.refund-number {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 28rpx;
				color: #222222;
			}

			.price-stepper {
				display: flex;
				align-items: center;
				border: 1rpx solid #F0F0F0;
				border-radius: 8rpx;

				.minus {
					text-align: center;
					width: 44rpx;
					border-right: 1rpx solid #F0F0F0;
				}

				&>input {
					width: 80rpx;
					font-size: 28rpx;
					color: #222222;
				}

				.add {
					text-align: center;
					width: 44rpx;
					border-left: 1rpx solid #F0F0F0;
				}
			}
		}

		.refund-price {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.p-text {
				font-size: 28rpx;
				color: #222222;
			}

			.p-price {
				font-weight: bold;
				font-size: 28rpx;
				color: #FB5B5B;
			}
		}

		.refund-account {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.a-text {
				font-size: 28rpx;
				color: #222222;
			}

			.a-account {
				font-size: 28rpx;
				color: #222222;
			}
		}

		.refund-tips {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #222222;
		}
	}

	.c-scheduled-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.schedule-address {
			display: flex;
			gap: 20rpx;
			margin-top: 20rpx;

			.text {
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.name {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.time-box {
				height: 60rpx;
				display: flex;
				align-items: center;
				gap: 160rpx;

				.time {
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
					margin-bottom: 20rpx;
				}

				.time-icon {
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.refund-cause-card {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.c-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.c-cause-list {
			.cause-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.cause {
					font-size: 24rpx;
					color: #222222;
				}
			}
		}
	}

	.refund-tips {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-top: 20rpx;

		.tips-icon {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #FFA347;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
		}

		.tips-text {
			font-size: 24rpx;
			color: #222222;
		}
	}

	.refund-btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 95%;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 20rpx;

		.refund-btn {
			width: 686rpx;
			height: 100rpx;
			background: #C8FF0C;
			border-radius: 60rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
			line-height: 100rpx;
		}
	}
}
</style>