修改奖励类型页面

src/views/system/reward-type.vue

@@ -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 :model="form" :rules="rules" ref="form" label-width="100px" class="add-form">
-          <el-form-item label="名称" prop="name" required>
+          <el-form-item label="名称" prop="name">
-            <el-input v-model="form.name" placeholder="请输入名称" maxlength="50" style="width: 360px;" />
+            <el-input v-model="form.name" placeholder="请输入名称" maxlength="50" />
           </el-form-item>
-          <el-form-item label="腾讯奖励类型ID" prop="tencentTypeId" required>
+          <el-form-item label="编码" prop="code">
-            <el-input-number v-model="form.tencentTypeId" :min="1" style="width: 360px;" />
+            <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,
+        code: '',
-        source: 1
+        iconUrl: ''
       },
       rules: {
         name: [
           { required: true, message: '请输入名称', trigger: 'blur' },
           { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
         ],
-        tencentTypeId: [
+        code: [
-          { required: true, message: '请输入腾讯奖励类型ID', trigger: 'blur' }
+          { 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,
+        code: row.code,
-        source: row.source
+        iconUrl: row.iconUrl
       }
       this.dialogVisible = true
     },
@@ -175,8 +203,8 @@ export default {
       this.$refs.form && this.$refs.form.resetFields()
       this.form = {
         name: '',
-        tencentTypeId: undefined,
+        code: '',
-        source: 1
+        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 {
+.dialog-footer {
-  text-align: left;
+  text-align: right;
-  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;
 }
 </style>