|
@@ -6,7 +6,7 @@
|
|
|
<!-- 左侧配置面板 -->
|
|
|
<el-col :span="12">
|
|
|
<el-form :model="bibForm" label-width="100px">
|
|
|
- <el-form-item label="背景图片">
|
|
|
+ <el-form-item label="背景图片" required>
|
|
|
<el-upload ref="bgUploadRef" :limit="1" :auto-upload="false" :on-change="handleBgImageChange" accept="image/*" drag>
|
|
|
<el-icon class="el-icon--upload">
|
|
|
<i-ep-upload-filled />
|
|
@@ -16,7 +16,7 @@
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="Logo图片">
|
|
|
+ <el-form-item label="Logo图片" required>
|
|
|
<el-upload ref="logoUploadRef" :limit="1" :auto-upload="false" :on-change="handleLogoImageChange" accept="image/*" drag>
|
|
|
<el-icon class="el-icon--upload">
|
|
|
<i-ep-upload-filled />
|
|
@@ -49,9 +49,9 @@
|
|
|
v-if="logoImageUrl"
|
|
|
class="draggable-element logo-element"
|
|
|
:style="{
|
|
|
- left: bibForm.logoX + 'px',
|
|
|
- top: bibForm.logoY + 'px'
|
|
|
- }"
|
|
|
+ left: bibForm.logoX + 'px',
|
|
|
+ top: bibForm.logoY + 'px'
|
|
|
+ }"
|
|
|
@mousedown="startDrag($event, 'logo')"
|
|
|
>
|
|
|
<img :src="logoImageUrl" alt="Logo" style="max-width: 80px; max-height: 80px" />
|
|
@@ -61,9 +61,9 @@
|
|
|
<div
|
|
|
class="draggable-element barcode-element"
|
|
|
:style="{
|
|
|
- left: bibForm.qRCodeX + 'px',
|
|
|
- top: bibForm.qRCodeY + 'px'
|
|
|
- }"
|
|
|
+ left: bibForm.qRCodeX + 'px',
|
|
|
+ top: bibForm.qRCodeY + 'px'
|
|
|
+ }"
|
|
|
@mousedown="startDrag($event, 'barcode')"
|
|
|
>
|
|
|
<svg
|
|
@@ -99,10 +99,10 @@
|
|
|
<div
|
|
|
class="event-name-preview"
|
|
|
:style="{
|
|
|
- fontSize: Math.min(28, Math.max(18, bibForm.fontSize * 0.7)) + 'px',
|
|
|
- color: 'black',
|
|
|
- fontFamily: '黑体'
|
|
|
- }"
|
|
|
+ fontSize: Math.min(28, Math.max(18, bibForm.fontSize * 0.7)) + 'px',
|
|
|
+ color: 'black',
|
|
|
+ fontFamily: '黑体'
|
|
|
+ }"
|
|
|
>
|
|
|
赛事名称
|
|
|
</div>
|
|
@@ -111,13 +111,13 @@
|
|
|
<div
|
|
|
class="draggable-element number-element"
|
|
|
:style="{
|
|
|
- left: '50%',
|
|
|
- top: '50%',
|
|
|
- transform: 'translate(-50%, -50%)',
|
|
|
- fontSize: Math.min(bibForm.fontSize, 56) + 'px',
|
|
|
- color: bibForm.fontColorHex,
|
|
|
- fontFamily: bibForm.fontName
|
|
|
- }"
|
|
|
+ left: '50%',
|
|
|
+ top: '50%',
|
|
|
+ transform: 'translate(-50%, -50%)',
|
|
|
+ fontSize: Math.min(bibForm.fontSize, 56) + 'px',
|
|
|
+ color: bibForm.fontColorHex,
|
|
|
+ fontFamily: bibForm.fontName
|
|
|
+ }"
|
|
|
>
|
|
|
1234
|
|
|
</div>
|
|
@@ -250,6 +250,9 @@ const handleBgImageChange = async (file: any) => {
|
|
|
} catch (error) {
|
|
|
console.error('获取图片尺寸失败:', error);
|
|
|
}
|
|
|
+
|
|
|
+ // 添加成功提示
|
|
|
+ proxy?.$modal.msgSuccess('背景图片上传成功');
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -262,6 +265,9 @@ const handleLogoImageChange = (file: any) => {
|
|
|
logoImageUrl.value = e.target?.result as string;
|
|
|
};
|
|
|
reader.readAsDataURL(file.raw);
|
|
|
+
|
|
|
+ // 添加成功提示
|
|
|
+ proxy?.$modal.msgSuccess('Logo图片上传成功');
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -396,14 +402,18 @@ const processImageToRatio = (file: File, targetRatio: number, targetRatio2: numb
|
|
|
ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, newWidth, newHeight);
|
|
|
|
|
|
// 转换为Blob
|
|
|
- canvas.toBlob((blob) => {
|
|
|
- if (blob) {
|
|
|
- const processedFile = new File([blob], file.name, { type: file.type });
|
|
|
- resolve(processedFile);
|
|
|
- } else {
|
|
|
- resolve(file);
|
|
|
- }
|
|
|
- }, file.type || 'image/jpeg', 0.9);
|
|
|
+ canvas.toBlob(
|
|
|
+ (blob) => {
|
|
|
+ if (blob) {
|
|
|
+ const processedFile = new File([blob], file.name, { type: file.type });
|
|
|
+ resolve(processedFile);
|
|
|
+ } else {
|
|
|
+ resolve(file);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ file.type || 'image/jpeg',
|
|
|
+ 0.9
|
|
|
+ );
|
|
|
};
|
|
|
img.src = URL.createObjectURL(file);
|
|
|
});
|
|
@@ -411,11 +421,17 @@ const processImageToRatio = (file: File, targetRatio: number, targetRatio2: numb
|
|
|
|
|
|
// 生成参赛证文件
|
|
|
const handleGenerateBibFile = async () => {
|
|
|
+ // 校验必须上传背景图和logo
|
|
|
if (!bgImageFile.value) {
|
|
|
proxy?.$modal.msgError('请上传背景图片');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
+ if (!logoImageFile.value) {
|
|
|
+ proxy?.$modal.msgError('请上传Logo图片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
bibDialog.loading = true;
|
|
|
try {
|
|
|
let qRCodeX = bibForm.qRCodeX;
|
|
@@ -545,7 +561,6 @@ defineExpose({
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
/* 生成参赛证样式 */
|
|
|
.bib-generator {
|
|
|
padding: 20px;
|
|
@@ -558,6 +573,22 @@ defineExpose({
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
+/* 必填项样式 */
|
|
|
+.bib-generator .el-form-item.is-required .el-form-item__label::before {
|
|
|
+ content: '*';
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 上传成功状态样式 */
|
|
|
+.bib-generator .el-upload--success {
|
|
|
+ border-color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+.bib-generator .el-upload--success .el-upload__text {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
.preview-container {
|
|
|
border: 2px dashed #ddd;
|
|
|
border-radius: 8px;
|
|
@@ -629,7 +660,7 @@ defineExpose({
|
|
|
|
|
|
.event-name-preview {
|
|
|
position: absolute;
|
|
|
- top: 20%;
|
|
|
+ top: 5%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
font-weight: bold;
|