feat: 添加提现申请弹窗添加复制图片

This commit is contained in:
2026-08-18 10:54:04 +08:00
parent 50d5f54015
commit 64fdaba93d
2 changed files with 72 additions and 18 deletions
@@ -143,9 +143,14 @@
}
// ===== 上传 =====
.uploader {
.uploadWrapper {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.uploader {
:global {
.ant-upload-list-picture-card-container {
width: 96px;
@@ -159,6 +164,21 @@
}
}
.pasteTip {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #e6f7ff;
border-radius: 4px;
color: #1677ff;
font-size: 12px;
span {
line-height: 1.5;
}
}
.uploadTrigger {
display: flex;
flex-direction: column;
@@ -1,8 +1,8 @@
import { defineComponent, reactive, ref } from 'vue';
import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue';
import { useEffect } from '@/hooks';
import { Modal, Radio, Input, Button, Upload, Image, Spin, message } from 'ant-design-vue';
import type { UploadFile } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { PlusOutlined, CopyOutlined } from '@ant-design/icons-vue';
import { uploadFile, OssUploadType } from '@/utils/oss';
import { getWithdrawInfo, postWithdrawAudit, type WithdrawInfoVO } from '../model/services';
import { getAuditStatusText, getPayStatusText } from '../model/useWithdrawModel';
@@ -41,6 +41,34 @@ export default defineComponent({
const auditForm = reactive({ pass: true, remark: '' });
const imageList = ref<UploadFile[]>([]);
const submitting = ref(false);
const uploadAreaRef = ref<HTMLElement | null>(null);
// ===== 粘贴图片上传 =====
const handlePaste = async (e: ClipboardEvent) => {
if (!props.visible || !uploadAreaRef.value) return;
const items = e.clipboardData?.items;
if (!items) return;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.type.indexOf('image') !== -1) {
e.preventDefault();
const file = item.getAsFile();
if (file) {
await beforeUpload(file as unknown as UploadFile);
}
}
}
};
onMounted(() => {
document.addEventListener('paste', handlePaste);
});
onUnmounted(() => {
document.removeEventListener('paste', handlePaste);
});
// ===== 拉取详情 =====
const fetchDetail = async (id: number) => {
@@ -239,21 +267,27 @@ export default defineComponent({
{auditForm.pass && <span class={styles.required}>*</span>}
</span>
<Upload
listType="picture-card"
fileList={imageList.value}
beforeUpload={beforeUpload}
onRemove={handleRemove}
accept="image/*"
class={styles.uploader}
>
{imageList.value.length >= MAX_IMAGE_COUNT ? null : (
<div class={styles.uploadTrigger}>
<PlusOutlined />
<div class={styles.uploadText}></div>
</div>
)}
</Upload>
<div ref={uploadAreaRef} class={styles.uploadWrapper}>
<Upload
listType="picture-card"
fileList={imageList.value}
beforeUpload={beforeUpload}
onRemove={handleRemove}
accept="image/*"
class={styles.uploader}
>
{imageList.value.length >= MAX_IMAGE_COUNT ? null : (
<div class={styles.uploadTrigger}>
<PlusOutlined />
<div class={styles.uploadText}></div>
</div>
)}
</Upload>
<div class={styles.pasteTip}>
<CopyOutlined />
<span> Ctrl+V </span>
</div>
</div>
</div>
<div class={styles.footer}>
<Button type="primary" onClick={handleSubmit} loading={submitting.value}>