<template>
	<view :data-theme="theme()" :class="'order-datail pb100' + theme()" v-if="!loadding" style="padding-bottom: 200rpx;">
		<navbar bg="#F2F2F2" :title="title"></navbar>

		<!--详情状态-->
		<view class="d-s-c" style="margin-top: 10rpx;">
			<!-- 待付款 -->
			<view class="state-cont icon-box" style="width: 100%;" v-if="detail.order_status == 0">
				<image style="width: 36rpx;height: 36rpx;margin-top: 16rpx;" src="@/static/icon/time2.png" mode=""></image>
				<view class="countdown-datetime" v-if="detail.expiration_time">
					<text>还剩<text style="color: #FF5951">{{ detail.expiration_time }}</text>分钟订单自动取消</text>
				</view>
			</view>

			<!-- 已预约 -->
			<view class=""  style="width: 100%;" v-if="detail.order_status == 1">
				<view class="status-text" style="width: 100%;text-align: center;">
					使用过程中有任何问题，请联系客服
				</view>
				<!-- <view class="face d-f a-i-c">
					<view class="d-f a-i-c">
						<view style="margin-right: 10rpx;">
							<image src="@/static/icon/prompt.png"  style="width: 32rpx; height: 32rpx;"/>
						</view>
						<view class="face-title">进入场馆需要进行人脸识别，请录入</view>
					</view>
					<view class="face-desc">
						<text>去设置</text>
						<text style="margin-left: 10rpx;">></text>
					</view>
				</view> -->
			</view>


			<!-- 订单进行中 -->
			<view class="status-text" style="width: 100%;" v-if="detail.order_status == 2">
				您的订单正在进行中！
			</view>

			<!-- 已完成 -->
			<view class="status-text" style="width: 100%;" v-if="detail.order_status == 3">
				感谢预定场馆，期待下次再见！
			</view>
			
			<!-- 订单取消 -->
			<view class="status-text" style="width: 100%;" v-if="detail.order_status == 4">
				您的订单已取消。期待下次有机会再为您服务！
			</view>
			
			<!-- 退款 -->
			<view class="status-text" style="width: 100%;" v-if="detail.order_status == 5">
				<view class="d-c-c" style="margin-bottom: 18rpx;" @tap="billPopup = true">
					<view class="refund-txt">实际退款￥{{ detail.refund_price }}</view>
					<!-- <image style="width: 48rpx;height: 48rpx;margin-left: 6rpx;margin-top: 10rpx;" src="@/static/icon/right.png" mode=""></image> -->
				</view>
				<view class="">您的订单已取消。期待下次有机会再为您服务！</view>
			</view>
			<view class="dot-bg"></view>
		</view>

		<view class="shop">
			<view class="one-product" :key="index">
				<view class="d-s-s">
					<view class="cover" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;margin-right: 30rpx;">
						<image :src="venue.image" mode="aspectFit" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"></image>
						<!-- <image :src="detail.image" mode="aspectFit" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;"></image> -->
					</view>
					<view class="flex-1">
						<view class="d-b-c">
							<view class="gray3 f30 d-f a-i-c">
								<view class="cg-name" @click="againReserve">{{ detail.ground_name }}</view>
								<image style="width: 48rpx;height: 48rpx;" src="@/static/icon/right.png" mode=""></image>
							</view>

							<view class="cg-price" v-if="ballType == 2">
								¥
								<text class="f40">{{ detail.order_amount }}</text>
							</view>
						</view>
						<view class="d-b-c" style="margin-top:18rpx;" v-if="ballType == 2">
							<view class="cg-hour">￥{{ detail.order_amount }}/人</view>
							<view class="cg-num">x1</view>
						</view>

						<view class="d-f a-i-c" style="text-align: right;justify-content: end;margin-top:18rpx;">
							<view style="font-size: 24rpx; color: #606266;line-height: 34rpx;margin-right:10rpx;">实付</view>
							<view class="">
								<price-format color="#606266" :subscript-size="26" :first-size="32" :second-size="32" :price=" detail.order_amount"></price-format>
							</view>
						</view>
					</view>
				</view>
				<!-- 预约信息 -->
				<view class="cg-reserve">
					<view class="cg-title">预约信息</view>
					<!-- todo 这里的状态如果是交易完成、订单取消、退款成功则将下面的预约改为使用 -->
					<view class="cg-desc1">预约时间：{{ detail.day_time }}</view>
					<view class="cg-desc2" v-if="ballType == 1">预约时长：{{ detail.hours }}小时</view>
					<template v-if="ballType == 1">
						<view class="cg-desc2">场地信息：</view>
						<view class="desc" v-for="(item, index) in detail.trade" :key="index">
							<view class="fb" style="margin: 20rpx 0;">{{ index }}</view>
							<view class="date-grid">
								<view class="date-time-btn" v-for="(item2, index2) in item" :key="index2">
									{{ item2.start_time }}-{{ item2.end_time }}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<!-- 购买灯光 -->
		<view class="cg-order" style="margin-bottom: 20rpx;" v-if="(detail.order_status == 1 || detail.order_status == 2 || detail.order_status == 3) && ballType == 1">
			<view class="cg-order-title d-f a-i-c open-light">
				<!-- <image style="width: 48rpx;height: 48rpx;" src="https://xh.stnav.com/uploads/sport/light.png" ></image> -->
				<view>购买灯光</view>
			</view>
			<view class="desc" v-for="(item, index) in detail.trade" :key="index">
				<view class="fb" style="margin: 20rpx 0;">{{ index }}</view>
				<view class="date-grid">
					<view
						v-for="(item2, index2) in item"
						:key="index2"
						:class="isSelected(index, index2) ? 'date-time-btn' : 'date-time-btn-normal'"
						@click="toggleSelect(index, index2, item2.room_id, item2.light_status)"
					>
						{{ item2.light_status == 1 ? '已购买' : `${item2.start_time}-${item2.end_time}`}}
					</view>
				</view>
			</view>
			<view class="buy-checkout">
				<view :class="payType == 'wxpay' ? 'item active' : 'item'" @tap="payTypeFunc('wxpay')" style="padding-bottom: 10rpx;">
					<view class="d-s-c">
						<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
						<text class="key">微信支付</text>
					</view>
					<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
				</view>
                <view :class="payType == 'balance' ? 'item active' : 'item'" @tap="payTypeFunc('balance')" style="padding-bottom: 10rpx;">
					<view class="d-s-c">
						<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
						    <text class="key">平台余额</text>
					</view>
                    <view class="d-f a-i-c">
                        <view class="mr10 dis" v-if="payType == 'balance' && userAccount > 0">
							{{ cardType() }}
                        </view>
					    <view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
                    </view>
				</view>
                <view :class="payType == 'storedCard' ? 'item active' : 'item'" @tap="payTypeFunc('storedCard')">
                    <view class="d-s-c">
                        <view class="icon-box d-c-c mr10">
                            <image src="https://xh.stnav.com/uploads/sport/chuzhika.png" mode="heightFix" style="width: 50rpx; height: 50rpx;"></image>
                        </view>
                        <text class="key">储值卡支付</text>
                    </view>
                    <view class="d-f a-i-c">
                        <view class="mr10 dis" v-if="payType == 'storedCard' && userAccount > 0">
							{{ storedCardName() }}
                        </view>
                        <view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
                    </view>
                </view>
			</view>

			<view class="pay-light-btn" @click="getSelectedContent">确定并支付</view>
		</view>

		<!-- 适用场馆 -->
		<view class="cg-store">
			<view class="cg-store-title" @click="againReserve">适用场馆</view>
			<view class="d-s-c">
				<view class="cover" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;margin-right: 30rpx;">
					<image :src="venue.image" mode="aspectFit" style="width: 190rpx;height: 190rpx;border-radius: 16rpx;" />
				</view>
				<view class="flex-1 d-f pr">
					<view class="">
						<view class="gray3 f30 d-f a-i-c">
							<view class="cg-name">{{ venue.name }}</view>
							<image style="width: 48rpx;height: 48rpx;" src="@/static/icon/right.png" mode=""></image>
						</view>

						<!-- <view class="cg-store-jl">距您{{ venue.distance }}km</view> -->

						<view class="d-f a-i-c cg-address-block">
							<view class="">
								<image style="width: 36rpx;height: 36rpx;" src="@/static/icon/address.png" mode=""></image>
							</view>
							<view class="cg-address">
								{{ venue.address }}
							</view>
						</view>
					</view>
					<view class="pa cg-icon-box d-f a-i-c">
						<image style="width: 64rpx;height: 64rpx;margin-right: 20rpx;" src="@/static/icon/share.png" mode="" @click="location"></image>
						<image style="width: 64rpx;height: 64rpx;" src="@/static/icon/mobile.png" mode="" @click="contactStore"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="cg-order">
			<view class="cg-order-title">订单信息</view>
			<view class="cg-order-info d-b-c">
				<view class="">订单编号：</view>
				<view class="">
					<text>{{ detail.order_sn }}</text>
					<text style="margin: 0 12rpx;color: #BFC2C2;">|</text>
					<text class="cg-copy" @click="copy(detail.order_sn)">复制</text>
				</view>
			</view>
			<view class="cg-order-info d-b-c mt14" v-if="detail.pay_way > 0">
				<view class="">交易方式：</view>
				<view class="">
					<text v-if="detail.pay_way == 1">余额支付-{{ cardType(detail.pay_type) }}</text>
					<text v-if="detail.pay_way == 2">微信支付</text>
					<text v-if="detail.pay_way == 3">储值卡支付-{{ storedCardType(detail.pay_xntype) }}</text>
				</view>
			</view>	
			
			<view class="cg-order-info d-b-c mt14" v-if="detail.dtime">
				<view class="">创建时间：</view>
				<view class="">
					<text>{{ detail.dtime }}</text>
				</view>
			</view>

			<view class="cg-order-info d-b-c mt14" v-if=" detail.update_dtime">
				<view class="">付款时间：</view>
				<view class="">
					<text>{{ detail.update_dtime }}</text>
				</view>
			</view>
		</view>

		<template v-if="detail.order_source != 80">
			<view v-if="detail.order_status != 20 && detail.order_status != 30 && detail.order_status != 3" class="foot-btns">
				<!-- 待支付 -->
				<templte class="ww100" v-if="detail.order_status == 0">
					<view class="d-b-c ww100">
						<view class="cancle-btn" @click="showCancleOrderPopup">取消订单</view>
						<view class="pay-btn" @click="onPayOrder(detail.ground_id)">立即支付￥{{ detail.order_amount }}</view>
					</view>
				</templte>

				<!-- 已预约 -->
				<templte class="ww100" v-if="detail.order_status == 1">
					<view class="d-b-c ww100">
						<view class="cancle-reserve-btn" @click="showCancleReservePopup">取消预约</view>
						<view class="contact-btn" @click="contactStore">联系客服</view>
					</view>
				</templte>

				<!-- 进行中 -->
				<templte class="ww100" v-if="detail.order_status == 2">
					<view class="ww100 again-btn" @click="contactStore">联系客服</view>
				</templte>

				<!-- 订单取消、退款成功 -->
				<templte class="ww100" v-if="detail.order_status == 4 || detail.order_status == 5">
					<view class="ww100 again-btn" @click="againReserve">再次预定</view>
				</templte>
			</view>
		</template>

		<!-- 退款账单 -->
		<Popup :show="billPopup" :width='750' :padding="0" type="bottom" backgroundColor="#FBFBFB" radius="32rpx 32rpx 0 0">
            <view class="ww100 box-s-b pop-improt typeof pr time-popup">
                <image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode="" @tap="handleShowTime"></image>
                
                <view class="d-c-c pt42">
                    <text class="f34 fb">费用明细</text>
                </view>

                <view class="bg-white bill-info">
                    <view class="">
                        <view class="title1 d-b-c">
                            <view>场地费</view>
                            <view>
                                <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                            </view>
                        </view>
                        <view class="title2 d-b-c">
                            <view>场地费（￥100元/小时）</view>
                            <view>x3</view>
                        </view>
                    </view>

                    <view style="margin-top: 52rpx;">
                        <view class="title1 d-b-c">
                            <view>灯光费</view>
                            <view>
                                <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                            </view>
                        </view>
                        <!-- <view class="title2 d-b-c">
                            <view>灯光费（￥50元/小时）</view>
                            <view>x3</view>
                        </view> -->
                    </view>

                    <view class="line"></view>

                    <view class="title3 d-b-c">
                        <view>实付退款金额</view>
                        <view>
                            <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                        </view>
                    </view>
                </view>
            </view>
        </Popup>

		<!-- 取消订单 -->
		<Popup :show="cancelOrderPopup" radius="16rpx">
			<view class="notice-popup">
				<view class="title">确定取消订单？</view>
				<view class="desc">   
					取消订单后无法恢复，是否确认取消
				</view>
				<view class="btn">
					<view class="btn1" @click="cancelOrderPopup = false">取消</view>
					<view class="btn2" @click="cancelOrder">确定</view>
				</view>
			</view>
		</Popup>

		<!-- 取消预约 -->
		<Popup :show="cancelReservePopup" radius="16rpx">
			<view class="notice-popup">
				<view class="title">确定取消预约吗？</view>
				<view class="desc">   
					<view class="rule">取消按照如下规则，请谨慎操作。</view>
					<view class="rule1">1）预约开始前24小时取消，100%退款；</view>
					<view class="rule1">2）预约开始前4小时-24小时取消，50%退款；</view>
					<view class="rule1">3）预约开始前4小时内取消，不予退款；</view>
				</view>
				<view class="btn">
					<view class="btn1" @click="cancelReservePopup = false">取消</view>
					<view class="btn2" @click="cancelReserveOrder">确定</view>
				</view>
			</view>
		</Popup>

		<!-- 会员卡选择弹窗 -->
        <Popup :show="balancePopup" :width='750' :padding="0" type="bottom" backgroundColor="#fff" radius="32rpx 32rpx 0 0">
            <view class="ww100 box-s-b pop-improt typeof pr">
                <image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode="" @click="closeBalancePopup"></image>
                
                <view class="d-c-c pt44">
                    <text class="f34 fb">会员卡选择</text>
                </view>

                <view class="bg-white card">
                    <view class="card-item" :class="currentType == 1 ? 'active' : ''" @click="currentType = 1">
                        <view class="d-f a-i-c">
                            <view class="card-title">白银会员卡</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ userBalance.balance1 }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>

                    <view class="card-item" :class="currentType == 2 ? 'active' : ''" @click="currentType = 2">
                        <view class="d-f a-i-c">
                            <view class="card-title">黄金会员卡</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ userBalance.balance2 }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>

                    <view class="card-item" :class="currentType == 3 ? 'active' : ''" @click="currentType = 3">
                        <view class="d-f a-i-c">
                            <view class="card-title">铂金会员卡</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ userBalance.balance3 }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>

                    <view class="card-item" :class="currentType == 4 ? 'active' : ''" @click="currentType = 4">
                        <view class="d-f a-i-c">
                            <view class="card-title">钻石会员卡</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ userBalance.balance4 }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>

                    <view class="card-item" :class="currentType == 5 ? 'active' : ''" @click="currentType = 5">
                        <view class="d-f a-i-c">
                            <view class="card-title">至尊会员卡</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ userBalance.balance5 }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>
                   <view class="card-btn" @click="confirmCard">确定</view>
                </view>
            </view>
        </Popup>

		<!-- 储值卡选择弹窗 -->
        <Popup :show="storedCardPopup" :width='750' :padding="0" type="bottom" backgroundColor="#fff" radius="32rpx 32rpx 0 0">
            <view class="ww100 box-s-b pop-improt typeof pr">
                <image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode="" @click="closeStoredCardPopup"></image>

                <view class="d-c-c pt44">
                    <text class="f34 fb">储值卡选择</text>
                </view>

                <view class="bg-white card">
                    <view class="card-item" v-for="item in storedCardList" :key="item.id" :class="currentStoredCardId == item.id ? 'active' : ''" @click="currentStoredCardId = item.id">
                        <view class="d-f a-i-c">
                            <view class="card-title">{{ item.name }}</view>
                        </view>
                        <view class="d-f a-i-c">
                            <view class="card-balance">￥{{ formatMoney(item.balance) }}</view>
                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
                        </view>
                    </view>
                    <view class="card-btn" @click="confirmStoredCard">确定</view>
                </view>
            </view>
        </Popup>
	</view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
	import Popup from '@/components/uni-popup.vue';

	export default {
		components: {
			Popup,
			navbar
		},
		data() {
			return {
				ballType: 1, // 1网球 2篮球
				title: '订单详情',
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				/*是否显示支付类别弹窗*/
				isPayPopup: false,
				/*订单id*/
				order_id: 0,
				/*订单详情*/
				detail: {
					order_status: [],
					address: {
						region: []
					},
					product: [],
					pay_type: [],
					delivery_type: [],
					pay_status: []
				},
				extractStore: {},
				billPopup: false,
				venue: {}, // 场馆
				cancelOrderPopup: false,
				cancelReservePopup: false,
				openLightPopup: false,
				selectedTimes: [], // 记录选中的时间项，格式：[{group: 0, idx: 1}, ...]
				content: [], // 保存格式化后的多选结果
                payType: 'wxpay', // 支付方式 wxpay\balance
				balancePopup: false,
				balance: {},
                userBalance: {},
                currentType: '', // 选择的会员卡类型
                userAccount: 0,
                userDiscount: 0,
                storedCardPopup: false,
                storedCardList: [],
                currentStoredCardId: '',
				storedValueCard: [],
				lightDateTime: '',
				lightPrice: 0,
			};
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.ballType = e.ballType || 1;
            this.getRecharge()
		},
		onShow() {
			/*获取订单详情*/
			this.getData();
		},
		methods: {
			/*获取数据*/
			getData() {
				let self = this;
				let order_id = self.order_id;
				uni.showLoading({
					title: '加载中'
				});
				self._post(
					'order.groundOrder/orderGroundDetails',
					{
						order_id: order_id
					},
					function(res) {
						self.detail = res.data.lists;
						console.log("🚀 ~ self.detail:", self.detail)
						// self.extractStore = res.data.order.extractStore;

						// self.title = self.detail.state_text;
						// if (self.detail.state_text == '待付款') {
						// 	self.title = '等待付款';
						// }

						// 获取场馆详情
						self._post(
							'ground.ground/groundDetails',
							{
								app_id: self.getAppId(),
								id: self.detail.ground_id,
								latitude: uni.getStorageSync('latitude') || 0,
								longitude: uni.getStorageSync('longitude') || 0,
							},
							function (res) {
								if (res.code) {
									self.loadding = false;
									self.venue = res.data.lists
								}
							}
						)

						self.loadding = false;
						uni.hideLoading();
					}
				);
			},

			// 取消订单弹窗
			showCancleOrderPopup() {
				this.cancelOrderPopup = true;
			},

			/*取消订单*/
			cancelOrder() {
				let self = this;
				uni.showLoading({
					title: '正在处理'
				});
				self._post(
					'order.groundOrder/cancelGroundOrder',
					{
						order_id: self.order_id
					},
					function(res) {
						self.cancelOrderPopup = false;

						window.uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'success'
						});
						self.getData();
						
						self.loadding = false;
						uni.hideLoading();
					}
				);
			},

			// 取消预约
			showCancleReservePopup() {
				this.cancelReservePopup = true
			},

			/*取消预约订单*/
			cancelReserveOrder() {
				let self = this;
				uni.showLoading({
					title: '正在处理'
				});
				self._post(
					'order.groundOrder/refund',
					{
						order_id: self.order_id
					},
					function(res) {
						self.cancelReservePopup = false;

						if(res.code) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'success'
							});
							setTimeout(() => {
								uni.hideLoading();
								self.getData();
							}, 800);
						} else {
							uni.hideLoading();
						}
					}
				);
			},

			/*确认收货*/
			orderReceipt(order_id) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '您确定要收货吗?',
					success: function(o) {
						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._post(
								'user.order/receipt',
								{
									order_id: order_id
								},
								function(res) {
									uni.hideLoading();
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'success'
									});
									self.getData();
								}
							);
						}
					}
				});
			},
			/*查看物流*/
			gotoExpress(order_id) {
				this.gotoPage('/pages/order/express/express?order_id=' + order_id);
			},
			/*申请售后*/
			onApplyRefund(e) {
				this.gotoPage('/pages/order/refund/apply/apply?order_product_id=' + e);
			},
			onSaveTable(table_id, order_product_id) {
				this.gotoPage('/pages/plus/table/table?table_id=' + table_id + '&order_product_id=' + order_product_id);
			},

			// 复制订单号
			copy(sn) {
				uni.setClipboardData({
					data: sn,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'success'
						});
					}
				});
			},

			// 跳转支付页面
			onPayOrder(groundId = 0) {
				let self = this;
				if (self.ballType == 1) {
					// 网球场
					self.gotoPage(`/bundle/reserve/confirm?orderId=${self.order_id}&venueId=${groundId}&typeId=1`);
					return
				} else if (self.ballType == 2) {
					// 篮球场
					self.gotoPage(`/bundle/reserve/confirm?orderId=${self.order_id}&venueId=${groundId}&typeId=2`);
					return
				}
			},

			// 再次预定
			againReserve() {
				this.gotoPage(`/bundle/reserve/details?id=${this.detail.ground_id}&typeId=${this.ballType}`);
			},

			// 联系商家
			contactStore() {
				uni.makePhoneCall({
					phoneNumber: this.venue.contact_phone //仅为示例，并非真实的电话号码
				});
			},

			// 导航
			location() {
				uni.openLocation({
					latitude: Number(this.venue.latitude), // 纬度，范围为-90~90，负数表示南纬
					longitude: Number(this.venue.longitude), // 经度，范围为-180~180，负数表示西经
					scale: 18, // 缩放比例
					name: this.venue.name,
					address: this.venue.address
				});
			},

			// 会员卡类型
            cardType(type) {
                const t = type || this.currentType;
                if (t == 1) {
                    return '白银会员卡'
                } else if (t == 2) {
                    return '黄金会员卡'
                } else if (t == 3) {
                    return '铂金会员卡'
                } else if (t == 4) {
                    return '钻石会员卡'
                } else if (t == 5) {
                    return '至尊会员卡'
                }
            },

			// 储值卡类型
			storedCardType(type) {
				if (type == 1) {
					return '储值卡一'
				} else if (type == 2) {
					return '储值卡二'
				} else if (type == 3) {
					return '储值卡三'
				}
			},

			/**
			 * 购买灯光前置条件
			 */
			buyLight() {
				let self = this
				if (self.detail.light_order == 1) {
					uni.showModal({
						title: '提示',
						content: '您已支付过灯光费用，是否再次支付?',
						success: function(res) {
							console.log("🚀 ~ res:", res)
							if (res.confirm) {
								self.payLight()
							}
						}
					});
				} else {
					self.payLight()
				}
			},

			// 选择支付方式
            payTypeFunc(n) {
                this.payType = n;
                if (n == 'balance') {
                    this.userAccount = 0;
                    this.userDiscount = 0;
                    this.currentStoredCardId = '';
                    this.balancePopup = true;
                    this.storedCardPopup = false;
                } else if (n == 'storedCard') {
                    this.userAccount = 0;
                    this.userDiscount = 0;
                    this.currentType = '';
                    this.balancePopup = false;
                    this.storedCardPopup = true;
                } else {
                    // 切换到微信支付时还原价格
                    this.userAccount = 0;
                    this.userDiscount = 0;
                    this.currentType = '';
                    this.currentStoredCardId = '';
                    this.balancePopup = false;
                    this.storedCardPopup = false;
                }
			},

			// 关闭余额支付弹窗
            closeBalancePopup() {
                this.payType = 'wxpay';
                this.balancePopup = false;
            },

			closeStoredCardPopup() {
                this.payType = 'wxpay';
                this.storedCardPopup = false;
            },

            formatMoney(value) {
                const amount = Number(value) || 0;
                return amount.toFixed(2);
            },

            getStoredCardInfo() {
                return this.storedCardList.find(item => item.id === this.currentStoredCardId);
            },

            storedCardName() {
                const currentCard = this.getStoredCardInfo();
                return currentCard ? currentCard.name : '';
            },

            confirmStoredCard() {
                if (this.currentStoredCardId === '') {
                    uni.showToast({
                        title: '请选择储值卡',
                        icon: 'none'
                    });
                    return;
                }

                const currentCard = this.getStoredCardInfo();
                if (!currentCard) {
                    uni.showToast({
                        title: '储值卡不存在',
                        icon: 'none'
                    });
                    return;
                }

                this.userAccount = Number(currentCard.balance);
				this.userDiscount = 0;

                this.storedCardPopup = false;
            },

			getRecharge() {
                let self = this;
                uni.showLoading({
                    title: '加载中'
                });
                // 获取充值
                self._post(
                    'ground.ground/groundSetting',
                    {
                        app_id: self.getAppId(),
                    },
                    function(res) {
                        self.balance = res.data.lists.balance;
                        self.storedValueCard = res.data.lists.storedValueCard;
                    }
                )

                // 获取充值
                self._post('user.index/detail', {
                    source: self.getPlatform()
                }, function(res) {
                    console.log("🚀 ~ res:", res)
                    self.userBalance = res.data.userInfo;
                    
                    self.storedCardList = [
                        { id: 1, payType: 1, name: '储值卡一', discount: self.storedValueCard.discount1, balance: self.userBalance.card_balance1 },
                        { id: 2, payType: 2, name: '储值卡二', discount: self.storedValueCard.discount2, balance: self.userBalance.card_balance2 },
                        { id: 3, payType: 3, name: '储值卡三', discount: self.storedValueCard.discount3, balance: self.userBalance.card_balance3 },
                    ];

                    self.loadding = false;
                    uni.hideLoading();
                });
            },

			// 确认选择充值卡
            confirmCard() {
                if (this.currentType == '') {
                    uni.showToast({
                        title: '请选择会员卡类型',
                        icon: 'none'
                    });
                    return;
                }

                if (this.userBalance['balance' + this.currentType] <= 0) {
                    uni.showToast({
                        title: '余额不足，请选择其他会员卡',
                        icon: 'none'
                    });
                    return;
                }


                this.userAccount = this.userBalance['balance' + this.currentType];
				this.userDiscount = 0;

                // this.payType = this.currentType;
                // this.countPrice();
                this.balancePopup = false;
            },

			isSelected(groupIdx, idx) {
				return this.selectedTimes.some(sel => sel.group === groupIdx && sel.idx === idx);
			},
			
			toggleSelect(groupIdx, idx, roomId, status) {
				if (status == 1) {
					uni.showToast({
						icon: 'none',
						title: '已支付过灯光费用',
						mask: false,
						duration: 1000
					});
					return;
				}

				const found = this.selectedTimes.findIndex(sel => sel.group === groupIdx && sel.idx === idx);
				if (found > -1) {
					this.selectedTimes.splice(found, 1);
				} else {
					let self = this
					self.loadding = true
					self._post(
                        'ground.ground/groundRoomDetails',
                        {
                            app_id: self.getAppId(),
                            id: roomId, // 场馆包间ID
                        },
                        function(res) {
                        	console.log("🚀 ~ res:", res)
							const lightPrice = res.data.lists.set_light_price
							self.detail.trade[groupIdx][idx].light_price = lightPrice
							self.selectedTimes.push({ 
								group: groupIdx, 
								idx, 
								roomId,
								light_price: lightPrice,
								start_time: self.detail.trade[groupIdx][idx].start_time,
								end_time: self.detail.trade[groupIdx][idx].end_time,
								day_time: self.detail.trade[groupIdx][idx].day_time
							});
                        }
                    )
					self.loadding = false
				}
			},

			/**
			 * 获取选中的内容并提交
			 */
			getSelectedContent() {
				let self = this

				// 按照 roomId 分组 selectedTimes，生成指定格式
				const result = [];
				const trade = self.detail.trade || [];
				const roomMap = {};

				self.lightDateTime = ''
				self.lightPrice = 0
				self.selectedTimes.forEach(sel => {
					if (!roomMap[sel.roomId]) roomMap[sel.roomId] = [];
					// 优先从 selectedTimes 中获取 light_price（修复后）
					if (sel.light_price) {
						roomMap[sel.roomId].push(`${sel.start_time}-${sel.end_time}`);
						if (!self.lightDateTime && sel.day_time) {
							self.lightDateTime = sel.day_time
						}
						self.lightPrice += parseFloat(sel.light_price)
					} else {
						// 兼容旧数据：如果 selectedTimes 中没有，从 detail.trade 中获取
						const item = trade[sel.group] && trade[sel.group][sel.idx];
						if (item) {
							roomMap[sel.roomId].push(`${item.start_time}-${item.end_time}`);
							self.lightDateTime = item.day_time
							self.lightPrice += parseFloat(item.light_price || 0)
						}
					}
				});


				Object.keys(roomMap).forEach(roomId => {
					result.push({ room_id: roomId, arr: roomMap[roomId].join(',') });
				});
				self.content = result;

				console.log("🚀 ~ item lightDateTime:", self.lightDateTime)
				console.log("🚀 ~ item lightPrice:", self.lightPrice)
				console.log("🚀 ~ self.content:", self.content)

				if (self.detail.light_order == 1) {
					uni.showModal({
						title: '提示',
						content: '您已支付过灯光费用，是否再次支付?',
						success: function(res) {
							console.log("🚀 ~ res:", res)
							if (res.confirm) {
								self.payLight()
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '您确定要购买灯光费用吗?',
						success: function(o) {
							if (o.confirm) {
								self.payLight()
							}
						}
					});
				}
			},

			payLight() {
				let self = this

				if (self.content.length == 0) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					});
					return
				}

				if (self.payType == '') {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					});
					return;
				}

				if (self.payType == 'balance' && self.currentType == '') {
					uni.showToast({
						title: '请选择会员卡类型',
						icon: 'none'
					});
					return;
				}

                if (self.payType == 'storedCard' && self.currentStoredCardId === '') {
					uni.showToast({
						title: '请选择储值卡',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '正在处理'
				});	
				console.log('self.payType=', self.payType)
				console.log(123123)
				self._post(
					'order.GroundOrder/addLightStoreOrder', {
						order_id: self.order_id,
						room_id: '',
						ground_id: self.detail.ground_id,
						content: JSON.stringify(self.content),
						day_time: self.lightDateTime,
						light_price: self.lightPrice,
					},
					function(res) {
						uni.hideLoading();

						uni.showLoading({
							title: '支付中'
						});
						const payId = res.data.id;

						if (self.payType == 'wxpay') {
							self._post(
								'user.groundOrder/lightPay', {
									order_id: payId,
								},
								function(pay) {
									console.log("🚀 ~ pay:", pay)
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: pay.data.payment.timeStamp,
										nonceStr: pay.data.payment.nonceStr,
										package: 'prepay_id=' + pay.data.payment.prepay_id,
										signType: 'MD5',
										paySign: pay.data.payment.paySign,
										success: res => {
											self.openLightPopup = false;
											self.selectedTimes = []
											self.content = []
											
											self.result = 'success'
											uni.hideLoading();
											setTimeout(() => {
												uni.showToast({
													title: '支付成功',
													icon: 'none'
												});
											}, 200);

											setTimeout(() => {
												self.getData();
												self.getRecharge();
											}, 1500);
										},
										fail: res => {
											self.openLightPopup = false;
											self.selectedTimes = []
											self.content = []

											self.result = 'fail'
											uni.hideLoading();
											setTimeout(() => {
												uni.showToast({
													title: '支付失败',
													icon: 'none'
												});
											}, 200);

											setTimeout(() => {
												self.getData();
												self.getRecharge();
											}, 1500);
										},
									});
								}
							);
						} else if (self.payType == 'balance') {
							self._post(
								'ground.ground/yueLightPay', {
									order_id: payId,
									pay_type: self.currentType
								},
								function(pay) {
									if (pay.code == 1) {
										self.openLightPopup = false;
										self.selectedTimes = []
										self.content = []
										
										self.result = 'success'
										uni.hideLoading();
										setTimeout(() => {
											uni.showToast({
												title: '支付成功',
												icon: 'none'
											});
										}, 200);

										setTimeout(() => {
											self.getData();
											self.getRecharge();
										}, 1500);
									
									} else {
										self.openLightPopup = false;

										console.log("🚀 ~ pay error res:", res)
										self.result = 'fail'
										uni.hideLoading();
										setTimeout(() => {
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											});
										}, 200);

										setTimeout(() => {
											self.getData();
											self.getRecharge();
										}, 1500);
									}
								}
							)
						} else if (self.payType == 'storedCard') {
							const currentCard = self.getStoredCardInfo();
							console.log("🚀 ~ getStoredCardInfo:", 12312312321)
							self._post(
								'ground.ground/yuexnLightPay', {
									order_id: payId,
									pay_type: currentCard.payType
								},
								function(pay) {
									if (pay.code == 1) {
										self.openLightPopup = false;
										self.selectedTimes = []
										self.content = []
										
										self.result = 'success'
										uni.hideLoading();
										setTimeout(() => {
											uni.showToast({
												title: '支付成功',
												icon: 'none'
											});
										}, 200);

										setTimeout(() => {
											self.getData();
											self.getRecharge();
										}, 1500);
									
									} else {
										self.openLightPopup = false;

										console.log("🚀 ~ pay error res:", res)
										self.result = 'fail'
										uni.hideLoading();
										setTimeout(() => {
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											});
										}, 200);

										setTimeout(() => {
											self.getData();
											self.getRecharge();
										}, 1500);
									}
								}
							)
						}
					}
				);
		
			},
		}
	};
