Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f9de97e7 1 parent 843ac575

✨ feat(创建活动): 新增，是否发布，活动方式，活动地址，公开显示，允许内部报名，黑名单，岗位报名功能字段

Inline Side-by-side
Showing 3 changed files with 292 additions and 14 deletions
...@@ -120,3 +120,9 @@ ...@@ -120,3 +120,9 @@
120 /* 调整下划线的起始位置 左侧是0 上边是1.15em */ 120 /* 调整下划线的起始位置 左侧是0 上边是1.15em */
121 background-position: 0 1rem; 121 background-position: 0 1rem;
122 } 122 }
123 +
124 +.picker-toolbar {
125 + .van-picker__confirm {
126 + color: #199A74;
127 + }
128 +}
......
1 <!-- 1 <!--
2 * @Date: 2022-09-21 16:04:10 2 * @Date: 2022-09-21 16:04:10
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-26 09:06:31 4 + * @LastEditTime: 2022-09-26 11:56:39
5 * @FilePath: /swx/src/pages/createActivity/index.vue 5 * @FilePath: /swx/src/pages/createActivity/index.vue
6 * @Description: 创建活动页面 6 * @Description: 创建活动页面
7 --> 7 -->
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <view> 9 <view>
10 <van-cell-group inset> 10 <van-cell-group inset>
11 <van-field 11 <van-field
12 - :value="value1" 12 + :value="org_type"
13 label-class="label-class" 13 label-class="label-class"
14 input-class="input-class" 14 input-class="input-class"
15 label="主办方" 15 label="主办方"
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 inputAlign="" 20 inputAlign=""
21 maxlength="" 21 maxlength=""
22 type="text" 22 type="text"
23 + @tap="show_org_popup=true"
23 :required="true" 24 :required="true"
24 :disabled="true" /> 25 :disabled="true" />
25 <view class="divide-line"></view> 26 <view class="divide-line"></view>
...@@ -80,12 +81,13 @@ ...@@ -80,12 +81,13 @@
80 <view class="sign-item" @tap="addSign"><van-icon name="plus" color="" /></view> 81 <view class="sign-item" @tap="addSign"><van-icon name="plus" color="" /></view>
81 </view> 82 </view>
82 <view class="divide-line"></view> 83 <view class="divide-line"></view>
83 - <view style="background-color: #FFFFFF;"> 84 + <view class="advanced-title" style="background-color: #FFFFFF;">
84 <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;"> 85 <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
85 <text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text> 86 <text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text>
86 </view> 87 </view>
87 </view> 88 </view>
88 - <view> 89 + <view class="advanced-settings-modules">
90 + <!-- 活动时间 -->
89 <timePickerData 91 <timePickerData
90 :start-time="startTime" 92 :start-time="startTime"
91 :end-time="endTime" 93 :end-time="endTime"
...@@ -99,14 +101,16 @@ ...@@ -99,14 +101,16 @@
99 label="活动时间" 101 label="活动时间"
100 right-icon="arrow-down" 102 right-icon="arrow-down"
101 input-align="right" 103 input-align="right"
102 - placeholder="请选择活动时间" 104 + placeholder="请选择"
103 placeholder-style="color: #999;" 105 placeholder-style="color: #999;"
104 customStyle="" 106 customStyle=""
105 maxlength="" 107 maxlength=""
106 type="" 108 type=""
109 + :border="true"
107 :required="false" 110 :required="false"
108 :disabled="true" /> 111 :disabled="true" />
109 </timePickerData> 112 </timePickerData>
113 + <!-- 报名开始时间 -->
110 <timePickerData 114 <timePickerData
111 :start-time="startTime" 115 :start-time="startTime"
112 :end-time="endTime" 116 :end-time="endTime"
...@@ -120,14 +124,16 @@ ...@@ -120,14 +124,16 @@
120 label="报名开始时间" 124 label="报名开始时间"
121 right-icon="arrow-down" 125 right-icon="arrow-down"
122 input-align="right" 126 input-align="right"
123 - placeholder="请选择报名开始时间" 127 + placeholder="请选择"
124 placeholder-style="color: #999;" 128 placeholder-style="color: #999;"
125 customStyle="" 129 customStyle=""
126 maxlength="" 130 maxlength=""
127 type="" 131 type=""
132 + :border="true"
128 :required="false" 133 :required="false"
129 :disabled="true" /> 134 :disabled="true" />
130 </timePickerData> 135 </timePickerData>
136 + <!-- 报名截止时间 -->
131 <timePickerData 137 <timePickerData
132 :start-time="startTime" 138 :start-time="startTime"
133 :end-time="endTime" 139 :end-time="endTime"
...@@ -141,14 +147,16 @@ ...@@ -141,14 +147,16 @@
141 label="报名截止时间" 147 label="报名截止时间"
142 right-icon="arrow-down" 148 right-icon="arrow-down"
143 input-align="right" 149 input-align="right"
144 - placeholder="请选择报名截止时间" 150 + placeholder="请选择"
145 placeholder-style="color: #999;" 151 placeholder-style="color: #999;"
146 customStyle="" 152 customStyle=""
147 maxlength="" 153 maxlength=""
148 type="" 154 type=""
155 + :border="true"
149 :required="false" 156 :required="false"
150 :disabled="true" /> 157 :disabled="true" />
151 </timePickerData> 158 </timePickerData>
159 + <!-- 人数限制 -->
152 <van-field 160 <van-field
153 :value="person_num" 161 :value="person_num"
154 label-class="label-class-super" 162 label-class="label-class-super"
...@@ -156,24 +164,189 @@ ...@@ -156,24 +164,189 @@
156 label="人数限制" 164 label="人数限制"
157 right-icon="arrow-down" 165 right-icon="arrow-down"
158 input-align="right" 166 input-align="right"
159 - placeholder="请选择人数限制" 167 + placeholder="请选择"
160 placeholder-style="color: #999;" 168 placeholder-style="color: #999;"
161 customStyle="" 169 customStyle=""
162 maxlength="" 170 maxlength=""
163 type="" 171 type=""
172 + :border="true"
164 @tap="show_popup=true" 173 @tap="show_popup=true"
165 :required="false" 174 :required="false"
166 :disabled="true" /> 175 :disabled="true" />
176 + <!-- 是否发布 -->
177 + <van-field
178 + :value="publish_status"
179 + label-class="label-class-super"
180 + input-class="input-class"
181 + label="是否发布"
182 + right-icon="arrow-down"
183 + input-align="right"
184 + placeholder="请选择"
185 + placeholder-style="color: #999;"
186 + customStyle=""
187 + maxlength=""
188 + type=""
189 + :border="true"
190 + @tap="show_publish_popup=true"
191 + :required="false"
192 + :disabled="true" />
193 + <!-- 活动方式 -->
194 + <van-field
195 + :value="activity_type"
196 + label-class="label-class-super"
197 + input-class="input-class"
198 + label="活动方式"
199 + right-icon="arrow-down"
200 + input-align="right"
201 + placeholder="请选择"
202 + placeholder-style="color: #999;"
203 + customStyle=""
204 + maxlength=""
205 + type=""
206 + :border="true"
207 + @tap="show_activity_type_popup=true"
208 + :required="false"
209 + :disabled="true" />
210 + <!-- 活动地址 -->
211 + <van-field
212 + :value="message1"
213 + label-class="label-class-super"
214 + input-class="input-class"
215 + label="活动地址"
216 + type="textarea"
217 + placeholder="请输入地址或位置说明"
218 + placeholder-style="color: #999;"
219 + customStyle=""
220 + inputAlign="right"
221 + rightIcon=""
222 + :required="false"
223 + maxlength=""
224 + :border="false"
225 + :autosize="{ maxHeight: 80, minHeight: 20 }"
226 + @change="onChange1"
227 + />
228 + </view>
229 + <view class="divide-line"></view>
230 + <view>
231 + <view class="form-item" style="padding-right: 0;">
232 + <view style="border-bottom: 1px solid #F2F2F2; overflow: auto;">
233 + <van-row>
234 + <van-col span="12">
235 + <view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
236 + 是否公开显示
237 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
238 + </view>
239 + </van-col>
240 + <van-col span="12">
241 + <view style="">
242 + <van-field
243 + :value="public_type"
244 + label-class="label-class-super"
245 + input-class="input-class"
246 + label=""
247 + right-icon="arrow-down"
248 + input-align="right"
249 + placeholder="请选择"
250 + placeholder-style="color: #999;"
251 + customStyle=""
252 + maxlength=""
253 + type=""
254 + :border="false"
255 + @tap="show_public_popup=true"
256 + :required="false"
257 + :disabled="true" />
258 + </view>
259 +
260 + </van-col>
261 + </van-row>
262 + </view>
263 + </view>
264 + <view class="form-item" style="padding-top: 0;">
265 + <view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
266 + <view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
267 + 允许内部人员报名活动
268 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
269 + </view>
270 + <van-switch
271 + style="float: right; padding-top: 0.5rem;"
272 + :checked="limit_number"
273 + @change="onChangeLimit"
274 + size="1.5rem"
275 + active-color="#199A74"
276 + inactive-color="#FFFFFF"
277 + />
278 + </view>
279 + </view>
280 + <view class="form-item" style="padding-top: 0;">
281 + <view style="padding-bottom: 0.5rem;border-bottom: 1px solid #F2F2F2; overflow: auto;">
282 + <view class="form-item-title" style="float: left; padding-top: 0.5rem; color: #999;">
283 + 屏蔽黑名单用户
284 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
285 + </view>
286 + <van-switch
287 + style="float: right; padding-top: 0.5rem;"
288 + :checked="limit_number"
289 + @change="onChangeLimit"
290 + size="1.5rem"
291 + active-color="#199A74"
292 + inactive-color="#FFFFFF"
293 + />
294 + </view>
295 + </view>
296 + <view class="form-item" style="padding-top: 0; padding-right: 0;">
297 + <van-row>
298 + <van-col span="12">
299 + <view class="form-item-title" style="padding-top: 0.8rem; color: #999;">
300 + 服务岗位报名
301 + <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
302 + </view>
303 + </van-col>
304 + <van-col span="12">
305 + <view style="">
306 + <van-field
307 + :value="message1"
308 + label-class="label-class-super"
309 + input-class="input-class"
310 + label=""
311 + type="textarea"
312 + placeholder="岗位名以逗号分隔"
313 + placeholder-style="color: #999;"
314 + customStyle=""
315 + inputAlign="right"
316 + rightIcon=""
317 + :required="false"
318 + maxlength=""
319 + :border="false"
320 + :autosize="{ maxHeight: 80, minHeight: 20 }"
321 + @change="onChange1"
322 + />
323 + </view>
324 +
325 + </van-col>
326 + </van-row>
327 + </view>
167 </view> 328 </view>
168 </van-cell-group> 329 </van-cell-group>
169 </view> 330 </view>
170 331
171 <view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);"> 332 <view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);">
172 - <view style="padding: 1rem 0; margin: 1rem; margin-top: 0; text-align: center;"> 333 + <view style="padding: 1rem 0; margin: 1rem; padding-bottom: 2rem; margin-top: 0; text-align: center;">
173 <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view> 334 <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view>
174 </view> 335 </view>
175 </view> 336 </view>
176 337
338 + <!-- 活动主办方弹出框 -->
339 + <van-popup :show="show_org_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
340 + <van-picker
341 + :show-toolbar="true"
342 + confirm-button-text="确定"
343 + :columns="org_type_columns"
344 + toolbar-class="picker-toolbar"
345 + @confirm="onOrgTypeConfirm"
346 + @cancel="onOrgTypeCancel"
347 + @change="onOrgTypeChange" />
348 + </van-popup>
349 + <!-- 报名信息弹出框 -->
177 <van-overlay :show="show_edit_sign" z-index="999"> 350 <van-overlay :show="show_edit_sign" z-index="999">
178 <view class="wrapper"> 351 <view class="wrapper">
179 <view class="block"> 352 <view class="block">
...@@ -238,7 +411,7 @@ ...@@ -238,7 +411,7 @@
238 </view> 411 </view>
239 </view> 412 </view>
240 </van-overlay> 413 </van-overlay>
241 - 414 + <!-- 人数限制弹出框 -->
242 <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true"> 415 <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
243 <view> 416 <view>
244 <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;"> 417 <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
...@@ -300,16 +473,51 @@ ...@@ -300,16 +473,51 @@
300 </van-col> 473 </van-col>
301 </van-row> 474 </van-row>
302 </van-popup> 475 </van-popup>
476 + <!-- 是否发布弹出框 -->
477 + <van-popup :show="show_publish_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
478 + <van-picker
479 + :show-toolbar="true"
480 + confirm-button-text="确定"
481 + :columns="columns"
482 + toolbar-class="picker-toolbar"
483 + @confirm="onPublishConfirm"
484 + @cancel="onPublishCancel"
485 + @change="onPublishChange" />
486 + </van-popup>
487 + <!-- 活动方式弹出框 -->
488 + <van-popup :show="show_activity_type_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
489 + <van-picker
490 + :show-toolbar="true"
491 + confirm-button-text="确定"
492 + :columns="activity_type_columns"
493 + toolbar-class="picker-toolbar"
494 + @confirm="onActivityTypeConfirm"
495 + @cancel="onActivityTypeCancel"
496 + @change="onActivityTypeChange" />
497 + </van-popup>
498 + <!-- 是否公开显示弹出框 -->
499 + <van-popup :show="show_public_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
500 + <van-picker
501 + :show-toolbar="true"
502 + confirm-button-text="确定"
503 + :columns="public_type_columns"
504 + toolbar-class="picker-toolbar"
505 + @confirm="onPublicTypeConfirm"
506 + @cancel="onPublicTypeCancel"
507 + @change="onPublicTypeChange" />
508 + </van-popup>
303 </template> 509 </template>
304 510
305 <script setup> 511 <script setup>
306 import { ref, onMounted, nextTick } from "vue"; 512 import { ref, onMounted, nextTick } from "vue";
307 // import icon_home1 from '@/images/icon/home01@2x.png' 513 // import icon_home1 from '@/images/icon/home01@2x.png'
308 import icon_upload from '@/images/icon/upload@2x.png' 514 import icon_upload from '@/images/icon/upload@2x.png'
515 +import icon_vip from '@/images/icon/vip@2x.png'
309 import timePickerData from "@/components/time-picker-data/picker"; 516 import timePickerData from "@/components/time-picker-data/picker";
310 517
311 const value1 = ref(''); 518 const value1 = ref('');
312 const message = ref(''); 519 const message = ref('');
520 +const message1 = ref('');
313 const checked = ref(false); 521 const checked = ref(false);
314 522
315 const onSubmit = () => { 523 const onSubmit = () => {
...@@ -320,6 +528,10 @@ const onChange = ({ detail }) => { ...@@ -320,6 +528,10 @@ const onChange = ({ detail }) => {
320 console.warn(detail); 528 console.warn(detail);
321 message.value = detail 529 message.value = detail
322 } 530 }
531 +const onChange1 = ({ detail }) => {
532 + // console.warn(detail);
533 + // message1.value = detail
534 +}
323 535
324 /**************** 上传模块 ******************/ 536 /**************** 上传模块 ******************/
325 const uploader_width = ref('') 537 const uploader_width = ref('')
...@@ -412,9 +624,6 @@ const addSign = () => { ...@@ -412,9 +624,6 @@ const addSign = () => {
412 } 624 }
413 625
414 const show_popup = ref(false); 626 const show_popup = ref(false);
415 -const onClosePopup = () => {
416 - show_popup.value = false;
417 -}
418 const closeEditLimit = () => { 627 const closeEditLimit = () => {
419 show_popup.value = false; 628 show_popup.value = false;
420 } 629 }
...@@ -447,13 +656,76 @@ const onResult = (arr) => { ...@@ -447,13 +656,76 @@ const onResult = (arr) => {
447 } 656 }
448 657
449 const person_num = ref('') 658 const person_num = ref('')
450 -
451 const limit_number = ref(false); 659 const limit_number = ref(false);
452 const min_number = ref(''); 660 const min_number = ref('');
453 const max_number = ref(''); 661 const max_number = ref('');
454 const onChangeLimit = ({ detail }) => { 662 const onChangeLimit = ({ detail }) => {
455 limit_number.value = detail 663 limit_number.value = detail
456 } 664 }
665 +
666 +const show_publish_popup = ref(false);
667 +const publish_status = ref('暂不发布');
668 +const columns = ref(['暂不发布', '立即发布']);
669 +const onPublishChange = (event) => {
670 + const { picker, value, index } = event.detail;
671 + console.warn(value);
672 + console.warn(index);
673 + publish_status.value = value;
674 +}
675 +const onPublishConfirm = (event) => {
676 + show_publish_popup.value = false;
677 +}
678 +const onPublishCancel = (event) => {
679 + show_publish_popup.value = false;
680 +}
681 +
682 +const show_activity_type_popup = ref(false);
683 +const activity_type = ref('现场活动');
684 +const activity_type_columns = ref(['现场活动', '线上活动']);
685 +const onActivityTypeChange = (event) => {
686 + const { picker, value, index } = event.detail;
687 + console.warn(value);
688 + console.warn(index);
689 + activity_type.value = value;
690 +}
691 +const onActivityTypeConfirm = (event) => {
692 + show_activity_type_popup.value = false;
693 +}
694 +const onActivityTypeCancel = (event) => {
695 + show_activity_type_popup.value = false;
696 +}
697 +
698 +const show_public_popup = ref(false);
699 +const public_type = ref('不公开');
700 +const public_type_columns = ref(['不公开', '公开']);
701 +const onPublicTypeChange = (event) => {
702 + const { picker, value, index } = event.detail;
703 + console.warn(value);
704 + console.warn(index);
705 + public_type.value = value;
706 +}
707 +const onPublicTypeConfirm = (event) => {
708 + show_public_popup.value = false;
709 +}
710 +const onPublicTypeCancel = (event) => {
711 + show_public_popup.value = false;
712 +}
713 +
714 +const show_org_popup = ref(false);
715 +const org_type = ref('');
716 +const org_type_columns = ref(['周三读书会', '周四读书会']);
717 +const onOrgTypeChange = (event) => {
718 + const { picker, value, index } = event.detail;
719 + console.warn(value);
720 + console.warn(index);
721 + org_type.value = value;
722 +}
723 +const onOrgTypeConfirm = (event) => {
724 + show_org_popup.value = false;
725 +}
726 +const onOrgTypeCancel = (event) => {
727 + show_org_popup.value = false;
728 +}
457 </script> 729 </script>
458 730
459 <script> 731 <script>
......