fix: 模版bug修改
1、去除测试充值 2、模版图片url调整为上传图片返回url 3、官网主页模版图片展示调整
This commit is contained in:
old burden
parent
63df4f07ec
commit
899635eaf5
|
|
@ -121,8 +121,19 @@
|
|||
<el-form-item label="模版英文">
|
||||
<el-input v-model="form.englishContent" placeholder="请输入模版英文"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模版图片URL" prop="imageUrl">
|
||||
<el-input v-model="form.imageUrl" type="textarea" placeholder="图片URL" />
|
||||
<el-form-item label="模版图片" prop="imageUrl">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="#"
|
||||
:show-file-list="false"
|
||||
:http-request="handleUpload"
|
||||
>
|
||||
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
<span style="color: #909399; font-size: 12px;">支持jpg、png格式，建议尺寸：800 * 400</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
|
|
@ -144,6 +155,7 @@
|
|||
|
||||
<script>
|
||||
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/ai/template"
|
||||
import { uploadFile } from "@/api/file/file"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
|
|
@ -192,7 +204,7 @@ export default {
|
|||
{ required: true, message: "模版英文不能为空", trigger: "blur" },
|
||||
],
|
||||
imageUrl: [
|
||||
{ required: true, message: "模版图片URL不能为空", trigger: "blur" },
|
||||
{ required: true, message: "模版图片不能为空", trigger: "change" },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "blur" },
|
||||
|
|
@ -304,6 +316,24 @@ export default {
|
|||
...this.queryParams
|
||||
}, `template_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 处理图片上传 */
|
||||
handleUpload(params) {
|
||||
const { file } = params; // 获取上传的文件对象
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
this.$modal.loading("正在上传图片，请稍候...");
|
||||
uploadFile(formData).then(response => {
|
||||
this.form.imageUrl = response.url; // 获取S3 CDN URL
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgSuccess("图片上传成功");
|
||||
// 触发表单验证
|
||||
this.$refs["form"].validateField("imageUrl");
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError("图片上传失败，请重试");
|
||||
console.error('上传图片失败:', error);
|
||||
});
|
||||
},
|
||||
/** 下载图片到本地（支持AWS CDN） */
|
||||
async handleDownloadImage(imageUrl) {
|
||||
if (!imageUrl) {
|
||||
|
|
@ -384,3 +414,30 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,13 +33,6 @@
|
|||
:loading="loading">
|
||||
{{ $t('common.recharge') }}
|
||||
</mf-button>
|
||||
<mf-button
|
||||
v-if="showPay"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="goTestPay">
|
||||
{{ $t('common.testRecharge') }}
|
||||
</mf-button>
|
||||
<!-- <mf-button
|
||||
v-show="rechargeUrl"
|
||||
size="large"
|
||||
|
|
|
|||
|
|
@ -123,8 +123,9 @@
|
|||
v-model:visible="templateDialogVisible"
|
||||
:title="$t('common.selectTemplate')"
|
||||
:footer="false"
|
||||
width="80%"
|
||||
width="50%"
|
||||
@cancel="handleTemplateDialogClose">
|
||||
<div class="template-dialog-wrapper">
|
||||
<div class="template-dialog-content">
|
||||
<a-spin :loading="templateLoading">
|
||||
<div class="template-grid">
|
||||
|
|
@ -145,6 +146,7 @@
|
|||
{{ $t('common.noTemplates') }}
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div class="template-dialog-footer">
|
||||
<a-button @click="handleTemplateDialogClose">{{ $t('common.cancel') }}</a-button>
|
||||
<a-button type="primary" :disabled="!selectedTemplate" @click="handleConfirmTemplate">{{ $t('common.confirm') }}</a-button>
|
||||
|
|
@ -646,14 +648,21 @@ export default {
|
|||
}
|
||||
|
||||
// 模版选择弹窗样式
|
||||
.template-dialog-content {
|
||||
.template-dialog-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 70vh;
|
||||
min-height: 350px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.template-dialog-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
|
||||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
grid-template-columns: repeat(4, 20%);
|
||||
gap: 16px;
|
||||
padding: 10px 0;
|
||||
|
||||
|
|
@ -678,7 +687,7 @@ export default {
|
|||
|
||||
:deep(.arco-image) {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 300px;
|
||||
display: block;
|
||||
|
||||
.arco-image-img {
|
||||
|
|
@ -707,15 +716,16 @@ export default {
|
|||
color: var(--color-text-3);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
padding: 16px 0 0 0;
|
||||
border-top: 1px solid var(--color-border-2);
|
||||
}
|
||||
flex-shrink: 0;
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue