269 lines
6.3 KiB
Vue
269 lines
6.3 KiB
Vue
<template>
|
||
<view class="detail">
|
||
<view class="box">
|
||
<view class="up">
|
||
<view>
|
||
<view>活动信息</view>
|
||
</view>
|
||
<view>
|
||
<text>活动主题：</text>
|
||
<text>{{applyInfo.activityTheme}}</text>
|
||
</view>
|
||
<view>
|
||
<text>活动时间：</text>
|
||
<text>{{activityInfo.activityTime}}</text>
|
||
</view>
|
||
<view>
|
||
<text>活动地点：</text>
|
||
<text>{{activityInfo.activityPlace}}</text>
|
||
</view>
|
||
<view>
|
||
<text>活动可容纳人数：</text>
|
||
<text>{{activityInfo.galleryful}}人</text>
|
||
</view>
|
||
<view>
|
||
<text>当前报名人数：</text>
|
||
<text>{{applyInfo.numberApplicants}}人</text>
|
||
</view>
|
||
</view>
|
||
<view class="lnthe">
|
||
<view>
|
||
具体要求
|
||
</view>
|
||
<view>
|
||
<text>具体要求：</text>
|
||
<text>{{activityInfo.specificRequirements}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="underthe">
|
||
<view>
|
||
<view>
|
||
报名信息
|
||
</view>
|
||
<view v-if="applyInfo.auditStatus==1" class="active">报名通过</view>
|
||
<view v-else-if="applyInfo.auditStatus==2" class="dark">不通过</view>
|
||
<view v-else class="staydark">待审核</view>
|
||
</view>
|
||
<view>
|
||
<text>报名人：</text>
|
||
<text>{{applyInfo.applicant}}</text>
|
||
</view>
|
||
<view>
|
||
<text>报名时间：</text>
|
||
<text>{{applyInfo.registrationTime}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="applyInfo.auditStatus==1">
|
||
<view>
|
||
活动注意事项
|
||
</view>
|
||
<view>
|
||
<text>请你于2024年06月12日，上午9点前，到综合楼1楼大厅集合，不允许迟到。</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 取消报名按钮 -->
|
||
<view v-if="canCancel()">
|
||
<button class="cancel-btn" @click="cancelApply"
|
||
style="width: 100% !important; background-color: #ff4757 !important; color: white !important;
|
||
border: none !important; font-size: 18px !important; line-height: 2.55555556 !important;
|
||
border-radius: 5px !important; padding: 0 14px !important; box-sizing: border-box !important;
|
||
text-align: center !important; min-height: 46px !important; margin-top: 50px !important;">
|
||
取消报名
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { applyDetail, cancelRegistration } from '@/api/OneStopCommunity/apply.js';
|
||
export default{
|
||
data(){
|
||
return{
|
||
activityInfo:{},//活动信息
|
||
applyInfo:{},//报名信息
|
||
headcount:null,
|
||
recordId: null
|
||
}
|
||
},
|
||
methods:{
|
||
async getdetail(recordid){
|
||
let res = await applyDetail(recordid)
|
||
console.log(res)
|
||
if(res.code==200){
|
||
this.activityInfo=res.data.communityActivitiesList[0]
|
||
this.applyInfo=res.data;
|
||
}
|
||
},
|
||
// 判断是否可以取消报名
|
||
canCancel() {
|
||
// 只有待审核(0)或已通过(1)的报名可以取消，已拒绝(2)的不能取消
|
||
if (this.applyInfo.auditStatus === 2) {
|
||
return false; // 已拒绝的不能取消
|
||
}
|
||
|
||
// 检查报名截止时间
|
||
if (this.activityInfo.signUpEndTime) {
|
||
const now = new Date();
|
||
const endTime = new Date(this.activityInfo.signUpEndTime);
|
||
if (now > endTime) {
|
||
return false; // 报名已截止
|
||
}
|
||
}
|
||
|
||
return true;
|
||
},
|
||
// 取消报名
|
||
cancelApply() {
|
||
uni.showModal({
|
||
title: '确认取消',
|
||
content: '确定要取消报名吗？取消后如需重新报名，请在报名截止时间前重新提交申请。',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
uni.showLoading({
|
||
title: '取消中...'
|
||
});
|
||
|
||
const result = await cancelRegistration(this.recordId);
|
||
|
||
uni.hideLoading();
|
||
|
||
if (result.code === 200) {
|
||
uni.showToast({
|
||
title: '取消报名成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 返回上一页并刷新
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg || '取消报名失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '取消报名失败',
|
||
icon: 'none'
|
||
});
|
||
console.error('取消报名失败:', error);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.recordId = option.recordid;
|
||
this.getdetail(option.recordid)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail{
|
||
min-height: 100vh;
|
||
background-color: #F5F5F7;
|
||
.box{
|
||
padding: 40rpx;
|
||
.up {
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 40rpx 20rpx 40rpx;
|
||
|
||
&>view:nth-child(1){
|
||
view{
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #202020;
|
||
}
|
||
&>view:nth-child(2){
|
||
|
||
}
|
||
}
|
||
&>view:nth-child(2){
|
||
margin-top: 40rpx;
|
||
}
|
||
&>view:nth-child(n+2){
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
.lnthe{
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 20rpx 20rpx 40rpx;
|
||
margin-top: 20rpx;
|
||
&>view:nth-child(1){
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
}
|
||
&>view:nth-child(2){
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
.underthe{
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 20rpx 20rpx 40rpx;
|
||
margin-top: 20rpx;
|
||
&>view:nth-child(1){
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.active{
|
||
background-color: #E7FAF0;
|
||
border: 1px solid #D0F5E0;
|
||
font-size: 20rpx;
|
||
color: #71E2A3;
|
||
padding: 8rpx 18rpx;
|
||
}
|
||
.dark{
|
||
background-color: #FFDBDB;
|
||
border: 1px solid #FF9292;
|
||
font-size: 20rpx;
|
||
color:#FF9292;
|
||
padding: 8rpx 18rpx;
|
||
}
|
||
.staydark{
|
||
background-color: #FFF8E6;
|
||
border: 1px solid #FFE399;
|
||
font-size: 20rpx;
|
||
color:#FFBA00;
|
||
padding: 8rpx 18rpx;
|
||
}
|
||
}
|
||
&>view:nth-child(2){
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
&>view:nth-child(4){
|
||
background-color: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 20rpx 20rpx 40rpx;
|
||
margin-top: 20rpx;
|
||
color: #1890ff;
|
||
&>view:nth-child(1){
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
}
|
||
&>view:nth-child(2){
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #ff4757 !important;
|
||
color: white;
|
||
margin-top: 100rpx;
|
||
}
|
||
}
|
||
</style> |