Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a57e3087 1 parent a1f134a2

✨ feat: 表单高级设置新增活动时间字段人数限制字段

Inline Side-by-side
Showing 2 changed files with 182 additions and 4 deletions
...@@ -4,6 +4,12 @@ ...@@ -4,6 +4,12 @@
4 4
5 .label-class { 5 .label-class {
6 font-size: 1rem; 6 font-size: 1rem;
7 + width: 7em;
8 +}
9 +.label-class-super.van-field__label, .van-field__label--disabled {
10 + font-size: 1rem;
11 + width: 7em;
12 + color: #999999 !important;
7 } 13 }
8 14
9 .divide-line { 15 .divide-line {
......
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-22 16:15:23 4 + * @LastEditTime: 2022-09-22 18:12:44
5 * @FilePath: /swx/src/pages/createActivity/index.vue 5 * @FilePath: /swx/src/pages/createActivity/index.vue
6 * @Description: 创建活动页面 6 * @Description: 创建活动页面
7 --> 7 -->
...@@ -68,13 +68,89 @@ ...@@ -68,13 +68,89 @@
68 <!-- <view class="sign-item"><text class="">推荐人</text></view> --> 68 <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
69 <view class="sign-item" @tap="addSign"><van-icon name="plus" /></view> 69 <view class="sign-item" @tap="addSign"><van-icon name="plus" /></view>
70 </view> 70 </view>
71 + <view class="divide-line"></view>
72 + <view style="background-color: #FFFFFF;">
73 + <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
74 + <text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text>
75 + </view>
76 + </view>
77 + <view>
78 + <timePickerData
79 + :start-time="startTime"
80 + :end-time="endTime"
81 + :default-time="defaultTime"
82 + @result="onResult"
83 + >
84 + <van-field
85 + :value="datetime"
86 + label-class="label-class-super"
87 + input-class="input-class"
88 + label="活动时间"
89 + right-icon="arrow-down"
90 + input-align="right"
91 + placeholder="请选择活动时间"
92 + placeholder-style="color: #999;"
93 + :required="false"
94 + :disabled="true" />
95 + </timePickerData>
96 + <timePickerData
97 + :start-time="startTime"
98 + :end-time="endTime"
99 + :default-time="defaultTime"
100 + @result="onResult"
101 + >
102 + <van-field
103 + :value="datetime"
104 + label-class="label-class-super"
105 + input-class="input-class"
106 + label="报名开始时间"
107 + right-icon="arrow-down"
108 + input-align="right"
109 + placeholder="请选择报名开始时间"
110 + placeholder-style="color: #999;"
111 + :required="false"
112 + :disabled="true" />
113 + </timePickerData>
114 + <timePickerData
115 + :start-time="startTime"
116 + :end-time="endTime"
117 + :default-time="defaultTime"
118 + @result="onResult"
119 + >
120 + <van-field
121 + :value="datetime"
122 + label-class="label-class-super"
123 + input-class="input-class"
124 + label="报名截止时间"
125 + right-icon="arrow-down"
126 + input-align="right"
127 + placeholder="请选择报名截止时间"
128 + placeholder-style="color: #999;"
129 + :required="false"
130 + :disabled="true" />
131 + </timePickerData>
132 + <van-field
133 + :value="person_num"
134 + label-class="label-class-super"
135 + input-class="input-class"
136 + label="人数限制"
137 + right-icon="arrow-down"
138 + input-align="right"
139 + placeholder="请选择人数限制"
140 + placeholder-style="color: #999;"
141 + @tap="show_popup=true"
142 + :required="false"
143 + :disabled="true" />
144 + </view>
71 </van-cell-group> 145 </van-cell-group>
72 </view> 146 </view>
73 - <view style="background-color: #FFFFFF;"> 147 +
74 - <view style="padding: 1rem 0; margin: 1rem; text-align: center;"> 148 + <view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);">
75 - <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定发布</view> 149 + <view style="padding: 1rem 0; margin: 1rem; margin-top: 0; text-align: center;">
150 + <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view>
76 </view> 151 </view>
77 </view> 152 </view>
153 +
78 <van-overlay :show="show_edit_sign" z-index="999"> 154 <van-overlay :show="show_edit_sign" z-index="999">
79 <view class="wrapper"> 155 <view class="wrapper">
80 <view class="block"> 156 <view class="block">
...@@ -136,12 +212,69 @@ ...@@ -136,12 +212,69 @@
136 </view> 212 </view>
137 </view> 213 </view>
138 </van-overlay> 214 </van-overlay>
215 +
216 + <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true" @close="onClosePopup">
217 + <view>
218 + <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
219 + <view class="form-item-title" style="float: left; padding-top: 0.5rem;">不限制人数</view>
220 + <van-switch
221 + style="float: right; padding-top: 0.5rem;"
222 + :checked="limit_number"
223 + @change="onChangeLimit"
224 + size="1.5rem"
225 + active-color="#199A74"
226 + inactive-color="#FFFFFF"
227 + />
228 + </view>
229 + <view v-if="!limit_number" class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
230 + <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最小值</view>
231 + <view style="float: right;">
232 + <van-field
233 + :value="min_number"
234 + type="number"
235 + label=""
236 + placeholder="请输入人数最小值"
237 + placeholder-style="color: #999; font-size: 1rem;"
238 + input-align="right"
239 + :border="false"
240 + />
241 + </view>
242 + </view>
243 + <view v-if="!limit_number" class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
244 + <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最大值</view>
245 + <view style="float: right;">
246 + <van-field
247 + :value="max_number"
248 + type="number"
249 + label=""
250 + placeholder="请输入人数最大值"
251 + placeholder-style="color: #999; font-size: 1rem;"
252 + input-align="right"
253 + :border="false"
254 + />
255 + </view>
256 + </view>
257 + </view>
258 + <van-row>
259 + <van-col span="12">
260 + <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
261 + <view @tap="closeEditSign" style="color: #199A74; border: 1px solid #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">取消</view>
262 + </view>
263 + </van-col>
264 + <van-col span="12">
265 + <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
266 + <view @tap="confirmEditSign" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</view>
267 + </view>
268 + </van-col>
269 + </van-row>
270 + </van-popup>
139 </template> 271 </template>
140 272
141 <script setup> 273 <script setup>
142 import { ref, onMounted, nextTick } from "vue"; 274 import { ref, onMounted, nextTick } from "vue";
143 // import icon_home1 from '@/images/icon/home01@2x.png' 275 // import icon_home1 from '@/images/icon/home01@2x.png'
144 import icon_upload from '@/images/icon/upload@2x.png' 276 import icon_upload from '@/images/icon/upload@2x.png'
277 +import timePickerData from "@/components/time-picker-data/picker";
145 278
146 const value1 = ref(''); 279 const value1 = ref('');
147 const message = ref(''); 280 const message = ref('');
...@@ -185,6 +318,10 @@ onMounted(() => { ...@@ -185,6 +318,10 @@ onMounted(() => {
185 }).exec() 318 }).exec()
186 }, 100) 319 }, 100)
187 }) 320 })
321 + //
322 + startTime = getTime("min", 1);
323 + endTime = getTime("year", 2);
324 + defaultTime = getTime("min", 30);
188 }); 325 });
189 326
190 const signInfo = ref([{ 327 const signInfo = ref([{
...@@ -242,6 +379,41 @@ const addSign = () => { ...@@ -242,6 +379,41 @@ const addSign = () => {
242 show_edit_sign.value = true; 379 show_edit_sign.value = true;
243 } 380 }
244 381
382 +const show_popup = ref(true);
383 +const onClosePopup = () => {
384 + show_popup.value = false;
385 +}
386 +const datetime = ref('');
387 +let startTime = new Date()
388 +let endTime = new Date()
389 +let defaultTime = new Date()
390 +
391 +const getTime = (key, number, date) => {
392 + let _date = date ? new Date(date) : new Date();
393 + if (key === "min") {
394 + _date.setMinutes(_date.getMinutes() + number);
395 + }
396 + if (key === "hour") {
397 + _date.setHours(_date.getHours() + number);
398 + }
399 + if (key === "year") {
400 + _date.setFullYear(_date.getFullYear() + number);
401 + }
402 + return _date;
403 +}
404 +const onResult = (arr) => {
405 + let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
406 + datetime.value = time;
407 +}
408 +
409 +const person_num = ref('')
410 +
411 +const limit_number = ref(false);
412 +const min_number = ref();
413 +const max_number = ref();
414 +const onChangeLimit = ({ detail }) => {
415 + limit_number.value = detail
416 +}
245 </script> 417 </script>
246 418
247 <script> 419 <script>
......