1、后台游戏配置新增游戏列表

src/views/system/config/config.vue

@@ -1978,7 +1978,7 @@
             </el-form-item>
           </el-card>
 
-          <!-- 游戏配置卡片 -->
+          <!-- 游戏配置卡片 - 增强版 -->
           <el-card class="config-card" shadow="hover">
             <div class="section-title">
               <div class="title-icon icon-game">
@@ -1986,13 +1986,12 @@
               </div>
               <div class="title-text">
                 <h3>游戏配置</h3>
-                <p class="subtitle">配置APP内小游戏相关参数</p>
+                <p class="subtitle">配置APP内小游戏列表及相关参数</p>
               </div>
             </div>
 
             <el-divider></el-divider>
 
-
             <!-- 游戏获得积分 -->
             <el-form-item label="游戏获得积分" prop="addIntegral">
               <el-input-number
@@ -2025,6 +2024,145 @@
               </el-tooltip>
             </el-form-item>
 
+            <!-- 游戏列表区域 -->
+            <el-form-item label="游戏列表" class="game-list-item">
+              <div class="game-list-header">
+                <el-button type="primary" size="small" @click="addGameConfig" icon="el-icon-plus">
+                  新增游戏
+                </el-button>
+                <span class="game-list-tip">最多可添加10个游戏</span>
+              </div>
+
+              <!-- 游戏列表表格 -->
+              <el-table
+                :data="form25.gameList"
+                border
+                style="width: 100%; margin-top: 15px;"
+                v-loading="gameListLoading"
+              >
+                <el-table-column label="序号" width="60" align="center">
+                  <template slot-scope="scope">
+                    <span>{{ scope.$index + 1 }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="游戏图片" width="200" align="center">
+                  <template slot-scope="scope">
+                    <div v-if="scope.row.editing">
+                      <ImageUpload
+                        v-model="scope.row.image"
+                        :limit="1"
+                        :file-type='["png", "jpg", "jpeg"]'
+                        :width="30"
+                        :height="30"
+                      />
+                    </div>
+                    <div v-else class="game-image-preview">
+                      <el-image
+                        v-if="scope.row.image"
+                        :src="scope.row.image"
+                        :preview-src-list="[scope.row.image]"
+                        style="width: 50px; height: 50px; border-radius: 4px;"
+                      >
+                        <div slot="error" class="image-slot">
+                          <i class="el-icon-picture-outline"></i>
+                        </div>
+                      </el-image>
+                      <span v-else class="no-image">暂无图片</span>
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="游戏名称" min-width="150">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.editing"
+                      v-model="scope.row.name"
+                      placeholder="请输入游戏名称"
+                      size="small"
+                    ></el-input>
+                    <span v-else>{{ scope.row.name || '-' }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="游戏链接" min-width="200">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.editing"
+                      v-model="scope.row.url"
+                      placeholder="请输入游戏链接"
+                      size="small"
+                    ></el-input>
+                    <span v-else class="game-link">{{ scope.row.url || '-' }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="排序" width="100" align="center">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      v-if="scope.row.editing"
+                      v-model="scope.row.sort"
+                      :min="0"
+                      :max="999"
+                      size="small"
+                      controls-position="right"
+                      style="width: 80px;"
+                    ></el-input-number>
+                    <span v-else>{{ scope.row.sort || 0 }}</span>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="状态" width="80" align="center">
+                  <template slot-scope="scope">
+                    <el-switch
+                      v-if="scope.row.editing"
+                      v-model="scope.row.status"
+                      :active-value="1"
+                      :inactive-value="0"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                    ></el-switch>
+                    <el-tag v-else :type="scope.row.status === 1 ? 'success' : 'info'" size="small">
+                      {{ scope.row.status === 1 ? '启用' : '禁用' }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+
+                <el-table-column label="操作" width="150" fixed="right" align="center">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="!scope.row.editing"
+                      type="text"
+                      size="small"
+                      icon="el-icon-edit"
+                      @click="editGame(scope.$index)"
+                    >编辑</el-button>
+                    <el-button
+                      v-if="scope.row.editing"
+                      type="text"
+                      size="small"
+                      icon="el-icon-check"
+                      @click="saveGame(scope.$index)"
+                    >保存</el-button>
+                    <el-button
+                      v-if="!scope.row.editing"
+                      type="text"
+                      size="small"
+                      icon="el-icon-delete"
+                      class="delete-btn"
+                      @click="deleteGame(scope.$index)"
+                    >删除</el-button>
+                    <el-button
+                      v-if="scope.row.editing"
+                      type="text"
+                      size="small"
+                      icon="el-icon-close"
+                      @click="cancelEdit(scope.$index)"
+                    >取消</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
           </el-card>
 
           <!-- 操作按钮 -->
@@ -2874,6 +3012,7 @@ export default {
       form23: {},
       form24: {},
       form25: {},
+      gameListLoading: false,
       form26: {
         bloodGlucose: {
           fasting: { normal: '' },
@@ -3062,6 +3201,119 @@ export default {
     },
   },
   methods: {
+    /**
+     * 新增游戏配置
+     */
+    addGameConfig() {
+      if (!this.form25.gameList) {
+        this.$set(this.form25, 'gameList', [])
+      }
+
+      // 限制最多10个游戏
+      if (this.form25.gameList.length >= 10) {
+        this.$message.warning('最多只能添加10个游戏')
+        return
+      }
+
+      // 添加新游戏配置
+      this.form25.gameList.push({
+        id: Date.now() + Math.random(), // 临时ID
+        image: '',
+        name: '',
+        url: '',
+        sort: this.form25.gameList.length,
+        status: 1, // 默认启用
+        editing: true // 新增时直接进入编辑状态
+      })
+
+      this.$forceUpdate()
+    },
+
+    /**
+     * 编辑游戏
+     */
+    editGame(index) {
+      // 如果已经有其他行在编辑，先保存或取消
+      const editingIndex = this.form25.gameList.findIndex(item => item.editing)
+      if (editingIndex !== -1 && editingIndex !== index) {
+        this.$confirm('当前有其他游戏正在编辑，是否继续？', '提示', {
+          confirmButtonText: '继续',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          // 取消其他行的编辑状态
+          this.form25.gameList[editingIndex].editing = false
+          // 设置当前行为编辑状态
+          this.$set(this.form25.gameList[index], 'editing', true)
+        }).catch(() => {})
+      } else {
+        this.$set(this.form25.gameList[index], 'editing', true)
+      }
+    },
+
+    /**
+     * 保存游戏
+     */
+    saveGame(index) {
+      const game = this.form25.gameList[index]
+
+      // 验证必填项
+      if (!game.name) {
+        this.$message.error('请输入游戏名称')
+        return
+      }
+      if (!game.url) {
+        this.$message.error('请输入游戏链接')
+        return
+      }
+      if (!game.image) {
+        this.$message.error('请上传游戏图片')
+        return
+      }
+
+      // 验证URL格式
+      const urlPattern = /^(http|https):\/\/[^\s]+$/
+      if (!urlPattern.test(game.url)) {
+        this.$message.error('请输入正确的游戏链接（以http://或https://开头）')
+        return
+      }
+
+      // 保存成功，退出编辑状态
+      this.$set(this.form25.gameList[index], 'editing', false)
+      this.$message.success('保存成功')
+    },
+
+    /**
+     * 取消编辑
+     */
+    cancelEdit(index) {
+      const game = this.form25.gameList[index]
+
+      // 如果是新增但未保存（没有id），直接删除
+      if (!game.id || game.id.toString().includes('.')) {
+        this.form25.gameList.splice(index, 1)
+      } else {
+        this.$set(this.form25.gameList[index], 'editing', false)
+      }
+    },
+
+    /**
+     * 删除游戏
+     */
+    deleteGame(index) {
+      this.$confirm('确定要删除这个游戏吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.form25.gameList.splice(index, 1)
+        // 重新排序
+        this.form25.gameList.forEach((item, idx) => {
+          item.sort = idx
+        })
+        this.$message.success('删除成功')
+      }).catch(() => {})
+    },
 
     // 处理开关配置
     handleSwitchConfig(row) {
@@ -4196,4 +4448,80 @@ export default {
     padding: 16px;
   }
 }
+
+
+/* 游戏列表样式 */
+.game-list-item {
+  margin-top: 20px;
+}
+
+.game-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.game-list-tip {
+  font-size: 12px;
+  color: #909399;
+}
+
+.game-image-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 50px;
+}
+
+.no-image {
+  font-size: 12px;
+  color: #909399;
+}
+
+.game-link {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #409EFF;
+  cursor: pointer;
+}
+
+.delete-btn {
+  color: #f56c6c !important;
+}
+
+.delete-btn:hover {
+  color: #f78989 !important;
+}
+
+/* 表格样式优化 */
+::v-deep .el-table .cell {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+::v-deep .el-table th {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+::v-deep .el-table--border {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 图片上传组件样式调整 */
+::v-deep .image-upload {
+  width: 60px;
+  height: 60px;
+}
+
+::v-deep .image-upload .el-upload--picture-card {
+  width: 60px;
+  height: 60px;
+  line-height: 64px;
+}
 </style>