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>
|