1712 lines
46 KiB
Vue
1712 lines
46 KiB
Vue
<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>
|
||
|
||
<!-- <view class="d-f a-i-c open-light" @click="buyLight" v-if="detail.order_status == 1 || detail.order_status == 2">
|
||
<image style="width: 48rpx;height: 48rpx;" src="https://xh.stnav.com/uploads/sport/light.png" ></image>
|
||
<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 && 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.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')">
|
||
<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="userAccount > 0">
|
||
<!-- <text class="key">余额支付：(剩余：{{balance}})</text> -->
|
||
{{ cardType() }}
|
||
</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_way) }}</text>
|
||
<text v-if="detail.pay_way == 2">微信支付</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="openLightPopup" radius="16rpx">
|
||
<view class="light-popup">
|
||
<view class="title">提示</view>
|
||
<view class="desc">
|
||
<view class="rule">请选择要开灯的场地</view>
|
||
<scroll-view scroll-y="true" enhanced="true" :show-scrollbar="false" style="height: 500rpx;">
|
||
<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="isSelected(index, index2) ? 'date-time-btn' : 'date-time-btn-normal'"
|
||
v-for="(item2, index2) in item"
|
||
:key="index2"
|
||
@click="toggleSelect(index, index2, item2.room_id)"
|
||
>
|
||
{{ item2.start_time }}-{{ item2.end_time }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="btn">
|
||
<view class="btn1" @click="openLightPopup = false">取消</view>
|
||
<view class="btn2" @click="getSelectedContent">确定</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>
|
||
</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
|
||
|
||
};
|
||
},
|
||
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) {
|
||
if (type == 1) {
|
||
return '白银会员卡'
|
||
} else if (type == 2) {
|
||
return '黄金会员卡'
|
||
} else if (type == 3) {
|
||
return '铂金会员卡'
|
||
} else if (type == 4) {
|
||
return '钻石会员卡'
|
||
} else if (type == 5) {
|
||
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.balancePopup = true;
|
||
} else {
|
||
// 切换到微信支付时还原价格
|
||
this.userAccount = 0;
|
||
this.userDiscount = 0;
|
||
this.currentType = '';
|
||
this.balancePopup = false;
|
||
}
|
||
},
|
||
|
||
// 关闭余额支付弹窗
|
||
closeBalancePopup() {
|
||
this.payType = 'wxpay';
|
||
this.balancePopup = 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._post('user.index/detail', {
|
||
source: self.getPlatform()
|
||
}, function(res) {
|
||
console.log("🚀 ~ res:", res)
|
||
self.userBalance = res.data.userInfo;
|
||
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 = this.balance['discount' + this.currentType];
|
||
|
||
// this.payType = this.currentType;
|
||
// this.countPrice();
|
||
this.balancePopup = false;
|
||
},
|
||
|
||
cardType() {
|
||
if (this.currentType == 1) {
|
||
return '白银会员卡'
|
||
} else if (this.currentType == 2) {
|
||
return '黄金会员卡'
|
||
} else if (this.currentType == 3) {
|
||
return '铂金会员卡'
|
||
} else if (this.currentType == 4) {
|
||
return '钻石会员卡'
|
||
} else if (this.currentType == 5) {
|
||
return '至尊会员卡'
|
||
}
|
||
},
|
||
|
||
isSelected(groupIdx, idx) {
|
||
return this.selectedTimes.some(sel => sel.group === groupIdx && sel.idx === idx);
|
||
},
|
||
|
||
toggleSelect(groupIdx, idx, roomId) {
|
||
const found = this.selectedTimes.findIndex(sel => sel.group === groupIdx && sel.idx === idx);
|
||
if (found > -1) {
|
||
this.selectedTimes.splice(found, 1);
|
||
} else {
|
||
this.selectedTimes.push({ group: groupIdx, idx, roomId });
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取选中的内容并提交
|
||
*/
|
||
getSelectedContent() {
|
||
let self = this
|
||
|
||
// 按照 roomId 分组 selectedTimes，生成指定格式
|
||
const result = [];
|
||
const trade = self.detail.trade || [];
|
||
const roomMap = {};
|
||
self.selectedTimes.forEach(sel => {
|
||
if (!roomMap[sel.roomId]) roomMap[sel.roomId] = [];
|
||
// 获取时间段
|
||
const item = trade[sel.group] && trade[sel.group][sel.idx];
|
||
if (item) {
|
||
roomMap[sel.roomId].push(`${item.start_time}-${item.end_time}`);
|
||
}
|
||
});
|
||
Object.keys(roomMap).forEach(roomId => {
|
||
result.push({ room_id: roomId, arr: roomMap[roomId].join(',') });
|
||
});
|
||
self.content = result;
|
||
|
||
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;
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '正在处理'
|
||
});
|
||
self._post(
|
||
'order.GroundOrder/addLightStoreOrder', {
|
||
order_id: self.order_id,
|
||
room_id: '',
|
||
ground_id: self.detail.ground_id,
|
||
content: JSON.stringify(self.content)
|
||
},
|
||
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);
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}
|
||
);
|
||
|
||
},
|
||
}
|
||
};
|
||
</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>
|