998 lines
54 KiB
Vue
998 lines
54 KiB
Vue
<template>
|
||
<view class="waper" :style="'padding-bottom: ' + safeAreaBottom + 'px'">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" left-icon-color="#fff">
|
||
<view slot='center' class="navbar_title">订单详情</view>
|
||
</u-navbar>
|
||
<view class="banner" v-if="detail">
|
||
<view>{{getStatusName()}}</view>
|
||
<view v-if="detail.paymentType == '0'">
|
||
<text>剩余支付时间</text>
|
||
<text>{{secondsToTime(timeNum)}}</text>
|
||
</view>
|
||
<view v-if="detail.paymentType > 0" style="position: relative; z-index: 2;">{{getStatusMsg()}}</view>
|
||
<image src="https://common/unpaid_bg.png" mode="" v-if="detail.paymentType < 200"></image>
|
||
<image src="https://common/unpaid_bg1.png" mode="" v-if="detail.paymentType == '200'"></image>
|
||
</view>
|
||
<view class="waper_box" v-if="detail" :style="((detail.paymentType == '1' || detail.paymentType == '2') || detail.paymentType == '0' || (detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn)) ? '' : 'padding-bottom: 32rpx;'">
|
||
<navigator hover-class="none" :url="'/pages/my/refundList?orderId=' + detail.orderItemList[0].orderId" class="refund_msg" v-if="detail.showRefundList">
|
||
<view class="left">
|
||
<view>查看退款进度</view>
|
||
<!-- <view>退款完成</view> -->
|
||
</view>
|
||
<view class="right">
|
||
<view class="text">查看详情</view>
|
||
<view class="icon">
|
||
<u-icon name="arrow-right" color="#999" size="26rpx" top="2rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
<view class="info" v-if="detail.paymentType < 200">
|
||
<view class="title">
|
||
<view>应付金额</view>
|
||
<view>{{detail.orderItemList[0].totalPrice}}</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="shop">
|
||
<view>{{detail.orderItemList[0].ticketName}}</view>
|
||
<view>
|
||
<text>￥{{detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice}}</text>
|
||
<text>x{{detail.orderItemList[0].buyQuantity}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="time">
|
||
<text>使用日期：</text>
|
||
<text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime}}</text>
|
||
</view> -->
|
||
<view class="time" v-if="detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0] == detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
|
||
<text>有效期：</text>
|
||
<text style="color: #01BE69;">{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
|
||
当日有效
|
||
</view>
|
||
<view class="time" v-else>
|
||
<text>有效期：</text>
|
||
<text style="color: #01BE69;">{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
|
||
至
|
||
<text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>
|
||
有效
|
||
</view>
|
||
<view class="time">
|
||
<text>场次</text>
|
||
<text></text>
|
||
</view>
|
||
<view class="classify" v-if="detail.orderItemList[0].classify == '2'">
|
||
<view class="left">包含子票：</view>
|
||
<view class="right">
|
||
<text v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index">{{i.childTicketName}}-1张；</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ticket" v-if="detail.paymentType == 200">
|
||
<view class="title">
|
||
<view>{{detail.orderItemList[0].ticketName}}}}</view>
|
||
<view>{{detail.orderItemList[0].totalPrice}}</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="list" v-if="detail.orderItemList[0].classify != '4'">
|
||
<view class="left">订单数量：</view>
|
||
<view class="right">
|
||
<view>￥{{detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice}} x{{detail.orderItemList[0].ticketOrderDetailList[0].buyQuantity}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="list" v-if="detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0] == detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
|
||
<view class="left">有效期：</view>
|
||
<view class="right">
|
||
<view><text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>当日有效</view>
|
||
<view v-if="detail.orderItemList[0].applicablePeriod">({{getWeekMsg(detail.orderItemList[0]) + (detail.orderItemList[0].classify == '4' && getWeekMsg(detail.orderItemList[0]) ? '不可用' : '')}})</view>
|
||
</view>
|
||
</view>
|
||
<view class="list" v-else>
|
||
<view class="left">有效期：</view>
|
||
<view class="right">
|
||
<view><text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>至<text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>有效</view>
|
||
<view v-if="detail.orderItemList[0].applicablePeriod">({{getWeekMsg(detail.orderItemList[0]) + (detail.orderItemList[0].classify == '4' && getWeekMsg(detail.orderItemList[0]) ? '不可用' : '')}})</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="left">入园时间：</view>
|
||
<view class="right">
|
||
<view>{{detail.orderItemList[0].admissionTime ? detail.orderItemList[0].admissionTime.split(',').join('-') : '以景区入园时间为准'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="list" v-if="detail.orderItemList[0].classify == '2'">
|
||
<view class="left">包含子票：</view>
|
||
<view class="right">
|
||
<view>
|
||
<text v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index" style="color: #666;">{{i.childTicketName}}-1张；</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="equity" v-if="detail.orderItemList[0].classify == '4'" @click="showEquity = true;">
|
||
<view class="text">包含{{detail.orderItemList[0].ticketChildList.length}}项权益</view>
|
||
<view class="icon">
|
||
<u-icon name="arrow-right" color="#3F79FF" size="26rpx" top="2rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="code_box" v-if="detail.orderItemList[0].classify != '4' && detail.paymentType == 200">
|
||
<view class="title">凭【二维码】直接入园</view>
|
||
<view class="title">实名制:{{detail.orderItemList[0].authenticationType == '1' ? '不实名' : detail.orderItemList[0].authenticationType == '2' ? '需提供一位身份证信息' : detail.orderItemList[0].authenticationType == '3' ? '所有出行人需要提供身份信息' : ''}}</view>
|
||
<view class="title">二维码规则：{{detail.orderItemList[0].qrcodeRule == '1' ? '一票一码' : '多票一码'}}</view>
|
||
<view class="num">
|
||
<view class="line"></view>
|
||
<!-- <view class="text">可用{{detail.orderItemList[0].ticketOrderDetailList.length}}张</view> -->
|
||
</view>
|
||
<!-- 一票一码 -->
|
||
<view class="code_list" v-if="detail.orderItemList[0].qrcodeRule == '1'">
|
||
<view class="list" v-for="(i, index) in detail.orderItemList[0].ticketOrderDetailList" :key="index" v-show="showAll || index == 0">
|
||
<!-- 所有人都有身份证 -->
|
||
<view class="code_info" v-if="detail.orderItemList[0].authenticationType == '3'">
|
||
<view >
|
||
<text>出行人</text>
|
||
<text>{{i.userName}}</text>
|
||
<text class="active" v-if="i.verificationType == '200'">已核销</text>
|
||
<text class="default" v-if="i.refundStatus == '1'">退款中</text>
|
||
<text class="default" v-if="i.refundStatus == '100'">退款已驳回</text>
|
||
<text class="active" v-if="i.refundStatus == '2' || i.refundStatus == '200'">{{i.refundStatusName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>身份证</text>
|
||
<text>{{i.identityCard}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 只有一个身份证 -->
|
||
<view class="code_info" v-if="detail.orderItemList[0].authenticationType < 3">
|
||
<view v-if="index == 0">
|
||
<text>出行人</text>
|
||
<text>{{i.userName}}</text>
|
||
<text class="active" v-if="i.verificationType == '200'">已核销</text>
|
||
<text class="default" v-if="i.refundStatus == '1'">退款中</text>
|
||
<text class="default" v-if="i.verificationType != '200' && i.refundStatus == '100'">退款已驳回</text>
|
||
<text class="active" v-if="i.refundStatus == '2' || i.refundStatus == '200'">{{i.refundStatusName}}</text>
|
||
</view>
|
||
<view v-if="index == 0">
|
||
<text>身份证</text>
|
||
<text>{{i.identityCard}}</text>
|
||
</view>
|
||
<view v-if="index > 0 && i.verificationType == '200'">
|
||
<text>订单号</text>
|
||
<text>{{i.verificationCode}}</text>
|
||
<text class="active">已核销</text>
|
||
</view>
|
||
<view v-if="index > 0 && (i.refundStatus == '2' || i.refundStatus == '200')">
|
||
<text>订单号</text>
|
||
<text>{{i.verificationCode}}</text>
|
||
<text class="active">{{i.refundStatusName}}</text>
|
||
</view>
|
||
<view v-if="index > 0 && (i.refundStatus == '1' || i.refundStatus == '100')">
|
||
<text>订单号</text>
|
||
<text>{{i.verificationCode}}</text>
|
||
<text class="default">{{i.refundStatus == '1' ? '退款中' : '退款已驳回'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="code_img" @click="showListCode(i, index)" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3')">
|
||
<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" :value="i.verificationCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
|
||
</view>
|
||
<view class="code_num" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3') && detail.orderItemList[0].classify == '1'">
|
||
<view>可核销次数：<text>{{i.canVerificationMun - i.verificationMun}}</text></view>
|
||
<view>总核销次数：<text>{{i.canVerificationMun}}</text></view>
|
||
</view>
|
||
<view class="code_text" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3')">
|
||
<view>{{i.verificationCode}}</view>
|
||
<view @click="copyCode(i.verificationCode)">复制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="showAll" v-if="detail.orderItemList[0].ticketOrderDetailList.length > 1 && detail.orderItemList[0].qrcodeRule == '1'">
|
||
<view class="show_waper" @click="tabShowAll">
|
||
<view class="text">{{showAll ? '收起' : '展开全部'}}</view>
|
||
<view class="icon">
|
||
<u-icon :name="showAll ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx" top="2rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 多票一码 只会出现一张身份证 -->
|
||
<view class="code_list" v-if="detail.orderItemList[0].qrcodeRule == '2'">
|
||
<view class="list">
|
||
<view class="code_info">
|
||
<view>
|
||
<text>出行人</text>
|
||
<text>{{detail.orderItemList[0].userName}}</text>
|
||
<text class="active" v-if="detail.verificationType == '200'">已核销</text>
|
||
<text class="default" v-if="detail.refundStatus == '1'">退款中</text>
|
||
<text class="default" v-if="detail.verificationType != '200' && detail.refundStatus == '100'">退款已驳回</text>
|
||
<text class="active" v-if="detail.refundStatus == '2' || detail.refundStatus == '200'">{{detail.refundStatusName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>身份证</text>
|
||
<text>{{detail.orderItemList[0].identityCard}}</text>
|
||
</view>
|
||
<view v-if="detail.verificationType == '200' || detail.refundStatus > 0">
|
||
<text>订单号</text>
|
||
<text>{{detail.orderCode}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="code_img" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')" @click="showCode">
|
||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="detail.orderCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
|
||
</view>
|
||
<view class="code_num" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')">
|
||
<view>可核销张数：<text>{{detail.orderItemList[0].verificationMunTotal}}</text></view>
|
||
<view>总核销张数：<text>{{detail.orderItemList[0].ticketOrderDetailList.length}}</text></view>
|
||
</view>
|
||
<view class="code_text" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')">
|
||
<view>{{detail.orderCode}}</view>
|
||
<view @click="copyCode(detail.orderCode)">复制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tourist" v-if="detail.orderItemList[0].classify == '4'">
|
||
<view class="title">游客信息</view>
|
||
<view class="tourist_card" v-for="(i, index) in detail.orderItemList[0].ticketOrderDetailList" :key="index">
|
||
<view class="card_info">
|
||
<view>
|
||
<text>出行人</text>
|
||
<text>{{i.userName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>身份证</text>
|
||
<text>{{i.identityCard}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="activate_btn" v-if="i.paymentType == 200 && (i.refundStatus == '0' || i.refundStatus == '100') && i.activationStatus == '0'" @click="showActivate = true;">去激活</view>
|
||
</view>
|
||
</view>
|
||
<view class="order">
|
||
<view class="title">订单信息</view>
|
||
<view class="cont">
|
||
<view class="list">
|
||
<view v-if="detail.orderItemList[0].classify == '4'">联系人</view>
|
||
<view v-else>购票人</view>
|
||
<view>{{detail.userName}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view v-if="detail.orderItemList[0].classify == '4'">联系电话</view>
|
||
<view v-else>手机号</view>
|
||
<view>{{detail.mobilePhone}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view v-if="detail.orderItemList[0].classify == '4'">身份证号码</view>
|
||
<view v-else>证件号</view>
|
||
<view>{{detail.identityCard}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>订单编号</view>
|
||
<view>
|
||
<text>{{detail.orderCode}}</text>
|
||
<text @click="copyCode(detail.orderCode)">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view v-if="detail.orderItemList[0].classify == '4'">创建时间</view>
|
||
<view v-else>下单时间</view>
|
||
<view>{{$utils.formatDate('Y-M-D h:m:s', detail.createTime)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="refund">
|
||
<view class="title">退改规则</view>
|
||
<view class="cont">
|
||
<view>{{detail.orderItemList[0].refundRuleName}}</view>
|
||
<view v-if="detail.orderItemList[0].refundRule == '0'">{{detail.orderItemList[0].refundRemark || '门票一经售出，不可退款'}}</view>
|
||
<view v-if="detail.orderItemList[0].refundRule == '3'">门票有效期内可退</view>
|
||
<view v-if="detail.orderItemList[0].refundRule == '4'">订单生成后{{detail.orderItemList[0].refundDay}}天内可退</view>
|
||
<view v-if="detail.orderItemList[0].refundRule == '5'">未激活可退</view>
|
||
</view>
|
||
<view class="fee" v-if="detail.orderItemList[0].refundRule > 0">
|
||
<view class="fee_title">退款手续费</view>
|
||
<view class="fee_cont">
|
||
<view v-if="detail.orderItemList[0].isFee == 0">无需手续费</view>
|
||
<view v-if="detail.orderItemList[0].isFee == 1 && detail.orderItemList[0].feeType == '1'">退款需扣除手续费{{(detail.orderItemList[0].deductionFees) + (detail.orderItemList[0].deductionFeesUnit == '1' ? '%' : '元')}}</view>
|
||
<view v-if="detail.orderItemList[0].isFee == 1 && detail.orderItemList[0].feeType == '2'" v-for="(i, index) in JSON.parse(detail.orderItemList[0].deductionJson)" :key="index">游玩前{{i.day}}天内退票，需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom_waper" v-if="detail && ((detail.paymentType == '1' || detail.paymentType == '2') || detail.paymentType == '0' || (detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn))">
|
||
<view class="btns">
|
||
<view v-if="detail.paymentType == '1' || detail.paymentType == '2'" @click="deleteTicketOrder">删除订单</view>
|
||
<view v-if="detail.paymentType == '0'" @click="cancelOrder">取消订单</view>
|
||
<view v-if="detail.paymentType == '0'" class="active" @click="goPay">继续支付</view>
|
||
<view v-if="detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn" @click="goRefund">申请退款</view>
|
||
</view>
|
||
</view>
|
||
<!-- 年卡权益 -->
|
||
<u-popup :show="showEquity" bgColor="transparent" mode="bottom">
|
||
<view class="equity_waper">
|
||
<view class="title">年卡权益
|
||
<view class="icon" @click="showEquity = false;">
|
||
<u-icon name="close" color="#333" size="24rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="item" v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index">
|
||
<view class="name">{{i.childTicketName}}</view>
|
||
<view class="frequency">{{i.isUnlimited == '1' ? '不限次数' : ('限' + i.canVerificationNum + '次，每月最多' + i.monthVerificationNum + '次，每日最多' + i.dayVerificationNum + '次')}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 确认激活弹框 -->
|
||
<u-popup :show="showActivate" bgColor="transparent" mode="center">
|
||
<view class="popup_waper">
|
||
<image src="https://common/refundPopup.png" mode=""></image>
|
||
<div class="refund_box">
|
||
<view class="title">温馨提示</view>
|
||
<view class="content">确认激活该年卡吗？</view>
|
||
<view class="btns">
|
||
<view @click="closePopup">取消</view>
|
||
<view @click="submitPopup">确认</view>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
safeAreaBottom: 0,
|
||
size: 0,
|
||
timeNum: 0,
|
||
timer: null,
|
||
configData: null,
|
||
detail: null,
|
||
showAll: false,
|
||
showRefundBtn: false,
|
||
showEquity: false,
|
||
showActivate: false
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.showRefundBtn = false;
|
||
this.safeAreaBottom = this.$safeAreaBottom;
|
||
this.size = uni.upx2px(262);
|
||
this.getDetail(options.id)
|
||
},
|
||
onUnload () {
|
||
console.log('页面关闭')
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
},
|
||
methods: {
|
||
async deleteTicketOrder () {
|
||
let info = await this.$http.deleteTicketOrder(this.detail.id);
|
||
if (info.code == 200) {
|
||
uni.showToast({ mask:true, title: '操作成功', icon: 'success' });
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500)
|
||
} else uni.showToast({ mask:true, title: info.msg, icon: 'none' });
|
||
},
|
||
async cancelOrder() {
|
||
let info = await this.$http.cancelTicketOrderPrepay(this.detail.orderCode);
|
||
if (info.code == 200) {
|
||
uni.showToast({ mask: true, title: '操作成功', icon: 'success' })
|
||
this.getDetail(this.detail.id)
|
||
} else uni.showToast({ mask: true, title: info.msg, icon: 'none' })
|
||
},
|
||
async getDetail (id) {
|
||
this.configData = uni.getStorageSync('configData');
|
||
let info = await this.$http.getTicketOrderDetailPrepay(id);
|
||
this.detail = info.data;
|
||
if (this.detail.paymentType == '0') {
|
||
let creaetdTime = parseInt(new Date(info.data.createTime).getTime() / 1000);
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
console.log(nowtime, creaetdTime)
|
||
if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
|
||
this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
|
||
this.setIntervalFn()
|
||
}
|
||
}
|
||
let showRefundList = false;
|
||
this.detail.orderItemList[0].ticketOrderDetailList.forEach((item) => {
|
||
if (item.refundStatus > 0) showRefundList = true;
|
||
})
|
||
this.detail.showRefundList = showRefundList;
|
||
// 判断是否可退款
|
||
let refundNum = this.getRefundList(info.data);
|
||
if (refundNum.length == 0) return false;
|
||
let creaetd = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.createTime) + ' 00:00:00').getTime() / 1000);
|
||
switch (this.detail.orderItemList[0].refundRule) {
|
||
case '3':// 有效期可退
|
||
// let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime) + ' 00:00:00').getTime() / 1000);
|
||
let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime) + ' 23:59:59').getTime() / 1000);
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
// 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
|
||
if (nowtime <= endTime) {
|
||
this.showRefundBtn = true;
|
||
} else this.showRefundBtn = false;
|
||
break;
|
||
case '4':// 几天内可退
|
||
let nowdata = parseInt(new Date().getTime() / 1000);
|
||
// 当前时间减下单时间如果大于后台设定天数。门票不可退
|
||
if (((nowdata - creaetd) / 60 / 60 / 24) > this.detail.orderItemList[0].refundDay) {
|
||
this.showRefundBtn = false;
|
||
} else this.showRefundBtn = true;
|
||
break;
|
||
case '5':// 未激活可退
|
||
if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') {
|
||
this.showRefundBtn = true;
|
||
} else this.showRefundBtn = false;
|
||
break;
|
||
}
|
||
},
|
||
setIntervalFn () {
|
||
clearInterval(this.timer);
|
||
this.timer = setInterval(() => {
|
||
if (this.timeNum <= 0) {
|
||
clearInterval(this.timer)
|
||
uni.navigateBack()
|
||
}
|
||
this.timeNum --;
|
||
}, 1000)
|
||
},
|
||
secondsToTime(seconds) {
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
const remainingSeconds = seconds % 60;
|
||
return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
|
||
},
|
||
goPay() {
|
||
uni.showLoading({ mask: true });
|
||
const prepayId = JSON.parse(this.detail.tradeSession);
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: prepayId.timeStamp,
|
||
nonceStr: prepayId.nonceStr,
|
||
package: prepayId.packageValue,
|
||
signType: prepayId.signType,
|
||
paySign: prepayId.paySign,
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
this.getDetail(this.detail.id)
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
|
||
}
|
||
});
|
||
},
|
||
getWeekMsg (info) {
|
||
let list = info.applicablePeriod.split(',');
|
||
let time = [];
|
||
list.forEach((item) => {
|
||
time.push(Number(item));
|
||
})
|
||
let weekLabel = '';
|
||
if (info.classify == '4') {
|
||
let arr = [];
|
||
time.forEach((item) => {
|
||
if (item > 0) arr.push(this.getDay(item))
|
||
})
|
||
weekLabel = arr.join(',');
|
||
} else {
|
||
if (this.isContinuous(time)) {// 数组连续
|
||
weekLabel = this.getWeek(time[0]) + '至' + this.getWeek(time[time.length - 1]);
|
||
} else {
|
||
let arr = [];
|
||
time.forEach((item) => {
|
||
arr.push(this.getWeek(item))
|
||
})
|
||
weekLabel = arr.join(',');
|
||
}
|
||
}
|
||
|
||
return weekLabel;
|
||
},
|
||
isContinuous (nums) {
|
||
nums.sort((a, b) => a - b);
|
||
for (let i = 1; i < nums.length; i++) {
|
||
if (nums[i] !== nums[i - 1] + 1) {
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
getDay (key) {
|
||
let str = '';
|
||
switch (key) {
|
||
case 1:
|
||
str = '周末';
|
||
break;
|
||
case 2:
|
||
str = '元旦';
|
||
break;
|
||
case 3:
|
||
str = '春节';
|
||
break;
|
||
case 4:
|
||
str = '清明';
|
||
break;
|
||
case 5:
|
||
str = '劳动';
|
||
break;
|
||
case 6:
|
||
str = '端午';
|
||
break;
|
||
case 7:
|
||
str = '中秋';
|
||
break;
|
||
case 8:
|
||
str = '国庆';
|
||
break;
|
||
}
|
||
return str;
|
||
},
|
||
getWeek (key) {
|
||
let str = '';
|
||
switch (key) {
|
||
case 1:
|
||
str = '周一';
|
||
break;
|
||
case 2:
|
||
str = '周二';
|
||
break;
|
||
case 3:
|
||
str = '周三';
|
||
break;
|
||
case 4:
|
||
str = '周四';
|
||
break;
|
||
case 5:
|
||
str = '周五';
|
||
break;
|
||
case 6:
|
||
str = '周六';
|
||
break;
|
||
case 7:
|
||
str = '周日';
|
||
break;
|
||
}
|
||
return str;
|
||
},
|
||
getStatusName () {
|
||
let str = '';
|
||
if (this.detail.paymentType <= '2') {// 状态大于2代表已支付
|
||
str = this.detail.paymentTypeName;
|
||
} else {
|
||
if (this.detail.refundStatus == 0) {
|
||
if (this.detail.orderItemList[0].classify == '4') {
|
||
// 0未激活 1已激活/启用 2禁用
|
||
if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') {
|
||
str = '待激活';
|
||
} else if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '1') {
|
||
str = '已激活';
|
||
} else if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '2') {
|
||
str = '禁用';
|
||
}
|
||
} else {
|
||
str = this.detail.verificationTypeName;
|
||
}
|
||
} else {
|
||
str = this.detail.refundStatusName;
|
||
}
|
||
}
|
||
return str;
|
||
},
|
||
getStatusMsg () {
|
||
const item = this.detail;
|
||
let str = '';
|
||
switch (item.paymentType) {
|
||
case '1':
|
||
str = '订单已取消';
|
||
break;
|
||
case '2':
|
||
str = '订单已关闭';
|
||
break;
|
||
case '200':
|
||
if (item.refundStatus == '0') {
|
||
if (this.detail.orderItemList[0].classify == '4') {
|
||
// 0未激活 1已激活/启用 2禁用
|
||
if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') str = '您已付款，请使用';
|
||
if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '1') str = '年卡已激活';
|
||
if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '2') str = '年卡已禁用';
|
||
} else {
|
||
if (item.verificationType == '0') str = '您已付款，请使用';
|
||
if (item.verificationType == '200') str = '订单已使用';
|
||
if (item.verificationType == '1') str = '订单已过期';
|
||
}
|
||
} else {
|
||
if (item.refundStatus == '1') str = '退款申请中，请等待审核';
|
||
if (item.refundStatus == '2' || item.refundStatus == '200') str = '退款金额将在1-3个工作日原路返还到支付账户中';
|
||
// if (item.refundStatus == '100') str = '您已付款，请使用';
|
||
if (item.refundStatus == '100') str = '退款申请已驳回';
|
||
}
|
||
break;
|
||
}
|
||
return str;
|
||
},
|
||
goRefund (info) {
|
||
uni.navigateTo({ url: `/pages/my/refund?id=${this.detail.id}` })
|
||
},
|
||
showCode () {
|
||
if (this.detail.paymentType == '200' && (this.detail.refundStatus == '0' || this.detail.refundStatus == '100') && this.detail.verificationType == '0') {
|
||
this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
|
||
success: res => {
|
||
uni.previewImage({
|
||
urls: [res.tempFilePath],
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
showListCode (info, index) {
|
||
if (info.paymentType == '200' && (info.refundStatus == '0' || info.refundStatus == '100') && info.verificationType == '0') {
|
||
this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].toTempFilePath({
|
||
success: res => {
|
||
uni.previewImage({
|
||
urls: [res.tempFilePath],
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
copyCode (code) {
|
||
uni.setClipboardData({
|
||
data: code,
|
||
success: () => {
|
||
uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
|
||
}
|
||
})
|
||
},
|
||
tabShowAll () {
|
||
this.showAll = !this.showAll;
|
||
this.$nextTick(() => {
|
||
if (this.showAll) {
|
||
this.detail.orderItemList[0].ticketOrderDetailList.forEach((item, index) => {
|
||
this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].make();
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
// 获取可退款门票是否大于0
|
||
getRefundList (info) {
|
||
let list = [];
|
||
if (info.orderItemList[0].totalPrice > 0) {
|
||
info.orderItemList[0].ticketOrderDetailList.forEach((item) => {
|
||
// 判断是否可退款
|
||
if (info.orderItemList[0].refundRule != '0' && item.paymentType == '200' && item.verificationType == '0' && (item.refundStatus == '0' || item.refundStatus == '100')) {
|
||
if (item.verificationMun == 0) {
|
||
let creaetd = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.orderTime) + ' 00:00:00').getTime() / 1000);
|
||
if (info.orderItemList[0].classify == '1') {// 普通票
|
||
// 判断是否再有效期
|
||
switch (info.orderItemList[0].refundRule) {
|
||
case '3':// 有效期可退
|
||
// let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityStartTime) + ' 00:00:00').getTime() / 1000);
|
||
let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityEndTime) + ' 23:59:59').getTime() / 1000);
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
// 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
|
||
if (nowtime <= endTime) list.push(item);
|
||
break;
|
||
case '4':// 几天内可退
|
||
let nowdata = parseInt(new Date().getTime() / 1000);
|
||
// 当前时间减下单时间如果小于等于后台设定天数。门票可退
|
||
if (((nowdata - creaetd) / 60 / 60 / 24) <= info.orderItemList[0].refundDay) list.push(item);
|
||
break;
|
||
}
|
||
} else if (info.orderItemList[0].classify == '2') {// 套票
|
||
let num = 0;// 大于0代表已经使用过
|
||
switch (info.orderItemList[0].refundRule) {
|
||
case '3':// 有效期可退
|
||
item.orderDetailChildList.forEach((child, childIndex) => {
|
||
if (child.verificationNum > 0) num ++;
|
||
})
|
||
if (num == 0) {
|
||
// let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityStartTime) + ' 00:00:00').getTime() / 1000);
|
||
let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityEndTime) + ' 23:59:59').getTime() / 1000);
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
// 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
|
||
if (nowtime <= endTime) list.push(item);
|
||
}
|
||
break;
|
||
case '4':// 几天内可退
|
||
item.orderDetailChildList.forEach((child, childIndex) => {
|
||
if (child.verificationNum > 0) num ++;
|
||
})
|
||
if (num == 0) {
|
||
let nowtime = parseInt(new Date().getTime() / 1000);
|
||
console.log(nowtime - creaetd)
|
||
// 当前时间减下单时间如果小于等于后台设定天数。门票可退
|
||
if (((nowtime - creaetd) / 60 / 60 / 24) <= info.orderItemList[0].refundDay) list.push(item);
|
||
}
|
||
break;
|
||
}
|
||
} else if (info.orderItemList[0].classify == '4') {// 年卡
|
||
if (item.activationStatus == '0') {
|
||
list.push(item)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
return list;
|
||
},
|
||
closePopup() {
|
||
this.showActivate = false;
|
||
},
|
||
async submitPopup() {
|
||
let obj = { id: this.detail.orderItemList[0].ticketOrderDetailList[0].id, activationStatus: 1 };
|
||
let info = await this.$http.orderActivation(obj);
|
||
if (info.code == 200) {
|
||
uni.showToast({ mask:true, title: '激活成功', icon: 'success' });
|
||
this.closePopup();
|
||
this.getDetail(this.detail.id);
|
||
} else uni.showToast({ mask:true, title: info.msg, icon: 'none' });
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{ background: #F6F6F6; }
|
||
.navbar_title{ color: #fff; }
|
||
.banner{
|
||
width: 100%; background: #03AE80; height: 218rpx; box-sizing: border-box; padding: 32rpx 0 0 62rpx; position: relative;
|
||
view{
|
||
color: #fff;
|
||
&:nth-child(1){ line-height: 68rpx; font-size: 48rpx; font-weight: 500; }
|
||
&:nth-child(2){
|
||
margin-top: 6rpx; display: flex; align-items: center; font-size: 28rpx;
|
||
text:last-child{ margin-left: 16rpx; line-height: 46rpx; font-size: 32rpx; font-weight: 500; }
|
||
}
|
||
}
|
||
image{ width: 245rpx; height: 245rpx; position: absolute; right: 32rpx; bottom: -39rpx; }
|
||
}
|
||
.waper_box{
|
||
width: 100%; box-sizing: border-box; padding: 0 32rpx 148rpx; margin-top: -46rpx; position: relative; z-index: 3;
|
||
.refund_msg{
|
||
width: 100%; height: 104rpx; box-sizing: border-box; padding: 0 24rpx; background: #fff; border-radius: 10rpx; margin-bottom: 24rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.left{
|
||
display: flex; align-items: center; color: #666; font-size: 28rpx;
|
||
view:last-child{ color: #333; }
|
||
}
|
||
.right{
|
||
display: flex; justify-content: center; align-items: center;
|
||
.text{ color: #999; font-size: 28rpx; margin-right: 8rpx; }
|
||
}
|
||
}
|
||
.info{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 29rpx 24rpx 32rpx;
|
||
.title{
|
||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 32rpx;
|
||
view{
|
||
&:nth-child(1){ color: #333; font-size: 32rpx; font-weight: 500; }
|
||
&:nth-child(2){
|
||
padding-left: 24rpx; position: relative; line-height: 51rpx; color: #FF5833; font-size: 42rpx; font-weight: bold;
|
||
&::after{ content: "￥"; color: #FF5833; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
|
||
}
|
||
}
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
.shop{
|
||
min-height: 40rpx; margin-bottom: 12rpx; position: relative; box-sizing: border-box; padding-right: 160rpx;
|
||
view{
|
||
&:nth-child(1){ color: #333; font-size: 28rpx; font-weight: 500; width: 100%; line-height: 40rpx; }
|
||
&:nth-child(2){
|
||
display: flex; align-items: center; color: #999; font-size: 28rpx; position: absolute; right: 0; top: 0; height: 40rpx;
|
||
text:last-child{ margin-left: 10rpx; }
|
||
}
|
||
}
|
||
}
|
||
.time{
|
||
height: 40rpx; display: flex; align-items: center; color: #666; font-size: 28rpx;
|
||
text:last-child{ color: #01BE69; }
|
||
}
|
||
.classify{
|
||
width: 100%; box-sizing: border-box; padding-left: 140rpx; position: relative; margin-top: 16rpx;
|
||
.left{ color: #000; font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 40rpx; }
|
||
.right{ min-height: 40rpx; color: #666; font-size: 28rpx; margin-bottom: 4rpx; line-height: 40rpx; }
|
||
}
|
||
}
|
||
}
|
||
.ticket{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 29rpx 24rpx 32rpx; margin-top: 24rpx;
|
||
.title{
|
||
margin-bottom: 32rpx; width: 100%; box-sizing: border-box; padding-right: 180rpx; position: relative;
|
||
view{
|
||
&:nth-child(1){ color: #333; font-size: 32rpx; font-weight: 500; line-height: 51rpx; }
|
||
&:nth-child(2){
|
||
padding-left: 24rpx; position: absolute; line-height: 50rpx; color: #FF5833; font-size: 42rpx; font-weight: bold; right: 0; top: 0;
|
||
&::after{ content: "￥"; color: #FF5833; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
|
||
}
|
||
}
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
.list{
|
||
width: 100%; box-sizing: border-box; padding-left: 140rpx; position: relative; margin-bottom: 16rpx;
|
||
.left{ color: #666; font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 40rpx; }
|
||
.right{
|
||
min-height: 40rpx;
|
||
view{
|
||
color: #666; font-size: 28rpx; margin-bottom: 4rpx; line-height: 40rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
text{ color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
.equity {
|
||
display: flex; align-items: center;
|
||
.text {
|
||
font-size: 28rpx; color: #3F79FF; margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 24rpx;
|
||
.title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
||
.cont{
|
||
width: 100%; margin-top: 32rpx;
|
||
.list{
|
||
width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
view{ color: #666; font-size: 28rpx; }
|
||
&:nth-child(4) view:nth-child(2), &:nth-child(5) view:nth-child(2){ color: #333; }
|
||
&:nth-child(4) view:nth-child(2){
|
||
display: flex; align-items: center;
|
||
text:last-child{
|
||
color: #3F79FF; position: relative; margin-left: 48rpx;
|
||
&::after{ content: ""; width: 2rpx; height: 20rpx; background: #A2A2A4; position: absolute; left: -23rpx; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.refund{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 24rpx;
|
||
.title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
||
.cont{
|
||
width: 100%; margin-top: 32rpx;
|
||
view{
|
||
&:nth-child(1){ display: inline-block; padding: 0 32rpx; background: rgba(3,174,128,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #03AE80; font-size: 20rpx; }
|
||
&:nth-child(2){ margin-top: 12rpx; color: #666; line-height: 40rpx; font-size: 28rpx; }
|
||
}
|
||
}
|
||
.fee{
|
||
width: 100%; margin-top: 12rpx;
|
||
.fee_title{ display: inline-block; padding: 0 32rpx; background: rgba(255,88,51,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #FF5833; font-size: 20rpx; }
|
||
.fee_cont{
|
||
color: #666; line-height: 40rpx; font-size: 28rpx;
|
||
view{ margin-top: 12rpx; }
|
||
}
|
||
}
|
||
}
|
||
.code_box{
|
||
width: 100%; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff; margin-top: 24rpx;
|
||
.title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
||
.num{
|
||
width: 100%; height: 40rpx; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 32rpx;
|
||
.line{ width: 100%; height: 0; border-top: 2rpx dashed rgba(0, 0, 0, 0.2); }
|
||
.text{ line-height: 40rpx; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; background: #fff; color: #666; font-size: 28rpx; padding: 0 18rpx; }
|
||
&::after{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; position: absolute; left: -40rpx; top: 50%; transform: translateY(-50%); border-radius: 50%; }
|
||
&::before{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; position: absolute; right: -40rpx; top: 50%; transform: translateY(-50%); border-radius: 50%; }
|
||
}
|
||
.code_list{
|
||
width: 100%; margin-top: 32rpx;
|
||
.list{
|
||
width: 100%; margin-bottom: 32rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
.code_info{
|
||
width: 100%; background: #FBFBFB; border-radius: 10rpx; box-sizing: border-box; padding: 0 24rpx;
|
||
view{
|
||
width: 100%; display: flex; align-items: center; height: 40rpx; margin-bottom: 16rpx; position: relative;
|
||
&:first-child{ padding-top: 28rpx; }
|
||
&:last-child{ margin-bottom: 0; padding-bottom: 28rpx; }
|
||
text{
|
||
font-size: 28rpx;
|
||
&:nth-child(1){ color: #999; }
|
||
&:nth-child(2){ color: #333; margin-left: 20rpx; }
|
||
&.active{ color: #03AE80; line-height: 40rpx; position: absolute; right: 0; }
|
||
&.default{ color: #FF5833; line-height: 40rpx; position: absolute; right: 0; }
|
||
}
|
||
}
|
||
}
|
||
.code_img{
|
||
width: 262rpx; height: 262rpx; margin: 24rpx auto 20rpx; position: relative;
|
||
.qrcode_box{ width: 100%; height: 100%; }
|
||
}
|
||
.code_num{
|
||
width: 100%; display: flex; align-items: center; justify-content: center;
|
||
view{
|
||
color: #666; font-size: 28rpx; margin-right: 24rpx;
|
||
&:last-child{ margin-right: 0; }
|
||
text{ color: #03AE80; }
|
||
}
|
||
}
|
||
.code_text{
|
||
width: 100%; margin-top: 8rpx; display: flex; justify-content: center; align-items: center;
|
||
view{
|
||
color: #666; font-size: 28rpx; margin-right: 20rpx;
|
||
&:last-child{ margin-right: 0; color: #3F79FF; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.showAll{
|
||
width: 100%; margin-top: 32rpx; height: 40rpx; display: flex; justify-content: center; align-items: center;
|
||
.show_waper{
|
||
display: flex; justify-content: center; align-items: center;
|
||
.text{ color: #999; font-size: 28rpx; margin-right: 12rpx; }
|
||
}
|
||
}
|
||
}
|
||
.tourist {
|
||
width: 100%; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff; margin-top: 24rpx;
|
||
.title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
||
.tourist_card {
|
||
margin-top: 32rpx; width: 100%; background: #FBFBFB; border-radius: 10rpx; box-sizing: border-box; padding: 0 24rpx; position: relative;
|
||
.card_info {
|
||
view{
|
||
width: 100%; display: flex; align-items: center; height: 40rpx; margin-bottom: 16rpx; position: relative;
|
||
&:first-child{ padding-top: 28rpx; }
|
||
&:last-child{ margin-bottom: 0; padding-bottom: 28rpx; }
|
||
text{
|
||
font-size: 28rpx;
|
||
&:nth-child(1){ color: #999; }
|
||
&:nth-child(2){ color: #333; margin-left: 20rpx; }
|
||
}
|
||
}
|
||
}
|
||
.activate_btn {
|
||
position: absolute; top: 36rpx; right: 24rpx; padding: 18rpx 33rpx; background: #03AE80; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 24rpx; color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom_waper{
|
||
width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 10; box-shadow: 0 -1rpx 6rpx 0 rgba(0,0,0,0.05);
|
||
.btns{
|
||
width: 100%; height: 120rpx; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: flex-end; align-items: center;
|
||
view{
|
||
width: 228rpx; height: 80rpx; border-radius: 66rpx; margin-right: 20rpx; box-sizing: border-box; border: 2rpx solid #A2A2A4; text-align: center; line-height: 76rpx; font-size: 30rpx; color: #999;
|
||
&:last-child{ margin-right: 0; }
|
||
&.active{ background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border: none; line-height: 80rpx; color: #fff; }
|
||
}
|
||
}
|
||
}
|
||
.equity_waper{
|
||
width: 100%; background: #fff; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box; padding: 32rpx;
|
||
.title{
|
||
height: 46rpx; text-align: center; line-height: 46rpx; position: relative; color: #333; font-size: 32rpx; font-weight: 500;
|
||
.icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.content{
|
||
padding: 20rpx 24rpx 48rpx;
|
||
.item {
|
||
padding-top: 20rpx; font-size: 28rpx; color: #666666; display: flex;
|
||
.name { margin-right: 32rpx; max-width: 220rpx; }
|
||
.frequency {
|
||
flex: 1;
|
||
.num { color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.popup_waper{
|
||
width: 596rpx; height: 398rpx; position: relative;
|
||
.refund_box{
|
||
width: 100%; box-sizing: border-box; padding: 64rpx 46rpx 0; position: absolute; left: 0; top: 0;
|
||
.title{ line-height: 56rpx; text-align: center; color: #000; font-size: 40rpx; font-weight: 500; }
|
||
.content{ margin-top: 28rpx; color: #333; font-size: 30rpx; font-weight: 500; line-height: 42rpx; text-align: center; }
|
||
.btns{
|
||
margin-top: 62rpx; display: flex; justify-content: space-between; align-items: center;
|
||
view{
|
||
width: 240rpx; height: 80rpx; border-radius: 10rpx; text-align: center; box-sizing: border-box; line-height: 76rpx; color: #666; font-size: 30rpx; border: 2rpx solid #EBECEE;
|
||
&:last-child{ background: #01BE69; border-color: #01BE69; color: #fff; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |