1 | <template>
|
2 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
3 | <el-form-item label="活动名称" prop="name">
|
4 | <el-input v-model="ruleForm.name"></el-input>
|
5 | </el-form-item>
|
6 | <el-form-item label="活动区域" prop="region">
|
7 | <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
|
8 | <el-option label="区域一" value="shanghai"></el-option>
|
9 | <el-option label="区域二" value="beijing"></el-option>
|
10 | </el-select>
|
11 | </el-form-item>
|
12 | <el-form-item label="活动时间" required>
|
13 | <el-col :span="11">
|
14 | <el-form-item prop="date1">
|
15 | <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
16 | </el-form-item>
|
17 | </el-col>
|
18 | <el-col class="line" :span="2">-</el-col>
|
19 | <el-col :span="11">
|
20 | <el-form-item prop="date2">
|
21 | <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
|
22 | </el-form-item>
|
23 | </el-col>
|
24 | </el-form-item>
|
25 | <el-form-item label="即时配送" prop="delivery">
|
26 | <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
|
27 | </el-form-item>
|
28 | <el-form-item label="活动性质" prop="type">
|
29 | <el-checkbox-group v-model="ruleForm.type">
|
30 | <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
31 | <el-checkbox label="地推活动" name="type"></el-checkbox>
|
32 | <el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
33 | <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
34 | </el-checkbox-group>
|
35 | </el-form-item>
|
36 | <el-form-item label="特殊资源" prop="resource">
|
37 | <el-radio-group v-model="ruleForm.resource">
|
38 | <el-radio label="线上品牌商赞助"></el-radio>
|
39 | <el-radio label="线下场地免费"></el-radio>
|
40 | </el-radio-group>
|
41 | </el-form-item>
|
42 | <el-form-item label="活动形式" prop="desc">
|
43 | <el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
44 | </el-form-item>
|
45 | <el-form-item>
|
46 | <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
47 | <el-button @click="resetForm('ruleForm')">重置</el-button>
|
48 | </el-form-item>
|
49 | </el-form>
|
50 | </template>
|
51 |
|
52 |
|
53 | <script>
|
54 | export default {
|
55 | data() {
|
56 | return {
|
57 | ruleForm: {
|
58 | name: '',
|
59 | region: '',
|
60 | date1: '',
|
61 | date2: '',
|
62 | delivery: false,
|
63 | type: [],
|
64 | resource: '',
|
65 | desc: ''
|
66 | },
|
67 | rules: {
|
68 | name: [
|
69 | { required: true, message: '请输入活动名称', trigger: 'blur' },
|
70 | { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
71 | ],
|
72 | region: [
|
73 | { required: true, message: '请选择活动区域', trigger: 'change' }
|
74 | ],
|
75 | date1: [
|
76 | { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
77 | ],
|
78 | date2: [
|
79 | { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
80 | ],
|
81 | type: [
|
82 | { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
83 | ],
|
84 | resource: [
|
85 | { required: true, message: '请选择活动资源', trigger: 'change' }
|
86 | ],
|
87 | desc: [
|
88 | { required: true, message: '请填写活动形式', trigger: 'blur' }
|
89 | ]
|
90 | }
|
91 | };
|
92 | },
|
93 | methods: {
|
94 | submitForm(formName) {
|
95 | this.$refs[formName].validate((valid) => {
|
96 | if (valid) {
|
97 | alert('submit!');
|
98 | } else {
|
99 | console.log('error submit!!');
|
100 | return false;
|
101 | }
|
102 | });
|
103 | },
|
104 | resetForm(formName) {
|
105 | this.$refs[formName].resetFields();
|
106 | }
|
107 | }
|
108 | }
|
109 |
|
110 |
|
111 | </script>
|
112 |
|
113 | <style>
|
114 |
|
115 | </style>
|