<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:withFooter="false"
|
width="70%"
|
:confirm-working="isWorking.submit"
|
@confirm="handleConfirm"
|
>
|
<div class="detail-container">
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">基本信息</span>
|
<span class="status-tag" :class="getStatusClass(detailInfo.status)">
|
{{ getStatusText(detailInfo.status) }}
|
</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">门店名称：</span>
|
<span class="value">{{ detailInfo.shopName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">门店联系人：</span>
|
<span class="value">{{ detailInfo.linkName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">申请时间：</span>
|
<span class="value">{{ detailInfo.createTime }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">提现信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">提现金额：</span>
|
<span class="value amount">¥{{ detailInfo.amount / 100 }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">提现账户：</span>
|
<span class="value">{{ detailInfo.aliAccount }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">审核人：</span>
|
<span class="value">{{ detailInfo.updateUserName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">审核时间：</span>
|
<span class="value">{{ detailInfo.updateTime }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">审核备注：</span>
|
<span class="value">{{ detailInfo.approveRemark }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section" v-if="detailInfo.status !== 0">
|
<div class="section-header">
|
<span class="section-title">审批信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">审核人：</span>
|
<span class="value">{{ detailInfo.updateUserName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">审核时间：</span>
|
<span class="value">{{ detailInfo.updateTime }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">审核备注：</span>
|
<span class="value">{{ detailInfo.approveRemark }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="approval-form" v-if="detailInfo.status === 0">
|
<el-form ref="approvalForm" :model="approvalForm" :rules="approvalRules">
|
<el-form-item label="审批结果" prop="status">
|
<el-radio-group v-model="approvalForm.status">
|
<el-radio :label="1">通过</el-radio>
|
<el-radio :label="2">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="approveRemark">
|
<el-input
|
v-model="approvalForm.approveRemark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注"
|
style="width: 100%"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="approval-buttons">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="handleConfirm" :loading="isWorking.submit">确定</el-button>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById, approve } from '@/api/business/shopWithdraw'
|
|
export default {
|
name: 'OperaWithdrawDetailWindow',
|
components: { GlobalWindow },
|
data () {
|
return {
|
title: '提现详情',
|
visible: false,
|
detailInfo: {
|
status: '',
|
shopName: '',
|
linkName: '',
|
createTime: '',
|
amount: '',
|
bankCardNo: '',
|
auditLogs: []
|
},
|
approvalForm: {
|
id: null,
|
status: 1,
|
approveRemark: ''
|
},
|
approvalRules: {
|
status: [{ required: true, message: '请选择审批结果', trigger: 'change' }]
|
},
|
isWorking: {
|
submit: false
|
}
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.approvalForm.id = row.id
|
this.approvalForm.status = 1
|
this.approvalForm.approveRemark = ''
|
getById(row.id).then(res => {
|
this.detailInfo = {
|
status: res.status,
|
shopName: res.shopName,
|
linkName: res.linkName,
|
createTime: res.createTime,
|
amount: res.amount,
|
bankCardNo: res.bankCardNo,
|
auditLogs: res.auditLogs || [],
|
updateUserName: res.updateUserName,
|
updateTime: res.updateTime,
|
approveRemark: res.approveRemark
|
}
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
getStatusText (status) {
|
const map = { 0: '提现申请中', 1: '提现成功', 2: '提现失败' }
|
return map[status] || '-'
|
},
|
getStatusClass (status) {
|
const map = { 0: 'status-pending', 1: 'status-success', 2: 'status-reject' }
|
return map[status] || ''
|
},
|
handleConfirm () {
|
if (this.detailInfo.status !== 0) {
|
this.visible = false
|
return
|
}
|
this.$refs.approvalForm.validate(valid => {
|
if (!valid) return
|
this.isWorking.submit = true
|
approve(this.approvalForm).then(res => {
|
this.$tip.apiSuccess(res || '提交成功')
|
this.visible = false
|
this.$emit('success')
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.isWorking.submit = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.detail-container {
|
padding: 20px;
|
}
|
.section {
|
margin-bottom: 30px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
margin-bottom: 15px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.status-tag {
|
padding: 4px 12px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
.status-pending {
|
background: #fdf6ec;
|
color: #E6A23C;
|
}
|
.status-success {
|
background: #f0f9eb;
|
color: #67C23A;
|
}
|
.status-reject {
|
background: #fef0f0;
|
color: #F56C6C;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 90px;
|
}
|
.info-item .value {
|
color: #606266;
|
}
|
.info-item .amount {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
.info-item.full-width {
|
grid-column: span 2;
|
}
|
.timeline-content {
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
.timeline-title {
|
font-size: 14px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 8px;
|
}
|
.timeline-info {
|
display: flex;
|
gap: 20px;
|
font-size: 13px;
|
color: #606266;
|
margin-bottom: 5px;
|
}
|
.timeline-remark {
|
font-size: 13px;
|
color: #909399;
|
}
|
.approval-form {
|
padding: 20px;
|
background: #f5f7fa;
|
border-top: 1px solid #eee;
|
}
|
.approval-form /deep/ .el-form-item {
|
margin-bottom: 15px;
|
}
|
.approval-form /deep/ .el-form-item:last-child {
|
margin-bottom: 0;
|
}
|
.approval-buttons {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
margin-top: 15px;
|
}
|
</style>
|
