317 lines
8.0 KiB
Vue
317 lines
8.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="押金退还详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|||
|
|
title-size='36' height='36' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="topbj"></view>
|
|||
|
|
|
|||
|
|
<scroll-view class="content" scroll-y>
|
|||
|
|
<!-- 状态卡片 -->
|
|||
|
|
<view class="status-card">
|
|||
|
|
<view class="status-icon" :class="statusClass">
|
|||
|
|
<u-icon :name="statusIcon" size="60" color="#fff"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="status-text">{{statusText}}</view>
|
|||
|
|
<view class="status-desc" v-if="detailInfo.status == 1">您的申请正在审核中，请耐心等待</view>
|
|||
|
|
<view class="status-desc" v-if="detailInfo.status == 2">审核通过，退款处理中</view>
|
|||
|
|
<view class="status-desc" v-if="detailInfo.status == 3">退款已成功到账</view>
|
|||
|
|
<view class="status-desc" v-if="detailInfo.status == 4">申请已被驳回</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 申请信息 -->
|
|||
|
|
<view class="info-card">
|
|||
|
|
<view class="card-title">申请信息</view>
|
|||
|
|
<view class="info-list">
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">申请单号</text>
|
|||
|
|
<text class="value">{{detailInfo.no || '--'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">申请金额</text>
|
|||
|
|
<text class="value price">￥{{detailInfo.amount ? parseFloat(detailInfo.amount).toFixed(2) : '0.00'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">运营区</text>
|
|||
|
|
<text class="value">{{detailInfo.areaName || '--'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">申请时间</text>
|
|||
|
|
<text class="value">{{detailInfo.createTime || '--'}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 审核信息 -->
|
|||
|
|
<view class="info-card" v-if="detailInfo.status >= 2">
|
|||
|
|
<view class="card-title">审核信息</view>
|
|||
|
|
<view class="info-list">
|
|||
|
|
<view class="info-item" v-if="detailInfo.verifyTime">
|
|||
|
|
<text class="label">审核时间</text>
|
|||
|
|
<text class="value">{{detailInfo.verifyTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item" v-if="detailInfo.operatorName">
|
|||
|
|
<text class="label">审核人</text>
|
|||
|
|
<text class="value">{{detailInfo.operatorName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item" v-if="detailInfo.remark">
|
|||
|
|
<text class="label">审核备注</text>
|
|||
|
|
<text class="value">{{detailInfo.remark}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 退款信息 -->
|
|||
|
|
<view class="info-card" v-if="detailInfo.status == 3">
|
|||
|
|
<view class="card-title">退款信息</view>
|
|||
|
|
<view class="info-list">
|
|||
|
|
<view class="info-item" v-if="detailInfo.refundTime">
|
|||
|
|
<text class="label">退款时间</text>
|
|||
|
|
<text class="value">{{detailInfo.refundTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<text class="label">退款金额</text>
|
|||
|
|
<text class="value price">￥{{detailInfo.amount ? parseFloat(detailInfo.amount).toFixed(2) : '0.00'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item" v-if="detailInfo.no">
|
|||
|
|
<text class="label">退款单号</text>
|
|||
|
|
<text class="value">{{detailInfo.no}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 驳回原因 -->
|
|||
|
|
<view class="info-card" v-if="detailInfo.status == 4 && detailInfo.rejectReason">
|
|||
|
|
<view class="card-title">驳回原因</view>
|
|||
|
|
<view class="reject-reason">
|
|||
|
|
{{detailInfo.rejectReason}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 其他信息 -->
|
|||
|
|
<view class="info-card" v-if="detailInfo.remark">
|
|||
|
|
<view class="card-title">备注信息</view>
|
|||
|
|
<view class="remark-content">
|
|||
|
|
{{detailInfo.remark}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="footer-spacer"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#C4E1FF",
|
|||
|
|
},
|
|||
|
|
id: '',
|
|||
|
|
detailInfo: {},
|
|||
|
|
isMerchant: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
if(options.id){
|
|||
|
|
this.id = options.id
|
|||
|
|
// 判断是否为商户端访问
|
|||
|
|
this.isMerchant = options.isMerchant === 'true' || options.isMerchant === true
|
|||
|
|
this.getDetail()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 状态样式类
|
|||
|
|
statusClass(){
|
|||
|
|
const status = this.detailInfo.status
|
|||
|
|
const classMap = {
|
|||
|
|
1: 'status-pending',
|
|||
|
|
2: 'status-processing',
|
|||
|
|
3: 'status-success',
|
|||
|
|
4: 'status-rejected'
|
|||
|
|
}
|
|||
|
|
return classMap[status] || 'status-pending'
|
|||
|
|
},
|
|||
|
|
// 状态图标
|
|||
|
|
statusIcon(){
|
|||
|
|
const status = this.detailInfo.status
|
|||
|
|
const iconMap = {
|
|||
|
|
1: 'clock',
|
|||
|
|
2: 'hourglass',
|
|||
|
|
3: 'checkmark-circle',
|
|||
|
|
4: 'close-circle'
|
|||
|
|
}
|
|||
|
|
return iconMap[status] || 'info-circle'
|
|||
|
|
},
|
|||
|
|
// 状态文本
|
|||
|
|
statusText(){
|
|||
|
|
const status = this.detailInfo.status
|
|||
|
|
const statusMap = {
|
|||
|
|
1: '待审核',
|
|||
|
|
2: '待退款',
|
|||
|
|
3: '退款成功',
|
|||
|
|
4: '已驳回'
|
|||
|
|
}
|
|||
|
|
return statusMap[status] || '--'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取详情
|
|||
|
|
getDetail(){
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
// 判断是否为商户端（通过URL参数或接口路径判断）
|
|||
|
|
const isMerchant = this.isMerchant || false
|
|||
|
|
const apiUrl = isMerchant ? `/bst/depositRefund/${this.id}` : `/app/depositRefund/detail?id=${this.id}`
|
|||
|
|
|
|||
|
|
this.$u.get(apiUrl).then((res) => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
// 商户端接口返回的数据结构可能不同，需要适配
|
|||
|
|
this.detailInfo = isMerchant ? (res.data || res) : (res.data || {})
|
|||
|
|
}else if(res.code == 401){
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您当前未登录，是否前去登录？',
|
|||
|
|
showCancel: true,
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/login/login'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '获取详情失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络错误',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #F7F7F7;
|
|||
|
|
}
|
|||
|
|
.topbj{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 22rpx;
|
|||
|
|
background-color: #C4E1FF;
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
height: calc(100vh - 88rpx);
|
|||
|
|
padding: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.status-card{
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 60rpx 40rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
.status-icon{
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 auto 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
&.status-pending{
|
|||
|
|
background: linear-gradient(135deg, #FFA726 0%, #FF8A65 100%);
|
|||
|
|
}
|
|||
|
|
&.status-processing{
|
|||
|
|
background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
|
|||
|
|
}
|
|||
|
|
&.status-success{
|
|||
|
|
background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
|
|||
|
|
}
|
|||
|
|
&.status-rejected{
|
|||
|
|
background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.status-text{
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
.status-desc{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #808080;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.info-card{
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
.card-title{
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
border-left: 6rpx solid #4297F3;
|
|||
|
|
}
|
|||
|
|
.info-list{
|
|||
|
|
.info-item{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
&:last-child{
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.label{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #808080;
|
|||
|
|
}
|
|||
|
|
.value{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
&.price{
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #4297F3;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reject-reason{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #FFF5F5;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
border-left: 4rpx solid #EF5350;
|
|||
|
|
}
|
|||
|
|
.remark-content{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #F8F9FA;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer-spacer{
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|