✨ feat: 新增义工报名页面

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-27 15:57:59
  * @Date: 2022-05-27 15:57:59
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-28 15:04:19
+ * @LastEditTime: 2022-09-28 15:46:04
  * @FilePath: /swx/src/app.config.js
  * @FilePath: /swx/src/app.config.js
  * @Description:
  * @Description:
  */
  */
@@ -27,6 +27,7 @@ export default {
     'pages/post/index',
     'pages/post/index',
     'pages/joinActivity/index',
     'pages/joinActivity/index',
     'pages/joinSuccess/index',
     'pages/joinSuccess/index',
+    'pages/joinVolunteer/index',
   ],
   ],
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
     {
     {

 <!--
 <!--
  * @Date: 2022-09-26 16:10:35
  * @Date: 2022-09-26 16:10:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-27 17:22:03
+ * @LastEditTime: 2022-09-28 15:47:42
  * @FilePath: /swx/src/components/activity-bar.vue
  * @FilePath: /swx/src/components/activity-bar.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -18,7 +18,7 @@
       </van-col>
       </van-col>
       <van-col span="19">
       <van-col span="19">
         <view v-if="userType === '1'" class="user-not-reg">
         <view v-if="userType === '1'" class="user-not-reg">
-          <view class="button">义工报名</view>
+          <view class="button" @tap="goTo('volunteer')">义工报名</view>
           <view class="button" @tap="goTo('join')">活动报名</view>
           <view class="button" @tap="goTo('join')">活动报名</view>
         </view>
         </view>
         <view v-if="userType === '2'" class="user-reg">
         <view v-if="userType === '2'" class="user-reg">
@@ -58,6 +58,10 @@ const goTo = (type) => {
     Taro.navigateTo({
     Taro.navigateTo({
       url: '../joinActivity/index'
       url: '../joinActivity/index'
     })
     })
+  } else if (type === 'volunteer') { // 义工报名
+    Taro.navigateTo({
+      url: '../joinVolunteer/index'
+    })
   }
   }
 }
 }
 
 

+/*
+ * @Date: 2022-09-27 17:13:05
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-28 15:46:33
+ * @FilePath: /swx/src/pages/joinVolunteer/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '报名信息',
+  usingComponents: {
+  },
+}

+.bg-gradient {
+  background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
+  /*调整下划线的宽度占百分之百  高度是3px */
+  background-size: 100% 1vw;
+  /* 调整下划线的起始位置 左侧是0 上边是1.15em */
+  background-position: 0 1.25rem;
+}
+
+.join-activity-page {
+  background-color: #FFFFFF;
+  .activity-title {
+    background-color: #FFFFFF;
+    .box {
+      padding: 1rem 1rem 0.5rem 1rem;
+      text-align: center;
+    }
+  }
+
+
+}
+
+.form-item {
+  padding: 0.5rem 1rem;
+  background-color: #FFFFFF;
+  .form-item-title {
+    font-size: 1rem;
+    &.border {
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #F2F2F2;
+    }
+    &.required::before {
+      color: red;
+      content: "*";
+      font-size: 0.9rem;
+      left: 0.5rem;
+      position: absolute;
+    }
+    .sub {
+      color: #999;
+    }
+  }
+}
+
+.limit-wrapper {
+  .border {
+    overflow: auto;
+    border-bottom: 1px solid #F2F2F2;
+    .fix {
+      float: left;
+      padding-top: 0.6rem;
+    }
+  }
+}
+.limit-button-wrapper {
+  padding: 1rem 0;
+  margin: 1rem;
+  text-align: center;
+  .button {
+    padding: 0.5rem 1rem; border-radius: 1rem;
+  }
+  .cancel {
+    color: #199A74;
+    border: 1px solid #199A74;
+  }
+  .confirm {
+    color: #FFFFFF;
+    background-color: #199A74;
+  }
+}

+<!--
+ * @Date: 2022-09-27 17:13:05
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-28 16:35:18
+ * @FilePath: /swx/src/pages/joinVolunteer/index.vue
+ * @Description: 义工报名
+-->
+<template>
+  <view class="join-activity-page">
+    <view class="activity-title">
+      <view class="box">
+        <text class="bg-gradient" style="font-size: 1.25rem;">义工报名信息</text>
+      </view>
+    </view>
+    <view class="at-input">
+      <view class="at-input__container">
+        <label class="h5-label at-input__title at-input__title">岗位</label>
+        <input @tap="show_post_popup=true" class="h5-input at-input__input" placeholder-class="placeholder" :value="age_range" placeholder="请选择义工岗位" :disabled="true"/>
+        <view style="margin-right: 1rem; margin-top: 0.5rem;"><van-icon :name="icon_sel" color="" /></view>
+      </view>
+    </view>
+    <AtInput :border="true" title="姓名" type='text' placeholder='请输入姓名' v-model:value="username" />
+    <AtInput :border="true" title="手机号" type='phone' placeholder='请输入手机号' v-model:value="phone" />
+    <view class="at-input">
+      <view class="at-input__container">
+        <label class="h5-label at-input__title at-input__title">性别</label>
+        <van-radio-group
+          :value="user_sex"
+          @change="onSexChange"
+          direction="horizontal"
+        >
+          <van-radio name="female" checked-color="#199A74">男士</van-radio>
+          <van-radio name="male" checked-color="#199A74">女士</van-radio>
+        </van-radio-group>
+      </view>
+    </view>
+  </view>
+  <bottom-button @on-submit="onSubmit">确认报名</bottom-button>
+
+  <!-- 年龄段弹出框 -->
+  <van-popup :show="show_post_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="columns" toolbar-class="picker-toolbar"
+      @confirm="onPostConfirm" @cancel="onPostCancel" @change="onPostChange" />
+  </van-popup>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { AtInput } from 'taro-ui-vue3'
+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'
+
+const username = ref('');
+const phone = ref('');
+const age_range = ref('');
+const user_sex = ref('');
+
+onMounted(() => {
+})
+
+// const handleInput = (value) => {
+//   console.warn(arr.value);
+// }
+const onSexChange = ({ detail }) => {
+  user_sex.value = detail;
+}
+
+const show_post_popup = ref(false);
+const post_status = ref('前台');
+const columns = ref(['前台', '后台']);
+const onPostChange = (event) => {
+  const { picker, value, index } = event.detail;
+  console.warn(value);
+  console.warn(index);
+  post_status.value = value;
+}
+const onPostConfirm = (event) => {
+  show_post_popup.value = false;
+}
+const onPostCancel = (event) => {
+  show_post_popup.value = false;
+}
+
+const onSubmit = (val) => {
+  console.warn(val);
+  Taro.showToast({
+    title: '请检查输入项',
+    icon: 'error',
+    duration: 2000
+  });
+  // Taro.redirectTo({
+  //   url: '../joinSuccess/index'
+  // })
+}
+</script>
+
+<script>
+import "./index.less";
+export default {
+  name: "demoPage",
+};
+</script>