✨ feat(创建活动): 调整高级设置里时间模块，人数限制功能优化

hookehuyr
Commit 999b02738b605c7d90fa48db003cea1254435139 999b0273 1 parent 0ba1acc9
Showing 1 changed file with 65 additions and 47 deletions
src/pages/createActivity/index.vue
--- a/src/pages/createActivity/index.vue
View file @999b027
+++ b/src/pages/createActivity/index.vue
View file @999b027
 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-17 16:15:25
+ * @LastEditTime: 2022-10-17 17:25:54
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -41,7 +41,6 @@
       <view class="sign-box">
         <view @tap="onTapSign(item)" @longpress="onLongPressSign(item)" v-for="(item, index) in signInfo" :key="index"
           class="sign-item" :class="{ 'checked': item.checked }"><text :class="{ 'required': item.required }">{{ item.label }}</text></view>
-        <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
         <view class="sign-item" @tap="addSign">
           <van-icon name="plus" color="" />
         </view>
@@ -54,25 +53,25 @@
       </view>
       <view class="advanced-settings-modules">
         <!-- 活动时间 -->
-        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onResult">
+        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onActivityTime">
-          <van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="活动时间"
+          <van-field :value="activity_time" label-class="label-class-super" input-class="input-class" label="活动时间"
             :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
             maxlength="" type="" :border="true" :required="false" :disabled="true" />
         </timePickerData>
         <!-- 报名开始时间 -->
-        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onResult">
+        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onBeginTime">
-          <van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="报名开始时间"
+          <van-field :value="reg_begin_time" label-class="label-class-super" input-class="input-class" label="报名开始时间"
             :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
             maxlength="" type="" :border="true" :required="false" :disabled="true" />
         </timePickerData>
         <!-- 报名截止时间 -->
-        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onResult">
+        <timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onEndTime">
-          <van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="报名截止时间"
+          <van-field :value="reg_end_time" label-class="label-class-super" input-class="input-class" label="报名截止时间"
             :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
             maxlength="" type="" :border="true" :required="false" :disabled="true" />
         </timePickerData>
         <!-- 人数限制 -->
-        <van-field :value="person_num" label-class="label-class-super" input-class="input-class" label="人数限制"
+        <van-field :value="reg_max" label-class="label-class-super" input-class="input-class" label="人数限制"
           :right-icon="icon_sel" input-align="right" placeholder="请选择" placeholder-style="color: #999;" customStyle=""
           maxlength="" type="" :border="true" @tap="show_popup=true" :required="false" :disabled="true" />
         <!-- 是否发布 -->
@@ -211,7 +210,7 @@
     </view>
   </van-overlay>
   <!-- 人数限制弹出框 -->
-  <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
+  <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
     <view class="limit-wrapper">
       <view class="form-item border">
         <view class="form-item-title fix">不限制人数</view>
@@ -219,19 +218,11 @@
           size="1.5rem" active-color="#199A74" inactive-color="#FFFFFF" />
       </view>
       <view v-if="!limit_number" class="form-item border">
-        <view class="form-item-title fix">人数最小值</view>
+        <view class="form-item-title fix">参加人数</view>
         <view style="float: right;">
-          <van-field :value="min_number" type="number" label="" placeholder="请输入人数最小值"
+          <van-field :value="temp_reg_max" type="number" label="" placeholder="请输入参加人数"
             placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
-            maxlength="" :border="false" />
+            maxlength="" :border="false" @change="onRegMaxChange" />
-        </view>
-      </view>
-      <view v-if="!limit_number" class="form-item border">
-        <view class="form-item-title fix">人数最大值</view>
-        <view style="float: right;">
-          <van-field :value="max_number" type="number" label="" placeholder="请输入人数最大值"
-            placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
-            maxlength="" :border="false" />
         </view>
       </view>
     </view>
@@ -285,17 +276,12 @@ import BASE_URL from '@/utils/config';
 import Toast from '@/components/vant-weapp/toast/toast';
 import { randomId } from '@/utils/tools'
-const message = ref('');
-const message1 = ref('');
-const checked = ref(false);
-const onSubmit = () => {
+const message1 = ref('');
-  console.warn(message.value);
-}
+const activity_name = ref('');
 const onChange = ({ detail }) => {
-  console.warn(detail);
+  activity_name.value = detail
-  message.value = detail
 }
 const onChange1 = ({ detail }) => {
   // console.warn(detail);
@@ -454,18 +440,12 @@ const addSign = () => { // 新增-报名信息弹框
   sign_filed.value.name = '';
   sign_filed.value.checked = false;
 }
-/****************************/
-const show_popup = ref(false);
+/************* 活动时间 ************/
-const closeEditLimit = () => {
-  show_popup.value = false;
-}
-const confirmEditLimit = () => {
-  show_popup.value = false;
-}
-
+const activity_time = ref('');
-const datetime = ref('');
+const reg_begin_time = ref('');
+const reg_end_time = ref('');
 let startTime = new Date()
 let endTime = new Date()
 let defaultTime = new Date()
@@ -483,17 +463,52 @@ const getTime = (key, number, date) => {
   }
   return _date;
 }
-const onResult = (arr) => {
+const onActivityTime = (arr) => {
+  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
+  activity_time.value = time;
+}
+const onBeginTime = (arr) => {
   let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
-  datetime.value = time;
+  reg_begin_time.value = time;
 }
+const onEndTime = (arr) => {
+  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
+  reg_end_time.value = time;
+}
+
-const person_num = ref('')
+/********* 人数限制 *********/
+const reg_max = ref('')
+const temp_reg_max = ref('')
 const limit_number = ref(false);
-const min_number = ref('');
+const onRegMaxChange = ({ detail }) => {
-const max_number = ref('');
+  temp_reg_max.value = detail
-const onChangeLimit = ({ detail }) => {
+}
-  limit_number.value = detail
+const onChangeLimit = ({ detail }) => { // 不限制开关回调
+  if (detail) {
+    limit_number.value = detail
+  } else {
+    limit_number.value = detail
+    temp_reg_max.value = ''
+  }
+}
+const show_popup = ref(false);
+const closeEditLimit = () => {
+  show_popup.value = false;
+}
+const confirmEditLimit = () => { // 提交人数限制
+  if (limit_number.value) {
+    reg_max.value = '无限制'; // 无限人数默认为0
+    show_popup.value = false;
+  } else {
+    const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
+    if (!pattern.test(temp_reg_max.value)) {// 如果包含特殊字符返回false
+      Toast('请输入非零正整数');
+    } else {
+      reg_max.value = temp_reg_max.value;
+      show_popup.value = false;
+    }
+  }
 }
 const show_publish_popup = ref(false);
@@ -565,7 +580,10 @@ const onOrgTypeConfirm = (event) => { // 主办方弹框确认按钮回调
 const onOrgTypeCancel = (event) => {
   show_org_popup.value = false;
 }
-/******************/
+
+
+const onSubmit = () => {
+}
 </script>
 <script>