hookehuyr

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

<!--
* @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">
<van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="活动时间"
<timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onActivityTime">
<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">
<van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="报名开始时间"
<timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onBeginTime">
<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">
<van-field :value="datetime" label-class="label-class-super" input-class="input-class" label="报名截止时间"
<timePickerData :start-time="startTime" :end-time="endTime" :default-time="defaultTime" @result="onEndTime">
<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" />
</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" />
maxlength="" :border="false" @change="onRegMaxChange" />
</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 = () => {
console.warn(message.value);
}
const message1 = ref('');
const activity_name = ref('');
const onChange = ({ detail }) => {
console.warn(detail);
message.value = detail
activity_name.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 datetime = ref('');
const activity_time = 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];
reg_begin_time.value = time;
}
const onEndTime = (arr) => {
let time = arr[0] + "-" + arr[1] + "-" + arr[2] + " " + arr[3] + ":" + arr[4];
datetime.value = time;
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 max_number = ref('');
const onChangeLimit = ({ detail }) => {
const onRegMaxChange = ({ detail }) => {
temp_reg_max.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>
......