APP游戏配置

src/views/system/config/config.vue

@@ -1823,6 +1823,192 @@
               <video :src="form25.videoUrl" controls style="max-width: 400px; max-height: 400px;"></video>
             </div>
           </el-form-item>
+              <!-- 游戏配置卡片 - 增强版 -->
+          <el-card class="config-card" shadow="hover">
+            <div class="section-title">
+              <div class="title-icon icon-game">
+                <i class="el-icon-s-flag"></i>
+              </div>
+              <div class="title-text">
+                <h3>游戏配置</h3>
+                <p class="subtitle">配置APP内小游戏列表及相关参数</p>
+              </div>
+            </div>
+
+            <el-divider></el-divider>
+
+            <!-- 游戏获得积分 -->
+            <el-form-item label="游戏获得积分" prop="addIntegral">
+              <el-input-number
+                v-model="form25.addIntegral"
+                :min="-999999"
+                :max="999999"
+                :step="1"
+                :precision="0"
+                controls-position="right"
+                style="width: 320px;">
+              </el-input-number>
+              <el-tooltip content="玩一局游戏获得的积分（负数为扣减）,默认100" placement="right">
+                <i class="el-icon-question help-icon"></i>
+              </el-tooltip>
+            </el-form-item>
+
+            <!-- 视频获得积分 -->
+            <el-form-item label="视频获得积分" prop="defaultRewardGold">
+              <el-input-number
+                v-model="form25.defaultRewardGold"
+                :min="-999999"
+                :max="999999"
+                :step="1"
+                :precision="0"
+                controls-position="right"
+                style="width: 320px;">
+              </el-input-number>
+              <el-tooltip content="观看视频获得的金币（负数为扣减）,默认100" placement="right">
+                <i class="el-icon-question help-icon"></i>
+              </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>
           <div class="footer">
             <el-button type="primary" @click="submitForm25">提 交</el-button>
           </div>
@@ -2543,6 +2729,121 @@ 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) {
       this.switchForm.appId = row.appid
@@ -3242,4 +3543,347 @@ export default {
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+
+.red-packet-config {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.red-packet-form {
+  margin-top: 20px;
+}
+
+/* 每一行的样式 */
+.form-row {
+  display: flex;
+  /* align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5; */
+   display: flex;
+  /* 关键改动：添加以下两行 */
+  align-items: center;    /* 垂直居中对齐 */
+  justify-content: flex-start; /* 水平方向从左到右排列（默认值，可显式写出） */
+
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+/* 最后一行去掉下边框 */
+.form-row:last-child {
+  border-bottom: none;
+}
+
+.form-item-amount {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.form-item-weight {
+  width: 220px;
+  margin-right: 20px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.amount-input {
+  width: 100px !important;
+  text-align: center;
+}
+
+/* 金额输入框之间的连接符 */
+.separator {
+  margin: 0 10px;
+  color: #999;
+}
+
+.suffix {
+  margin-left: 10px;
+  color: #999;
+}
+
+.add-btn {
+  /* color: #48bb78 !important; */
+}
+
+.delete-btn {
+  color: #f56c6c !important;
+}
+
+.rules-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #666;
+}
+
+.info-number {
+  color: #1890ff;
+  font-weight: bold;
+  margin: 0 4px;
+}
+
+.action-bar {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.app-config-form {
+  padding: 10px;
+}
+
+.config-card {
+  margin-bottom: 24px;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+}
+
+.config-card ::v-deep .el-card__body {
+  padding: 24px;
+}
+
+/* 章节标题样式 - 图标和文字在一起 */
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.title-icon i {
+  color: #fff;
+  font-size: 20px;
+}
+
+.icon-promotion {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.title-text h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.subtitle {
+  margin: 4px 0 0 0;
+  font-size: 13px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+/* 分割线 */
+.el-divider {
+  margin: 20px 0;
+  background-color: #ebeef5;
+}
+
+/* 表单项 */
+.app-config-form ::v-deep .el-form-item {
+  margin-bottom: 24px;
+}
+
+.app-config-form ::v-deep .el-form-item:last-child {
+  margin-bottom: 0;
+}
+
+.help-icon {
+  margin-left: 8px;
+  color: #c0c4cc;
+  cursor: help;
+  font-size: 16px;
+  transition: color 0.3s;
+}
+
+.help-icon:hover {
+  color: #409EFF;
+}
+
+/* 上传区域 */
+.upload-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  color: #909399;
+  font-size: 12px;
+}
+
+/* 视频上传 */
+.video-upload-wrapper {
+  width: 100%;
+  max-width: 400px;
+}
+
+.video-uploader ::v-deep .el-upload {
+  width: 100%;
+}
+
+.video-uploader ::v-deep .el-upload-dragger {
+  width: 100%;
+  height: 160px;
+  background: #fafafa;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+}
+
+.video-uploader ::v-deep .el-upload-dragger:hover {
+  border-color: #409EFF;
+}
+
+.preview-video {
+  width: 100%;
+  max-width: 400px;
+  max-height: 250px;
+  border-radius: 8px;
+  background: #000;
+}
+
+.video-preview {
+  position: relative;
+  display: inline-block;
+}
+
+.video-actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.video-preview:hover .video-actions {
+  opacity: 1;
+}
+
+/* 底部按钮 */
+.form-footer {
+  margin-top: 32px;
+  padding-left: 160px;
+}
+
+.form-footer .el-button {
+  min-width: 100px;
+  padding: 12px 24px;
+  border-radius: 6px;
+}
+
+/* 响应式 */
+@media screen and (max-width: 768px) {
+  .section-title {
+    margin-bottom: 16px;
+  }
+
+  .form-footer {
+    padding-left: 0;
+    text-align: center;
+  }
+
+  .config-card ::v-deep .el-card__body {
+    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>