✨ 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 16:56:40
+ * @LastEditTime: 2022-09-29 09:46:03
  * @FilePath: /swx/src/app.config.js
  * @FilePath: /swx/src/app.config.js
  * @Description:
  * @Description:
  */
  */
@@ -29,6 +29,7 @@ export default {
     'pages/joinSuccess/index',
     'pages/joinSuccess/index',
     'pages/joinVolunteer/index',
     'pages/joinVolunteer/index',
     'pages/joinInfo/index',
     'pages/joinInfo/index',
+    'pages/joinList/index',
   ],
   ],
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
     {
     {

+/*
+ * @Date: 2022-09-29 09:45:17
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-29 09:45:33
+ * @FilePath: /swx/src/pages/joinList/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '报名列表',
+  usingComponents: {
+  },
+}

+.join-list-page {
+  .join-list-header {
+    background-color: #FFFFFF;
+    .header-info {
+      display: flex;
+      text-align: center;
+      padding-bottom: 1rem;
+      margin-top: 0.5rem;
+      .activity {
+        flex: 1;
+        height: 50rpx;
+        line-height: 50rpx;
+      }
+      .job {
+        flex: 1;
+        border-right: 1px solid #F5F5F5;
+        border-left: 1px solid #F5F5F5;
+        height: 100rpx;
+        line-height: 50rpx;
+      }
+      .sign {
+        flex: 1;
+        height: 50rpx;
+        line-height: 50rpx;
+      }
+    }
+  }
+  .activity-title {
+    background-color: #FFFFFF;
+    .box {
+      padding: 1rem 1rem 0.5rem 1rem;
+    }
+  }
+  .bg-gradient {
+    background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
+    /*调整下划线的宽度占百分之百  高度是3px */
+    background-size: 100% 1vw;
+    /* 调整下划线的起始位置 左侧是0 上边是1.15em */
+    background-position: 0 1.1rem;
+  }
+  .inactivate {
+    font-size: 1rem;
+    color: #999999;
+  }
+  .list-item {
+    background-color: white;
+    padding: 0.75rem;
+    border-radius: 0.65rem;
+    position: relative;
+    margin-bottom: 1rem;
+    .avatar {
+      width: 100%;
+      height: 5rem;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: 0.5rem;
+    }
+    .content {
+      padding: 0.5rem 1rem;
+      .title {
+        font-size: 1.25rem;
+      }
+      .phone {
+        color: #199A74;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}

+<template>
+  <view class="join-list-page">
+    <view class="join-list-header">
+      <view class="activity-title">
+        <view class="box">
+          <text class="bg-gradient" style="font-size: 1.15rem;">报名统计</text>
+        </view>
+      </view>
+      <view class="header-info">
+        <view class="activity">
+          <view><text style="font-size: 1.25rem;">5</text>人</view>
+          <view>
+            <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
+            <text style="font-size: 0.9rem; color: #999999;">活动报名</text>
+          </view>
+        </view>
+        <view class="job">
+          <text style="font-size: 1.25rem;">2</text>人
+          <view>
+            <van-icon :name="icon_job" size="1.25rem" color="" style="vertical-align: sub;" />
+            <text style="font-size: 0.9rem; color: #999999;">岗位报名</text>
+          </view>
+        </view>
+        <view class="sign">
+          <view><text style="font-size: 1.25rem;">3</text>人</view>
+          <view>
+            <van-icon :name="icon_sign" size="1.25rem" color="" style="vertical-align: sub;" />
+            <text style="font-size: 0.9rem; color: #999999;">用户签到</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list-wrapper" style="margin: 1rem;">
+      <view style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
+        <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
+          <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">活动报名</view>
+        </view>
+        <view style="display: inline-block; line-height: 60rpx;">
+          <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">岗位报名</view>
+        </view>
+        <view @tap="show_status_popup=true" style="float: right; color: #666666; font-size: 0.9rem; border: 1px solid #DBDBDB; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem;">
+          &nbsp;{{ status_type === '' ? '全部' : status_type }}&nbsp;&nbsp;
+          <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
+        </view>
+      </view>
+      <view>
+        <view v-for="(item, index) in activityList" :key="index" class="list-item">
+          <van-row>
+            <van-col span="6">
+              <view class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
+            </van-col>
+            <van-col span="14">
+              <view class="content">
+                <view class="title">{{ item.name }}</view>
+                <view class="phone" @tap="onPhoneClick(item.phone)">
+                  <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
+                  {{ item.phone }}
+                </view>
+              </view>
+            </van-col>
+            <van-col span="4">
+              <van-tag v-if="item.status === '1'" :round="true" color="#D7F3FF" text-color="#0091FD" size="large">已报名</van-tag>
+              <van-tag v-if="item.status === '2'" :round="true" color="#D7FFD7" text-color="#019200" size="large">已签到</van-tag>
+              <van-tag v-if="item.status === '3'" :round="true" color="#FFF5E4" text-color="#FF7300" size="large">未出席</van-tag>
+            </van-col>
+          </van-row>
+        </view>
+      </view>
+    </view>
+    <view style="height: 2rem;"></view>
+  </view>
+
+  <!-- 切换状态弹出框 -->
+  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
+    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="status_type_columns"
+      toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" @change="onStatusTypeChange" />
+  </van-popup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import icon_join from '@/images/icon/baoming@2x.png'
+import icon_job from '@/images/icon/yigong@2x.png'
+import icon_sign from '@/images/icon/qiandao@2x.png'
+import icon_sel2 from '@/images/icon/sel02@2x.png'
+import icon_tel from '@/images/icon/tel@2x.png'
+import Taro from '@tarojs/taro'
+
+const activityList = ref([{
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '净妙',
+  phone: '18789800786',
+  status: '1',
+}, {
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '人在路途',
+  phone: '18789800786',
+  status: '2',
+}, {
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '寒潭秋月心如洗',
+  phone: '18789800786',
+  status: '3',
+}, {
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '净妙',
+  phone: '18789800786',
+  status: '1',
+}, {
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '人在路途',
+  phone: '18789800786',
+  status: '2',
+}, {
+  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+  name: '寒潭秋月心如洗',
+  phone: '18789800786',
+  status: '3',
+}])
+
+const onPhoneClick = (number) => {
+  Taro.makePhoneCall({
+    phoneNumber: number
+  })
+}
+
+const show_status_popup = ref(false);
+const status_type = ref('');
+const status_type_columns = ref(['已报名', '未出席', '已签到']);
+const onStatusTypeChange = (event) => {
+  const { picker, value, index } = event.detail;
+}
+const onStatusTypeConfirm = (event) => {
+  const { picker, value, index } = event.detail;
+  show_status_popup.value = false;
+  status_type.value = value;
+  console.warn('查询新数据');
+}
+const onStatusTypeCancel = (event) => {
+  show_status_popup.value = false;
+}
+
+const activated = ref(1);
+const toggleColum = (type) => {
+  if (type === 'activity') {
+    activityList.value = [{
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '净妙',
+      phone: '18789800786',
+      status: '1',
+    }, {
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '人在路途',
+      phone: '18789800786',
+      status: '2',
+    }, {
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '寒潭秋月心如洗',
+      phone: '18789800786',
+      status: '3',
+    }, {
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '净妙',
+      phone: '18789800786',
+      status: '1',
+    }, {
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '人在路途',
+      phone: '18789800786',
+      status: '2',
+    }, {
+      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      name: '寒潭秋月心如洗',
+      phone: '18789800786',
+      status: '3',
+    }];
+    activated.value = 1
+  } else {
+    activityList.value = [];
+    activated.value = 2
+  }
+}
+</script>
+
+<script>
+import "./index.less";
+
+export default {
+  name: "joinListPage",
+};
+</script>