denghui/arenax-system-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改奖励类型页面

Browse Source
This commit is contained in:
denghui
2025-06-26 15:09:05 +08:00
parent 310308c7d9
commit 261a62da33
1 changed files with 114 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/views/system/reward-type.vue
View File

@ -27,8 +27,18 @@
</div>
<el-table :data="list" style="width: 100%" v-loading="loading" size="small" :row-class-name="'reward-table-row'"
:cell-style="{ padding: '12px 8px' }">
<el-table-column label="图标" width="100" align="center">
<template slot-scope="scope">
<el-image :src="scope.row.iconUrl" style="width: 40px; height: 40px; border-radius: 4px;" fit="cover">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="name" label="名称" min-width="120" align="center" />
<el-table-column prop="tencentTypeId" label="腾讯奖励类型ID" min-width="120" align="center" />
<el-table-column prop="code" label="编码" min-width="150" align="center" />
<el-table-column prop="createdAt" label="创建时间" min-width="180" align="center" />
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<template v-if="!scope.row.storeName">
@ -62,19 +72,34 @@
<el-dialog
:title="dialogType === 'add' ? '新增奖励类型' : '编辑奖励类型'"
:visible.sync="dialogVisible"
width="500px"
width="600px"
:close-on-click-modal="false"
@closed="handleDialogClosed"
class="reward-dialog"
>
<el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left" class="add-form">
<el-form-item label="名称" prop="name" required>
<el-input v-model="form.name" placeholder="请输入名称" maxlength="50" style="width: 360px;" />
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="add-form">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" maxlength="50" />
</el-form-item>
<el-form-item label="腾讯奖励类型ID" prop="tencentTypeId" required>
<el-input-number v-model="form.tencentTypeId" :min="1" style="width: 360px;" />
<el-form-item label="编码" prop="code">
<el-input v-model="form.code" placeholder="请输入编码" maxlength="50" />
</el-form-item>
<el-form-item label="图标" prop="iconUrl">
<el-upload
class="icon-uploader"
action="#"
:show-file-list="false"
:on-success="handleIconSuccess"
:before-upload="beforeIconUpload"
:http-request="() => {}"
>
<img v-if="form.iconUrl" :src="form.iconUrl" class="icon">
<i v-else class="el-icon-plus icon-uploader-icon"></i>
</el-upload>
<div class="upload-tip">建议尺寸 128x128，大小不超过 2MB</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: left;">
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</div>
@ -104,16 +129,19 @@ export default {
dialogType: 'add', // add 或 edit
form: {
name: '',
tencentTypeId: undefined,
source: 1
code: '',
iconUrl: ''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
],
tencentTypeId: [
{ required: true, message: '请输入腾讯奖励类型ID', trigger: 'blur' }
code: [
{ required: true, message: '请输入编码', trigger: 'blur' }
],
iconUrl: [
{ required: true, message: '请输入图标URL', trigger: 'blur' }
]
}
}
@ -147,8 +175,8 @@ export default {
this.form = {
id: row.id,
name: row.name,
tencentTypeId: row.tencentTypeId,
source: row.source
code: row.code,
iconUrl: row.iconUrl
}
this.dialogVisible = true
},
@ -175,8 +203,8 @@ export default {
this.$refs.form && this.$refs.form.resetFields()
this.form = {
name: '',
tencentTypeId: undefined,
source: 1
code: '',
iconUrl: ''
}
this.dialogType = 'add' // 重置为新增状态
},
@ -213,6 +241,25 @@ export default {
storeId: undefined
}
this.getList()
},
handleIconSuccess(res, file) {
// 注意：这里仅为本地预览。您需要对接真实的上传接口，
// 并在成功回调中获取真实的图片URL，例如：
// this.form.iconUrl = res.data.url;
this.form.iconUrl = URL.createObjectURL(file.raw)
this.$refs.form.validateField('iconUrl')
},
beforeIconUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJpgOrPng) {
this.$message.error('上传图标图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传图标图片大小不能超过 2MB!')
}
return isJpgOrPng && isLt2M
}
}
}
@ -299,6 +346,16 @@ export default {
padding-right: 8px;
text-align: center !important;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #c0c4cc;
font-size: 20px;
}
.table-footer {
margin-top: 8px;
text-align: right;
@ -341,39 +398,48 @@ export default {
}
}
}
.reward-dialog .el-form-item {
margin-bottom: 22px;
}
.icon-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 128px;
height: 128px;
display: flex;
justify-content: center;
align-items: center;
}
.icon-uploader .el-upload:hover {
border-color: #409EFF;
}
.icon-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 128px;
height: 128px;
line-height: 128px;
text-align: center;
}
.icon {
width: 128px;
height: 128px;
display: block;
object-fit: cover;
}
.upload-tip {
color: #999;
font-size: 12px;
line-height: 1.5;
margin-top: 8px;
}
.add-form .el-form-item {
margin-bottom: 20px;
margin-bottom: 22px;
}
.add-form .el-form-item__label {
text-align: left;
padding-right: 12px;
}
.add-form .el-input {
font-size: 14px;
}
.add-form .el-form-item__content {
text-align: left;
}
.add-form .el-input__inner {
text-align: left;
}
.add-form .el-textarea__inner {
text-align: left;
}
.add-form .el-radio-group {
text-align: left;
}
.status-tag {
display: inline-block;
padding: 2px 16px;
border-radius: 16px;
font-size: 14px;
font-weight: 500;
background: #e8f7ea;
color: #3fc06d;
}
.status-block {
background: #fbeaea;
color: #f56c6c;
.dialog-footer {
text-align: right;
}
</style>