Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7bf0ecf6 1 parent cc22cb43

活动报名页面API联调

Inline Side-by-side
Showing 3 changed files with 201 additions and 107 deletions
/*
* @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));
......
<!--
* @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';
......
<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>
<view v-for="(item, index) in activityList" :key="index" class="list-item">
<scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
<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 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-tag @tap="changeStatus('apply', item.id)" v-if="item.status === 'apply'" :round="true" color="#D7F3FF" text-color="#0091FD" 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 @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'
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',
}])
import { getCurrentPageParam } from "@/utils/weapp";
import Toast from '@/components/vant-weapp/toast/toast';
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>
......