zhwl-miniapp/pages/my/refundDetail.vue

171 lines
9.6 KiB
Vue
Raw Permalink Normal View History

2025-06-26 12:38:35 +08:00
<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>