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

@@ -4,6 +4,12 @@
 
 .label-class {
   font-size: 1rem;
+  width: 7em;
+}
+.label-class-super.van-field__label, .van-field__label--disabled {
+  font-size: 1rem;
+  width: 7em;
+  color: #999999 !important;
 }
 
 .divide-line {

 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-22 16:15:23
+ * @LastEditTime: 2022-09-22 18:12:44
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -68,13 +68,89 @@
         <!-- <view class="sign-item"><text class="">推荐人</text></view> -->
         <view class="sign-item" @tap="addSign"><van-icon name="plus" /></view>
       </view>
+      <view class="divide-line"></view>
+      <view style="background-color: #FFFFFF;">
+        <view style="padding: 1rem 1rem 0.5rem 1rem; text-align: center;">
+          <text class="bg-gradient" style="font-size: 1.15rem;">高级设置</text>
+        </view>
+      </view>
+      <view>
+        <timePickerData
+          :start-time="startTime"
+          :end-time="endTime"
+          :default-time="defaultTime"
+          @result="onResult"
+        >
+          <van-field
+          :value="datetime"
+          label-class="label-class-super"
+          input-class="input-class"
+          label="活动时间"
+          right-icon="arrow-down"
+          input-align="right"
+          placeholder="请选择活动时间"
+          placeholder-style="color: #999;"
+          :required="false"
+          :disabled="true" />
+        </timePickerData>
+        <timePickerData
+          :start-time="startTime"
+          :end-time="endTime"
+          :default-time="defaultTime"
+          @result="onResult"
+        >
+          <van-field
+          :value="datetime"
+          label-class="label-class-super"
+          input-class="input-class"
+          label="报名开始时间"
+          right-icon="arrow-down"
+          input-align="right"
+          placeholder="请选择报名开始时间"
+          placeholder-style="color: #999;"
+          :required="false"
+          :disabled="true" />
+        </timePickerData>
+        <timePickerData
+          :start-time="startTime"
+          :end-time="endTime"
+          :default-time="defaultTime"
+          @result="onResult"
+        >
+          <van-field
+          :value="datetime"
+          label-class="label-class-super"
+          input-class="input-class"
+          label="报名截止时间"
+          right-icon="arrow-down"
+          input-align="right"
+          placeholder="请选择报名截止时间"
+          placeholder-style="color: #999;"
+          :required="false"
+          :disabled="true" />
+        </timePickerData>
+        <van-field
+        :value="person_num"
+        label-class="label-class-super"
+        input-class="input-class"
+        label="人数限制"
+        right-icon="arrow-down"
+        input-align="right"
+        placeholder="请选择人数限制"
+        placeholder-style="color: #999;"
+        @tap="show_popup=true"
+        :required="false"
+        :disabled="true" />
+      </view>
     </van-cell-group>
   </view>
-  <view style="background-color: #FFFFFF;">
-    <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
-      <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定发布</view>
+
+  <view style="background-color: #FFFFFF;box-shadow: 0rem -0.17rem 0.67rem 0rem rgba(0,0,0,0.05);">
+    <view style="padding: 1rem 0; margin: 1rem; margin-top: 0; text-align: center;">
+      <view @tap="onSubmit" style="color: #FFFFFF; background-color: #199A74; padding: 0.65rem 1rem; border-radius: 1.5rem;">确定发布</view>
     </view>
   </view>
+
   <van-overlay :show="show_edit_sign" z-index="999">
     <view class="wrapper">
       <view class="block">
@@ -136,12 +212,69 @@
       </view>
     </view>
   </van-overlay>
+
+  <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true" @close="onClosePopup">
+    <view>
+      <view class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
+        <view class="form-item-title" style="float: left; padding-top: 0.5rem;">不限制人数</view>
+        <van-switch
+          style="float: right; padding-top: 0.5rem;"
+          :checked="limit_number"
+          @change="onChangeLimit"
+          size="1.5rem"
+          active-color="#199A74"
+          inactive-color="#FFFFFF"
+        />
+      </view>
+      <view v-if="!limit_number" class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
+        <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最小值</view>
+        <view style="float: right;">
+          <van-field
+            :value="min_number"
+            type="number"
+            label=""
+            placeholder="请输入人数最小值"
+            placeholder-style="color: #999; font-size: 1rem;"
+            input-align="right"
+            :border="false"
+          />
+        </view>
+      </view>
+      <view v-if="!limit_number" class="form-item" style="overflow: auto; border-bottom: 1px solid #F2F2F2;">
+        <view class="form-item-title" style="float: left; padding-top: 0.6rem;">人数最大值</view>
+        <view style="float: right;">
+          <van-field
+            :value="max_number"
+            type="number"
+            label=""
+            placeholder="请输入人数最大值"
+            placeholder-style="color: #999; font-size: 1rem;"
+            input-align="right"
+            :border="false"
+          />
+        </view>
+      </view>
+    </view>
+    <van-row>
+      <van-col span="12">
+        <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
+          <view @tap="closeEditSign" style="color: #199A74; border: 1px solid #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">取消</view>
+        </view>
+      </van-col>
+      <van-col span="12">
+        <view style="padding: 1rem 0; margin: 1rem; text-align: center;">
+          <view @tap="confirmEditSign" style="color: #FFFFFF; background-color: #199A74; padding: 0.5rem 1rem; border-radius: 1rem;">确定</view>
+        </view>
+      </van-col>
+    </van-row>
+  </van-popup>
 </template>
 
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
 // import icon_home1 from '@/images/icon/home01@2x.png'
 import icon_upload from '@/images/icon/upload@2x.png'
+import timePickerData from "@/components/time-picker-data/picker";
 
 const value1 = ref('');
 const message = ref('');
@@ -185,6 +318,10 @@ onMounted(() => {
       }).exec()
     }, 100)
   })
+  //
+  startTime = getTime("min", 1);
+  endTime = getTime("year", 2);
+  defaultTime = getTime("min", 30);
 });
 
 const signInfo = ref([{
@@ -242,6 +379,41 @@ const addSign = () => {
   show_edit_sign.value = true;
 }
 
+const show_popup = ref(true);
+const onClosePopup = () => {
+  show_popup.value = false;
+}
+const datetime = ref('');
+let startTime = new Date()
+let endTime = new Date()
+let defaultTime = new Date()
+
+const getTime = (key, number, date) => {
+  let _date = date ? new Date(date) : new Date();
+  if (key === "min") {
+    _date.setMinutes(_date.getMinutes() + number);
+  }
+  if (key === "hour") {
+    _date.setHours(_date.getHours() + number);
+  }
+  if (key === "year") {
+    _date.setFullYear(_date.getFullYear() + number);
+  }
+  return _date;
+}
+const onResult = (arr) => {
+  let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
+  datetime.value = time;
+}
+
+const person_num = ref('')
+
+const limit_number = ref(false);
+const min_number = ref();
+const max_number = ref();
+const onChangeLimit = ({ detail }) => {
+  limit_number.value = detail
+}
 </script>
 
 <script>