493 lines
13 KiB
Vue
493 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="page-container" :style="containerStyle">
|
|||
|
|
<common-header title="发布活动" theme="activity" @back="goBack" />
|
|||
|
|
|
|||
|
|
<view class="add-content">
|
|||
|
|
<!-- 表单卡片 -->
|
|||
|
|
<view class="form-card">
|
|||
|
|
<uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
|
|||
|
|
<!-- 基础信息区域 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
<uni-icons type="info" size="16" color="#ff5722" />
|
|||
|
|
<text>基础信息</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动标题" name="title" required>
|
|||
|
|
<uni-easyinput
|
|||
|
|
v-model="formData.title"
|
|||
|
|
placeholder="请输入活动标题"
|
|||
|
|
maxlength="50"
|
|||
|
|
:clearable="true" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动描述" name="description">
|
|||
|
|
<uni-easyinput
|
|||
|
|
v-model="formData.description"
|
|||
|
|
type="textarea"
|
|||
|
|
placeholder="请输入活动描述，让用户了解活动详情"
|
|||
|
|
maxlength="200"
|
|||
|
|
:auto-height="true" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 时间设置区域 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
<uni-icons type="calendar" size="16" color="#ff5722" />
|
|||
|
|
<text>时间设置</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动时间" name="startTime" required>
|
|||
|
|
<view class="datetime-wrapper">
|
|||
|
|
<uni-datetime-picker
|
|||
|
|
v-model="formData.startTime"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="选择开始时间"
|
|||
|
|
:clear-icon="true" />
|
|||
|
|
<uni-icons type="calendar-filled" size="16" color="#999" />
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="结束时间" name="endTime" required>
|
|||
|
|
<view class="datetime-wrapper">
|
|||
|
|
<uni-datetime-picker
|
|||
|
|
v-model="formData.endTime"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="选择结束时间"
|
|||
|
|
:clear-icon="true" />
|
|||
|
|
<uni-icons type="calendar-filled" size="16" color="#999" />
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 活动设置区域 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
<uni-icons type="gear" size="16" color="#ff5722" />
|
|||
|
|
<text>活动设置</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动类型" name="type" required>
|
|||
|
|
<uni-data-select
|
|||
|
|
v-model="formData.type"
|
|||
|
|
:localdata="typeOptions"
|
|||
|
|
placeholder="请选择活动类型" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="参与限制" name="participantLimit">
|
|||
|
|
<view class="number-input-wrapper">
|
|||
|
|
<uni-number-box
|
|||
|
|
v-model="formData.participantLimit"
|
|||
|
|
:min="0"
|
|||
|
|
:max="9999"
|
|||
|
|
placeholder="0" />
|
|||
|
|
<text class="input-suffix">人（0表示无限制）</text>
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 详细规则区域 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">
|
|||
|
|
<uni-icons type="list" size="16" color="#ff5722" />
|
|||
|
|
<text>详细规则</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动规则" name="rules">
|
|||
|
|
<uni-easyinput
|
|||
|
|
v-model="formData.rules"
|
|||
|
|
type="textarea"
|
|||
|
|
placeholder="请输入活动规则，如参与条件、活动流程等"
|
|||
|
|
maxlength="500"
|
|||
|
|
:auto-height="true" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
|
|||
|
|
<uni-forms-item label="活动奖励" name="reward">
|
|||
|
|
<uni-easyinput
|
|||
|
|
v-model="formData.reward"
|
|||
|
|
placeholder="请输入活动奖励，如优惠券、积分、礼品等"
|
|||
|
|
maxlength="100"
|
|||
|
|
:clearable="true" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</view>
|
|||
|
|
</uni-forms>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮区域 -->
|
|||
|
|
<view class="action-section">
|
|||
|
|
<uni-button
|
|||
|
|
class="action-btn draft-btn"
|
|||
|
|
@click="saveDraft">
|
|||
|
|
<uni-icons type="folder" size="18" color="#666" />
|
|||
|
|
保存草稿
|
|||
|
|
</uni-button>
|
|||
|
|
<uni-button
|
|||
|
|
class="action-btn publish-btn"
|
|||
|
|
type="primary"
|
|||
|
|
@click="submitForm">
|
|||
|
|
<uni-icons type="paperplane" size="18" color="#fff" />
|
|||
|
|
发布活动
|
|||
|
|
</uni-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import CommonHeader from '@/components/common-header/common-header.vue'
|
|||
|
|
import { createActivity } from '@/api/brewery/activity'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CommonHeader
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
headerHeight: 96, // 默认头部高度
|
|||
|
|
formData: {
|
|||
|
|
title: '',
|
|||
|
|
description: '',
|
|||
|
|
startTime: '',
|
|||
|
|
endTime: '',
|
|||
|
|
type: '',
|
|||
|
|
rules: '',
|
|||
|
|
reward: '',
|
|||
|
|
participantLimit: 0,
|
|||
|
|
status: 0
|
|||
|
|
},
|
|||
|
|
typeOptions: [
|
|||
|
|
{ value: '1', text: '限时抢购' },
|
|||
|
|
{ value: '2', text: '满减活动' },
|
|||
|
|
{ value: '3', text: '新人礼包' },
|
|||
|
|
{ value: '4', text: '积分兑换' }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
rules: {
|
|||
|
|
title: {
|
|||
|
|
rules: [
|
|||
|
|
{ required: true, errorMessage: '请输入活动标题' },
|
|||
|
|
{ minLength: 2, maxLength: 50, errorMessage: '标题长度在2-50字符之间' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
description: {
|
|||
|
|
rules: [
|
|||
|
|
{ maxLength: 200, errorMessage: '描述不能超过200字符' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
startTime: {
|
|||
|
|
rules: [{ required: true, errorMessage: '请选择开始时间' }]
|
|||
|
|
},
|
|||
|
|
endTime: {
|
|||
|
|
rules: [
|
|||
|
|
{ required: true, errorMessage: '请选择结束时间' },
|
|||
|
|
{
|
|||
|
|
validateFunction: (rule, value, data) => {
|
|||
|
|
if (data.startTime && value && new Date(value) <= new Date(data.startTime)) {
|
|||
|
|
return '结束时间必须晚于开始时间'
|
|||
|
|
}
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
type: {
|
|||
|
|
rules: [{ required: true, errorMessage: '请选择活动类型' }]
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
rules: [
|
|||
|
|
{ maxLength: 500, errorMessage: '规则不能超过500字符' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
reward: {
|
|||
|
|
rules: [
|
|||
|
|
{ maxLength: 100, errorMessage: '奖励描述不能超过100字符' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
containerStyle() {
|
|||
|
|
return {
|
|||
|
|
paddingTop: this.headerHeight + 'px'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad() {
|
|||
|
|
this.listenHeaderHeight()
|
|||
|
|
this.calculateHeaderHeight()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off('header-height-updated', this.onHeaderHeightUpdated)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async submitForm() {
|
|||
|
|
try {
|
|||
|
|
await this.$refs.form.validate()
|
|||
|
|
this.formData.status = 1
|
|||
|
|
await this.saveActivity()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('表单验证失败', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async saveDraft() {
|
|||
|
|
this.formData.status = 0
|
|||
|
|
await this.saveActivity()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async saveActivity() {
|
|||
|
|
try {
|
|||
|
|
await createActivity(this.formData)
|
|||
|
|
this.$modal.showToast('保存成功')
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
} catch (error) {
|
|||
|
|
this.$modal.showToast('保存失败')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 监听头部高度变化
|
|||
|
|
listenHeaderHeight() {
|
|||
|
|
uni.$on('header-height-updated', this.onHeaderHeightUpdated)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 头部高度更新处理
|
|||
|
|
onHeaderHeightUpdated(data) {
|
|||
|
|
this.headerHeight = data.headerHeight
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 直接计算头部高度
|
|||
|
|
calculateHeaderHeight() {
|
|||
|
|
try {
|
|||
|
|
const systemInfo = uni.getSystemInfoSync()
|
|||
|
|
const statusBarHeight = systemInfo.statusBarHeight || 0
|
|||
|
|
let navBarHeight = 44
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
try {
|
|||
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|||
|
|
if (menuButtonInfo) {
|
|||
|
|
const topGap = menuButtonInfo.top - statusBarHeight
|
|||
|
|
const bottomGap = topGap
|
|||
|
|
navBarHeight = topGap + menuButtonInfo.height + bottomGap
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('获取胶囊按钮信息失败:', e)
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 确保最小高度
|
|||
|
|
if (navBarHeight < 44) {
|
|||
|
|
navBarHeight = 44
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.headerHeight = statusBarHeight + navBarHeight
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('计算头部高度失败:', e)
|
|||
|
|
this.headerHeight = 96 // 使用默认值
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page-container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: linear-gradient(180deg, #f8f9fa 0%, #f5f7fa 100%);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
// 头部间距将通过动态样式设置
|
|||
|
|
// 如果动态样式不生效，使用默认值
|
|||
|
|
padding-top: 96px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-content {
|
|||
|
|
padding: 0 20rpx 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
border: 1rpx solid #f0f0f0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
padding: 32rpx 32rpx 24rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
background: linear-gradient(90deg, rgba(255, 87, 34, 0.05) 0%, rgba(255, 87, 34, 0.02) 100%);
|
|||
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单项样式优化
|
|||
|
|
::v-deep .uni-forms-item {
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #f8f9fa;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item__label {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item__content {
|
|||
|
|
.uni-easyinput__content {
|
|||
|
|
border: 1rpx solid #e5e7eb;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:focus-within {
|
|||
|
|
border-color: #ff5722;
|
|||
|
|
box-shadow: 0 0 0 3rpx rgba(255, 87, 34, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-datetime-picker {
|
|||
|
|
border: 1rpx solid #e5e7eb;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&:focus-within {
|
|||
|
|
border-color: #ff5722;
|
|||
|
|
box-shadow: 0 0 0 3rpx rgba(255, 87, 34, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.datetime-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.uni-datetime-picker {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-icons {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.number-input-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
|
|||
|
|
.uni-number-box {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-suffix {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-section {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 88rpx;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
&.draft-btn {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
color: #666;
|
|||
|
|
border: 2rpx solid #e9ecef;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: #e9ecef;
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.publish-btn {
|
|||
|
|
background: linear-gradient(45deg, #ff5722, #ff7043);
|
|||
|
|
color: #fff;
|
|||
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 87, 34, 0.4);
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 87, 34, 0.5);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 响应式适配
|
|||
|
|
@media (max-width: 750rpx) {
|
|||
|
|
.form-section .section-title {
|
|||
|
|
padding: 24rpx 24rpx 20rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .uni-forms-item {
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-section {
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
height: 80rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|