✨ feat: 我参加的活动功能API联调

+/*
+ * @Date: 2022-10-20 13:15:00
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-25 15:37:28
+ * @FilePath: /swx/src/api/Activity/index.js
+ * @Description: 活动信息
+ */
+import { fn, fetch } from '../fn';
+
+const Api = {
+  ACTIVITY_JOIN_LIST: '/srv/?a=activity_join_list',
+}
+
+/**
+ * @description: 我加入的活动列表
+ * @returns
+ */
+export const joinListAPI = (params) => fn(fetch.get(Api.ACTIVITY_JOIN_LIST, params));

 <!--
  * @Date: 2022-09-20 15:39:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-18 14:21:21
+ * @LastEditTime: 2022-10-25 16:11:42
  * @FilePath: /swx/src/components/activity-card.vue
  * @Description: 活动卡片组件
 -->
 <template>
-  <view class="activity-card-page">
+  <view @tap="goTo(data.id)" class="activity-card-page">
     <view class="card-main">
       <van-row>
         <van-col :span="10">
@@ -18,7 +18,9 @@
             <view class="status-text">
               <van-tag v-if="data.mode === 'offline'" :round="true" color="#E9FAF4" text-color="#199A74" size="large">现场活动</van-tag>
               <van-tag v-if="data.mode === 'online'" :round="true" color="#E9FAF4" text-color="#199A74" size="large">线上活动</van-tag>
-              <van-tag v-if="register" :round="true" color="#D7FFD7" text-color="#019200" size="large">报名中</van-tag>
+              <van-tag v-if="formatStatus(data) === '未发布'" :round="true" color="#FFF5E4" text-color="#FF7300" size="large">{{ formatStatus(data) }}</van-tag>
+              <van-tag v-else-if="formatStatus(data) === '已结束'" :round="true" color="#EDEDED" text-color="#909090" size="large">{{ formatStatus(data) }}</van-tag>
+              <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">{{ formatStatus(data) }}</van-tag>
             </view>
             <view style="font-size: 0.95rem;">
               <van-icon name="clock-o" color="#BBBBBB" />&nbsp;{{ formatDate(data.activity_time) }}
@@ -74,6 +76,23 @@ const formatDate = (date) => {
   return dayjs(date).format('YYYY-MM-DD HH:mm')
 }
 
