Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
90e0df53 1 parent 173f6269

新增我参加的活动页面

Inline Side-by-side
Showing 3 changed files with 212 additions and 0 deletions
/*
* @Date: 2022-09-29 09:45:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-08 10:31:49
* @FilePath: /swx/src/pages/myActivityList/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '参加的活动',
usingComponents: {
},
}
.join-list-page {
.join-list-header {
background-color: #FFFFFF;
.header-info {
display: flex;
text-align: center;
padding-bottom: 1rem;
margin-top: 0.5rem;
.activity {
flex: 1;
height: 50rpx;
line-height: 50rpx;
}
.job {
flex: 1;
border-right: 1px solid #F5F5F5;
border-left: 1px solid #F5F5F5;
height: 100rpx;
line-height: 50rpx;
}
.sign {
flex: 1;
height: 50rpx;
line-height: 50rpx;
}
}
}
.activity-title {
background-color: #FFFFFF;
.box {
padding: 1rem 1rem 0.5rem 1rem;
}
}
.bg-gradient {
background: linear-gradient(#B3DDC9, #B3DDC9) no-repeat;
/*调整下划线的宽度占百分之百 高度是3px */
background-size: 100% 1vw;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.1rem;
}
.inactivate {
font-size: 1rem;
color: #999999;
}
.list-item {
background-color: white;
padding: 0.75rem;
border-radius: 0.65rem;
position: relative;
margin-bottom: 1rem;
.avatar {
width: 100%;
height: 5rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 0.5rem;
}
.content {
padding: 0.5rem 1rem;
.title {
font-size: 1.25rem;
}
.phone {
color: #199A74;
margin-top: 0.5rem;
}
}
}
}
<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;">
&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>
</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>