✨ feat(参加活动): 页面接口API联调

+/*
+ * @Date: 2022-10-20 13:15:00
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-20 13:38:30
+ * @FilePath: /swx/src/api/Reg/index.js
+ * @Description: 报名信息
+ */
+import { fn, fetch } from '../fn';
+
+const Api = {
+  MY_INFO: '/srv/?a=reg_my_info',
+  REG_ADD: '/srv/?a=reg_add',
+}
+
+/**
+ * @description: 我的报名详情
+ * @returns
+ */
+export const myInfoAPI = (params) => fn(fetch.post(Api.MY_INFO, params));
+
+/**
+ * @description: 活动报名
+ * @returns
+ */
+export const addRegAPI = (params) => fn(fetch.post(Api.REG_ADD, params));

 <!--
  * @Date: 2022-09-26 16:10:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-18 17:40:02
+ * @LastEditTime: 2022-10-20 11:54:56
  * @FilePath: /swx/src/components/activity-bar.vue
  * @Description: 活动详情页底部导航栏
 -->
@@ -61,7 +61,7 @@ const goTo = (type) => {
     })
   } else if (type === 'join') { // 活动报名
     Taro.navigateTo({
-      url: '../joinActivity/index'
+      url: '../joinActivity/index?id=' + getCurrentPageParam().id
     })
   } else if (type === 'volunteer') { // 义工报名
     Taro.navigateTo({

 <!--
  * @Date: 2022-09-27 17:13:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-30 11:04:52
+ * @LastEditTime: 2022-10-20 15:44:06
  * @FilePath: /swx/src/pages/joinActivity/index.vue
  * @Description: 活动报名
 -->
@@ -29,18 +29,18 @@
           @change="onSexChange"
           direction="horizontal"
         >
-          <van-radio name="female" checked-color="#199A74">男士</van-radio>
-          <van-radio name="male" checked-color="#199A74">女士</van-radio>
+          <van-radio name="man" checked-color="#199A74">男士</van-radio>
+          <van-radio name="woman" checked-color="#199A74">女士</van-radio>
         </van-radio-group>
       </view>
     </view>
-    <view v-for="(item, index) in arr" :key="index">
+    <view v-for="(item, index) in fields" :key="index">
       <AtInput
-      :required="item.required"
+      :required="item.is_require"
       :border="true"
-      :title="item.title"
+      :title="item.field"
       type='text'
-      :placeholder="'请输入' + item.title"
+      :placeholder="'请输入' + item.field"
       v-model:value="item.value" />
     </view>
   </view>
@@ -53,17 +53,17 @@
       <view class="form-item border">
         <view class="form-item-title fix">年龄最小值</view>
         <view style="float: right;">
-          <van-field :value="min_number" type="number" label="" placeholder="请输入年龄最小值"
+          <van-field :value="min_number" @change="changeMinNumber" label="" placeholder="请输入年龄最小值"
             placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
-            maxlength="" :border="false" />
+            maxlength="3" :border="false" />
         </view>
       </view>
       <view class="form-item border">
         <view class="form-item-title fix">年龄最大值</view>
         <view style="float: right;">
-          <van-field :value="max_number" type="number" label="" placeholder="请输入年龄最大值"
+          <van-field :value="max_number" @change="changeMaxNumber" label="" placeholder="请输入年龄最大值"
             placeholder-style="color: #999; font-size: 1rem;" input-align="right" customStyle="" rightIcon=""
-            maxlength="" :border="false" />
+            maxlength="3" :border="false" />
         </view>
       </view>
     </view>
@@ -80,6 +80,7 @@
       </van-col>
     </van-row>
   </van-popup>
+  <van-toast id="van-toast" />
 </template>
 
 <script setup>
@@ -89,30 +90,50 @@ import "taro-ui-vue3/dist/style/components/input.scss";
 import icon_sel from '@/images/icon/sel@2x.png'
 import bottomButton from "@/components/bottom-button";
 import Taro from '@tarojs/taro'
+import { getCurrentPageParam } from "@/utils/weapp";
+import { activityInfoAPI } from '@/api/Host/index';
+import { addRegAPI } from '@/api/Reg/index';
+import mixin from '@/utils/mixin';
+import Toast from '@/components/vant-weapp/toast/toast';
 
 const username = ref('');
 const phone = ref('');
 const age_range = ref('');
 const user_sex = ref('');
-const arr = ref([]);
+const fields = ref([]);
+const min_number = ref('');
+const max_number = ref('');
 
-onMounted(() => {
-  arr.value = [{
-    title: '推荐人' ,
-    key: 'recommender',
-    value: '',
-    required: false,
-  }, {
-    title: '推荐人' ,
-    key: 'recommender',
-    value: '',
-    required: true,
-  }]
+onMounted(async () => {
+  const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
+  if (code) {
+    // 额外的报名信息
+    fields.value = data.activity.fields;
+    fields.value.forEach(item => {
+      item.value = '';
+    });
+  }
 })
 
-// const handleInput = (value) => {
-//   console.warn(arr.value);
-// }
+const temp_min_number = ref('');
+const changeMinNumber = ({detail}) => {
+  const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
+  if (!pattern.test(detail)) {// 如果包含特殊字符返回false
+    Toast('请输入非零正整数');
+    return false;
+  }
+  temp_min_number.value = detail;
+}
+const temp_max_number = ref('');
+const changeMaxNumber = ({detail}) => {
+  const pattern = /^([1-9][0-9]*){1,3}$/; // 非零正整数
+  if (!pattern.test(detail)) {// 如果包含特殊字符返回false
+    Toast('请输入非零正整数');
+    return false;
+  }
+  temp_max_number.value = detail;
+}
+
 const onSexChange = ({ detail }) => {
   user_sex.value = detail;
 }
@@ -122,25 +143,86 @@ const closeEditLimit = () => {
   show_popup.value = false;
 }
 const confirmEditLimit = () => {
+  if (!temp_min_number.value) {
+    Toast('年龄最小值不能为空');
+    return false;
+  }
+  if (!temp_max_number.value) {
+    Toast('年龄最大值不能为空');
+    return false;
+  }
+  if (+temp_min_number.value > +temp_max_number.value) {
+    Toast('年龄段非法录入');
+    return false;
+  }
+  min_number.value = +temp_min_number.value;
+  max_number.value = +temp_max_number.value;
+  age_range.value = min_number.value + '岁' + ' ~ ' + max_number.value + '岁';
   show_popup.value = false;
 }
 
-const onSubmit = (val) => {
-  console.warn(val);
-  Taro.showToast({
-    title: '请检查输入项',
-    icon: 'error',
-    duration: 2000
+const validForm = () => {
+  if (!username.value) {
+    Toast('姓名不能为空');
+    return false;
+  }
+  if (!phone.value) {
+    Toast('手机号不能为空');
+    return false;
+  }
+  const pattern = /^\d{11}$/;
+  if (!pattern.test(phone.value)) {
+    Toast('请输入正确手机号');
+  }
+  if (!age_range.value) {
+    Toast('年龄段不能为空');
+    return false;
+  }
+  if (!user_sex.value) {
+    Toast('性别不能为空');
+    return false;
+  }
+  fields.value.length && fields.value.forEach(item => {
+    if (item.is_require && !item.value) {
+      Toast(item.field + '不能为空');
+      return false;
+    }
   });
+  return true;
+}
+
+const onSubmit = async (val) => {
+  if (validForm()) {
+    // 额外信息枚举字段
+    const extend = {};
+    fields.value.length && fields.value.forEach(item => {
+      extend[item.field] = item.value;
+    });
+    const params = {
+      activity_id: getCurrentPageParam().id,
+      type: 'player',
+      name: username.value,
+      phone: phone.value,
+      gender: user_sex.value,
+      age_group: JSON.stringify([min_number.value, max_number.value]),
+      post: '',
+      extend
+    }
+    const { code } = await addRegAPI(params);
+    if (code) {
       Taro.redirectTo({
         url: '../joinSuccess/index'
       })
+    }
+  }
 }
 </script>
 
 <script>
 import "./index.less";
+
 export default {
   name: "demoPage",
+  mixins: [mixin.init],
 };
 </script>