171 lines
9.6 KiB
Vue
171 lines
9.6 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" bgColor="#03AE80" left-icon-color="#fff">
|
||
<view slot='center' class="navbar_title">退款详情</view>
|
||
</u-navbar>
|
||
<view class="banner" v-if="detail">
|
||
<view class="title">{{detail.refundStatusName}}</view>
|
||
<view class="code">退款编号：{{detail.refundCode}}</view>
|
||
<image src="https://common/refund_banner.png" mode=""></image>
|
||
</view>
|
||
<view class="waper_box" v-if="detail">
|
||
<view class="money">
|
||
<view class="title">退款金额：¥{{detail.orderRefundItemList[0].actualPrice}}（{{detail.orderRefundItemList[0].refundQuantity}}张）</view>
|
||
<view class="fee">手续费：¥{{detail.orderRefundItemList[0].totalFee}}</view>
|
||
<view class="step">
|
||
<view class="step_list step_active">
|
||
<view class="text">申请退款</view>
|
||
<view class="time">{{detail.createTime}}</view>
|
||
<view class="active">
|
||
<image src="https://refund_active.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view :class="'step_list' + (detail.refundStatus > 1 ? ' step_active' : '')">
|
||
<view class="text">退款待审核</view>
|
||
<view class="active" v-if="detail.refundStatus > 1">
|
||
<image src="https://refund_active.png" mode=""></image>
|
||
</view>
|
||
<view class="icon" v-else></view>
|
||
</view>
|
||
<view :class="'step_list' + (detail.refundStatus > 1 ? ' step_active' : '') + (detail.updateTime ? '' : ' add_time')">
|
||
<view class="text over_text">{{detail.refundStatus == '100' ? '审核驳回' : '退款成功，资金原路返回'}}</view>
|
||
<view class="time" v-if="detail.updateTime">{{detail.updateTime}}</view>
|
||
<view class="active" v-if="detail.refundStatus > 1">
|
||
<image src="https://common/refund_active.png" mode=""></image>
|
||
</view>
|
||
<view class="icon" v-else></view>
|
||
<view class="msg" v-if="detail.refundStatus == '100' && detail.refundDescribe">拒绝原因：{{detail.refundDescribe}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="title">退款信息</view>
|
||
<view class="content">
|
||
<view class="list">
|
||
<view>退款单号</view>
|
||
<view>{{detail.refundCode}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>申请时间</view>
|
||
<view>{{detail.createTime}}</view>
|
||
</view>
|
||
<view class="list">
|
||
<view>申请原因</view>
|
||
<view v-if="detail.personalRefundTypeName">个人原因:{{detail.personalRefundTypeName}}</view>
|
||
<view v-if="detail.businessRefundTypeName">商家原因:{{detail.businessRefundTypeName}}</view>
|
||
</view>
|
||
<view class="list" v-if="detail.refundStatus == '100' && detail.refundDescribe">
|
||
<view>拒绝原因</view>
|
||
<view>{{detail.refundDescribe}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="refund">
|
||
<view class="title">退改规则</view>
|
||
<view class="cont">
|
||
<view>{{detail.orderRefundItemList[0].zdyTicket.refundRuleName}}</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '0'">{{detail.refundRemark || '门票一经售出，不可退款'}}</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '3'">门票有效期内可退</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '4'">订单生成后{{detail.orderRefundItemList[0].zdyTicket.refundDay}}天内可退</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '5'">未激活可退</view>
|
||
</view>
|
||
<view class="fee">
|
||
<view class="fee_title">退款手续费</view>
|
||
<view class="fee_cont">
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 0">无需手续费</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 1 && detail.orderRefundItemList[0].zdyTicket.feeType == '1'">退款需扣除手续费{{(detail.orderRefundItemList[0].zdyTicket.deductionFees) + (detail.orderRefundItemList[0].zdyTicket.deductionFeesUnit == '1' ? '%' : '元')}}</view>
|
||
<view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 1 && detail.orderRefundItemList[0].zdyTicket.feeType == '2'" v-for="(i, index) in detail.orderRefundItemList[0].zdyTicket.refundRuleList" :key="index">游玩前{{i.day}}天内退票，需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
detail: null
|
||
}
|
||
},
|
||
async onLoad (options) {
|
||
let info = await this.$http.getRefundInfo(options.id);
|
||
console.log(info)
|
||
this.detail = info.data;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.navbar_title{ color: #fff; }
|
||
.banner{
|
||
width: 100%; height: 394rpx; background: #03AE80; box-sizing: border-box; padding: 208rpx 0 0 62rpx; position: relative; color: #fff; overflow: hidden;
|
||
.title{ line-height: 68rpx; font-size: 48rpx; font-weight: bold; }
|
||
.code{ margin-top: 6rpx; line-height: 40rpx; font-size: 28rpx; font-weight: 500; }
|
||
image{ width: 245rpx; height: 245rpx; position: absolute; bottom: -40rpx; right: -18rpx; }
|
||
}
|
||
.waper_box{
|
||
width: 100%; box-sizing: border-box; padding: 0 32rpx 32rpx; margin-top: -50rpx; position: relative; z-index: 3;
|
||
.money{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff;
|
||
.title{ line-height: 40rpx; color: #666; font-size: 28rpx; font-weight: 500; }
|
||
.fee{ margin-top: 24rpx; line-height: 40rpx; color: #666; font-size: 28rpx; font-weight: 500; }
|
||
.step{
|
||
width: 100%; margin-top: 32rpx;
|
||
.step_list{
|
||
width: 100%; padding-left: 44rpx; position: relative; margin-bottom: 32rpx;
|
||
.text{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; }
|
||
.time{ margin-top: 4rpx; line-height: 34rpx; color: #999; font-size: 24rpx; }
|
||
&::after{ content: ""; width: 2rpx; height: 100%; background: #E8E8E8; position: absolute; left: 10rpx; top: calc(50% + 7rpx); z-index: 5; }
|
||
&.step_active::after{ background: #03AE80; }
|
||
&.step_active .over_text{ color: #03AE80; }
|
||
&:nth-child(2)::after{ width: 0; }
|
||
.icon{ width: 10rpx; height: 10rpx; background: #999; border-radius: 10rpx; position: absolute; left: 6rpx; top: 50%; transform: translateY(-50%); z-index: 6; }
|
||
.active{ width: 20rpx; height: 20rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
|
||
.msg{ margin-top: 12rpx; color: #333; font-size: 26rpx; line-height: 36rpx; }
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
&::after{ top: auto; bottom: calc(50% + 7rpx); }
|
||
}
|
||
&.add_time::after{ height: calc(100% + 30rpx); }
|
||
}
|
||
}
|
||
}
|
||
.info{
|
||
width: 100%; margin-top: 24rpx; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff;
|
||
.title{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
||
.content{
|
||
width: 100%; margin-top: 32rpx;
|
||
.list{
|
||
width: 100%; box-sizing: border-box; padding-left: 130rpx; position: relative; margin-bottom: 30rpx; min-height: 40rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
view{
|
||
color: #666; font-size: 28rpx; font-weight: 500; text-align: right;
|
||
&:nth-child(1){ line-height: 40rpx; position: absolute; left: 0; top: 0; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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: 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; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |