活动报名页面API联调

hookehuyr
Commit 7bf0ecf69427800ababc3707c3649241af336ca2 7bf0ecf6 1 parent cc22cb43
Showing 3 changed files with 201 additions and 107 deletions
src/api/Reg/index.js
src/components/activity-bar.vue
src/pages/joinList/index.vue
--- a/src/api/Reg/index.js
View file @7bf0ecf
+++ b/src/api/Reg/index.js
View file @7bf0ecf
 /*
  * @Date: 2022-10-20 13:15:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-20 21:42:18
+ * @LastEditTime: 2022-10-21 16:54:03
  * @FilePath: /swx/src/api/Reg/index.js
  * @Description: 报名信息
  */
@@ -12,6 +12,8 @@ const Api = {
   REG_ADD: '/srv/?a=reg_add',
   REG_EDIT: '/srv/?a=reg_edit',
   REG_CANCEL: '/srv/?a=reg_cancel',
+  REG_LIST: '/srv/?a=reg_list',
+  REG_STATUS: '/srv/?a=reg_set_status',
 }
 /**
@@ -37,3 +39,15 @@ export const editRegAPI = (params) => fn(fetch.post(Api.REG_EDIT, params));
  * @returns
  */
 export const cancelRegAPI = (params) => fn(fetch.post(Api.REG_CANCEL, params));
+
+/**
+ * @description: 活动报名列表
+ * @returns
+ */
+export const listRegAPI = (params) => fn(fetch.post(Api.REG_LIST, params));
+
+/**
+ * @description: 修改活动状态
+ * @returns
+ */
+export const statusRegAPI = (params) => fn(fetch.post(Api.REG_STATUS, params));
--- a/src/components/activity-bar.vue
View file @7bf0ecf
+++ b/src/components/activity-bar.vue
View file @7bf0ecf
 <!--
  * @Date: 2022-09-26 16:10:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-20 18:27:46
+ * @LastEditTime: 2022-10-21 13:37:32
  * @FilePath: /swx/src/components/activity-bar.vue
  * @Description: 活动详情页底部导航栏
 -->
