hookehuyr

✨ feat(新增活动): 录入年龄端逻辑调整

1 <!-- 1 <!--
2 * @Date: 2022-09-27 17:13:05 2 * @Date: 2022-09-27 17:13:05
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-20 15:44:06 4 + * @LastEditTime: 2022-10-20 16:48:22
5 * @FilePath: /swx/src/pages/joinActivity/index.vue 5 * @FilePath: /swx/src/pages/joinActivity/index.vue
6 * @Description: 活动报名 6 * @Description: 活动报名
7 --> 7 -->
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <view class="at-input"> 17 <view class="at-input">
18 <view class="at-input__container"> 18 <view class="at-input__container">
19 <label class="h5-label at-input__title at-input__title--required">年龄段</label> 19 <label class="h5-label at-input__title at-input__title--required">年龄段</label>
20 - <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_range" placeholder="请选择年龄范围" :disabled="true"/> 20 + <input @tap="show_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_group" placeholder="请选择年龄范围" :disabled="true"/>
21 <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view> 21 <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
22 </view> 22 </view>
23 </view> 23 </view>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
48 <bottom-button @on-submit="onSubmit">确认报名</bottom-button> 48 <bottom-button @on-submit="onSubmit">确认报名</bottom-button>
49 49
50 <!-- 年龄段弹出框 --> 50 <!-- 年龄段弹出框 -->
51 - <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true"> 51 + <!-- <van-popup :show="show_popup" position="bottom" custom-style="height: 30%;" :lock-scroll="true">
52 <view class="limit-wrapper"> 52 <view class="limit-wrapper">
53 <view class="form-item border"> 53 <view class="form-item border">
54 <view class="form-item-title fix">年龄最小值</view> 54 <view class="form-item-title fix">年龄最小值</view>
...@@ -79,6 +79,11 @@ ...@@ -79,6 +79,11 @@
79 </view> 79 </view>
80 </van-col> 80 </van-col>
81 </van-row> 81 </van-row>
82 + </van-popup> -->
83 + <van-popup :show="show_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
84 + <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="age_columns"
85 + :default-index="defaultIndex"
86 + toolbar-class="picker-toolbar" @confirm="onAgeConfirm" @cancel="onAgeCancel" @change="onAgeChange" />
82 </van-popup> 87 </van-popup>
83 <van-toast id="van-toast" /> 88 <van-toast id="van-toast" />
84 </template> 89 </template>
...@@ -98,11 +103,8 @@ import Toast from '@/components/vant-weapp/toast/toast'; ...@@ -98,11 +103,8 @@ import Toast from '@/components/vant-weapp/toast/toast';
98 103
99 const username = ref(''); 104 const username = ref('');
100 const phone = ref(''); 105 const phone = ref('');
101 -const age_range = ref('');
102 const user_sex = ref(''); 106 const user_sex = ref('');
103 const fields = ref([]); 107 const fields = ref([]);
104 -const min_number = ref('');
105 -const max_number = ref('');
106 108
107 onMounted(async () => { 109 onMounted(async () => {
108 const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id }); 110 const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
...@@ -115,49 +117,22 @@ onMounted(async () => { ...@@ -115,49 +117,22 @@ onMounted(async () => {
115 } 117 }
116 }) 118 })
117 119
118 -const temp_min_number = ref('');
119 -const changeMinNumber = ({detail}) => {
120 - const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
121 - if (!pattern.test(detail)) {// 如果包含特殊字符返回false
122 - Toast('请输入非零正整数');
123 - return false;
124 - }
125 - temp_min_number.value = detail;
126 -}
127 -const temp_max_number = ref('');
128 -const changeMaxNumber = ({detail}) => {
129 - const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
130 - if (!pattern.test(detail)) {// 如果包含特殊字符返回false
131 - Toast('请输入非零正整数');
132 - return false;
133 - }
134 - temp_max_number.value = detail;
135 -}
136 -
137 const onSexChange = ({ detail }) => { 120 const onSexChange = ({ detail }) => {
138 user_sex.value = detail; 121 user_sex.value = detail;
139 } 122 }
140 123
141 const show_popup = ref(false); 124 const show_popup = ref(false);
142 -const closeEditLimit = () => { 125 +const age_group = ref('');
126 +const age_columns = ['10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60-69岁', '70-79岁', '80岁以上']
127 +const defaultIndex = ref(0);
128 +const onAgeChange = (event) => {
129 +}
130 +const onAgeConfirm = (event) => {
131 + const detail = event.detail;
132 + age_group.value = detail.value;
143 show_popup.value = false; 133 show_popup.value = false;
144 } 134 }
145 -const confirmEditLimit = () => { 135 +const onAgeCancel = (event) => {
146 - if (!temp_min_number.value) {
147 - Toast('年龄最小值不能为空');
148 - return false;
149 - }
150 - if (!temp_max_number.value) {
151 - Toast('年龄最大值不能为空');
152 - return false;
153 - }
154 - if (+temp_min_number.value > +temp_max_number.value) {
155 - Toast('年龄段非法录入');
156 - return false;
157 - }
158 - min_number.value = +temp_min_number.value;
159 - max_number.value = +temp_max_number.value;
160 - age_range.value = min_number.value + '岁' + ' ~ ' + max_number.value + '岁';
161 show_popup.value = false; 136 show_popup.value = false;
162 } 137 }
163 138
...@@ -174,7 +149,7 @@ const validForm = () => { ...@@ -174,7 +149,7 @@ const validForm = () => {
174 if (!pattern.test(phone.value)) { 149 if (!pattern.test(phone.value)) {
175 Toast('请输入正确手机号'); 150 Toast('请输入正确手机号');
176 } 151 }
177 - if (!age_range.value) { 152 + if (!age_group.value) {
178 Toast('年龄段不能为空'); 153 Toast('年龄段不能为空');
179 return false; 154 return false;
180 } 155 }
...@@ -204,9 +179,9 @@ const onSubmit = async (val) => { ...@@ -204,9 +179,9 @@ const onSubmit = async (val) => {
204 name: username.value, 179 name: username.value,
205 phone: phone.value, 180 phone: phone.value,
206 gender: user_sex.value, 181 gender: user_sex.value,
207 - age_group: JSON.stringify([min_number.value, max_number.value]), 182 + age_group: age_group.value,
208 post: '', 183 post: '',
209 - extend 184 + extend: JSON.stringify(extend)
210 } 185 }
211 const { code } = await addRegAPI(params); 186 const { code } = await addRegAPI(params);
212 if (code) { 187 if (code) {
......