+const formatStatus = (item) => {
+  if (item?.is_end) {
+    return '已结束';
+  } else if (item?.status === 'disable') {
+    return '未发布';
+  } else if (dayjs(item.server_time).isBefore(dayjs(item.reg_begin_time))) {
+    return '报名未开始';
+  } else if (dayjs(item.reg_begin_time).isBefore(dayjs(item.server_time)) && dayjs(item.server_time).isBefore(dayjs(item.reg_end_time))) {
+    return '报名中';
+  } else if (dayjs(item.reg_end_time).isBefore(dayjs(item.server_time)) && dayjs(item.server_time).isBefore(dayjs(item.activity_time))) {
+    return '报名截止';
+  } else if (dayjs(item.activity_time).isBefore(dayjs(item.server_time))) {
+    return '活动进行中';
+  }
+  return 'mo'
+}
+
 const goTo = (id) => {
   Taro.navigateTo({
     url: '../activityDetail/index?id=' + id

 <template>
   <view class="join-list-page">
-    <view class="join-list-header">
+    <view id="page-header" class="join-list-header">
       <view class="activity-title">
         <view class="box">
           <text class="bg-gradient" style="font-size: 1.15rem;">活动统计</text>
@@ -8,21 +8,21 @@
       </view>
       <view class="header-info">
         <view class="activity">
-          <view><text style="font-size: 1.25rem;">5</text>场</view>
+          <view><text style="font-size: 1.25rem;">{{ reg_count }}</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>场
+          <text style="font-size: 1.25rem;">{{ volunteer_count }}</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><text style="font-size: 1.25rem;">{{ sign_count }}</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>
@@ -31,30 +31,33 @@
       </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 id="navbar-page" 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 @tap="toggleColum('player')" :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 @tap="toggleColum('volunteer')" :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>
+      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
+        <view>
+          <activity-card v-for="(item, index) in activity_list" :key="index" :data="item" style="margin-bottom: 1rem;"></activity-card>
+        </view>
+      </scroll-view>
     </view>
     <view style="height: 2rem;"></view>
   </view>
 
   <!-- 切换状态弹出框 -->
-  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 40%;" :lock-scroll="true">
+  <van-popup :show="show_status_popup" position="bottom" custom-style="height: 50%;" :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>
+  <van-toast id="van-toast" />
 </template>
 
 <script setup>
@@ -66,53 +69,7 @@ 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
-  }
-}
+import Toast from '@/components/vant-weapp/toast/toast';
 
 const goToUserInfo = () => {
   Taro.navigateTo({
@@ -123,8 +80,124 @@ const goToUserInfo = () => {
 
 <script>
 import "./index.less";
+import { joinListAPI } from '@/api/Activity/index';
+import { $ } from '@tarojs/extend'
+import mixin from '@/utils/mixin';
+import { getCurrentPageParam } from "@/utils/weapp";
 
 export default {
   name: "joinListPage",
+  mixins: [mixin.init],
+  async onShow () {
+    // 获取活动和轮播信息
+    const { code, data } = await joinListAPI({ type: this.role, status: '', is_stat: 1, page: this.page, limit: this.limit });
+    if (code) {
+      this.activity_list = data.activity_list;
+      this.reg_count = data.reg_count;
+      this.sign_count = data.sign_count;
+      this.volunteer_count = data.volunteer_count;
+      this.page = this.page + 1;
+    }
+  },
+  onHide () { // 离开当前页面
+    this.page = 0;
+    this.flag = true;
+  },
+  mounted () {
+    // 设置滚动列表可视高度
+    const windowHeight = wx.getSystemInfoSync().windowHeight;
+    setTimeout(async () => {
+      const headerHeight = await $('#page-header').height();
+      const navHeight = await $('#navbar-page').height();
+      this.scrollStyle = {
+        height: windowHeight - headerHeight - navHeight - 50 + 'px'
+      }
+    }, 500);
+  },
+  data() {
+    return {
+      activity_list: [],
+      role: 'player',
+      flag: true,
+      page: 0,
+      limit: 10,
+      scrollStyle: { height: '1000rpx' },
+      activated: 1,
+      status: '',
+      reg_count: '',
+      sign_count: '',
+      volunteer_count: '',
+      show_status_popup: false,
+      status_type: '',
+      status_type_columns: [{
+        text: '全部',
+        key: ''
+      }, {
+        text: '报名中',
+        key: 'reg'
+      }, {
+        text: '报名结束',
+        key: 'reg_end'
+      }, {
+        text: '活动进行中',
+        key: 'start'
+      }, {
+        text: '活动结束',
+        key: 'stop'
+      }],
+    };
+  },
+  methods: {
+    onScrollToLower () {
+      if(!this.flag){
+        return
+      }
+      this.flag = false;
+      this.getList();
+    },
+    async getList () {
+      // 获取推荐活动列表
+      const { code, data } = await joinListAPI({ type: this.role, status: this.status, is_stat: 1, page: this.page, limit: this.limit });
+      if (code) {
+        if (data.activity_list.length) {
+          this.activity_list = this.activity_list.concat(data.activity_list);
+          this.reg_count = data.reg_count;
+          this.sign_count = data.sign_count;
+          this.volunteer_count = data.volunteer_count;
+          this.page = this.page + 1;
+          this.flag = true;
+        } else {
+          Toast('没有数据')
+        }
+      }
+    },
+    toggleColum (type) {
+      if (type === 'player') {
+        this.activated = 1;
+        this.role = 'player';
+      } else {
+        this.activated = 2;
+        this.role = 'volunteer';
+      }
+      this.activity_list = [];
+      this.flag = true;
+      this.page = 0;
+      this.getList();
+    },
+    onStatusTypeConfirm (event) {
+      const { picker, value, index } = event.detail;
+      this.show_status_popup = false;
+      this.status_type = value.text;
+      this.status = value.key;
+      // 查询数据
+      this.activity_list = [];
+      this.flag = true;
+      this.page = 0;
+      this.getList();
+    },
+    onStatusTypeCancel (event) {
+      this.show_status_popup = false;
+    }
+  },
 };
 </script>