新增我参加的活动页面

+/*
+ * @Date: 2022-09-29 09:45:17
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-08 10:31:49
+ * @FilePath: /swx/src/pages/myActivityList/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>
+        <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" style="margin-bottom: 1rem;"></activity-card>
+      </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'
+import activityCard from '@/components/activity-card.vue'
+
+const activity_list = ref([{
+  title: '智慧没有烦恼',
+  address: '上海市杨浦区军工路100号A座05室',
+}, {
+  title: '万人共乘浪漫热气球',
+  address: '',
+}, {
+  title: '八段锦',
+  address: '',
+}, {
+  title: '智慧没有烦恼',
+  address: '上海市杨浦区军工路100号A座05室',
+}, {
+  title: '万人共乘浪漫热气球',
+  address: '',
+}, {
+  title: '八段锦',
+  address: '',
+}]);
+
+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') {
+    activity_list.value = [];
+    activated.value = 1
+  } else {
+    activity_list.value = [];
+    activated.value = 2
+  }
+}
+
+const goToUserInfo = () => {
+  Taro.navigateTo({
+    url: '../userInfo/index'
+  })
+}
+</script>
+
+<script>
+import "./index.less";
+
+export default {
+  name: "joinListPage",
+};
+</script>