2025-07-19 20:00:08 +08:00

165 lines
4.3 KiB
Vue

<template>
<view class="edit-container">
<common-header title="编辑活动" theme="activity" @back="goBack" />
<view class="edit-content">
<uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
<uni-forms-item label="活动标题" required name="title">
<uni-easyinput v-model="formData.title" placeholder="请输入活动标题" />
</uni-forms-item>
<uni-forms-item label="活动描述" name="description">
<uni-easyinput
v-model="formData.description"
type="textarea"
placeholder="请输入活动描述"
:auto-height="true" />
</uni-forms-item>
<uni-forms-item label="开始时间" required name="startTime">
<uni-datetime-picker v-model="formData.startTime" />
</uni-forms-item>
<uni-forms-item label="结束时间" required name="endTime">
<uni-datetime-picker v-model="formData.endTime" />
</uni-forms-item>
<uni-forms-item label="活动状态" name="status">
<uni-data-select
v-model="formData.status"
:localdata="statusOptions"
placeholder="请选择活动状态" />
</uni-forms-item>
</uni-forms>
<view class="form-actions">
<uni-button type="default" @click="goBack">取消</uni-button>
<uni-button type="primary" @click="submitForm" :loading="submitting">保存</uni-button>
</view>
</view>
</view>
</template>
<script>
import CommonHeader from '@/components/common-header/common-header.vue'
export default {
name: 'ActivityEdit',
components: {
CommonHeader
},
data() {
return {
activityId: null,
formData: {
title: '',
description: '',
startTime: '',
endTime: '',
status: 0
},
rules: {
title: {
rules: [{ required: true, errorMessage: '请输入活动标题' }]
},
startTime: {
rules: [{ required: true, errorMessage: '请选择开始时间' }]
},
endTime: {
rules: [{ required: true, errorMessage: '请选择结束时间' }]
}
},
statusOptions: [
{ value: 0, text: '草稿' },
{ value: 1, text: '已发布' },
{ value: 2, text: '进行中' },
{ value: 3, text: '已结束' }
],
submitting: false
}
},
onLoad(option) {
const { id } = option
if (id) {
this.activityId = id
this.getActivityDetail(id)
}
},
methods: {
async getActivityDetail(id) {
try {
// TODO: Replace with actual API call
const response = await this.$http.get(`/brewery/activity/${id}`)
const data = response.data || {}
this.formData = {
title: data.title || '',
description: data.description || '',
startTime: data.startTime || '',
endTime: data.endTime || '',
status: data.status || 0
}
} catch (error) {
console.error('获取活动详情失败:', error)
this.$modal.showToast('获取活动详情失败')
}
},
async submitForm() {
try {
// 表单验证
const valid = await this.$refs.form.validate()
if (!valid) return
// 时间验证
if (new Date(this.formData.startTime) >= new Date(this.formData.endTime)) {
this.$modal.showToast('开始时间不能大于等于结束时间')
return
}
this.submitting = true
// TODO: Replace with actual API call
const response = await this.$http.put(`/brewery/activity/${this.activityId}`, this.formData)
this.$modal.showToast('保存成功')
// 返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
} catch (error) {
console.error('保存失败:', error)
this.$modal.showToast('保存失败')
} finally {
this.submitting = false
}
},
goBack() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.edit-container {
min-height: 100vh;
background: #f5f7fa;
}
.edit-content {
padding: 20rpx;
}
.form-actions {
display: flex;
gap: 20rpx;
margin-top: 60rpx;
padding: 0 20rpx;
}
</style>