</script>

<style scoped lang="scss">
page {
	background: #F6F7F8 !important;
}

.order-express {
	background: #ffffff;
	margin: 0 20rpx;
	border-radius: 12rpx;
	margin-top: 20rpx;
}

.order-express .icon-box .iconfont {
	font-size: 50rpx;
}

.order-datail {
	padding-bottom: 90rpx;
	background-color: #f2f2f2;
}
.state-cont .countdown-datetime {
	margin-top: 16rpx;
}

.state-cont .countdown-datetime text {
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}
.group {
	margin: 0 20rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
}

.foot-btns {
	height: 146rpx;
	line-height: 146rpx;
	padding: 8rpx 60rpx;
}

.supplement-box {
	margin-top: 20rpx;
	@include background_color('bg-tips');
	@include border_color('border_color');
	border: 1rpx solid;
	border-radius: 12rpx;
	line-height: 1.5;
}

.shop{
  	// background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAHqCAMAAADPkl21AAABvFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////l5eX///8dYfCxAAAAknRSTlMAAQIDBAYHCAkKCwwNDg8TFBUXGBobHR4fICEiIycoKSssLzAyMzQ1OEFCQ0VLTlBSU1ZXWVtdYWNkZWZnamtub3BxdHV3eXqDhYeJjI2Oj5KUlpiZm56go6Smp6qsrrCzuru8vb/GyMrLzs/S09TV1tfa29zd3t/g4eLj5ebn6Orr7/Dx8vP09fb3+Pn6+/z9/jTqU2QAAAWpSURBVHja7dznc1RlGMbhB0g2IUZRQzFgTFAUFFA6iIpIsWEJIFIVRKWXqAQUpFggbOjyDwMBISHZ3W/M8w7X9fGd/XTPb2bPnLN7Ih5qe+ern/6o3oZUqr//+MXbLTHaa9vUSlqXvp35WLAtX980C5ld/7x5eLHdx01CdodmPCq254I9yO/My/8XO/2cNShBf8f9YtuP2YIy7K8MJbvZEpTis6EL2RuGoBSDU+4mu9MOlKM3YtI1M1COvyvxrhUoyXzXBZTly+gzAiXZG4NGoCT9ccsIlGQgbEBZJItkQbIgWSQLkgXJIlmQLEgWyYJkQbJIFiQLkkWyIFmQLJIFyYJkkSxIFiSLZEGyIFkkC5IFyYJkkSxIFiSLZEGyIFkkC5IFySJZkCxIFsmCZEGySBYkC5JFsiBZkCySBcmCZJEsSBYkC5JFsiBZkCySBcmCZJEsSBYki2RBsiBZJAuSBckiWZAsSBbJgmRBskgWJAuSRbIgWZAsSBbJgmRBskgWJAuSRbIgWZAskgXJgmSRLEgWJItkQbIgWSQLkgXJIlmQLEgWyYJkQbIgWSQLkgXJIlmQLEgWyYJkQbJIFiQLkkWyIFmQLJIFyYJkkSxIFiSLZEGyIFkkC5IFySJZEyBZkCxIFsmCZEGySBYkC5JFsiBZkCySBcmCZJEsSBYki2RBsiBZJAuSBckiWZAsSBbJgmRBsiBZJAuSBckiWZAsSBbJgmRBskgWJAuSRbIgWZAskgXJgmSRLEgWJItkQbIgWSQLkgXJgmSRLEgWJItkQbIgWSQLkgXJIlmQLEgWyYJkQbJIFiQLkkWyIFmQLJIFyYJkeZqTbZ02d83uqiHIb+D7j96aVokhbcuPGoTcDi9tjeEmrL9qFPKqrh4fj3v1hF3I6nh3jGHKb5YhpyPPx5imn7UNGZ14MWqYPWgd8vm3O2r62Dzks7J2sVE5Yx/SXciOr5NsrDIQ2SyqV2w852qWZP5qqpts7DERuXxTv9hYYyJyWdwg2bkmIpeuBsl2mohcmhskO3HEp/8bxpmzJ312z60GxUazZJ2lSvZ2gxsG8YIvInKZ1CDZOSYilzcaJPu+ichlRYNkd5mIXLbXL7ZtwETk8k+lbrLvWYhsltW9xXXKQGTzy4Q6ya6zD/l8ULvY172Cg4Qu9tT8fcGf1iGjkx1jFzv5V9uQ07Ex/xQ+q98yZNX3yqhgmz7xgiMSu/zhuBHBtq/oMwq5HVrScr/W1s55a/f4kyIl3Dn4bvWbUyteiUxhJItkQbIgWSQLkgXJIlmQLEgWyYJkQbJIFiQLkkWyIFmQLJIFyYJkkSxIFiSLZEGyIFkkC5IFyYJkkSxIFiSLZEGyIFkkC5IFySJZkCxIFsmCZEGySBYkC5JFsiBZkCySBcmCZJEsSBYkC5JFsiBZkCySBcmCZJEsSBYki2RBsiBZJAuSBckiWZAsSBbJgmRBskgWJAuSRbIgWZAsSBbJgmRBskgWJAuSRbIgWZAskgXJgmSRLEgWJItkQbIgWSQLkgXJIlmQLEgWyYJkQbIgWSQLkgXJIlmQLEgWyYJkQbJIFiQLkkWyIFmQLJIFyYJkkSxIFiSLZEGyIFkkC5IFySJZEyBZkCxIFsmCZEGySBYkC5JFsiBZkCySBcmCZJEsSBYki2RBsiBZJAuSBckiWZAsSBbJgmRBsiBZJAuSBckiWZAsSBbJgmRBskgWJAuSRbIgWZAskgXJgmSRLEgWJItkIX+yV21ASa7EBSNQkvNxwAiUZF9sMQIl2RRLjEBJFsazg1agHJcmRmw1A+XYHBFdN+xAKa68dDfZ2GgISrHhXrHxzFFLUIb9LUPJRudZW1CC/o54oMcjMApwekY81N1nD7I72BnDtPbeNAmZXfu0KUaatcMzBdK6uKUrRmtf0Pvz6ap1yOXyqR82zK886vQOlHY6pWI0r3sAAAAASUVORK5CYII=");
	// background-repeat: no-repeat;
	// background-size: 100% auto;
	background-color: #fff;
	border-radius: 16rpx;
	// height: 490rpx;
	margin: 30rpx;
	padding: 30rpx;
}

