添加用户协议

src/components/agreement.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-dialog
+      custom-class="check-media"
+      destroy-on-close
+      :model-value="showDialog"
+      :fullscreen="screenWidth < 900"
+      :show-close="false"
+      width="40%"
+      title="用户协议"
+    >
+      <div class="agreement-body">
+        <div class="title">楚桓会议系统用户信息协议</div>
+        <div class="content">
+          <p>
+            对本公司在提供服务过程中获取的您的个人信息，仅用于本次会议使用和会议举办方使用，本公司将按照法律法规予以妥善保管，您悉知并同意。
+          </p>
+          <p>
+            请您仔细阅读用户信息协议，并同意使用电子同意的方式代替书面签名同意。您点击按钮后，即视为已经了解并悉知此同意书。
+          </p>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="decline">拒绝</el-button>
+          <el-button type="primary" @click="agree">同意</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, toRefs } from "vue";
+
+const props = defineProps({
+  showDialog: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["agree", "close", "decline"]);
+const { showDialog } = toRefs(props);
+const screenWidth = ref(screen.width);
+const close = () => {
+  emit("close");
+};
+const decline = () => {
+  emit("decline");
+  close();
+};
+const agree = () => {
+  emit("agree");
+  close();
+};
+</script>
+<style lang="scss" scoped>
+// :deep(.el-dialog__body) {
+.agreement-body {
+  .title {
+    font-size: 18px;
+    font-weight: 700;
+    text-align: center;
+  }
+  .content {
+    font-size: 16px;
+    text-indent: 2em;
+  }
+}
+// }
+</style>

src/views/appointment.vue

@@ -29,7 +29,11 @@
         </div>
         <div class="joinuser-item" v-if="fieldConfig.phone">
           <el-form-item label="手机号" prop="phone">
-            <el-input v-model="appointForm.phone" maxlength="11" placeholder="请输入手机号" />
+            <el-input
+              v-model="appointForm.phone"
+              maxlength="11"
+              placeholder="请输入手机号"
+            />
           </el-form-item>
         </div>
         <div class="joinuser-item" v-if="fieldConfig.unit">
@@ -185,6 +189,22 @@
 
       <el-row type="flex" justify="center"> </el-row>
     </el-form>
+
+    <div
+      class="agreement"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #333;
+      "
+    >
+      <el-checkbox v-model="isAgreeAgreement"></el-checkbox><span>同意</span>
+      <el-button type="text" @click="showUserAgreement = true">
+        楚桓会议系统用户信息协议
+      </el-button>
+    </div>
     <div style="display: flex; justify-content: center">
       <el-button type="primary" @click="submitAppointment(appointRef)"
         >预约</el-button
@@ -205,15 +225,24 @@
       </el-result>
     </el-col></el-row
   >
+  <agreement
+    :show-dialog="showUserAgreement"
+    @close="showUserAgreement = false"
+    @agree="isAgreeAgreement = true"
+    @decline="isAgreeAgreement = false"
+  />
 </template>
 
 <script setup>
 import { reactive, ref, toRefs } from "vue";
 import { getMeetingDetailById, newAppointment } from "@/api/meeting";
 import { ElMessage } from "element-plus";
+import agreement from "@/components/agreement.vue";
 import { useRoute } from "vue-router";
 import _ from "lodash";
+import { useStore } from "vuex";
 const route = useRoute();
+const store = useStore();
 const data = reactive({
   appointForm: {
     status: "0",
@@ -399,6 +428,17 @@ const meetingId = ref(0);
 
 meetingId.value = route.params.meetingId;
 
+const showUserAgreement = ref(false); // 是否显示用户协议弹窗
+const isAgreeAgreement = ref(false); // 是否同意协议
+
+// const agreeAgreement = () => {
+//   isAgreeAgreement.value = true;
+//   // showUserAgreement.value = true;
+// };
+// const declineAgreement = () => {
+//   isAgreeAgreement.value = false;
+//   // showUserAgreement.value = true;
+// };
 // 根据会议id获取详情
 const loadMeetingDetail = async (meetingId) => {
   const { data } = await getMeetingDetailById(meetingId);
@@ -433,6 +473,10 @@ const setJoinUserDefaultValue = () => {
 const appointRef = ref(null);
 const submitAppointment = async (appointRef) => {
   await appointRef.validate();
+  if (!isAgreeAgreement.value) {
+    ElMessage.error("请勾选同意用户协议");
+    return;
+  }
   try {
     const resp = await newAppointment(appointForm.value);
     appointStatus.value = "success";

src/views/meeting.vue

@@ -201,9 +201,8 @@ const meetingConfig = reactive({
   registrantToken: route.name === "Host" ? "" : store.getters.token,
 });
 
-// 是否在签到时间段内
 const isDuringExamPeriod = ref(false);
-isDuringExamPeriod = (() => {
+isDuringExamPeriod.value = (() => {
   const examStartTime = dayjs(store.state.meeting.examStartTime);
   const meetingEndTime = dayjs(store.state.meeting.startTime).add(
     store.state.meeting.duration,
@@ -220,7 +219,8 @@ isDuringExamPeriod = (() => {
 const handleReOpenExam = () => {
   showExamDialog.value = true;
 };
-const isDuringQuestionnairePeriod = computed(() => {
+const isDuringQuestionnairePeriod = ref(false);
+isDuringQuestionnairePeriod.value = (() => {
   const questionnaireStartTime = dayjs(
     store.state.meeting.questionnaireStartTime
   );
@@ -231,12 +231,10 @@ const isDuringQuestionnairePeriod = computed(() => {
   if (!questionnaireStartTime) {
     return false;
   } else {
-    return (
+    const now = dayjs();
-      now.value.isAfter(questionnaireStartTime) &&
+    return now.isAfter(questionnaireStartTime) && now.isBefore(meetingEndTime);
-      now.value.isBefore(meetingEndTime)
-    );
   }
-});
+})();
 // 开始会议
 const startMeeting = async () => {
   const { sign } = await generateSignature({
@@ -666,16 +664,19 @@ const initWebSocket = () => {
     // 开始考试时
     else if (data.type === "isStartExam" && route.name === "Meeting") {
       showExamDialog.value = true;
+      isDuringExamPeriod.value = true;
     }
     // 开始问卷时
     else if (data.type === "isStartQuestionnaire" && route.name === "Meeting") {
       showQuestionnaireDialog.value = true;
+      isDuringQuestionnairePeriod.value = true;
     }
     // 会议结束时
     else if (data.type === "isCloseMeeting") {
       showExamDialog.value = false;
       showQuestionnaireDialog.value = false;
       isDuringExamPeriod.value = false;
+      isDuringQuestionnairePeriod.value = false;
       ElMessageBox.alert("会议已结束");
       socket.close();
       if (route.name === "Meeting") {

src/views/panelist-verify.vue

@@ -30,19 +30,43 @@
       </div>
       <el-row type="flex" justify="center"> </el-row>
     </el-form>
+    <div
+      class="agreement"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #333;
+      "
+    >
+      <el-checkbox v-model="isAgreeAgreement"></el-checkbox>
+      <el-button type="text" @click="showUserAgreement = true"
+        ><span>同意</span>
+        楚桓会议系统用户信息协议
+      </el-button>
+    </div>
+
     <div style="display: flex; justify-content: center">
       <el-button type="primary" @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
     </div>
   </div>
+  <agreement
+    :show-dialog="showUserAgreement"
+    @close="showUserAgreement = false"
+    @agree="isAgreeAgreement = true"
+    @decline="isAgreeAgreement = false"
+  />
 </template>
 
 <script setup>
 import { reactive, ref, toRefs } from "vue";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
-
+import { ElMessage } from "element-plus";
+import agreement from "@/components/agreement.vue";
 import _ from "lodash";
 const store = useStore();
 const router = useRouter();
@@ -76,11 +100,17 @@ const meetingId = ref(route.params.meetingId);
 
 meeting.value = _.cloneDeep(store.state.meeting);
 newJoinUser.value.meetingId = meetingId.value;
+
+const showUserAgreement = ref(false); // 是否显示用户协议弹窗
+const isAgreeAgreement = ref(false); // 是否同意协议
+
 const newJoinUserRef = ref(null);
 const submitVerify = async (newJoinUserRef) => {
-  console.log(newJoinUser.value);
+  if (!isAgreeAgreement.value) {
+    ElMessage.error("请勾选同意用户协议");
+    return;
+  }
   const valid = await newJoinUserRef.validate();
-  console.log(valid);
   store.commit("setJoinUser", newJoinUser.value);
   router.push(`/panelist/${meetingId.value}`);
 };

src/views/verify.vue

@@ -333,20 +333,43 @@
       </div>
       <el-row type="flex" justify="center"> </el-row>
     </el-form>
+
+    <div
+      class="agreement"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #333;
+      "
+    >
+      <el-checkbox v-model="isAgreeAgreement"></el-checkbox><span>同意</span>
+      <el-button type="text" @click="showUserAgreement = true">
+        楚桓会议系统用户信息协议
+      </el-button>
+    </div>
     <div style="display: flex; justify-content: center">
       <el-button type="primary" @click="submitVerify(newJoinUserRef)"
         >加入会议</el-button
       >
     </div>
   </div>
+  <agreement
+    :show-dialog="showUserAgreement"
+    @close="showUserAgreement = false"
+    @agree="isAgreeAgreement = true"
+    @decline="isAgreeAgreement = false"
+  />
 </template>
 
 <script setup>
 import { reactive, ref, toRefs } from "vue";
 import { registerJoinUser, visitorJoinUser } from "@/api/meeting";
+import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
-
+import agreement from "@/components/agreement.vue";
 import _ from "lodash";
 const store = useStore();
 const router = useRouter();
@@ -524,6 +547,9 @@ const meetingId = ref(route.params.meetingId);
 
 meeting.value = _.cloneDeep(store.state.meeting);
 
+const showUserAgreement = ref(false); // 是否显示用户协议弹窗
+const isAgreeAgreement = ref(false); // 是否同意协议
+
 if (data.fieldConfig) {
   fieldConfig.value = JSON.parse(meeting.value.fieldConfig);
 }
@@ -553,6 +579,10 @@ setJoinUserDefaultValue();
 const newJoinUserRef = ref(null);
 const submitVerify = async (newJoinUserRef) => {
   await newJoinUserRef.validate();
+  if (!isAgreeAgreement.value) {
+    ElMessage.error("请勾选同意用户协议");
+    return;
+  }
   console.log(meeting.value.joinType);
   if (meeting.value.joinType === "1") {
     store.commit("setJoinUser", newJoinUser.value);