index.vue
4.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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;">
{{ status_type === '' ? '全部' : status_type }}
<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>