activityAdd.vue
3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
<view class="page">
<u-form :model="form" ref="uForm" label-position="left" :label-width="150">
<view class="add-list" style="padding-bottom: 0;">
<u-form-item label="封面图片" borderBottom labelPosition="top">
<u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload>
</u-form-item>
</view>
<view class="add-list" style="padding-bottom: 0;">
<u-form-item label="活动名称" borderBottom>
<u-input v-model="form.name" />
</u-form-item>
<u-form-item label="开始时间" borderBottom>
<u-input v-model="form.startTime" type="select" @click="startShow = true" placeholder="请选择"/>
<u-picker mode="time" v-model="startShow" :params="params" @confirm="startTimeChange"></u-picker>
</u-form-item>
<u-form-item label="结束时间" borderBottom>
<u-input v-model="form.endTime" type="select" @click="endShow = true" placeholder="请选择"/>
<u-picker mode="time" v-model="endShow" :params="params" @confirm="endTimeChange"></u-picker>
</u-form-item>
<u-form-item label="活动类型" borderBottom>
<u-input v-model="form.type" type="select" @click="typeShow = true" placeholder="请选择"/>
<u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select>
</u-form-item>
<u-form-item label="可参与人数" borderBottom>
<u-number-box v-model="form.num" :input-width="'100%'" :min="0"></u-number-box>
</u-form-item>
<u-form-item label="举办区域" borderBottom>
<u-input v-model="form.name" />
</u-form-item>
</view>
<!-- <view class="add-list" style="padding-bottom: 0;">
<u-form-item label="活动内容" borderBottom labelPosition="top">
<u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload>
</u-form-item>
</view> -->
</u-form>
<u-toast ref="uToast" />
<!-- 保存按钮 -->
<view style="height: 120rpx;"></view>
<view class="page-footer">
<u-button type="success">提交</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {
fileList: [],
name: '',
type: '',
num: 0,
startTime: '',
endTime: '',
},
active: '', // 文件上传地址
startShow: false,
endShow: false,
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true
},
typeShow: false,
typeList: [{ value: '1', label: '类型1' }, { value: '2', label: '类型2' }],
};
},
methods:{
startTimeChange(val) {
this.form.startTime = this.timeChange(val);
this.form.endTime = '';
},
endTimeChange(val) {
const time = this.timeChange(val);
if(new Date(time).getTime() > new Date(this.form.startTime).getTime()) {
this.form.endTime = time
} else {
this.$refs.uToast.show({
title: '结束时间不能小于开始时间',
type: 'error',
})
}
},
timeChange(val) {
const { year, month, day, hour, minute, second } = val;
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
},
typeChange(val) {
this.form.type = val[0].name;
}
}
}
</script>
<style scoped lang="scss">
@import 'activityAdd.scss';
</style>