@@ -81,7 +81,7 @@ const goTo = (type) => {
     }
   } else if (type === 'list') { // 报名列表
     Taro.navigateTo({
-      url: '../joinList/index?id='
+      url: '../joinList/index?id=' + getCurrentPageParam().id
     })
   } else if (type === 'edit') { // 修改活动
     const id = getCurrentPageParam().id;
@@ -93,6 +93,7 @@ const goTo = (type) => {
 </script>
+
 <style lang="less">
 @import '@/assets/styles/base.less';
--- a/src/pages/joinList/index.vue
View file @7bf0ecf
+++ b/src/pages/joinList/index.vue
View file @7bf0ecf
 <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,7 +31,7 @@
       </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="page-filter" 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>
@@ -43,11 +43,12 @@
           <van-icon :name="icon_sel2" size="0.8rem" color="" style="vertical-align: middle;" />
         </view>
       </view>
-      <view>
+      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
-        <view v-for="(item, index) in activityList" :key="index" class="list-item">
+        <view v-for="(item, index) in reg_list" :key="index" class="list-item">
           <van-row>
             <van-col span="6">
-              <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
+              <view v-if="item.avatar" @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
+              <view v-else @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view>
             </van-col>
             <van-col span="14">
               <view class="content">
@@ -59,64 +60,37 @@
               </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 @tap="changeStatus('apply', item.id)" v-if="item.status === 'apply'" :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 @tap="changeStatus('enable', item.id)" v-if="item.status === 'enable'" :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-tag @tap="changeStatus('absent', item.id)" v-if="item.status === 'absent'" :round="true" color="#FFF5E4" text-color="#FF7300" size="large">未出席</van-tag>
             </van-col>
           </van-row>
         </view>
-      </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: 45%;" :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" />
+      toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel" />
   </van-popup>
+
+  <van-toast id="van-toast" />
+  <van-dialog id="van-dialog" />
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, getCurrentInstance } 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 { getCurrentPageParam } from "@/utils/weapp";
-const activityList = ref([{
+import Toast from '@/components/vant-weapp/toast/toast';
-  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({
@@ -124,74 +98,179 @@ const onPhoneClick = (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
-  }
-}
-
 const goToUserInfo = () => {
   Taro.navigateTo({
     url: '../userInfo/index'
   })
 }
+
+// 处理过滤条件
+const status_type_columns = ref([])
+const internalInstance = getCurrentInstance();
+setTimeout(() => {
+  if (internalInstance.data.absent) {
+    status_type_columns.value = ['全部', '已签到', '未出席']
+  } else {
+    status_type_columns.value = ['全部', '已签到', '已报名']
+  }
+}, 500);
 </script>
 <script>
 import "./index.less";
+import { listRegAPI, statusRegAPI } from '@/api/Reg/index';
+import * as dayjs from 'dayjs'
+import { activityInfoAPI } from '@/api/Host/index';
+import { $ } from '@tarojs/extend'
+import Dialog from '@/components/vant-weapp/dialog/dialog';
 export default {
   name: "joinListPage",
+  mounted () {
+    // 设置滚动列表可视高度
+    const windowHeight = wx.getSystemInfoSync().windowHeight;
+    setTimeout(async () => {
+      const headerHeight = await $('#page-header').height();
+      const navHeight = await $('#page-filter').height();
+      this.scrollStyle = {
+        height: windowHeight - headerHeight - navHeight - 70 + 'px'
+      }
+    }, 500);
+  },
+  data () {
+    return {
+      reg_count: 0,
+      volunteer_count: 0,
+      sign_count: 0,
+      reg_list: [],
+      absent: false, // 超时标识
+      flag: true,
+      status: '',
+      page: 0,
+      limit: 10,
+      member_type: 'player',
+      scrollStyle: { height: '1000rpx' },
+      activated: 1,
+      show_status_popup: false,
+      status_type: '',
+    }
+  },
+  async onShow () {
+    const info = await activityInfoAPI({ i: getCurrentPageParam().id });
+    if (info.code) {
+      // 判断是否超过活动时间
+      if (dayjs(info.data.activity.activity_time).isBefore(dayjs(info.data.server_time))) {
+        this.absent = true;
+      }
+    }
+    const { code, data } = await listRegAPI({ activity_id: getCurrentPageParam().id, type: this.member_type, page: this.page, limit: this.limit });
+    if (code) {
+      this.reg_count = data.reg_count;
+      this.volunteer_count = data.volunteer_count;
+      this.sign_count = data.sign_count;
+      this.reg_list = data.reg_list;
+      if (this.absent) {
+        // 活动超时翻状态
+        this.reg_list.forEach(item => {
+          item.status = item.status === 'apply' ? 'absent' : item.status;
+        })
+      }
+    }
+  },
+  methods: {
+    onScrollToLower () {
+      if(!this.flag){
+        return
+      }
+      this.flag = false;
+      this.getList();
+    },
+    async getList () {
+      Taro.showLoading({
+        title: '加载中'
+      })
+      // 获取推荐活动列表
+      const { code, data } = await listRegAPI({ activity_id: getCurrentPageParam().id, type: this.member_type, status: this.status, page: this.page, limit: this.limit });
+      if (code) {
+        if (data.reg_list.length) {
+          this.reg_list = this.reg_list.concat(data.reg_list);
+          this.page = this.page + 1;
+          this.flag = true;
+        } else {
+          Toast('没有数据')
+        }
+        Taro.hideLoading()
+      }
+    },
+    toggleColum (type) {
+      if (type === 'activity') { // 活动报名
+        this.member_type = 'player';
+        this.activated = 1;
+      } else { // 岗位报名
+        this.member_type = 'volunteer';
+        this.activated = 2;
+      }
+      // 重置条件
+      this.page = 0;
+      this.reg_list = [];
+      this.flag = false;
+      this.getList();
+    },
+    onStatusTypeConfirm (event) {
+      const { picker, value, index } = event.detail;
+      this.show_status_popup = false;
+      this.status_type = value;
+      if (this.status_type === '全部') {
+        this.status = '';
+      }
+      if (this.status_type === '已签到') {
+        this.status = 'enable';
+      }
+      if (this.status_type === '未出席' || this.status_type === '已报名') {
+        this.status = 'apply';
+      }
+      // 重置条件
+      this.page = 0;
+      this.reg_list = [];
+      this.flag = false;
+      this.getList();
+    },
+    onStatusTypeCancel (event) {
+      this.show_status_popup = false;
+    },
+    changeStatus (status, id) {
+      // 已签到和未出席不能修改状态
+      if (status === 'absent' || status === 'enable') {
+        Toast('无需修改状态')
+      }
+      if (status === 'apply') {
+        Dialog.confirm({
+          title: '温馨提示',
+          message: '是否确认修改状态为已签到？',
+          confirmButtonColor: '#199a74'
+        })
+          .then(async () => {
+            // on confirm
+            const { code, data } = await statusRegAPI({ i: id, status: 'enable' });
+            if (code) {
+              Taro.showToast({
+                title: '修改成功',
+                icon: 'success',
+                duration: 2000
+              });
+              // 手动翻状态-显示
+              this.reg_list.forEach(item => {
+                if (item.id === id) {
+                  item.status = 'enable';
+                }
+              })
+            }
+          })
+          .catch(() => {
+            // on cancel
+          });
+      }
+    }
+  }
 };
 </script>