mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 10:56:47 +08:00
417 lines
11 KiB
Vue
417 lines
11 KiB
Vue
<template>
|
|
<div class="activities">
|
|
<ReturnHead text="活动详情"></ReturnHead>
|
|
<div class="main">
|
|
<div class="notice" :style="{ display: closeBtn ? 'flex' : 'none' }">
|
|
<span class="text">{{ data?.activityNotice }}</span>
|
|
<span class="close" @click="isShowClose"></span>
|
|
</div>
|
|
<div class="title">
|
|
<div class="titlemain">
|
|
<div class="timeposition">
|
|
<div
|
|
calss="titlecontent"
|
|
style="
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 21.6px;
|
|
margin-bottom: 8px;
|
|
"
|
|
>
|
|
{{ data?.activityName }}
|
|
</div>
|
|
<div class="time">
|
|
<img
|
|
style="width: 13px; height: 14.5px; margin-right: 5.5px"
|
|
src="../../assets/image/faceteach/time.png"
|
|
/>
|
|
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
|
{{ data?.activityStartTime ? data?.activityStartTime : "-" }} 至
|
|
{{ data?.activityEndTime ? data?.activityEndTime : "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="time" style="margin-top: 9px">
|
|
<img
|
|
style="width: 13px; height: 15px; margin-right: 5.5px"
|
|
src="../../assets/image/faceteach/position.png"
|
|
/>
|
|
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
|
{{ data?.activityAddress }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="projectStatus && projectEndTime" class="sign">
|
|
<div
|
|
v-if="
|
|
projectStatus !== '3' &&
|
|
new Date(projectEndTime).getTime() > new Date().getTime()
|
|
"
|
|
class="sign"
|
|
>
|
|
<botton
|
|
v-if="isAllowSign"
|
|
class="btn"
|
|
:style="{
|
|
background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
|
|
}"
|
|
@click="signClick"
|
|
>{{ data.signFlag ? "已签到" : "签到" }}
|
|
</botton>
|
|
<botton
|
|
v-else
|
|
class="btn"
|
|
:style="{ background: '#999' }"
|
|
@click="signClick"
|
|
>{{ data.signFlag ? "已签到" : "签到" }}
|
|
</botton>
|
|
</div>
|
|
</div>
|
|
<div v-else class="sign">
|
|
<div class="sign">
|
|
<button
|
|
v-if="isAllowSign"
|
|
class="btn"
|
|
:style="{
|
|
background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
|
|
}"
|
|
@click="signClick"
|
|
>
|
|
{{ data.signFlag ? "已签到" : "签到" }}
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="btn"
|
|
:style="{ background: '#999' }"
|
|
@click="signClick"
|
|
>
|
|
{{ data.signFlag ? "已签到" : "签到" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="details_title">活动详情</div>
|
|
<div class="details_content">
|
|
<div>
|
|
<span>活动时长：</span>
|
|
<div class="content">
|
|
{{
|
|
data?.activityDuration ? data?.activityDuration + "分钟" : "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>活动地点：</span>
|
|
<div class="content">
|
|
{{ data?.activityAddress ? data?.activityAddress : "-" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>活动考勤：</span>
|
|
<div class="content">
|
|
{{
|
|
data?.beforeSignIn
|
|
? "活动开始前" + data?.beforeSignIn + "分钟开始签到"
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="content">
|
|
{{
|
|
data?.afterSignIn
|
|
? "活动开始后" + data?.afterSignIn + "分钟结束签到"
|
|
: "-"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div>
|
|
<div>活动完成标准：</div>
|
|
<div class="content">
|
|
{{ data?.standardSettings ? "仅签到" : "-" }}
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<div>
|
|
<span>活动说明：</span>
|
|
<div class="content">
|
|
{{ data?.activityExplain ? data?.activityExplain : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { TASK_ACTIVITY_SIGN, ACTIVITY } from "@/api/api";
|
|
import { request, useRequest } from "@/api/request";
|
|
import { useRouter } from "vue-router";
|
|
import { useRoute } from "vue-router/dist/vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import { reactive, onUnmounted, toRefs, watch } from "vue";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const {
|
|
query: { courseId: activityId, id: taskId, type },
|
|
} = useRoute();
|
|
console.log("query", activityId, taskId, type);
|
|
const state = reactive({
|
|
isAllowSign: false,
|
|
closeBtn: true,
|
|
});
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
const { isAllowSign, closeBtn } = toRefs(state);
|
|
|
|
const { data } = useRequest(ACTIVITY, { activityId, type }, (e) => {
|
|
if (e.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log("data", data);
|
|
const signClick = (tab, event) => {
|
|
if (data.value.signFlag) {
|
|
return;
|
|
}
|
|
|
|
if (!state.isAllowSign) {
|
|
// console.log("data.signFlag", data.value.signFlag, isAllowSign);
|
|
ElMessage.warning("未在允许签到时间范围内");
|
|
return;
|
|
}
|
|
|
|
data.value.signFlag = true;
|
|
ElMessage.warning("签到成功");
|
|
request(TASK_ACTIVITY_SIGN, {
|
|
courseId: activityId,
|
|
taskId,
|
|
type,
|
|
});
|
|
};
|
|
let timer = null;
|
|
//判断能否签到
|
|
function isSignClick() {
|
|
// timer = setInterval(() => {
|
|
let beginTime = new Date(data.value.activityStartTime).getTime();
|
|
let endTime = !data.value.afterSignIn
|
|
? new Date(data.value.activityEndTime).getTime()
|
|
: new Date(data.value.activityStartTime).getTime();
|
|
let nowTime = new Date().getTime();
|
|
if (
|
|
data.value.beforeSignIn &&
|
|
data.value.afterSignIn &&
|
|
data.value.beforeSignIn !== "0" &&
|
|
data.value.afterSignIn !== "0"
|
|
) {
|
|
//有开始前有开始后
|
|
beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
|
|
endTime = endTime + data.value.afterSignIn * 60 * 1000;
|
|
console.log("1111");
|
|
} else if (
|
|
data.value.beforeSignIn &&
|
|
!data.value.afterSignIn &&
|
|
data.value.beforeSignIn !== "0" &&
|
|
data.value.afterSignIn !== "0"
|
|
) {
|
|
//只有开始前无开始后
|
|
beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
|
|
console.log("11112222");
|
|
} else if (
|
|
!data.value.beforeSignIn &&
|
|
data.value.afterSignIn &&
|
|
data.value.beforeSignIn !== "0" &&
|
|
data.value.afterSignIn !== "0"
|
|
) {
|
|
//无开始前有开始后
|
|
endTime = endTime + data.value.afterSignIn * 60 * 1000;
|
|
console.log("1111333");
|
|
}
|
|
|
|
// console.log(nowTime, beginTime, endTime, data.value);
|
|
// console.log(nowTime < endTime, nowTime > beginTime);
|
|
// console.log(state.isAllowSign);
|
|
if (nowTime < endTime && nowTime > beginTime) {
|
|
state.isAllowSign = true;
|
|
} else {
|
|
state.isAllowSign = false;
|
|
}
|
|
// console.log(
|
|
// "isAllowSign",
|
|
// state.isAllowSign,
|
|
// nowTime,
|
|
// endTime,
|
|
// beginTime,
|
|
// nowTime < endTime,
|
|
// nowTime > beginTime
|
|
// );
|
|
// }, 1000);
|
|
}
|
|
watch(data, () => {
|
|
isSignClick();
|
|
});
|
|
// isSignClick();
|
|
|
|
//是否显示头部公告
|
|
const isShowClose = () => {
|
|
state.closeBtn = false;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.activities {
|
|
width: 100%;
|
|
|
|
.main {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
//margin-top: -14.5px;
|
|
.notice {
|
|
background-color: rgba(255, 251, 238, 1);
|
|
width: 100%;
|
|
height: 25px;
|
|
display: flex;
|
|
// justify-content: center;
|
|
position: relative;
|
|
|
|
.text {
|
|
//display: flex;
|
|
height: 25px;
|
|
//position: absolute;
|
|
color: rgba(255, 158, 0, 1);
|
|
padding: 6px 41px 6.5px 15.5px;
|
|
font-size: 12px;
|
|
//line-height: 24px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.close {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 9.5px;
|
|
height: 9.5px;
|
|
background-image: url(../../assets/image/pathmap/close.png);
|
|
margin-top: 10px;
|
|
margin-right: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
//height: 74px;
|
|
//border-radius: 4px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.titlemain {
|
|
width: 90%;
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: 15px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.timeposition {
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
width: calc(100% - 93px);
|
|
// background-color: pink;
|
|
}
|
|
|
|
.titlebtn {
|
|
width: 83px;
|
|
height: 33px;
|
|
background: rgba(0, 150, 250, 1);
|
|
//box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.sign {
|
|
width: 93px;
|
|
height: 33px;
|
|
.btn {
|
|
width: 93px;
|
|
height: 33px;
|
|
border-radius: 6px;
|
|
border: 0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.details {
|
|
width: 100%;
|
|
margin-top: 11.5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
padding-bottom: 20px;
|
|
|
|
.details_title {
|
|
width: 90%;
|
|
display: flex;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 12px;
|
|
color: rgba(13, 35, 58, 1);
|
|
padding: 17px 0 17px 0px;
|
|
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
|
}
|
|
|
|
.details_content {
|
|
// display: flex;
|
|
width: 90%;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
color: rgba(110, 123, 132, 1);
|
|
line-height: 30.29px;
|
|
.content {
|
|
// margin: 25px 24px 49px 49px;
|
|
color: #677d86;
|
|
width: 361px;
|
|
// height: 304px;
|
|
// line-height: 24px;
|
|
// font-size: 16px;
|
|
font-weight: bold;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|