|
@@ -2,6 +2,7 @@
|
|
|
import { ref, computed } from 'vue'
|
|
import { ref, computed } from 'vue'
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
import { getWithdrawDetail } from '@/api/pay'
|
|
import { getWithdrawDetail } from '@/api/pay'
|
|
|
|
|
+import { getImageUrl } from '@/utils/imageUtil'
|
|
|
|
|
|
|
|
definePage({
|
|
definePage({
|
|
|
style: {
|
|
style: {
|
|
@@ -10,51 +11,56 @@ definePage({
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 数据
|
|
// 数据
|
|
|
-const query = ref({})
|
|
|
|
|
|
|
+const query = ref({
|
|
|
|
|
+ id: ''
|
|
|
|
|
+})
|
|
|
const detailData = ref({
|
|
const detailData = ref({
|
|
|
- status: 1, // 1 处理中 2 成功 3 失败
|
|
|
|
|
- withdrawMoney: '0.00',
|
|
|
|
|
- createTime: '',
|
|
|
|
|
- withdrawalTime: '',
|
|
|
|
|
- handlingFee: '',
|
|
|
|
|
|
|
+ frontStatus: 1, // 1 处理中 2 成功 3 失败
|
|
|
|
|
+ applyAmount: '0.00',
|
|
|
|
|
+ arrivalAmount: '0.00',
|
|
|
|
|
+ applyTime: '',
|
|
|
|
|
+ arrivalTime: '',
|
|
|
|
|
+ bankCardNoMask: '',
|
|
|
|
|
+ payeeName: '',
|
|
|
|
|
+ feeAmount: '',
|
|
|
failReason: '',
|
|
failReason: '',
|
|
|
bankName: '',
|
|
bankName: '',
|
|
|
- bankImage: '',
|
|
|
|
|
|
|
+ bankLogo: '',
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 根据状态返回不同的 UI 配置
|
|
// 根据状态返回不同的 UI 配置
|
|
|
const statusConfig = computed(() => {
|
|
const statusConfig = computed(() => {
|
|
|
- const configs: Record<number, { text: string; desc: string; icon: string; color: string }> = {
|
|
|
|
|
|
|
+ const configs: Record<number, { text: string; desc: string; img: string; stepDesc: string }> = {
|
|
|
1: {
|
|
1: {
|
|
|
text: '提现审核中',
|
|
text: '提现审核中',
|
|
|
desc: '您的提现申请已提交,请耐心等待',
|
|
desc: '您的提现申请已提交,请耐心等待',
|
|
|
- icon: 'clock-fill',
|
|
|
|
|
- color: '#1890FF'
|
|
|
|
|
|
|
+ img: 'waiting.png',
|
|
|
|
|
+ stepDesc: '系统处理中'
|
|
|
},
|
|
},
|
|
|
2: {
|
|
2: {
|
|
|
text: '提现成功',
|
|
text: '提现成功',
|
|
|
desc: '',
|
|
desc: '',
|
|
|
- icon: 'checkmark-circle-fill',
|
|
|
|
|
- color: '#52C41A'
|
|
|
|
|
|
|
+ img: 'success.png',
|
|
|
|
|
+ stepDesc: '提现成功'
|
|
|
},
|
|
},
|
|
|
3: {
|
|
3: {
|
|
|
text: '提现失败',
|
|
text: '提现失败',
|
|
|
desc: '很抱歉,您的提现申请未通过',
|
|
desc: '很抱歉,您的提现申请未通过',
|
|
|
- icon: 'close-circle-fill',
|
|
|
|
|
- color: '#FF4D4F'
|
|
|
|
|
|
|
+ img: 'error.png',
|
|
|
|
|
+ stepDesc: '提现失败,请重试'
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- return configs[detailData.value.status] || configs[1]
|
|
|
|
|
|
|
+ return configs[detailData.value.frontStatus] || configs[1]
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const currentStep = computed(() => {
|
|
const currentStep = computed(() => {
|
|
|
- return detailData.value.status == 1 ? 1 : 2
|
|
|
|
|
|
|
+ return detailData.value.frontStatus == 1 ? 1 : 2
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
function getData() {
|
|
function getData() {
|
|
|
getWithdrawDetail({ id: query.value.id }).then((res: any) => {
|
|
getWithdrawDetail({ id: query.value.id }).then((res: any) => {
|
|
|
if (res.data.code === 200) {
|
|
if (res.data.code === 200) {
|
|
|
- detailData.value = res.data.result
|
|
|
|
|
|
|
+ detailData.value = res.data.result
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
@@ -71,62 +77,76 @@ onLoad((options: any) => {
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<view class="page-container">
|
|
<view class="page-container">
|
|
|
|
|
+ <u-navbar title="提现详情" :autoBack="true" :placeholder="true" :border-bottom="false" :title-style="{ fontWeight: 'bold' }"></u-navbar>
|
|
|
|
|
+
|
|
|
<view class="content-wrapper">
|
|
<view class="content-wrapper">
|
|
|
<!-- 状态图标区域 -->
|
|
<!-- 状态图标区域 -->
|
|
|
<view class="status-header">
|
|
<view class="status-header">
|
|
|
<view class="icon-box">
|
|
<view class="icon-box">
|
|
|
- <up-icon :name="statusConfig.icon" :color="statusConfig.color" size="120rpx"></up-icon>
|
|
|
|
|
|
|
+ <up-image :src="getImageUrl('@local/payment/' + statusConfig.img)" width="92rpx" height="92rpx"></up-image>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="status-text">{{ statusConfig.text }}</view>
|
|
<view class="status-text">{{ statusConfig.text }}</view>
|
|
|
- <!-- 仅成功状态显示大金额 -->
|
|
|
|
|
- <view v-if="detailData.status === 2" class="amount-box">
|
|
|
|
|
- <!-- <text class="symbol">¥</text> -->
|
|
|
|
|
- <text class="amount">{{ detailData.withdrawMoney || '0.00' }}</text>
|
|
|
|
|
|
|
+ <view class="amount-box">
|
|
|
|
|
+ <text class="amount">{{ detailData.applyAmount || '0.00' }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 失败或审核中显示的副标题描述 -->
|
|
<!-- 失败或审核中显示的副标题描述 -->
|
|
|
- <view v-else class="status-desc">{{ statusConfig.desc }}</view>
|
|
|
|
|
|
|
+ <!-- <view v-else class="status-desc">{{ statusConfig.desc }}</view> -->
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 详情列表区域 -->
|
|
<!-- 详情列表区域 -->
|
|
|
<view class="info-card">
|
|
<view class="info-card">
|
|
|
<view class="bank-info" v-if="detailData.bankName">
|
|
<view class="bank-info" v-if="detailData.bankName">
|
|
|
- <up-image :src="detailData.bankImage" width="48rpx" height="48rpx"></up-image>
|
|
|
|
|
|
|
+ <up-image :src="detailData.bankLogo" width="48rpx" height="48rpx"></up-image>
|
|
|
<text class="bank-name">{{ detailData.bankName }}</text>
|
|
<text class="bank-name">{{ detailData.bankName }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="detail-list">
|
|
<view class="detail-list">
|
|
|
<view class="detail-item">
|
|
<view class="detail-item">
|
|
|
- <text class="label">申请时间</text>
|
|
|
|
|
- <text class="value">{{ detailData.createTime }}</text>
|
|
|
|
|
|
|
+ <text class="label">{{ detailData.frontStatus === 2 ? '提现时间' : '创建时间' }}</text>
|
|
|
|
|
+ <text class="value">{{ detailData.applyTime }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="detail-item" v-if="detailData.withdrawalTime">
|
|
|
|
|
|
|
+ <view class="detail-item" v-if="detailData.arrivalTime">
|
|
|
<text class="label">到账时间</text>
|
|
<text class="label">到账时间</text>
|
|
|
- <text class="value">{{ detailData.withdrawalTime }}</text>
|
|
|
|
|
|
|
+ <text class="value">{{ detailData.arrivalTime }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="detail-item">
|
|
|
|
|
- <text class="label">提现金额</text>
|
|
|
|
|
- <text class="value"><text class="u-font-22">¥</text>{{ detailData.withdrawMoney }}</text>
|
|
|
|
|
|
|
+ <view class="detail-item">
|
|
|
|
|
+ <text class="label">{{ detailData.frontStatus === 2 ? '提现银行' : '收款账户' }}</text>
|
|
|
|
|
+ <text class="value">
|
|
|
|
|
+ <text>{{ detailData.bankName }}</text>
|
|
|
|
|
+ <text class="middle">({{ detailData.bankCardNoMask }})</text>
|
|
|
|
|
+ <text>{{ detailData.payeeName }}</text>
|
|
|
|
|
+ </text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="detail-item" v-if="detailData.handlingFee">
|
|
|
|
|
- <text class="label">服务费</text>
|
|
|
|
|
- <text class="value"><text class="u-font-22">¥</text>{{ detailData.handlingFee }}</text>
|
|
|
|
|
|
|
+ <view class="detail-item" v-if="detailData.frontStatus === 2">
|
|
|
|
|
+ <text class="label">到账金额</text>
|
|
|
|
|
+ <text class="value"><text class="u-font-22">¥</text>{{ detailData.arrivalAmount }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="detail-item" v-if="detailData.status === 3 && detailData.failReason">
|
|
|
|
|
|
|
+ <view class="detail-item" v-if="detailData.feeAmount">
|
|
|
|
|
+ <text class="label">手续费</text>
|
|
|
|
|
+ <text class="value"><text class="u-font-22">¥</text>{{ detailData.feeAmount }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail-item" v-if="detailData.frontStatus === 3 && detailData.failReason">
|
|
|
<text class="label">失败原因</text>
|
|
<text class="label">失败原因</text>
|
|
|
<text class="value error-text">{{ detailData.failReason }}</text>
|
|
<text class="value error-text">{{ detailData.failReason }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="detail-item">
|
|
<view class="detail-item">
|
|
|
<text class="label">处理进度</text>
|
|
<text class="label">处理进度</text>
|
|
|
<view class="value">
|
|
<view class="value">
|
|
|
- <up-steps :current="currentStep" activeColor="#13C15A" direction="column" size="mini">
|
|
|
|
|
- <up-steps-item title="发起提现申请" :desc="detailData.withdrawalTime"></up-steps-item>
|
|
|
|
|
- <up-steps-item title="系统处理中" desc="预计24小时内到账"></up-steps-item>
|
|
|
|
|
- <up-steps-item
|
|
|
|
|
- :title="detailData.status === 3 ? '提现失败' : '提现成功'"
|
|
|
|
|
- :desc="detailData.withdrawalTime || (detailData.status === 3 ? '提现失败,请重试' : '')"
|
|
|
|
|
- :error="detailData.status === 3"
|
|
|
|
|
- ></up-steps-item>
|
|
|
|
|
- </up-steps>
|
|
|
|
|
|
|
+ <u-steps :current="currentStep" activeColor="#00C363" direction="column" size="mini">
|
|
|
|
|
+ <u-steps-item title="提交提现申请" :desc="detailData.applyTime">
|
|
|
|
|
+ <template #icon>
|
|
|
|
|
+ <u-icon v-if="detailData.frontStatus == 1" name="checkmark-circle-fill" size="16" color="#00C363" />
|
|
|
|
|
+ <view v-else class="dot-icon"></view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </u-steps-item>
|
|
|
|
|
+ <u-steps-item :title="statusConfig.stepDesc">
|
|
|
|
|
+ <template #icon>
|
|
|
|
|
+ <view v-if="detailData.frontStatus == 1" class="dot-icon"></view>
|
|
|
|
|
+ <u-icon v-if="detailData.frontStatus == 2" name="checkmark-circle-fill" size="16" color="#00C363" />
|
|
|
|
|
+ <u-icon v-if="detailData.frontStatus == 3" name="close-circle-fill" size="16" color="#F34747" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </u-steps-item>
|
|
|
|
|
+ </u-steps>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -138,7 +158,7 @@ onLoad((options: any) => {
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.page-container {
|
|
.page-container {
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background-color: #F7F8FA;
|
|
|
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.content-wrapper {
|
|
.content-wrapper {
|
|
@@ -150,17 +170,18 @@ onLoad((options: any) => {
|
|
|
|
|
|
|
|
.status-header {
|
|
.status-header {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- padding: 60rpx 0;
|
|
|
|
|
|
|
+ padding: 29rpx 0;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
.icon-box {
|
|
.icon-box {
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
|
|
|
+ margin-bottom: 29rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.status-text {
|
|
.status-text {
|
|
|
font-size: 36rpx;
|
|
font-size: 36rpx;
|
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.status-desc {
|
|
.status-desc {
|
|
@@ -174,10 +195,6 @@ onLoad((options: any) => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
align-items: baseline;
|
|
|
|
|
|
|
|
- .symbol {
|
|
|
|
|
- font-size: 44rpx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
.amount {
|
|
.amount {
|
|
|
font-size: 80rpx;
|
|
font-size: 80rpx;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -189,16 +206,15 @@ onLoad((options: any) => {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
- padding: 30rpx;
|
|
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
|
|
|
|
|
|
+ padding: 0 25rpx 30rpx;
|
|
|
|
|
|
|
|
.bank-info {
|
|
.bank-info {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- padding-bottom: 30rpx;
|
|
|
|
|
- border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
|
|
|
+ padding-top: 37rpx;
|
|
|
|
|
+ border-top: 1rpx solid #F0F0F0;
|
|
|
|
|
+ margin: 20rpx 0;
|
|
|
|
|
|
|
|
.bank-name {
|
|
.bank-name {
|
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|
|
@@ -208,6 +224,7 @@ onLoad((options: any) => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.detail-list {
|
|
.detail-list {
|
|
|
|
|
+ padding: 0 25rpx;
|
|
|
.detail-item {
|
|
.detail-item {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
padding: 18rpx 0;
|
|
padding: 18rpx 0;
|
|
@@ -223,6 +240,17 @@ onLoad((options: any) => {
|
|
|
.value {
|
|
.value {
|
|
|
color: #333;
|
|
color: #333;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
|
|
+
|
|
|
|
|
+ .middle {
|
|
|
|
|
+ margin: 0 13rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .dot-icon {
|
|
|
|
|
+ width: 13rpx;
|
|
|
|
|
+ height: 13rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: #CFCFCF;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.error-text {
|
|
.error-text {
|
|
@@ -231,4 +259,12 @@ onLoad((options: any) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+::v-deep {
|
|
|
|
|
+ .u-steps-item__content {
|
|
|
|
|
+ margin-top: 0rpx !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .u-steps-item--column {
|
|
|
|
|
+ padding-bottom: 16px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|