368 lines
18 KiB
Vue
368 lines
18 KiB
Vue
<template>
|
|
<view class="uni-container">
|
|
<u-navbar :autoBack="true" :bgColor="bgColor">
|
|
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
|
票务订单
|
|
</view>
|
|
</u-navbar>
|
|
<view class="menu" :style="'top: ' + navHeight + 'px;'">
|
|
<view :class="{ active: menuIndex === '' }" @click="tabMenu('')">全部</view>
|
|
<view :class="{ active: menuIndex === '0' }" @click="tabMenu('0')">待付款</view>
|
|
<view :class="{ active: menuIndex === '1' }" @click="tabMenu('1')">待使用</view>
|
|
<view :class="{ active: menuIndex === '2' }" @click="tabMenu('2')">已核销</view>
|
|
<view :class="{ active: menuIndex === '3' }" @click="tabMenu('3')">退款</view>
|
|
</view>
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
|
<view class="list_waper" v-if="menuIndex < 3">
|
|
<navigator hover-class="none" class="list" v-for="(item, index) in list " :key="index" :url="'/pages/my/unpaid?id=' + item.id">
|
|
<view class="title">
|
|
<view class="text">订单编号：{{item.orderCode}}</view>
|
|
<view class="status" :style="{'color': getStatusColor(item)}">{{getStatusName(item)}}</view>
|
|
</view>
|
|
<view class="info" v-if="item.orderItemList">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(item.orderItemList[0].image11)" mode=""></image>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="col col1">{{item.orderItemList[0].ticketName}}</view>
|
|
<view class="col col2">下单：{{item.createTime}}</view>
|
|
<view class="col col3" v-if="item.orderItemList[0].ticketOrderDetailList[0].availableStartTime && item.orderItemList[0].ticketOrderDetailList[0].availableEndTime">
|
|
<template v-if="item.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0] == item.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
|
|
<text>{{item.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
|
|
当日有效
|
|
</template>
|
|
<template v-else>
|
|
<text>{{item.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
|
|
至
|
|
<text>{{item.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>
|
|
有效
|
|
</template>
|
|
</view>
|
|
<view class="col col3" v-else>
|
|
{{item.orderItemList[0].ticketValidityPeriod == '2' ? '购买后' : '激活后'}}{{item.orderItemList[0].buyPeriodDay}}天有效
|
|
</view>
|
|
<view class="price">
|
|
<view>￥{{item.orderItemList[0].totalPrice}}</view>
|
|
<view>共{{item.orderItemList[0].buyQuantity}}张</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btns" v-if="item.paymentType == '0' || item.showRefund">
|
|
<view class="btn default" v-if="item.paymentType == '0'" @click.stop="cancelOrder(item.orderCode)">取消订单</view>
|
|
<view class="btn active" v-if="item.paymentType == '0'" @click.stop="payOrder(item)">立即支付</view>
|
|
<view class="btn default" v-if="item.showRefund" @click.stop="goRefund(item)">申请退款</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view class="list_waper" v-else>
|
|
<navigator hover-class="none" class="list" v-for="(item, index) in list " :key="index" :url="'/pages/my/refundDetail?id=' + item.id">
|
|
<view class="title">
|
|
<view class="text">退款编号：{{item.refundCode}}</view>
|
|
<view class="status" :style="'color: ' + ((item.refundStatus == '2' || item.refundStatus == '200') ? '#03AE80' : '#FF5833')">{{item.refundStatusName}}</view>
|
|
</view>
|
|
<view class="info" v-if="item.orderRefundItemList">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(item.orderRefundItemList[0].zdyTicket.image11)" mode=""></image>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="col col1">{{item.orderRefundItemList[0].ticketName}}</view>
|
|
<view class="col col2">下单：{{item.orderTime}}</view>
|
|
<view class="col col3">申请：{{item.createTime}}</view>
|
|
<view class="price">
|
|
<view>￥{{item.orderRefundItemList[0].totalPrice}}</view>
|
|
<view>共{{item.orderRefundItemList[0].refundQuantity}}张</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data () {
|
|
return {
|
|
navHeight: 0,
|
|
paddingTop: 0,
|
|
bgColor: '#fff',
|
|
menuIndex: '',
|
|
list: [],
|
|
downOption: { auto: false }
|
|
}
|
|
},
|
|
onLoad (options) {
|
|
if (options.index) this.menuIndex = options.index;
|
|
this.navHeight = this.$paddingTop;
|
|
this.paddingTop = this.$paddingTop + uni.upx2px(105);
|
|
},
|
|
onShow () {
|
|
this.mescroll && this.mescroll.resetUpScroll();
|
|
},
|
|
methods: {
|
|
getStatusName (item) {
|
|
let str = '';
|
|
if (item.paymentType <= '2') {// 状态大于2代表已支付
|
|
str = item.paymentTypeName;
|
|
} else {
|
|
if (item.refundStatus == 0) {
|
|
str = item.verificationTypeName;
|
|
} else {
|
|
str = item.refundStatusName;
|
|
}
|
|
}
|
|
return str;
|
|
},
|
|
getStatusColor(item) {
|
|
let color = '';
|
|
if (item.paymentType <= '2') {// 状态大于2代表已支付
|
|
color = item.paymentType == '0' ? '#FF5833' : '#999999'
|
|
} else {
|
|
if (item.refundStatus == 0) {
|
|
color = item.verificationType == '0' ? '#03AE80' : '#999999'
|
|
} else {
|
|
color = '#999999'
|
|
}
|
|
}
|
|
return color;
|
|
},
|
|
async cancelOrder (orderCode) {
|
|
let info = await this.$http.cancelTicketOrderPrepay(orderCode);
|
|
if (info.code == 200) {
|
|
uni.showToast({ mask: true, title: '操作成功', icon: 'success' })
|
|
this.mescroll.resetUpScroll();
|
|
} else uni.showToast({ mask: true, title: info.msg, icon: 'none' })
|
|
},
|
|
async payOrder (item) {
|
|
let parmas = {
|
|
orderItemList: [{
|
|
ticketName: item.orderItemList[0].ticketName,
|
|
totalPrice: item.orderItemList[0].totalPrice
|
|
}],
|
|
id: item.id
|
|
};
|
|
uni.navigateTo({
|
|
url: `/pages/my/payment?parmas=${JSON.stringify(parmas)}`
|
|
})
|
|
|
|
|
|
// if (item.paymentMethod == '7') {
|
|
// let info = await this.$http.continuePayment(item.id);
|
|
// if (info.code == 200) {
|
|
// uni.showToast({ mask: true, title: '支付成功', icon: 'success' });
|
|
// this.mescroll.resetUpScroll();
|
|
// }
|
|
// } else {
|
|
// let info = await this.$http.getTicketOrderSession({ orderId: item.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.mescroll.resetUpScroll();
|
|
// },
|
|
// fail: (err) => {
|
|
// uni.hideLoading();
|
|
// uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
},
|
|
goRefund(e) {
|
|
uni.navigateTo({
|
|
url: `/pages/my/refund?id=${e.id}`
|
|
})
|
|
},
|
|
tabMenu (index) {
|
|
this.menuIndex = index;
|
|
this.list = [];
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
async upCallback (page) {
|
|
let obj = { pageNum: page.num, pageSize: page.size };
|
|
let info = null;
|
|
if (this.menuIndex == '3') {
|
|
info = await this.$http.getRefundList(obj);
|
|
} else {
|
|
if (this.menuIndex !== '') {
|
|
switch (this.menuIndex) {
|
|
case '0':
|
|
obj.paymentType = '0';
|
|
break;
|
|
case '1':
|
|
obj.paymentType = '200';
|
|
obj.verificationType = '0';
|
|
break;
|
|
case '2':
|
|
obj.verificationType = '200';
|
|
break;
|
|
}
|
|
}
|
|
info = await this.$http.getTicketOrderPrepay(obj);
|
|
}
|
|
if(page.num == 1) this.list = [];
|
|
// 判断是否包含可退票的门票
|
|
if (this.menuIndex != '3') {
|
|
info.rows.forEach((waper, waperIndex) => {
|
|
if (waper.orderItemList[0].totalPrice > 0) {
|
|
let list = [];
|
|
waper.orderItemList[0].ticketOrderDetailList.forEach((item, itemIndex) => {
|
|
if (waper.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.paymentTime) + ' 00:00:00').getTime() / 1000);
|
|
if (waper.orderItemList[0].classify == '1') {// 普通票
|
|
// 判断是否再有效期
|
|
switch (waper.orderItemList[0].refundRule) {
|
|
case '3':// 有效期可退
|
|
// let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.availableStartTime) + ' 00:00:00').getTime() / 1000);
|
|
let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.availableEndTime) + ' 23:59:59').getTime() / 1000);
|
|
let nowdate = parseInt(new Date().getTime() / 1000);
|
|
// 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
|
|
if (nowdate <= endTime) list.push(item);
|
|
break;
|
|
case '4':// 几天内可退
|
|
let nowtime = parseInt(new Date().getTime() / 1000);
|
|
console.log(nowtime - creaetd)
|
|
// 当前时间减下单时间如果小于等于后台设定天数。门票可退
|
|
if (((nowtime - creaetd) / 60 / 60 / 24) <= waper.orderItemList[0].refundDay) list.push(item);
|
|
break;
|
|
}
|
|
} else if (waper.orderItemList[0].classify == '2') {// 套票
|
|
// 判断是否再有效期
|
|
let num = 0;// 大于0代表已经使用过
|
|
switch (waper.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', item.availableStartTime) + ' 00:00:00').getTime() / 1000);
|
|
let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.availableEndTime) + ' 23:59:59').getTime() / 1000);
|
|
let nowdate = parseInt(new Date().getTime() / 1000);
|
|
// 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
|
|
if (nowdate <= 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) <= waper.orderItemList[0].refundDay) list.push(item);
|
|
}
|
|
break;
|
|
}
|
|
} else if (waper.orderItemList[0].classify == '4') {// 年卡
|
|
if (item.activationStatus == '0') {
|
|
list.push(item)
|
|
}
|
|
}
|
|
} else info.rows[waperIndex].showRefund = false;
|
|
} else info.rows[waperIndex].showRefund = false;
|
|
})
|
|
if (list.length > 0) info.rows[waperIndex].showRefund = true;
|
|
} else info.rows[waperIndex].showRefund = false;
|
|
})
|
|
}
|
|
|
|
this.list = this.list.concat(info.rows);
|
|
this.mescroll.endBySize(info.rows.length, info.total);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.menu{
|
|
width: 100%; height: 90rpx; margin-bottom: 15rpx; position: fixed; left: 0; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: space-between; align-items: center; background: #FBFBFB; z-index: 11;
|
|
view{
|
|
line-height: 46rpx; color: #333; font-size: 32rpx;
|
|
&.active{
|
|
position: relative; color: #03AE80; font-weight: 500;
|
|
&::after{ content: ""; width: 30rpx; height: 4rpx; background: #03AE80; position: absolute; left: 50%; transform: translateX(-50%); top: 52rpx; }
|
|
}
|
|
}
|
|
}
|
|
.list_waper{
|
|
width: 100%; box-sizing: border-box; padding: 0 32rpx 24rpx;
|
|
.list{
|
|
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff; border-radius: 10rpx; margin-bottom: 24rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.title{
|
|
width: 100%; box-sizing: border-box; padding-right: 120rpx; position: relative;
|
|
.text{color: #666; font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.status{ width: 120rpx; color: #03AE80; font-size: 28rpx; position: absolute; right: 0; top: 0; text-align: right; }
|
|
}
|
|
.info{
|
|
padding-left: 160rpx; margin-top: 24rpx; position: relative;
|
|
.img{
|
|
width: 140rpx; height: 140rpx; position: absolute; left: 0; top: 0;
|
|
image{ width: 100%; height: 100%; vertical-align: top; border-radius: 10rpx; }
|
|
}
|
|
.cont{
|
|
position: relative; width: 100%; box-sizing: border-box; padding-right: 100rpx; height: 140rpx;
|
|
.col{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
|
|
.col1{ color: #333; font-size: 28rpx; font-weight: 500; }
|
|
.col2{ margin-top: 20rpx; color: #666; font-size: 24rpx; }
|
|
.col3{ margin-top: 8rpx; color: #666; font-size: 24rpx; }
|
|
.price {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
text-align: center;
|
|
view {
|
|
&:nth-child(1) {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
&:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btns{ width: 100%; padding-top: 28rpx; margin-top: 32rpx; display: flex; justify-content: flex-end; align-items: center; border-top: 1rpx solid rgba(0,0,0,0.1);
|
|
.btn{
|
|
text-align: center; font-size: 28rpx; margin-right: 16rpx;
|
|
&:last-child{ margin-right: 0; }
|
|
}
|
|
.active {
|
|
width: 158rpx;
|
|
height: 64rpx;
|
|
background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%);
|
|
border-radius: 100rpx;
|
|
line-height: 64rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.default {
|
|
width: 156rpx;
|
|
height: 61rpx;
|
|
border-radius: 60rpx;
|
|
line-height: 61rpx;
|
|
border: 1rpx solid #A2A2A4;
|
|
color: #A2A2A4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |