cfc/cfc-web/src/views/admin/PeriodicServiceConfig.vue

<template>
  <div class="periodic-service-config">
    <div class="header">
      <h2>周期性服务续费配置</h2>
      <el-button type="primary" icon="el-icon-plus" @click="openDialog()">新增配置</el-button>
    </div>

    <el-table :data="list" v-loading="loading" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="60">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('id', $event)">ID{{ sortIcon('id') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productId" label="商品ID" width="80" />
      <el-table-column prop="serviceName" label="服务名称" min-width="160">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('serviceName', $event)">服务名称{{ sortIcon('serviceName') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cycleDays" label="周期天数" width="100" />
      <el-table-column prop="remindBeforeDays" label="提前提醒(天)" width="120" />
      <el-table-column label="自动续费" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.autoRenew === 1 ? 'success' : 'info'" size="small">
            {{ scope.row.autoRenew === 1 ? '支持' : '不支持' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0"
            @change="toggle(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" style="color: #f56c6c"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" @closed="resetForm">
      <el-form :model="form" label-width="120px" size="small">
        <el-form-item label="商品ID" required>
          <el-input-number v-model="form.productId" :min="1" style="width: 100%" />
        </el-form-item>
        <el-form-item label="服务名称">
          <el-input v-model="form.serviceName" placeholder="可选，留空则使用商品名称" />
        </el-form-item>
        <el-form-item label="周期天数" required>
          <el-input-number v-model="form.cycleDays" :min="1" :max="3650" style="width: 100%" />
        </el-form-item>
        <el-form-item label="提前提醒天数">
          <el-input-number v-model="form.remindBeforeDays" :min="1" :max="180" style="width: 100%" />
        </el-form-item>
        <el-form-item label="自动续费">
          <el-switch v-model="form.autoRenew" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="save">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPeriodicServiceList, createPeriodicService, updatePeriodicService, deletePeriodicService, togglePeriodicService } from '@/api/periodic-service'
import SortMixin from '@/mixins/SortMixin'

export default {
  mixins: [SortMixin],
  data() {
    return {
      submitting: false,
      loading: false,
      list: [],
      sortableColumns: { id: 'ID', serviceName: '服务名称' },
      dialogVisible: false,
      dialogTitle: '',
      form: {
        productId: null,
        serviceName: '',
        cycleDays: 365,
        remindBeforeDays: 30,
        autoRenew: 0,
        enabled: 1
      },
      editingId: null
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    loadList() {
      this.fetchList()
    },
    async fetchList() {
      this.loading = true
      try {
        const params = {}
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getPeriodicServiceList(params)
        if (res.data && res.data.code === 200) {
          this.list = res.data.data || []
        }
      } catch (e) {
        console.error('获取列表失败', e)
      } finally {
        this.loading = false
      }
    },
    openDialog(row) {
      if (row && row.id) {
        this.editingId = row.id
        this.dialogTitle = '编辑周期性服务配置'
        this.form = {
          productId: row.productId,
          serviceName: row.serviceName || '',
          cycleDays: row.cycleDays,
          remindBeforeDays: row.remindBeforeDays,
          autoRenew: row.autoRenew,
          enabled: row.enabled
        }
      } else {
        this.editingId = null
        this.dialogTitle = '新增周期性服务配置'
        this.resetForm()
      }
      this.dialogVisible = true
    },
    resetForm() {
      this.form = {
        productId: null,
        serviceName: '',
        cycleDays: 365,
        remindBeforeDays: 30,
        autoRenew: 0,
        enabled: 1
      }
    },
    async save() {
      if (!this.form.productId) {
        this.$message.error('请输入商品ID')
        return
      }
      if (!this.form.cycleDays || this.form.cycleDays < 1) {
        this.$message.error('请输入有效的周期天数')
        return
      }
      try {
        let res
        if (this.editingId) {
          res = await updatePeriodicService({ id: this.editingId, ...this.form })
        } else {
          res = await createPeriodicService(this.form)
        }
        if (res.data && res.data.code === 200) {
          this.$message.success(this.editingId ? '更新成功' : '创建成功')
          this.dialogVisible = false
          this.fetchList()
        } else {
          this.$message.error(res.data?.message || '操作失败')
        }
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    async toggle(row) {
      try {
        const res = await togglePeriodicService({ id: row.id })
        if (res.data && res.data.code === 200) {
          this.$message.success(res.data.message || '操作成功')
        }
      } catch (e) {
        this.$message.error('操作失败')
        row.enabled = row.enabled === 1 ? 0 : 1
      }
    },
    handleDelete(row) {
      this.$confirm('确定删除该配置吗？', '提示', { type: 'warning' }).then(async () => {
        try {
          const res = await deletePeriodicService({ id: row.id })
          if (res.data && res.data.code === 200) {
            this.$message.success('删除成功')
            this.fetchList()
          }
        } catch (e) {
          this.$message.error('删除失败')
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.periodic-service-config {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>