Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9e77905a 1 parent f160a6f9

创建活动页面API逻辑联调

Inline Side-by-side
Showing 4 changed files with 245 additions and 56 deletions
/*
* @Date: 2022-10-20 13:15:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-25 15:37:28
* @LastEditTime: 2022-10-25 17:27:05
* @FilePath: /swx/src/api/Activity/index.js
* @Description: 活动信息
*/
......@@ -9,6 +9,7 @@ import { fn, fetch } from '../fn';
const Api = {
ACTIVITY_JOIN_LIST: '/srv/?a=activity_join_list',
ACTIVITY_ADD_LIST: '/srv/?a=activity_add_list',
}
/**
......@@ -16,3 +17,9 @@ const Api = {
* @returns
*/
export const joinListAPI = (params) => fn(fetch.get(Api.ACTIVITY_JOIN_LIST, params));
/**
* @description: 我创建的活动列表
* @returns
*/
export const addListAPI = (params) => fn(fetch.get(Api.ACTIVITY_ADD_LIST, params));
......
<!--
* @Date: 2022-09-26 14:36:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-25 16:26:07
* @LastEditTime: 2022-10-26 09:14:00
* @FilePath: /swx/src/pages/activityDetail/index.vue
* @Description: 活动详情页
-->
......@@ -106,7 +106,7 @@
</view>
</view>
<view style="height: 6rem;"></view>
<activity-bar :user-type="userType" :reg-id="reg_id" :member-role="member_role" :is-end="is_end" />
<activity-bar :user-type="userType" :reg-id="reg_id" :member-role="member_role" :is-end="is_end" :activity-status="activity_status" />
<!-- <van-action-sheet
:z-index="10"
......@@ -462,6 +462,7 @@ import "./index.less";
import { activityInfoAPI } from '@/api/Host/index';
import { pageQuery } from '@/utils/tools.js'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
require('@tarojs/taro/html.css')
export default {
......@@ -478,6 +479,8 @@ export default {
this.member_role = data.member_role;
this.reg_id = data.reg_id;
}
// 活动状态判断显示
this.activity_status = getCurrentPageParam().status;
},
mounted() {
},
......@@ -488,6 +491,7 @@ export default {
member_role: '',
reg_id: '',
is_end: '',
activity_status: '',
}
},
computed: {
......
<!--
* @Date: 2022-09-21 14:51:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-25 15:12:40
* @LastEditTime: 2022-10-25 18:29:15
* @FilePath: /swx/src/pages/my/index.vue
* @Description: 我的页面
-->
......@@ -64,10 +64,12 @@
</view>
<view style="height: 6rem;"></view>
<navbar activated="my" />
<van-toast id="van-toast" />
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
// import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
// import { AtAvatar } from 'taro-ui-vue3'
......@@ -78,7 +80,19 @@ import icon_user from '@/images/icon/peiban@2x.png'
import icon_company from '@/images/icon/zhubanfang@2x.png'
import navbar from '@/components/navbar.vue'
import activityCard from '@/components/activity-card.vue'
import { text } from "stream/consumers";
import { hostListAPI } from '@/api/Host/index'
import Toast from '@/components/vant-weapp/toast/toast';
const host_id = ref('');
onMounted(async () => {
// 获取主办方列表信息
const { code, data } = await hostListAPI();
if (code) {
if (data.my_hosts.length) {
host_id.value = data.my_hosts[0]?.id
}
}
})
// 参加的活动
const joinActivity = () => {
......@@ -88,8 +102,12 @@ const joinActivity = () => {
}
// 创建的活动
const createActivity = () => {
if (!host_id.value) {
Toast('您还未创建过主办方');
return false;
}
Taro.navigateTo({
url: '../myCreateActivity/index'
url: '../myCreateActivity/index?host_id=' + host_id.value
})
}
// 陪伴的用户
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 13:47:07
* @LastEditTime: 2022-10-26 09:42:30
* @FilePath: /swx/src/pages/myCreateActivity/index.vue
* @Description: 文件描述
-->
<template>
<div class="my-create-activity-page">
<view style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
<view id="page-header" style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
<view style="height: 4rem; padding: 1rem;">
<van-row>
<van-col span="18">
<view style="position: relative;">
<AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
<AtAvatar circle size="large" :image='icon_company' style="display: inline-block;"></AtAvatar>
<view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
<text style="font-size: 1.05rem;">周三读书会（主办方）</text>
<van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
<text style="font-size: 1.05rem;">{{ host_name }}</text>
<!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
</view>
</view>
</van-col>
<van-col span="6">
<view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
<view @tap="show_host_popup=true" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
</van-col>
</van-row>
</view>
......@@ -32,21 +32,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;">{{ activity_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;">24</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;">233</text>人</view>
<view><text style="font-size: 1.25rem;">{{ member_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>
......@@ -56,11 +56,15 @@
</view>
</view>
<view style="padding: 0 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 @tap="show_status_popup=true" style="float: left; 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 style="float: right; margin-top: 0.25rem;">
<text style="font-size: 1rem; color: #999999; vertical-align: super;">仅看进行中</text>&nbsp;
<van-switch :checked="check_status" @change="onChange" size="22px" active-color="#199A74" />
</view>
</view>
<view style="">
<activity-card v-for="(item, index) in activity_list" :key="index" :data="item" status="edit" style="margin-bottom: 1rem;"></activity-card>
......@@ -69,11 +73,19 @@
</view>
</div>
<!-- 切换状态弹出框 -->
<van-popup :show="show_status_popup" position="bottom" custom-style="height: 45%;" :lock-scroll="true">
<!-- 切换主办方弹出框 -->
<van-popup :show="show_host_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
<van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="host_columns"
toolbar-class="picker-toolbar" @confirm="onHostConfirm" @cancel="onHostCancel" />
</van-popup>
<!-- 切换时间弹出框 -->
<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" />
:default-index="defaultIndex"
toolbar-class="picker-toolbar" @confirm="onStatusTypeConfirm" @cancel="onStatusTypeCancel"/>
</van-popup>
<van-toast id="van-toast" />
</template>
<script setup>
......@@ -87,47 +99,195 @@ 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 activityCard from '@/components/activity-card.vue'
import icon_company from '@/images/icon/zhubanfang@2x.png'
import Toast from '@/components/vant-weapp/toast/toast';
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 activity_list = ref([{
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}, {
title: '智慧没有烦恼',
address: '上海市杨浦区军工路100号A座05室',
}, {
title: '万人共乘浪漫热气球',
address: '',
}, {
title: '八段锦',
address: '',
}]);
</script>
<script>
import "./index.less";
import { addListAPI } from '@/api/Activity/index';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
import { hostListAPI } from '@/api/Host/index'
import * as dayjs from 'dayjs'
export default {
name: "demoPage",
name: "myCreateActivityPage",
mixins: [mixin.init],
async onShow () {
// 获取主办方列表信息
const host = await hostListAPI();
if (host.code) {
host.data.my_hosts.forEach(item => {
if (item.id == getCurrentPageParam().host_id) {
this.host_id = item.id;
this.host_name = item.name;
}
item.text = item.name;
item.key = item.id;
});
this.host_columns = host.data.my_hosts;
}
const params = {
host_id: getCurrentPageParam().host_id,
time_begin: this.time_begin,
time_end: this.time_end,
status: this.status,
only_start: this.only_start,
page: this.page,
limit: this.limit
}
const { code, data } = await addListAPI(params);
if (code) {
this.activity_list = data.activity_list;
this.activity_count = data.activity_count;
this.volunteer_count = data.volunteer_count;
this.member_count = data.member_count;
this.server_time = this.formatDate(data.server_time);
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: [],
flag: true,
page: 0,
limit: 10,
scrollStyle: { height: '1000rpx' },
status: '',
activity_count: '',
member_count: '',
volunteer_count: '',
show_status_popup: false,
status_type: '',
status_type_columns: ['全部', '一个月之内', '三个月之内', '一年之内'],
show_host_popup: false,
host_columns: [],
time_begin: '',
time_end: '',
only_start: 0,
host_id: '',
host_name: '',
check_status: false,
filter_time: '',
server_time: '',
defaultIndex: 0
};
},
methods: {
formatDate (date) {
return dayjs(date).format('YYYY-MM-DD HH:mm')
},
onScrollToLower () {
if(!this.flag){
return
}
this.flag = false;
this.getList();
},
async getList () {
// 获取推荐活动列表
const params = {
host_id: this.host_id,
time_begin: this.time_begin,
time_end: this.time_end,
status: this.status,
only_start: this.only_start,
page: this.page,
limit: this.limit
}
const { code, data } = await addListAPI(params);
if (code) {
if (data.activity_list.length) {
this.activity_list = this.activity_list.concat(data.activity_list);
this.activity_count = data.activity_count;
this.volunteer_count = data.volunteer_count;
this.member_count = data.member_count;
this.page = this.page + 1;
this.flag = true;
} else {
Toast('没有数据')
}
}
},
onStatusTypeConfirm (event) { // 时间过滤
const { picker, value, index } = event.detail;
this.show_status_popup = false;
this.filter_time = value;
// '一个月之内', '三个月之内', '一年之内'
let yearMonthDay = '';
if (this.filter_time === '一个月之内') {
yearMonthDay = dayjs(this.server_time).subtract(1, 'month');
this.defaultIndex = 1;
this.status_type = '一个月之内';
}
if (this.filter_time === '三个月之内') {
yearMonthDay = dayjs(this.server_time).subtract(3, 'month');
this.defaultIndex = 2;
this.status_type = '三个月之内';
}
if (this.filter_time === '一年之内') {
yearMonthDay = dayjs(this.server_time).subtract(1, 'year');
this.defaultIndex = 3;
this.status_type = '一年之内';
}
this.time_begin = `${dayjs(yearMonthDay).format('YYYY-MM-DD')} ${dayjs(this.server_time).format('HH:mm')}`;
this.time_end = this.server_time;
if (this.filter_time === '全部') {
this.time_begin = '';
this.time_end = '';
this.defaultIndex = 0;
this.status_type = '全部';
}
// 查询数据
this.activity_list = [];
this.flag = true;
this.page = 0;
this.getList();
},
onStatusTypeCancel (event) {
this.show_status_popup = false;
},
onHostConfirm (event) {
const { picker, value, index } = event.detail;
this.show_host_popup = false;
this.host_id = value.key;
this.host_name = value.text;
// 查询数据
this.activity_list = [];
this.flag = true;
this.page = 0;
this.getList();
},
onHostCancel (event) {
this.show_host_popup = false;
},
onChange({ detail }) {
this.check_status = detail;
this.only_start = detail ? 1 : 0;
// 查询数据
this.activity_list = [];
this.flag = true;
this.page = 0;
this.getList();
}
},
};
</script>
......