添加用户协议

2022-06-20 17:05:39 +08:00
parent 57e3785445
commit 2170c339eb
5 changed files with 188 additions and 13 deletions
--- a/src/components/agreement.vue
+++ b/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>
--- a/src/views/appointment.vue
+++ b/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";
--- a/src/views/meeting.vue
+++ b/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 (
-      now.value.isAfter(questionnaireStartTime) &&
-      now.value.isBefore(meetingEndTime)
-    );
+    const now = dayjs();
+    return now.isAfter(questionnaireStartTime) && now.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") {
--- a/src/views/panelist-verify.vue
+++ b/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}`);
 };
--- a/src/views/verify.vue
+++ b/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);