98 行
4.7 KiB
Vue
98 行
4.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>小蒙马夏令营</h2>
|
|
<el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
|
|
</div>
|
|
<el-card v-loading="loading">
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
|
|
<el-form-item label="定位"><el-input v-model="form.positioning" type="textarea" :autosize="{minRows:4,maxRows:15}" /></el-form-item>
|
|
<el-row :gutter="16">
|
|
<el-col :span="8"><el-form-item label="天数"><el-input-number v-model="form.days" :min="1" /></el-form-item></el-col>
|
|
<el-col :span="8"><el-form-item label="晚数"><el-input-number v-model="form.nights" :min="0" /></el-form-item></el-col>
|
|
</el-row>
|
|
<el-form-item label="与V9区别"><el-input v-model="form.difference_from_v9" type="textarea" :autosize="{minRows:3,maxRows:8}" /></el-form-item>
|
|
|
|
<el-divider>设计原则</el-divider>
|
|
<div v-for="(p, i) in form.principles" :key="'p'+i" style="display:flex;gap:8px;margin-bottom:8px">
|
|
<el-input v-model="form.principles[i]" />
|
|
<el-button type="danger" text @click="form.principles.splice(i,1)">删除</el-button>
|
|
</div>
|
|
<el-button @click="form.principles.push('')">+ 添加原则</el-button>
|
|
|
|
<el-divider>核心活动</el-divider>
|
|
<div v-for="(a, i) in form.activities" :key="'a'+i" style="display:flex;gap:8px;margin-bottom:8px">
|
|
<el-input v-model="form.activities[i]" />
|
|
<el-button type="danger" text @click="form.activities.splice(i,1)">删除</el-button>
|
|
</div>
|
|
<el-button @click="form.activities.push('')">+ 添加活动</el-button>
|
|
|
|
<el-divider>每日行程</el-divider>
|
|
<div v-for="(it, i) in form.itinerary" :key="'it'+i" style="display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;">
|
|
<el-tag type="info" style="min-width:50px;text-align:center;margin-top:6px;">Day{{ i+1 }}</el-tag>
|
|
<el-input v-model="form.itinerary[i]" type="textarea" :autosize="{minRows:2,maxRows:6}" />
|
|
<el-button type="danger" text @click="form.itinerary.splice(i,1)" style="margin-top:6px;">删除</el-button>
|
|
</div>
|
|
<el-button @click="form.itinerary.push('')">+ 添加一天</el-button>
|
|
|
|
<el-divider>常见问答</el-divider>
|
|
<div v-for="(f, i) in form.faq" :key="'f'+i" style="margin-bottom:12px;padding:12px;background:#fafafa;border-radius:8px;">
|
|
<div style="display:flex;gap:8px;margin-bottom:6px;align-items:center;">
|
|
<span style="font-weight:600;min-width:20px;">Q:</span>
|
|
<el-input v-model="f.question" placeholder="问题" />
|
|
<el-button type="danger" text @click="form.faq.splice(i,1)">删除</el-button>
|
|
</div>
|
|
<div style="display:flex;gap:8px;align-items:flex-start;">
|
|
<span style="font-weight:600;min-width:20px;margin-top:6px;">A:</span>
|
|
<el-input v-model="f.answer" type="textarea" :autosize="{minRows:2,maxRows:8}" placeholder="回答" />
|
|
</div>
|
|
</div>
|
|
<el-button @click="form.faq.push({question:'',answer:''})">+ 添加问答</el-button>
|
|
|
|
<el-divider>期数信息</el-divider>
|
|
<div v-for="(val, key) in form.sessions" :key="key" style="display:flex;gap:8px;margin-bottom:8px;align-items:center;">
|
|
<el-input :model-value="key" disabled style="width:120px" />
|
|
<el-input-number :model-value="val" @update:model-value="form.sessions[key] = $event" />
|
|
<span style="color:#909399;font-size:13px;">期</span>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { getSummerCamp, updateSummerCamp } from '../../api/products'
|
|
|
|
const loading = ref(false)
|
|
const saving = ref(false)
|
|
const form = ref({ name: '', positioning: '', days: 6, nights: 5, sessions: {}, difference_from_v9: '', principles: [], activities: [], itinerary: [], faq: [] })
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await getSummerCamp()
|
|
const data = res.data
|
|
// faq 字段可能用 q/a 格式，统一为 question/answer
|
|
if (data.faq) {
|
|
data.faq = data.faq.map(f => ({
|
|
question: f.question || f.q || '',
|
|
answer: f.answer || f.a || '',
|
|
}))
|
|
}
|
|
form.value = { ...form.value, ...data }
|
|
} finally { loading.value = false }
|
|
})
|
|
|
|
const handleSave = async () => {
|
|
saving.value = true
|
|
try {
|
|
await updateSummerCamp(form.value)
|
|
ElMessage.success('保存成功')
|
|
} catch { ElMessage.error('保存失败') }
|
|
finally { saving.value = false }
|
|
}
|
|
</script>
|