zhaoruhui
/
management
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增/修改弹窗

milestone-20251021-双11活动后台
liruiqiang 3 months ago
parent
5ce37eab8b
commit
9a10e1aaff
2 changed files with 253 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      src/api/member.js
  2. 239
      src/views/admin/landingList.vue

20
src/api/member.js
View File

@ -8,7 +8,25 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
// 获取落地页活动列表
export function getLandingListApi(data) {
return request({
url: `${API_BASE_URL}/admin/getLanding`,
url: `${API_BASE_URL}/admin/getLandingList`,
method: "post",
data: data,
});
}
// 添加落地页活动
export function addLandingApi(data) {
return request({
url: `${API_BASE_URL}/admin/addLand`,
method: "post",
data: data,
});
}
// 修改落地页活动
export function editLandingtApi(data) {
return request({
url: `${API_BASE_URL}/admin/editLanding`,
method: "post",
data: data,
});

239
src/views/admin/landingList.vue
View File

@ -27,11 +27,11 @@
<div class="content-area">
<!-- 内容头部 -->
<div class="content-header">
<el-button type="primary" icon="el-icon-plus">+新增落地页</el-button>
<el-button type="primary" icon="el-icon-plus" @click="openAddDialog">+新增落地页</el-button>
</div>
<!-- 表格区域 -->
<el-table :data="tableData" stripe v-loading="loading" style="width: 100%; margin-bottom: 20px; border-top: 1px solid #e8e8e8;" >
<el-table :data="tableData" stripe v-loading="loading" style="width: 100%; margin-bottom: 20px; border-top: 1px solid #e8e8e8;" >
<el-table-column
type="index"
label="序号"
@ -68,7 +68,7 @@
align="center"
>
<template v-slot:default="scope">
<el-button type="text" size="small" :icon="Edit" @click="edit(scope.row.id)">编辑</el-button>
<el-button type="text" size="small" :icon="Edit" @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type="text" size="small" :icon="View" @click="detail(scope.row.id)">详情</el-button>
</template>
</el-table-column>
@ -86,13 +86,97 @@
:total="totalCount"
></el-pagination>
</div>
<!-- 新增：添加/编辑活动弹窗 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" :before-close="handleDialogClose">
<el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
<!-- 活动名称 -->
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请输入活动名称" />
</el-form-item>
<!-- 活动简介 -->
<el-form-item label="活动简介" prop="intro">
<el-input
v-model="form.intro"
type="textarea"
placeholder="请输入活动简介"
:maxlength="80"
show-word-limit
/>
<div class="intro-tip">活动简介会给分享后客户展示，请注意填写内容</div>
</el-form-item>
<!-- 活动时间 -->
<el-form-item label="活动时间" prop="time">
<el-date-picker
v-model="form.startTime"
type="datetime"
placeholder="请选择开始时间"
style="width: 200px"
/>
<span class="time-separator">至</span>
<el-date-picker
v-model="form.endTime"
type="datetime"
placeholder="请选择结束时间"
style="width: 200px"
/>
</el-form-item>
<!-- 活动落地页（宽度≤375px） -->
<el-form-item label="活动落地页" prop="landingPage">
<el-upload
class="upload-demo"
action="#"
:limit="1"
:on-change="handleLandingPageUpload"
list-type="picture"
:file-list="form.landingPageFiles"
>
<el-button type="primary" icon="Plus">上传</el-button>
<template #tip>
<div class="upload-tip">
宽度≤375像素，支持PNG、JPG、GIF格式，图片需小于2M
</div>
</template>
</el-upload>
</el-form-item>
<!-- 落地页弹窗（宽度≤375px） -->
<el-form-item label="落地页弹窗" prop="popup">
<el-upload
class="upload-demo"
action="#"
:limit="1"
:on-change="handlePopupUpload"
list-type="picture"
:file-list="form.popupFiles"
>
<el-button type="primary" icon="Plus">上传</el-button>
<template #tip>
<div class="upload-tip">
宽度≤375像素，支持PNG、JPG格式，图片需小于2M
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</div>
</div>
</template>
<script>
import { getLandingListApi } from '../../api/member.js';
import { getLandingListApi, addLandingApi, editLandingtApi } from '../../api/member.js';
import { ElMessage } from 'element-plus';
export default {
@ -150,7 +234,32 @@ export default {
// 总数据量
totalCount: 0,
// 加载状态
loading: false
loading: false,
// 弹窗显示状态
dialogVisible: false,
// 弹窗标题
dialogTitle: '',
// 表单数据
form: {
id: '',
name: '',
intro: '',
startTime: '',
endTime: '',
landingPage: '',
popup: '',
landingPageFiles: [], // 存储已上传的落地页图片
popupFiles: [] // 存储已上传的弹窗图片
},
// 表单校验规则
formRules: {
name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
intro: [{ required: true, message: '请输入活动简介', trigger: 'blur' }],
startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
landingPage: [{ required: true, message: '请上传活动落地页', trigger: 'change' }],
popup: [{ required: true, message: '请上传落地页弹窗', trigger: 'change' }]
}
}
},
mounted() {
@ -204,6 +313,107 @@ export default {
this.$router.push({
path: `/admin/landingDetail/${id}`,
});
},
// 打开新增弹窗
openAddDialog() {
this.dialogTitle = '添加活动';
this.form = {
id: '',
name: '',
intro: '',
startTime: '',
endTime: '',
landingPage: '',
popup: '',
};
this.dialogVisible = true;
},
// 打开编辑弹窗
openEditDialog(row) {
this.dialogTitle = '编辑活动';
this.form = {
id: row.id,
name: row.name,
intro: row.template,
startTime: row.activityTime.split(' - ')[0],
endTime: row.activityTime.split(' - ')[1],
landingPage: '',
popup: '',
};
this.dialogVisible = true;
},
// 处理落地页上传（宽度校验≤375px）
handleLandingPageUpload(file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
if (img.width > 375) {
ElMessage.error('图片宽度不能超过375px');
this.form.landingPageFiles = [];
} else {
this.form.landingPage = file.raw;
this.form.landingPageFiles = [file];
}
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
// 处理弹窗上传（宽度校验≤375px）
handlePopupUpload(file) {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
if (img.width > 375) {
ElMessage.error('图片宽度不能超过375px');
this.form.popupFiles = [];
} else {
this.form.popup = file.raw;
this.form.popupFiles = [file];
}
};
img.src = e.target.result;
};
reader.readAsDataURL(file.raw);
},
// 提交表单（新增/编辑）
submitForm() {
this.$refs.formRef.validate((valid) => {
if (valid) {
const api = this.form.id ? editLandingtApi : addLandingApi;
api({
id: this.form.id,
name: this.form.name,
intro: this.form.intro,
startTime: this.form.startTime,
endTime: this.form.endTime,
landingPage: this.form.landingPage,
popup: this.form.popup
}).then(res => {
if (res.code === 200) {
ElMessage.success('操作成功');
this.dialogVisible = false;
this.getLandingList(); // 刷新列表
} else {
ElMessage.error(res.msg || '操作失败');
}
}).catch(err => {
ElMessage.error('网络异常');
});
}
});
},
// 关闭弹窗
handleDialogClose() {
this.dialogVisible = false;
}
}
}
@ -283,4 +493,23 @@ export default {
align-items: center;
margin-top: 10px;
}
/* 弹窗样式 */
.intro-tip {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.time-separator {
margin: 0 10px;
}
.upload-tip {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
</style>
Write Preview
Loading…
Cancel
Save