.cg-name {
	font-size: 32rpx;
	color: #303133;
	line-height: 44rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cg-name2 {
	font-size: 32rpx;
	color: #303133;
	line-height: 44rpx;
}

.cg-price {
	font-size: 26rpx;
	color: #909399;
	line-height: 36rpx;
}

.cg-hour {
	font-size: 26rpx;
	color: #909399;
	line-height: 36rpx;
}

.cg-num {
	font-size: 26rpx;
	color: #909399;
	line-height: 36rpx;
}

.cg-reserve {
	margin-top: 20rpx;
}

.cg-title {
	font-size: 30rpx;
	color: #303133;
	line-height: 42rpx;
}

.cg-desc1,
.cg-desc2 {
	font-weight: 500;
	font-size: 26rpx;
	color: #606266;
	line-height: 48rpx;
	margin-top: 20rpx;
}

.cg-store {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 30rpx 30rpx;
	padding: 30rpx 30rpx;
}

.cg-store-title {
	font-size: 32rpx;
	color: #303133;
	line-height: 44rpx;
	margin-bottom: 26rpx;
}

.cg-store-jl {
	font-size: 24rpx;
	color: #909399;
	line-height: 34rpx;
	margin-top: 16rpx;
}

.cg-address-block {
	margin-top: 20rpx;
}

.cg-address {
	font-weight: 400;
	font-size: 24rpx;
	color: #606266;
	line-height: 34rpx;
	margin-left: 8rpx;
	width: 230rpx;
}

.cg-icon-box {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.cg-order {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 30rpx ;
	padding: 30rpx 30rpx;
}

.cg-order-title {
	font-size: 32rpx;
	color: #303133;
	line-height: 44rpx;
	margin-bottom: 26rpx;
}

.cg-order-info {
	font-size: 28rpx;
	color: #606266;
	line-height: 40rpx;
}

.cg-copy {
	font-weight: 500;
	font-size: 28rpx;
	color: #365A9A;
	line-height: 48rpx;
}

.mt14 {
	margin-top: 14rpx;
}

.status-text {
	width: 100%;
	font-size: 26rpx;
	color: #909399;
	line-height: 36rpx;
	text-align: center;
	margin-top: 14rpx;
	text-align: center;
}

.refund-txt {
	font-size: 36rpx;
	color: #303133;
	line-height: 50rpx;
	margin-top: 18rpx;
}

.cancel-btn {
	font-size: 28rpx;
	color: #606266;
	line-height: 40rpx;
}

.pay-btn {
	width: 360rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background: #365A9A;
	border-radius: 8rpx;
	color: #fff;
	font-size: 32rpx;
}

.cancle-reserve-btn {
	width: 330rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	background: #F6F7F8;
	border-radius: 8rpx;
	margin-right: 30rpx;
	font-size: 32rpx;
	color: #303133;
}

.contact-btn {
	width: 330rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	background: #365A9A;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #FFFFFF;
}

.again-btn {
	width: 630rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	background: #365A9A;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #FFFFFF;
}

.time-popup {
	position: relative;

	.title {
		font-size: 36rpx;
		color: #121212;
		line-height: 50rpx;
	}

	.pt42 {
		padding-top: 42rpx;
	}

	.notice {
		margin-top: 30rpx;
		width: 100%;
		height: 56rpx;
		background: #FFFBE5;
		padding: 10rpx 30rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #E2950F;
		line-height: 48rpx;
		text-align: left;
	}

	.time-item {
		margin-right: 32rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #303133;
		line-height: 44rpx;
		height: 62rpx;
	}
	
	.time-item-line {
		width: 60rpx;
		height: 10px;
		background-color: #365A9A;
		border-radius: 6rpx;
	}

	.active {
		color: #365A9A;
		font-size: 32rpx;
		line-height: 44rpx;
	}

	.active:after {
		content: '';
		display: block;
		width: 60rpx;
		height: 10rpx;
		background-color: #365A9A;
		border-radius: 6rpx;
		margin: 8rpx auto 0 auto;
	}

	/* 日期网格：一行四个，间距 20rpx */
	.date-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
		padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
	}

	.date-item {
		background-color: #F7F7F7;
		border-radius: 10rpx;
		height: 72rpx; /* 可按需调整高度 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #303133;
		box-sizing: border-box;
	}

	/* 可选：选中样式 */
	.date-item.active {
		border-color: #365A9A;
		color: #365A9A;
		box-shadow: 0 4rpx 10rpx rgba(54,90,154,0.08);
	}

	.price {
		margin-top: 100rpx;

		.line {
			height: 2rpx;
			background: #E5E5E5;
			width: 100%;
		}

		.price-block {
			margin: 42rpx 22rpx;
		}

		.price-detail {
			color: #365A9A;
			font-size: 24rpx;
			line-height: 34rpx;
		}

		.price-btn {
			width: 368rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #365A9A;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #FFF;
		}
	}
}

.bill-info {
	border-radius: 16rpx;
	margin: 32rpx 30rpx 22rpx;
	padding: 48rpx 30rpx 30rpx;

	.title1 {
		font-size: 30rpx;
		color: #303133;
		line-height: 42rpx;
	}

	.title2 {
		margin-top: 12rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #909399;
		line-height: 34rpx;
	}

	.line {
		border: 2rpx solid #F6F7F9;
		margin: 34rpx 0 30rpx;
	}

	.title3 {
		font-size: 30rpx;
		color: #303133;
		line-height: 42rpx;
	}
}

.face {
	width: 692rpx;
	height: 80rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #FAEED9;
	color: #E2950F;
	padding: 0 30rpx;
	margin: 18rpx 30rpx 0;
	box-sizing: border-box;

	.face-title {

	}
}

/* 日期网格：一行三个，间距 20rpx */
.date-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
}

.date-time-btn {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background: #365A9A;
	color: #fff;
	font-size: 26rpx;
	border-radius: 10rpx;
	text-align: center;
}


.date-time-btn-normal {
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #BBBFC7;
	color: #fff;
	font-size: 26rpx;
	border-radius: 10rpx;
	text-align: center;
}


.notice-popup {
	padding: 20rpx 0;
	width: 100%;

	.title {
		font-size: 36rpx;
		color: #303133;
		line-height: 50rpx;
		text-align: center;
	}

	.desc {
		margin-top: 48rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #303133;
		line-height: 52rpx;
		text-align: center;
	}

	.rule {
		margin-bottom: 18rpx;
		text-align: left;
	}

	.rule1 {
		font-weight: 400;
		font-size: 32rpx;
		color: #303133;
		line-height: 44rpx;
		text-align: left;
		margin-bottom: 10rpx;
	}

	.btn {
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 44rpx;

		.btn1 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F6F7F8;
			border-radius: 8rpx;
			margin-right: 30rpx;
		}

		.btn2 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #365A9A;
			color: #FFFFFF;
			border-radius: 8rpx;
		}
	}
}

.light-popup {
	padding: 20rpx 0;
	width: 100%;

	.title {
		font-size: 32rpx;
		color: #303133;
		line-height: 50rpx;
		text-align: center;
	}

	.desc {
		font-size: 24rpx;
		color: #303133;
		line-height: 52rpx;
		text-align: left;
	}

	.btn {
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 44rpx;

		.btn1 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F6F7F8;
			border-radius: 8rpx;
			margin-right: 30rpx;
		}

		.btn2 {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #365A9A;
			color: #FFFFFF;
			border-radius: 8rpx;
		}
	}
}

.open-light {
	border-radius: 16rpx;
	font-size: 32rpx;
}


.buy-checkout {
	border-radius: 16rpx;
	background-color: #FFFFFF;

	.item {
		border-bottom: none;
		border-radius: 2rpx;
		padding: 30rpx 0;
	}
}

.buy-checkout .item.active .iconfont.icon-xuanze {
	color: #365A9A;
}

.card {
	margin-top: 28rpx;
	padding-bottom: 64rpx;

	.card-item {
		width: 690rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #F4F4F4;
		margin: 0 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;

		.card-title {
			font-size: 30rpx;
			color: #121212;
			margin-right: 24rpx;
		}

		.discount {
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border-radius: 100%;
			background: #FF5951;
			color: #fff;
			font-size: 30rpx;
			margin-right: 20rpx;
		}

		.sale {
			font-size: 28rpx;
		}

		.card-balance {
			font-size: 30rpx;
			color: #303133;
			line-height: 42rpx;
			margin-right: 28rpx;
		}
	}

	.active {
		border: 2rpx solid #FF5951;
		background: #FFF4F4;

		.card-checkout {
			.iconfont{
				color: #365A9A;
			}
		}
	}

	.card-btn {
		width: 630rpx;
		height: 90rpx;
		background: #365A9A;
		border-radius: 8rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		margin: 42rpx auto 0;
	}
}

.pt44 {
	padding-top: 44rpx;;
}

.pay-light-btn {
	width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    color: #303133;
    margin: 0 auto;
    border: 2rpx solid #C2C9D5;
    font-size: 28rpx;
}


</style>
