页面美化（3000不报错3001报错500应该是环境问题）
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<i class="icon-arrow-left"></i>
|
||||
返回仪表盘
|
||||
</button>
|
||||
<h2>佣金提现</h2>
|
||||
<h2 class="page-title">佣金提现</h2>
|
||||
</div>
|
||||
|
||||
<!-- 顶部统计卡片 -->
|
||||
@@ -49,122 +49,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收款方式设置 -->
|
||||
<div class="payment-info-section">
|
||||
<div class="section-header">
|
||||
<h3>收款方式</h3>
|
||||
<button class="btn-edit" @click="showPaymentForm = !showPaymentForm">
|
||||
{{ showPaymentForm ? '取消' : '编辑' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="!showPaymentForm" class="payment-info-display">
|
||||
<div class="info-item">
|
||||
<span class="label">收款方式：</span>
|
||||
<span class="value">{{ getPaymentTypeText(paymentInfo.payment_type) || '未设置' }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-if="paymentInfo.payment_type === 'bank'">
|
||||
<span class="label">银行名称：</span>
|
||||
<span class="value">{{ paymentInfo.bank_name || '未设置' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">{{ getAccountLabel(paymentInfo.payment_type) }}：</span>
|
||||
<span class="value">{{ maskAccount(paymentInfo.account_number) || '未设置' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">{{ getHolderLabel(paymentInfo.payment_type) }}：</span>
|
||||
<span class="value">{{ paymentInfo.account_holder || '未设置' }}</span>
|
||||
</div>
|
||||
<div v-if="paymentInfo.payment_type !== 'bank' && paymentInfo.qr_code_url" class="info-item qr-code-preview">
|
||||
<span class="label">收款码：</span>
|
||||
<div class="qr-code-image">
|
||||
<img :src="paymentInfo.qr_code_url" alt="收款码" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form v-if="showPaymentForm" @submit.prevent="updatePaymentInfo" class="payment-form">
|
||||
<div class="form-group">
|
||||
<label>收款方式</label>
|
||||
<select v-model="paymentForm.payment_type" @change="onPaymentTypeChange" required>
|
||||
<option value="">请选择收款方式</option>
|
||||
<option value="bank">银行卡</option>
|
||||
<option value="wechat">微信收款码</option>
|
||||
<option value="alipay">支付宝收款码</option>
|
||||
<option value="unionpay">云闪付收款码</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentForm.payment_type === 'bank'" class="form-group">
|
||||
<label>银行名称</label>
|
||||
<input
|
||||
v-model="paymentForm.bank_name"
|
||||
type="text"
|
||||
placeholder="请输入银行名称"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>{{ getAccountLabel(paymentForm.payment_type) }}</label>
|
||||
<input
|
||||
v-model="paymentForm.account_number"
|
||||
type="text"
|
||||
:placeholder="getAccountPlaceholder(paymentForm.payment_type)"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>{{ getHolderLabel(paymentForm.payment_type) }}</label>
|
||||
<input
|
||||
v-model="paymentForm.account_holder"
|
||||
type="text"
|
||||
:placeholder="getHolderPlaceholder(paymentForm.payment_type)"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentForm.payment_type && paymentForm.payment_type !== 'bank'" class="form-group">
|
||||
<label>收款码图片</label>
|
||||
<div class="qr-code-upload">
|
||||
<input
|
||||
type="file"
|
||||
ref="qrCodeInput"
|
||||
accept="image/*"
|
||||
@change="handleQrCodeUpload"
|
||||
style="display: none;"
|
||||
>
|
||||
<div
|
||||
class="upload-area"
|
||||
:class="{ 'has-image': paymentForm.qr_code_url }"
|
||||
@click="$refs.qrCodeInput.click()"
|
||||
>
|
||||
<div v-if="!paymentForm.qr_code_url" class="upload-placeholder">
|
||||
<div class="upload-icon">📷</div>
|
||||
<div class="upload-text">点击上传收款码</div>
|
||||
<div class="upload-hint">支持 JPG、PNG 格式</div>
|
||||
</div>
|
||||
<div v-else class="uploaded-image">
|
||||
<img :src="paymentForm.qr_code_url" alt="收款码" />
|
||||
<div class="image-overlay">
|
||||
<span>点击重新上传</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="uploadingQrCode" class="upload-progress">
|
||||
上传中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-primary" :disabled="updating">保存</button>
|
||||
<button type="button" class="btn-secondary" @click="showPaymentForm = false">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 提现申请 -->
|
||||
<div class="withdrawal-section">
|
||||
<div class="section-header">
|
||||
@@ -186,8 +70,13 @@
|
||||
>
|
||||
<span class="currency">元</span>
|
||||
</div>
|
||||
<div class="amount-tips">
|
||||
<div class="amount-info">
|
||||
<span class="amount-tips">
|
||||
可提现金额：¥{{ commissionStats.available_amount || '0.00' }}
|
||||
</span>
|
||||
<button class="btn-edit" @click="openPaymentDialog">
|
||||
更改收款方式
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
@@ -264,6 +153,111 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑收款方式的对话框 -->
|
||||
<el-dialog
|
||||
v-model="paymentDialogVisible"
|
||||
title="编辑收款方式"
|
||||
width="600px"
|
||||
:before-close="handleDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="paymentFormRef"
|
||||
:model="paymentForm"
|
||||
label-width="120px"
|
||||
label-position="top"
|
||||
:rules="paymentFormRules"
|
||||
>
|
||||
<el-form-item label="收款方式" prop="payment_type">
|
||||
<el-select
|
||||
v-model="paymentForm.payment_type"
|
||||
placeholder="请选择收款方式"
|
||||
@change="onPaymentTypeChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="银行卡" value="bank"></el-option>
|
||||
<el-option label="微信收款码" value="wechat"></el-option>
|
||||
<el-option label="支付宝收款码" value="alipay"></el-option>
|
||||
<el-option label="云闪付收款码" value="unionpay"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="paymentForm.payment_type === 'bank'"
|
||||
label="银行名称"
|
||||
prop="bank_name"
|
||||
>
|
||||
<el-input
|
||||
v-model="paymentForm.bank_name"
|
||||
placeholder="请输入银行名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="getAccountLabel(paymentForm.payment_type)"
|
||||
prop="account_number"
|
||||
>
|
||||
<el-input
|
||||
v-model="paymentForm.account_number"
|
||||
:placeholder="getAccountPlaceholder(paymentForm.payment_type)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
:label="getHolderLabel(paymentForm.payment_type)"
|
||||
prop="account_holder"
|
||||
>
|
||||
<el-input
|
||||
v-model="paymentForm.account_holder"
|
||||
:placeholder="getHolderPlaceholder(paymentForm.payment_type)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="paymentForm.payment_type && paymentForm.payment_type !== 'bank'"
|
||||
label="收款码图片"
|
||||
prop="qr_code_url"
|
||||
>
|
||||
<el-upload
|
||||
class="qr-code-uploader"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
:on-change="handleQrCodeUpload"
|
||||
accept="image/*"
|
||||
>
|
||||
<div v-if="paymentForm.qr_code_url" class="qr-code-preview">
|
||||
<img :src="paymentForm.qr_code_url" class="qr-code-image" />
|
||||
<div class="qr-code-mask">
|
||||
<span>点击更换图片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="upload-placeholder">
|
||||
<el-icon class="upload-icon"><Plus /></el-icon>
|
||||
<div class="upload-text">点击上传收款码</div>
|
||||
<div class="upload-hint">支持 JPG、PNG 格式，大小不超过5MB</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="uploadingQrCode" class="upload-progress">
|
||||
<el-progress :percentage="uploadProgress" :show-text="false"></el-progress>
|
||||
<span>上传中...</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="paymentDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitPaymentForm"
|
||||
:loading="updating"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -271,20 +265,28 @@
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'AgentWithdrawals',
|
||||
components: {
|
||||
Plus
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const paymentFormRef = ref(null)
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const updating = ref(false)
|
||||
const submitting = ref(false)
|
||||
const showPaymentForm = ref(false)
|
||||
const paymentDialogVisible = ref(false)
|
||||
const recordsFilter = ref('')
|
||||
const uploadingQrCode = ref(false)
|
||||
const uploadProgress = ref(0)
|
||||
|
||||
const commissionStats = reactive({
|
||||
total_commission: '0.00',
|
||||
@@ -314,7 +316,25 @@ export default {
|
||||
})
|
||||
|
||||
const withdrawalRecords = ref([])
|
||||
const uploadingQrCode = ref(false)
|
||||
|
||||
// 表单验证规则
|
||||
const paymentFormRules = reactive({
|
||||
payment_type: [
|
||||
{ required: true, message: '请选择收款方式', trigger: 'change' }
|
||||
],
|
||||
bank_name: [
|
||||
{ required: true, message: '请输入银行名称', trigger: 'blur' }
|
||||
],
|
||||
account_number: [
|
||||
{ required: true, message: '请输入账号', trigger: 'blur' }
|
||||
],
|
||||
account_holder: [
|
||||
{ required: true, message: '请输入持有人姓名', trigger: 'blur' }
|
||||
],
|
||||
qr_code_url: [
|
||||
{ required: true, message: '请上传收款码图片', trigger: 'change' }
|
||||
]
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const canWithdraw = computed(() => {
|
||||
@@ -366,31 +386,62 @@ export default {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载佣金统计失败:', error)
|
||||
ElMessage.error('加载佣金统计失败')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新收款方式信息
|
||||
* 打开收款方式对话框
|
||||
*/
|
||||
const updatePaymentInfo = async () => {
|
||||
if (updating.value) return
|
||||
const openPaymentDialog = () => {
|
||||
// 重置表单为当前信息
|
||||
Object.assign(paymentForm, paymentInfo)
|
||||
paymentDialogVisible.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交收款方式表单
|
||||
*/
|
||||
const submitPaymentForm = () => {
|
||||
paymentFormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
|
||||
if (updating.value) return
|
||||
updating.value = true
|
||||
|
||||
try {
|
||||
const response = await api.put('/agent-withdrawals/payment-info', paymentForm)
|
||||
if (response.data.success) {
|
||||
Object.assign(paymentInfo, paymentForm)
|
||||
showPaymentForm.value = false
|
||||
alert('收款方式更新成功')
|
||||
paymentDialogVisible.value = false
|
||||
ElMessage.success('收款方式更新成功')
|
||||
} else {
|
||||
alert(response.data.message || '更新失败')
|
||||
ElMessage.error(response.data.message || '更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新收款方式失败:', error)
|
||||
alert('更新失败，请重试')
|
||||
ElMessage.error('更新失败，请重试')
|
||||
} finally {
|
||||
updating.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理对话框关闭
|
||||
*/
|
||||
const handleDialogClose = (done) => {
|
||||
if (JSON.stringify(paymentForm) !== JSON.stringify(paymentInfo)) {
|
||||
ElMessageBox.confirm('您有未保存的更改，确定要关闭吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
done()
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
done()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -400,13 +451,13 @@ export default {
|
||||
if (submitting.value || !canWithdraw.value) return
|
||||
|
||||
if (!paymentInfo.account_number || !paymentInfo.payment_type) {
|
||||
alert('请先设置收款方式')
|
||||
ElMessage.warning('请先设置收款方式')
|
||||
return
|
||||
}
|
||||
|
||||
// 收款码类型需要验证图片
|
||||
if (paymentInfo.payment_type !== 'bank' && !paymentInfo.qr_code_url) {
|
||||
alert('请上传收款码图片')
|
||||
ElMessage.warning('请上传收款码图片')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -417,16 +468,16 @@ export default {
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
alert('提现申请提交成功，请等待审核')
|
||||
ElMessage.success('提现申请提交成功，请等待审核')
|
||||
withdrawalForm.amount = ''
|
||||
await loadCommissionStats()
|
||||
await loadWithdrawalRecords()
|
||||
} else {
|
||||
alert(response.data.message || '申请失败')
|
||||
ElMessage.error(response.data.message || '申请失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提现申请失败:', error)
|
||||
alert('申请失败，请重试')
|
||||
ElMessage.error('申请失败，请重试')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -449,6 +500,7 @@ export default {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载提现记录失败:', error)
|
||||
ElMessage.error('加载提现记录失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -488,49 +540,52 @@ export default {
|
||||
/**
|
||||
* 处理收款码图片上传
|
||||
*/
|
||||
const handleQrCodeUpload = async (event) => {
|
||||
const file = event.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
const handleQrCodeUpload = async (file) => {
|
||||
// 验证文件类型
|
||||
if (!file.type.startsWith('image/')) {
|
||||
alert('请选择图片文件')
|
||||
return
|
||||
if (!file.raw.type.startsWith('image/')) {
|
||||
ElMessage.error('请选择图片文件')
|
||||
return false
|
||||
}
|
||||
|
||||
// 验证文件大小（限制为5MB）
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
alert('图片大小不能超过5MB')
|
||||
return
|
||||
if (file.raw.size > 5 * 1024 * 1024) {
|
||||
ElMessage.error('图片大小不能超过5MB')
|
||||
return false
|
||||
}
|
||||
|
||||
uploadingQrCode.value = true
|
||||
uploadProgress.value = 0
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('qrCode', file)
|
||||
formData.append('qrCode', file.raw)
|
||||
|
||||
const response = await api.post('/agent-withdrawals/upload-qr-code', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
onUploadProgress: (progressEvent) => {
|
||||
if (progressEvent.total) {
|
||||
uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
paymentForm.qr_code_url = response.data.data.url
|
||||
ElMessage.success('上传成功')
|
||||
} else {
|
||||
alert(response.data.message || '上传失败')
|
||||
ElMessage.error(response.data.message || '上传失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传收款码失败:', error)
|
||||
alert('上传失败，请重试')
|
||||
ElMessage.error('上传失败，请重试')
|
||||
} finally {
|
||||
uploadingQrCode.value = false
|
||||
uploadProgress.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取收款方式显示文本
|
||||
*/
|
||||
@@ -606,11 +661,11 @@ export default {
|
||||
} else {
|
||||
paymentForm.qr_code_url = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 监听收款方式信息变化
|
||||
const initPaymentForm = () => {
|
||||
Object.assign(paymentForm, paymentInfo)
|
||||
// 重置验证状态
|
||||
nextTick(() => {
|
||||
paymentFormRef.value.clearValidate(['bank_name', 'qr_code_url'])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -624,38 +679,52 @@ export default {
|
||||
onMounted(async () => {
|
||||
await loadCommissionStats()
|
||||
await loadWithdrawalRecords()
|
||||
initPaymentForm()
|
||||
})
|
||||
|
||||
return {
|
||||
// 引用
|
||||
paymentFormRef,
|
||||
|
||||
// 状态
|
||||
loading,
|
||||
updating,
|
||||
submitting,
|
||||
showPaymentForm,
|
||||
paymentDialogVisible,
|
||||
recordsFilter,
|
||||
uploadingQrCode,
|
||||
uploadProgress,
|
||||
|
||||
// 数据
|
||||
commissionStats,
|
||||
paymentInfo,
|
||||
paymentForm,
|
||||
withdrawalForm,
|
||||
withdrawalRecords,
|
||||
|
||||
// 计算属性
|
||||
canWithdraw,
|
||||
|
||||
// 方法
|
||||
loadCommissionStats,
|
||||
updatePaymentInfo,
|
||||
openPaymentDialog,
|
||||
submitPaymentForm,
|
||||
handleDialogClose,
|
||||
submitWithdrawal,
|
||||
loadWithdrawalRecords,
|
||||
formatDate,
|
||||
getStatusText,
|
||||
maskAccount,
|
||||
handleQrCodeUpload,
|
||||
uploadingQrCode,
|
||||
getPaymentTypeText,
|
||||
getAccountLabel,
|
||||
getHolderLabel,
|
||||
getAccountPlaceholder,
|
||||
getHolderPlaceholder,
|
||||
onPaymentTypeChange,
|
||||
initPaymentForm,
|
||||
goBack
|
||||
goBack,
|
||||
|
||||
// 表单规则
|
||||
paymentFormRules
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -666,64 +735,62 @@ export default {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
.page-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.btn-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #495057;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.btn-back .icon-arrow-left::before {
|
||||
content: '←';
|
||||
content: '<';
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
width: 343px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
@@ -773,14 +840,13 @@ export default {
|
||||
}
|
||||
|
||||
/* 通用区块样式 */
|
||||
.payment-info-section,
|
||||
.withdrawal-section,
|
||||
.records-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 343px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -789,187 +855,21 @@ export default {
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 收款方式信息显示 */
|
||||
.payment-info-display {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
width: 100px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 收款码预览 */
|
||||
.qr-code-preview {
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.qr-code-image {
|
||||
max-width: 150px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-code-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.payment-form,
|
||||
.withdrawal-form {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 收款方式选择器 */
|
||||
.payment-type-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.payment-type-option {
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.payment-type-option:hover {
|
||||
border-color: #007bff;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.payment-type-option.active {
|
||||
border-color: #007bff;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.payment-type-option.active:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
/* 收款码上传 */
|
||||
.qr-code-upload {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #007bff;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.upload-area.has-image {
|
||||
padding: 0;
|
||||
border: 1px solid #ddd;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uploaded-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.uploaded-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.uploaded-image:hover .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
text-align: center;
|
||||
color: #007bff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
@@ -981,32 +881,34 @@ export default {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
.amount-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amount-input input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.amount-input input:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.currency {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
@@ -1017,20 +919,20 @@ export default {
|
||||
.amount-tips {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center; /* 将右对齐改为居中对齐 */
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-edit {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 1000px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@@ -1039,6 +941,8 @@ export default {
|
||||
.btn-primary {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
width: 300px;
|
||||
/* 保持申请提现按钮原有样式不变 */
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
@@ -1050,20 +954,12 @@ export default {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #545b62;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
@@ -1071,11 +967,18 @@ export default {
|
||||
}
|
||||
|
||||
/* 筛选控件 */
|
||||
.filter-controls {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-controls select {
|
||||
padding: 8px 12px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* 记录列表 */
|
||||
@@ -1093,7 +996,7 @@ export default {
|
||||
}
|
||||
|
||||
.record-item {
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid black;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
transition: box-shadow 0.3s;
|
||||
@@ -1176,11 +1079,6 @@ export default {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stats-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -1191,14 +1089,11 @@ export default {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user