| 1234567891011121314151617181920212223242526272829303132333435363738 |
- <template>
- <div>
- <el-card>
- <template #header><div class="header"><div><div class="title">活动权益发放计划</div><div class="desc">配置达标后发什么奖品、怎么发、库存和单客户上限。</div></div><el-button type="primary" @click="openDialog()"><el-icon><Plus /></el-icon>新增计划</el-button></div></template>
- <el-table :data="rows" border stripe>
- <el-table-column prop="id" label="计划编号" width="120" /><el-table-column prop="name" label="计划名称" min-width="180" /><el-table-column prop="rewardType" label="奖品类型" width="110" /><el-table-column prop="rewardName" label="奖品名称" min-width="150" /><el-table-column prop="grantMode" label="发放方式" min-width="160" /><el-table-column prop="perCustomerLimit" label="单客户上限" width="110" /><el-table-column prop="stock" label="库存" width="100" /><el-table-column prop="usedBy" label="引用活动" min-width="160" /><el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.status === '启用' ? 'success' : 'info'">{{ row.status }}</el-tag></template></el-table-column><el-table-column prop="updatedAt" label="更新时间" width="170" /><el-table-column label="操作" width="150" fixed="right"><template #default="{ row }"><el-button type="primary" link @click="openDialog(row)">编辑</el-button><el-button type="primary" link @click="toggle(row)">{{ row.status === '启用' ? '停用' : '启用' }}</el-button></template></el-table-column>
- </el-table>
- </el-card>
- <el-dialog v-model="visible" :title="form.id ? '编辑发放计划' : '新增发放计划'" width="720px">
- <el-form :model="form" label-width="120px">
- <el-form-item label="计划名称" required><el-input v-model="form.name" /></el-form-item>
- <el-form-item label="奖品类型"><el-select v-model="form.rewardType" style="width:100%"><el-option label="积分" value="积分" /><el-option label="立减金" value="立减金" /><el-option label="卡券" value="卡券" /><el-option label="信用卡权益" value="信用卡权益" /><el-option label="第三方权益" value="第三方权益" /></el-select></el-form-item>
- <el-form-item label="奖品名称" required><el-input v-model="form.rewardName" /></el-form-item>
- <el-form-item label="发放方式"><el-select v-model="form.grantMode" style="width:100%"><el-option label="达标后自动发放" value="达标后自动发放" /><el-option label="达标后跳转领取" value="达标后跳转领取" /><el-option label="报名成功后直接发放" value="报名成功后直接发放" /></el-select></el-form-item>
- <el-form-item label="单客户上限"><el-input-number v-model="form.perCustomerLimit" :min="1" /></el-form-item>
- <el-form-item label="库存"><el-input-number v-model="form.stock" :min="0" /></el-form-item>
- <el-form-item label="引用活动"><el-input v-model="form.usedBy" /></el-form-item>
- <el-form-item label="状态"><el-select v-model="form.status" style="width:100%"><el-option label="启用" value="启用" /><el-option label="停用" value="停用" /></el-select></el-form-item>
- </el-form>
- <template #footer><el-button @click="visible=false">取消</el-button><el-button type="primary" @click="save">保存</el-button></template>
- </el-dialog>
- </div>
- </template>
- <script>
- import { ElMessage } from 'element-plus'
- import activityStore from '@/store/activityStore'
- export default {
- name: 'ActivityGrantPlan',
- data() { return { visible: false, form: {} } },
- computed: { rows() { return activityStore.activityGrantPlans } },
- methods: {
- openDialog(row) { this.form = row ? { ...row } : { rewardType: '积分', grantMode: '达标后自动发放', perCustomerLimit: 1, stock: 0, status: '启用' }; this.visible = true },
- save() { if (!this.form.name || !this.form.rewardName) return ElMessage.warning('计划名称和奖品名称必填'); activityStore.saveSimple('activityGrantPlans', this.form); this.visible = false; ElMessage.success('保存成功') },
- toggle(row) { row.status = row.status === '启用' ? '停用' : '启用'; activityStore.saveSimple('activityGrantPlans', row) }
- }
- }
- </script>
- <style scoped>.header{display:flex;justify-content:space-between;align-items:center;gap:16px}.title{font-size:16px;font-weight:600}.desc{margin-top:4px;color:#909399;font-size:13px}</style>
|
