545 lines
19 KiB
Vue
545 lines
19 KiB
Vue
<template>
|
||
<view class="uni-container">
|
||
<u-navbar :autoBack="true" left-icon-color="#fff" :placeholder="true" bgColor="#03AE80">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: 500; color: #fff;">申请退款</view>
|
||
</u-navbar>
|
||
<view class="banner"></view>
|
||
<view class="waper_box" v-if="detail">
|
||
<view class="sum-box">
|
||
<view class="handle">
|
||
<view class="label">{{detail.orderItemList[0].ticketName}}</view>
|
||
<view class="price"><text class="unit">￥</text>{{detail.orderItemList[0].totalPrice}}</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="validity-box">
|
||
<view class="validity" v-if="detail.orderItemList[0].ticketOrderDetailList.length">有效期：
|
||
<text v-if="detail.orderItemList[0].ticketValidityPeriod == '1'">
|
||
<text class="date">{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(" ")[0]}}</text>当天有效
|
||
</text>
|
||
<text v-if="detail.orderItemList[0].ticketValidityPeriod == '2'">
|
||
<text class="date">{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(" ")[0]}}</text>之前有效
|
||
</text>
|
||
<text v-if="detail.orderItemList[0].ticketValidityPeriod == '3'">
|
||
<text class="date">{{detail.orderItemList[0].validityStartTime}}</text>至
|
||
<text class="date">{{detail.orderItemList[0].validityEndTime}}</text>有效
|
||
</text>
|
||
<text v-if="detail.orderItemList[0].ticketValidityPeriod == '4'">
|
||
激活后<text class="date">{{detail.orderItemList[0].buyPeriodDay}}</text>天有效
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="time">订单数量：￥{{detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice}} x{{detail.orderItemList[0].ticketOrderDetailList.length}}</view>
|
||
</view>
|
||
<view class="refundNum">
|
||
<view class="row">
|
||
<view class="label1">可退款数量</view>
|
||
<view class="num">{{ticketOrderDetailList.length}}张</view>
|
||
</view>
|
||
<view class="row row1" v-if="detail.orderItemList[0].qrcodeRule == 2">
|
||
<view class="label2">退款数量</view>
|
||
<u-number-box :min="1" :max="ticketOrderDetailList.length" :step="1" v-model="buyNum" @change="buyNumChange"></u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="tourist-box" v-if="detail.orderItemList[0].qrcodeRule == 1">
|
||
<view class="label">可退游客</view>
|
||
<u-checkbox-group
|
||
v-model="touristChecked"
|
||
iconPlacement="right"
|
||
placement="row"
|
||
@change="checkboxChange1">
|
||
<u-checkbox activeColor="#01be69" :label="item.userName + ' ' + item.identityCard" :name="item.id" v-for="(item, index) in ticketOrderDetailList" :key="index"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="price-box">
|
||
<view class="box1">
|
||
<view class="label">可退金额</view>
|
||
<view class="price"><text class="unit">￥</text>{{refundAmount.toFixed(2)}}</view>
|
||
</view>
|
||
<view class="box1">
|
||
<view class="label1">手续费</view>
|
||
<view class="price1">￥{{serviceCharge}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tourist-box">
|
||
<view class="label">个人原因</view>
|
||
<u-checkbox-group
|
||
v-model="personChecked"
|
||
iconPlacement="right"
|
||
placement="row"
|
||
@change="checkboxChange2">
|
||
<u-checkbox activeColor="#01be69" :label="item.dictLabel" :name="item.dictValue" v-for="(item, index) in personalRefundList" :key="index"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="tourist-box">
|
||
<view class="label">商家/景区原因</view>
|
||
<u-checkbox-group
|
||
v-model="merchantChecked"
|
||
iconPlacement="right"
|
||
placement="row"
|
||
@change="checkboxChange3">
|
||
<u-checkbox activeColor="#01be69" :label="item.dictLabel" :name="item.dictValue" v-for="(item, index) in businessRefundList" :key="index"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="bottom" :style="'padding-bottom: ' + safeAreaBottom + 'px'">
|
||
<view class="bottom_waper">
|
||
<view class="active" @click="goRefund">申请退款</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-popup class="popupRefund" ref="popup" background-color="#fff">
|
||
<view class="popup-content">
|
||
<image class="bgImg" src="https://common/refundPopup.png" mode=""></image>
|
||
<view class="con">
|
||
<view class="title">温馨提示</view>
|
||
<view class="text">一旦提交将无法撤销，确定退款吗？</view>
|
||
<view class="btn-box">
|
||
<view class="close" @click="close">取消</view>
|
||
<view class="save" @click="onRefund">确认</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
windowBottom: 0,
|
||
safeAreaBottom: 0,
|
||
bgColor: '#FBFBFB',
|
||
detail: null,
|
||
buyNum: 1,
|
||
refundAmount: 0,
|
||
serviceCharge: 0,
|
||
ticketOrderDetailList: [],
|
||
touristChecked: [],
|
||
personalRefundList: [],
|
||
personChecked: [],
|
||
businessRefundList: [],
|
||
merchantChecked: [],
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id
|
||
this.windowBottom = this.$safeAreaBottom + uni.upx2px(152);
|
||
this.safeAreaBottom = this.$safeAreaBottom || uni.upx2px(10);
|
||
this.getData()
|
||
this.commonSj()
|
||
this.commonGr()
|
||
},
|
||
methods: {
|
||
async getData() {
|
||
let info = await this.$http.getTicketOrderDetailPrepay(this.id);
|
||
this.detail = info.data;
|
||
let list = []
|
||
info.data.orderItemList[0].ticketOrderDetailList.forEach((item) => {
|
||
// 判断是否可退款
|
||
if (this.detail.orderItemList[0].refundRule != '0' && item.paymentType == '200' && item.verificationType == '0' && (item.refundStatus == '0' || item.refundStatus == '100')) {
|
||
let creaetd = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.paymentTime) + ' 00:00:00').getTime() / 1000);
|
||
if (this.detail.orderItemList[0].classify == '1') {// 普通票
|
||
// 判断是否再有效期
|
||
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) list.push(item);
|
||
break;
|
||
case '4':// 几天内可退
|
||
let nowdate = parseInt(new Date().getTime() / 1000);
|
||
// 当前时间减下单时间如果小于等于后台设定天数。门票可退
|
||
if (((nowdate - creaetd) / 60 / 60 / 24) <= this.detail.orderItemList[0].refundDay) list.push(item);
|
||
break;
|
||
}
|
||
} else if (this.detail.orderItemList[0].classify == '2') {// 套票
|
||
let num = 0;// 大于0代表已经使用过
|
||
// 判断是否再有效期
|
||
switch (this.detail.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', 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) list.push(item);
|
||
}
|
||
break;
|
||
case '4':// 几天内可退
|
||
item.orderDetailChildList.forEach((child, childIndex) => {
|
||
if (child.verificationNum > 0) num ++;
|
||
})
|
||
if (num == 0) {
|
||
let nowdate = parseInt(new Date().getTime() / 1000);
|
||
// 当前时间减下单时间如果小于等于后台设定天数。门票可退
|
||
if (((nowdate - creaetd) / 60 / 60 / 24) <= this.detail.orderItemList[0].refundDay) list.push(item);
|
||
}
|
||
|
||
break;
|
||
}
|
||
} else if (this.detail.orderItemList[0].classify == '4' || this.detail.orderItemList[0].classify == '5') {// 年卡
|
||
if (item.activationStatus == 0) list.push(item);
|
||
}
|
||
}
|
||
})
|
||
if (!list.length) {
|
||
uni.showToast({ title: '当前没有可退门票', icon: 'none', mask: true })
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
return false;
|
||
}
|
||
this.ticketOrderDetailList = list
|
||
if (this.ticketOrderDetailList.length === 1 && !this.touristChecked.length) {
|
||
this.touristChecked = [this.ticketOrderDetailList[0].id]
|
||
}
|
||
this.calculateFee()
|
||
console.log('可退门票：')
|
||
console.log(list)
|
||
},
|
||
async commonSj() {
|
||
const params = { dictType: 'business_refund_type' }
|
||
let info = await this.$http.common(params)
|
||
if (info.code === 200) {
|
||
this.businessRefundList = info.data
|
||
} else {
|
||
uni.$u.toast(info.msg);
|
||
}
|
||
},
|
||
async commonGr() {
|
||
const params = { dictType: 'personal_refund_type' }
|
||
let info = await this.$http.common(params)
|
||
this.personalRefundList = info.data
|
||
},
|
||
async calculateFee() {
|
||
let num = 0;
|
||
if (this.detail.orderItemList[0].qrcodeRule == 1) {
|
||
num = this.touristChecked.length
|
||
} else {
|
||
num = this.buyNum
|
||
}
|
||
if (this.detail.orderItemList[0].isFee == 1) {
|
||
let availableEndTime = this.detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime + ' 23:59:59';
|
||
const params = {
|
||
orderItemId: this.detail.orderItemList[0].id,
|
||
sale: this.detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice,
|
||
availableEndTime: availableEndTime,
|
||
num: num
|
||
}
|
||
let info = await this.$http.calculateFee(params)
|
||
if (info.code === 200) {
|
||
this.serviceCharge = info.data
|
||
this.refundAmount = params.num * this.detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice - this.serviceCharge;
|
||
} else {
|
||
uni.$u.toast(info.msg);
|
||
}
|
||
} else {
|
||
this.refundAmount = num * this.detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice;
|
||
}
|
||
},
|
||
buyNumChange (e) {
|
||
this.buyNum = e.value;
|
||
this.calculateFee();
|
||
},
|
||
checkboxChange1(n) {
|
||
this.touristChecked = n
|
||
this.calculateFee()
|
||
},
|
||
checkboxChange2(n) {
|
||
this.personChecked = n
|
||
},
|
||
checkboxChange3(n) {
|
||
this.merchantChecked = n
|
||
},
|
||
goRefund() {
|
||
if (this.detail.orderItemList[0].qrcodeRule == 1) {
|
||
if (!this.touristChecked.length) {
|
||
uni.showToast({ mask: true, title: '请选择游客', icon: 'none' });
|
||
return false;
|
||
}
|
||
} else {
|
||
if (!this.buyNum) {
|
||
uni.showToast({ mask: true, title: '请选择退款数量', icon: 'none' });
|
||
return false;
|
||
}
|
||
}
|
||
if (!this.personChecked.length && !this.merchantChecked.length) {
|
||
uni.showToast({ mask: true, title: '请选择退款原因', icon: 'none' });
|
||
return false;
|
||
}
|
||
this.$refs.popup.open('center')
|
||
},
|
||
close() {
|
||
this.$refs.popup.close()
|
||
},
|
||
async onRefund() {
|
||
|
||
let data = {
|
||
orderId: this.detail.id,
|
||
totalPrice: this.refundAmount,
|
||
userId: this.detail.userId,
|
||
userName: this.detail.userName,
|
||
personalRefundType: '',
|
||
businessRefundType: '',
|
||
orderItemList: [{
|
||
orderItemId: this.detail.orderItemList[0].id,
|
||
ticketOrderDetailList: []
|
||
}]
|
||
};
|
||
if (this.personChecked.length) data.personalRefundType = this.personChecked.join(',');
|
||
if (this.merchantChecked.length) data.businessRefundType = this.merchantChecked.join(',');
|
||
if (this.detail.orderItemList[0].qrcodeRule == '2') {
|
||
data.refundQuantity = this.buyNum;
|
||
data.orderItemList[0].refundQuantity = this.buyNum;
|
||
this.detail.orderItemList[0].ticketOrderDetailList.forEach(e => {
|
||
if (data.orderItemList[0].ticketOrderDetailList.length < this.buyNum) {
|
||
if (e.refundStatus == '0' || e.refundStatus == '100') {
|
||
data.orderItemList[0].ticketOrderDetailList.push({ orderDetailId: e.id })
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
data.refundQuantity = this.touristChecked.length;
|
||
data.orderItemList[0].refundQuantity = this.touristChecked.length;
|
||
this.touristChecked.forEach(e => {
|
||
data.orderItemList[0].ticketOrderDetailList.push({ orderDetailId: e })
|
||
})
|
||
}
|
||
let info = await this.$http.toRefund(data)
|
||
if (info.code === 200) {
|
||
this.close()
|
||
uni.showToast({ title: '提交成功', mask: true, icon: 'success' });
|
||
let pages = getCurrentPages();
|
||
let prevPage = pages[pages.length - 2];
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
prevPage.onLoad(prevPage.options);
|
||
}, 1500)
|
||
} else uni.showToast({ title: info.msg, mask: true, icon: 'none' });
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background: #FBFBFB;
|
||
padding-bottom: 200rpx;
|
||
.banner{ width: 100%; height: 320rpx; background: #03AE80; position: absolute; left: 0; top: 0; }
|
||
.waper_box {
|
||
width: 100%; box-sizing: border-box; padding: 32rpx; position: relative; z-index: 3;
|
||
}
|
||
.sum-box {
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
.handle {
|
||
min-height: 54rpx; box-sizing: border-box; padding-right: 180rpx; position: relative;
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 54rpx;
|
||
}
|
||
.price {
|
||
position: absolute; right: 0; top: 0;
|
||
font-weight: bold;
|
||
font-size: 42rpx;
|
||
color: #FF5833;
|
||
.unit {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF5833;
|
||
}
|
||
}
|
||
}
|
||
.box {
|
||
margin-top: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
.validity-box {
|
||
min-width: 400rpx;
|
||
.validity {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
.date {
|
||
color: #01BE69;
|
||
}
|
||
}
|
||
}
|
||
.num {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text:first-child {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.time {
|
||
margin-top: 12rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.refundNum {
|
||
margin-top: 19rpx;
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
.label1 {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.num {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
.label2 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
/deep/.u-number-box{
|
||
width: 198rpx; height: 100%; border-radius: 50rpx; box-sizing: border-box; border: 2rpx solid #E1E1E1;
|
||
.u-number-box__input{ width: 66rpx; margin: 0; background: transparent !important; border: 2rpx solid #E1E1E1; box-sizing: border-box; border-top: 0; border-bottom: 0; }
|
||
.u-number-box__minus, .u-number-box__plus{
|
||
background: transparent !important; width: 64rpx; height: 100% !important; padding: 0 !important;
|
||
.u-icon__icon{ font-size: 20rpx !important; color: #01BE69 !important; }
|
||
}
|
||
.u-number-box__minus--disabled .u-icon__icon{ color: #c8c9cc !important; }
|
||
}
|
||
}
|
||
.row1 {
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
.tourist-box {
|
||
margin-top: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.tourist-item {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
&:first-child {
|
||
margin-top: 32rpx;
|
||
}
|
||
.name {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
/deep/.u-checkbox-group {
|
||
width: 100%;
|
||
flex-direction: column !important;
|
||
.u-checkbox {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
&:first-child {
|
||
margin-top: 32rpx;
|
||
}
|
||
.u-checkbox__icon-wrap + text {
|
||
font-weight: 400;
|
||
font-size: 28rpx !important;
|
||
color: #666666 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.price-box {
|
||
margin-top: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
.box1 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
&:last-child {
|
||
margin-top: 32rpx;
|
||
}
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.price {
|
||
font-weight: bold;
|
||
font-size: 42rpx;
|
||
color: #FF5833;
|
||
.unit {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF5833;
|
||
}
|
||
}
|
||
.label1, .price1 {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
width: 100%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: #FBFBFB;
|
||
.bottom_waper{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 32rpx 0;
|
||
.active {
|
||
width: 686rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
border-radius: 64rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
background: #03AE80;
|
||
font-weight: 400;
|
||
font-size: 42rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.popupRefund {
|
||
.btn-box {
|
||
margin-top: 63rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |