zhwl-miniapp/pages/my/unpaid.vue
2025-06-26 12:38:35 +08:00

995 lines
55 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="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;'">
<view class="banner">
<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="detail_waper">
<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="detail_money">
<view>
<text>总金额:</text>
<text>{{detail.totalPrice}}</text>
</view>
<view>{{detail.buyQuantity}}张</view>
</view>
<view class="detail_list" v-for="(ticket, ticketIndex) in detail.orderItemList" :key="ticketIndex">
<view class="top">
<view class="title">
<view>{{ticket.ticketName}}</view>
<view>{{ticket.totalPrice}}</view>
</view>
<view class="content">
<view class="list">
<view>订单数量:</view>
<view>{{ticket.price}} x{{ticket.buyQuantity}}</view>
</view>
<view class="list" style="margin-bottom: 4rpx;">
<view>有效期:</view>
<view v-if="ticket.ticketOrderDetailList[0].availableStartTime && ticket.ticketOrderDetailList[0].availableEndTime">
<template v-if="ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0] == ticket.ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
<text>{{ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
当日有效
</template>
<template v-else>
<text>{{ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
<text>{{ticket.ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>
有效
</template>
</view>
<view v-else>
{{ticket.ticketValidityPeriod == '2' ? '购买后' : '激活后'}}<text>{{ticket.buyPeriodDay}}</text>天有效
</view>
</view>
<view class="list" v-if="getWeekMsg(ticket)">
<view></view>
<view>({{getWeekMsg(ticket) + ((ticket.classify == '4' || ticket.classify == '5') && getWeekMsg(ticket) ? '不可用' : '')}})</view>
</view>
<view class="list" v-if="ticket.timeQuantum">
<view>场次:</view>
<view>{{ticket.timeQuantum}}</view>
</view>
<view class="list" v-if="ticket.timeQuantum">
<view>入园时间:</view>
<view>{{ticket.admissionTime ? ticket.admissionTime.split(',').join('-') : '以景区入园时间为准'}}</view>
</view>
<view class="list" v-if="ticket.classify == '2'">
<view>包含子票:</view>
<view>
<text v-for="(i, index) in ticket.ticketChildList" :key="index" style="color: #666;">{{i.childTicketName}}-1张</text>
</view>
</view>
</view>
<view class="refund">
<view class="equity" v-if="ticket.classify == '4' || ticket.classify == '5'" @click="showEquity = true;">
<view class="text">包含{{ticket.ticketChildList.length}}项权益</view>
<view class="icon">
<u-icon name="arrow-right" color="#3F79FF" size="26rpx" top="2rpx"></u-icon>
</view>
</view>
<view class="refund_rule" @click="setRefund(ticket)">退改规则</view>
</view>
</view>
<view class="bottom" v-if="ticket.paymentType == 200">
<!-- 年卡 -->
<template v-if="ticket.classify == '4' || ticket.classify == '5'">
<view class="code_list">
<view class="list" v-for="(item, itemIndex) in ticket.ticketOrderDetailList" :key="itemIndex">
<view class="code_info">
<view>
<text>出行人</text>
<text>{{item.userName}}</text>
</view>
<view style="padding-bottom: 28rpx;">
<text>身份证</text>
<text>{{item.identityCard}}</text>
</view>
<view class="active_btn" v-if="item.paymentType == 200 && (item.refundStatus == '0' || item.refundStatus == '100') && item.activationStatus == '0'" @click="showActivate = true;">去激活</view>
</view>
</view>
</view>
</template>
<!-- 其他票 -->
<template v-else>
<!-- 一票一码 -->
<view class="code_list" v-if="ticket.qrcodeRule == '1'">
<view class="list" v-for="(item, itemIndex) in ticket.ticketOrderDetailList" :key="itemIndex" v-show="ticket.showAll || itemIndex == 0">
<!-- 用户信息 -->
<template>
<!-- 所有人都有身份证 -->
<view class="code_info" v-if="ticket.authenticationType == '3'">
<view >
<text>出行人</text>
<text>{{item.userName}}</text>
<template v-if="item.refundStatus > 0">
<text class="default" v-if="item.refundStatus == '1'">退款中</text>
<text class="default" v-if="item.refundStatus == '100'">退款已驳回</text>
<text class="default" v-if="item.refundStatus == '4'">退款失败</text>
<text class="active" v-if="item.refundStatus == '2' || item.refundStatus == '200'">{{item.refundStatusName}}</text>
</template>
<template v-else>
<text class="active" v-if="item.verificationType == '200'">已核销</text>
</template>
</view>
<view>
<text>身份证</text>
<text>{{item.identityCard}}</text>
</view>
</view>
<!-- 只有一个身份证 -->
<view class="code_info" v-else>
<template v-if="itemIndex == 0">
<view>
<text>出行人</text>
<text>{{item.userName}}</text>
<template v-if="item.refundStatus > 0">
<text class="default" v-if="item.refundStatus == '1'">退款中</text>
<text class="default" v-if="item.verificationType != '200' && item.refundStatus == '100'">退款已驳回</text>
<text class="default" v-if="item.refundStatus == '4'">退款失败</text>
<text class="active" v-if="item.refundStatus == '2' || item.refundStatus == '200'">{{item.refundStatusName}}</text>
</template>
<template v-else>
<text class="active" v-if="item.verificationType == '200'">已核销</text>
</template>
</view>
<view>
<text>身份证</text>
<text>{{item.identityCard}}</text>
</view>
</template>
<template v-else>
<view>
<text>订单号</text>
<text>{{item.verificationCode}}</text>
<text v-if="item.verificationType == '200'" class="active">已核销</text>
<text v-if="item.refundStatus == '2' || item.refundStatus == '200'" class="active">{{item.refundStatusName}}</text>
<text v-if="item.refundStatus == '1' || item.refundStatus == '100'" class="default">{{item.refundStatus == '1' ? '退款中' : '退款已驳回'}}</text>
</view>
</template>
</view>
</template>
<!-- 二维码 -->
<template>
<view class="code_img" @click="showListCode(item, itemIndex)" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3')">
<uqrcode :ref="'uqrcode' + itemIndex" :canvas-id="'qrcode' + itemIndex" :value="item.verificationCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
</view>
<view class="code_num" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3') && ticket.classify == '1'">
<view>可核销次数:<text>{{item.canVerificationMun - item.verificationMun}}</text></view>
<view>总核销次数:<text>{{item.canVerificationMun}}</text></view>
</view>
<view class="code_text" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3')">
<view>{{item.verificationCode}}</view>
<view @click="copyCode(item.verificationCode)">复制</view>
</view>
</template>
</view>
</view>
<view class="showAll" v-if="ticket.ticketOrderDetailList.length > 1 && ticket.qrcodeRule == '1'">
<view class="show_waper" @click="tabShowAll(ticketIndex)">
<view class="text">{{ticket.showAll ? '收起' : '展开全部'}}</view>
<view class="icon">
<u-icon :name="ticket.showAll ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx" top="2rpx"></u-icon>
</view>
</view>
</view>
<!-- 多票一码 只会出现一张身份证 -->
<view class="code_list" v-if="ticket.qrcodeRule == '2'">
<view class="list">
<view class="code_info">
<view>
<text>出行人</text>
<text>{{ticket.userName}}</text>
<text class="active" v-if="ticket.verificationType == '200'">已核销</text>
<text class="default" v-if="ticket.refundStatus == '1'">退款中</text>
<text class="default" v-if="ticket.verificationType != '200' && ticket.refundStatus == '100'">退款已驳回</text>
<text class="active" v-if="ticket.refundStatus == '2' || ticket.refundStatus == '200'">{{ticket.refundStatusName}}</text>
</view>
<view>
<text>身份证</text>
<text>{{ticket.identityCard}}</text>
</view>
<view v-if="ticket.verificationType == '200' || ticket.refundStatus > 0">
<text>订单号</text>
<text>{{ticket.orderCode}}</text>
</view>
</view>
<view class="code_img" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')" @click="showCode(ticket)">
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="ticket.orderCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
</view>
<view class="code_num" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')">
<view>可核销张数:<text>{{ticket.verificationMunTotal}}</text></view>
<view>总核销张数:<text>{{ticket.ticketOrderDetailList.length}}</text></view>
</view>
<view class="code_text" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')">
<view>{{ticket.orderCode}}</view>
<view @click="copyCode(ticket.orderCode)">复制</view>
</view>
</view>
</view>
</template>
</view>
</view>
<view class="order">
<view class="title">订单信息</view>
<view class="cont">
<view class="list">
<view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">联系人</view>
<view v-else>购票人</view>
<view>{{detail.userName}}</view>
</view>
<view class="list">
<view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">联系电话</view>
<view v-else>手机号</view>
<view>{{detail.mobilePhone}}</view>
</view>
<view class="list">
<view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">身份证号码</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' || detail.orderItemList[0].classify == '5'">创建时间</view>
<view v-else>下单时间</view>
<view>{{$utils.formatDate('Y-M-D h:m:s', detail.createTime)}}</view>
</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="showRefund" bgColor="transparent" closeOnClickOverlay mode="center" @close="closeRefund">
<view class="refund_popup">
<view class="title">退改规则
<view class="icon" @click="closeRefund">
<u-icon name="close" color="#333" size="28rpx"></u-icon>
</view>
</view>
<view class="refund_cont" v-if="refundInfo">
<view class="cont">
<view>{{refundInfo.refundRuleName}}</view>
<view v-if="refundInfo.refundRule == '0'">{{refundInfo.refundRemark || '门票一经售出,不可退款'}}
</view>
<view v-if="refundInfo.refundRule == '3'">门票有效期内可退</view>
<view v-if="refundInfo.refundRule == '4'">订单生成后{{refundInfo.refundDay}}天内可退</view>
<view v-if="refundInfo.refundRule == '5'">未激活可退</view>
</view>
<view class="fee" v-if="refundInfo.refundRule > 0">
<view class="fee_title">退款手续费</view>
<view class="fee_cont">
<view v-if="refundInfo.isFee == 0">无需手续费</view>
<view v-if="refundInfo.isFee == 1 && refundInfo.feeType == '1'">
退款需扣除手续费{{(refundInfo.deductionFees) + (refundInfo.deductionFeesUnit == '1' ? '%' : '元')}}
</view>
<view v-if="refundInfo.isFee == 1 && refundInfo.feeType == '2'"
v-for="(i, index) in JSON.parse(refundInfo.deductionJson)" :key="index">
游玩前{{i.day}}天内退票,需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- 年卡权益 -->
<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 {
id: null,
showActivate: false,
showRefund: false,
refundInfo: null,
safeAreaBottom: 0,
size: 0,
timeNum: 0,
timer: null,
configData: null,
detail: null,
showRefundBtn: false,
showEquity: false
}
},
onLoad (options) {
this.safeAreaBottom = this.$safeAreaBottom;
this.size = uni.upx2px(262);
this.id = options.id;
this.getDetail(options.id)
},
onShow() {
this.getDetail(this.id)
},
onUnload () {
clearInterval(this.timer);
this.timer = null;
},
methods: {
setRefund (info) {
this.refundInfo = info;
this.showRefund = true;
},
closeRefund () {
this.showRefund = false;
this.refundInfo = null;
},
async getDetail (id) {
this.showRefundBtn = false;
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);
if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
this.setIntervalFn()
}
}
for (var i = 0; i < this.detail.orderItemList.length; i ++) {
this.detail.orderItemList[i].showAll = false;
}
let showRefundList = false;
this.detail.orderItemList[0].ticketOrderDetailList.forEach((item) => {
if (item.refundStatus > 0 && item.refundStatus != 3) showRefundList = true;
})
this.detail.showRefundList = showRefundList;
// 判断是否可退款
let refundNum = this.getRefundList(info.data);
console.log(refundNum)
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)
},
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' || this.detail.orderItemList[0].classify == '5') {
// 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;
},
secondsToTime(seconds) {
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
},
getWeekMsg (info) {
let list = info.applicablePeriod ? info.applicablePeriod.split(',') : [];
if (list.length == 0) {
return false;
}
let time = [];
list.forEach((item) => {
time.push(Number(item));
})
let weekLabel = '';
if (info.classify == '4' || info.classify == '5') {
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;
},
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' || this.detail.orderItemList[0].classify == '5') {
// 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;
},
copyCode (code) {
uni.setClipboardData({
data: code,
success: () => {
uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
}
})
},
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' })
},
goRefund (info) {
uni.navigateTo({ url: `/pages/my/refund?id=${this.detail.id}` })
},
async goPay() {
let parmas = {
orderItemList: [{
ticketName: this.detail.orderItemList[0].ticketName,
totalPrice: this.detail.orderItemList[0].totalPrice
}],
id: this.detail.id
};
uni.navigateTo({
url: `/pages/my/payment?parmas=${JSON.stringify(parmas)}`
})
// if (this.detail.paymentMethod == '7') {
// let info = await this.$http.continuePayment(this.detail.id);
// if (info.code == 200) {
// uni.showToast({ mask: true, title: '支付成功', icon: 'success' });
// this.getDetail(this.detail.id)
// }
// } else {
// let info = await this.$http.getTicketOrderSession({ orderId: this.detail.id });
// uni.showLoading({ mask: true });
// const prepayId = JSON.parse(info.msg);
// 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' })
// }
// });
// }
},
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],
});
}
});
}
},
showCode (info) {
if (info.paymentType == '200' && (info.refundStatus == '0' || info.refundStatus == '100') && info.verificationType == '0') {
this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
success: res => {
uni.previewImage({
urls: [res.tempFilePath],
});
}
});
}
},
tabShowAll (ticketIndex) {
let bol = this.detail.orderItemList[ticketIndex].showAll;
this.$set(this.detail.orderItemList[ticketIndex], 'showAll', !bol);
this.$forceUpdate();
this.$nextTick(() => {
if (this.detail.orderItemList[ticketIndex].showAll) {
this.detail.orderItemList[ticketIndex].ticketOrderDetailList.forEach((item, index) => {
this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].make();
})
}
})
},
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' });
},
// 获取可退款门票是否大于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' || info.orderItemList[0].classify == '5') {// 年卡
if (item.activationStatus == '0') {
list.push(item)
}
}
}
}
})
}
return list;
}
}
}
</script>
<style lang="scss">
page{ background: #F6F6F6; }
.navbar_title{ color: #fff; }
.waper_box{ padding-bottom: 168rpx; }
.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; }
}
.detail_waper{
width: 100%; box-sizing: border-box; padding: 0 32rpx; margin-top: -46rpx; position: relative;
.refund_msg{
width: 100%; height: 104rpx; box-sizing: border-box; padding: 0 24rpx; background: #fff; border-radius: 10rpx; margin-bottom: 20rpx; 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; }
}
}
.detail_money{
width: 100%; margin-bottom: 20rpx; box-sizing: border-box; padding: 32rpx 24rpx; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10rpx;
view{
height: 40rpx; display: flex; align-items: center; color: #666; font-size: 28rpx;
text{
&:last-child{ color: #FF5833; font-size: 42rpx; font-weight: 600; }
}
}
}
.detail_list{
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 20rpx;
&:last-child{ margin-bottom: 0; }
.top{
width: 100%;
.title{
width: 100%; height: 46rpx; box-sizing: border-box; padding-right: 200rpx; position: relative;
view{
&:nth-child(1){ color: #333; line-height: 46rpx; font-size: 32rpx; font-weight: 500; }
&:nth-child(2){
position: absolute; right: 0; top: 0; line-height: 46rpx; color: #FF5833; font-size: 42rpx; font-weight: 600; padding-left: 24rpx;
&::after{ content: "¥"; color: #FF5833; font-size: 24rpx; font-weight: 400; position: absolute; left: 0; bottom: 0; line-height: 36rpx; }
}
}
}
.content{
width: 100%; margin-top: 32rpx;
.list{
width: 100%; margin-bottom: 16rpx; min-height: 40rpx; box-sizing: border-box; padding-left: 140rpx; color: #666; font-size: 28rpx; position: relative;
&:last-child{ margin-bottom: 0; }
view:first-child{ position: absolute; left: 0; top: 0; width: 140rpx; text-align: justify; text-align-last: justify; }
text{ color: #03AE80; }
}
}
.refund{
width: 100%; margin-top: 32rpx; height: 34rpx; position: relative;
.equity {
display: flex; align-items: center; height: 34rpx; position: absolute; left: 0; top: 0;
.text { font-size: 28rpx; color: #3F79FF; margin-right: 8rpx; }
}
.refund_rule{ color: #3F79FF; line-height: 34rpx; font-size: 28rpx; position: absolute; right: 0; top: 0; }
}
}
.bottom{
width: 100%; margin-top: 46rpx; border-top: 2rpx dashed rgba(0, 0, 0, 0.2); position: relative; padding-top: 46rpx;
&::after{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; border-radius: 50%; position: absolute; left: -40rpx; top: -16rpx; }
&::before{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; border-radius: 50%; position: absolute; right: -40rpx; top: -16rpx; }
.code_list{
width: 100%;
.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; position: relative;
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; }
}
&.active_btn{ position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%); width: 138rpx; height: 72rpx; padding: 0; color: #fff; font-size: 24rpx; justify-content: center; background: #03AE80; border-radius: 10rpx; }
}
}
.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; }
}
}
}
}
.order{
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 20rpx;
.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%); }
}
}
}
}
}
}
.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; }
}
}
}
.refund_popup{
width: 638rpx; box-sizing: border-box; padding: 32rpx 32rpx 36rpx; background: #fff; border-radius: 10rpx;
.title{
width: 100%; height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; position: relative; text-align: center;
.icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.refund_cont{
width: 100%; border-top: 2rpx solid rgba(0, 0, 0, 0.1); margin-top: 28rpx; box-sizing: border-box; padding: 28rpx 8rpx 0;
.cont{
width: 100%;
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: 30rpx;
.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; }
}
}
}
}
.equity_waper{
width: 100%; background: #fff; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box; padding: 40rpx 56rpx;
.title{
height: 50rpx; text-align: center; line-height: 50rpx; position: relative; color: #333; font-size: 36rpx; font-weight: 500;
.icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
.content{
padding: 40rpx 0 48rpx;
.item {
margin-bottom: 20rpx; font-size: 28rpx; color: #666666; display: flex; line-height: 40rpx;
&:last-child{ margin-bottom: 0; }
.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>