注册协议

src/views/bookShelf/components/PrintModel.vue

@@ -530,7 +530,11 @@
           </div>
           <el-divider class="print-divider"></el-divider>
         </div>
-        <div class="item-page" style="padding: 24px 24px 0 24px">
+
+        <p style="color: red; width: 100%; margin: 10px 0; text-align: center">
+          若点击打印按钮无法显示，下一个页面点击更多设置，勾选背景图形
+        </p>
+        <div class="item-page" style="padding: 0 24px">
           <el-button @click="goBack" size="small">取消</el-button>
           <el-button type="primary" @click="handlePrint" size="small"
             >打印</el-button
@@ -1215,7 +1219,7 @@ export default {
       right: calc((100% - 1450px) / 2);
       height: calc(100% - 48px);
       .config-box {
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow: auto;
         padding: 0 24px;
       }

src/views/login.vue

@@ -64,8 +64,12 @@
         <el-form-item prop="userAgreeCheck" class="userAgree-box">
           <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
             <el-checkbox label="1" name="userAgreeCheck"
-              ><a @click.prevent="lookUserAgreement"
-                >阅读并同意《用户协议》</a
+              ><a @click.prevent=""
+                >阅读并同意<span
+                  style="color: #4d78ff; cursor: pointer"
+                  @click="lookUserAgreement('loginPwdForm')"
+                  >《用户协议》</span
+                ></a
               ></el-checkbox
             >
           </el-checkbox-group>
@@ -129,8 +133,12 @@
         <el-form-item prop="userAgreeCheck" class="userAgree-box">
           <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
             <el-checkbox label="1" name="userAgreeCheck"
-              ><a @click.prevent="lookUserAgreement"
-                >阅读并同意《用户协议》</a
+              ><a @click.prevent=""
+                >阅读并同意<span
+                  style="color: #4d78ff; cursor: pointer"
+                  @click="lookUserAgreement('loginCodeForm')"
+                  >《用户协议》</span
+                ></a
               ></el-checkbox
             >
           </el-checkbox-group>
@@ -152,6 +160,20 @@
       <!-- </template> -->
     </div>
     <forgot-pwd @cancelFot="cancelFot" v-if="forgotPwdFlag"></forgot-pwd>
+    <el-dialog
+      :visible.sync="showUseragreement"
+      width="80%"
+      :append-to-body="true"
+      :modal="false"
+      :show-close="false"
+      :close-on-click-modal="false"
+      class="login-userAgree"
+    >
+      <userAgreement
+        class="userAgree-login"
+        :change-agreement="changeAgreement"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -159,10 +181,11 @@
 import { getLogin } from "@/api/ajax";
 import { setToken } from "@/utils/auth";
 import ForgotPwd from "./forgotPwd.vue";
+import UserAgreement from "./userAgreement.vue";
 export default {
   name: "login",
   props: ["toUrl", "linkType"],
-  components: { ForgotPwd },
+  components: { ForgotPwd, UserAgreement },
   data() {
     const validatePhone = (rule, value, callback) => {
       if (this.tabsIndex === 1) {
@@ -223,6 +246,7 @@ export default {
       loading: false,
       timer: null,
       forgotPwdFlag: false,
+      showUseragreement: false,
     };
   },
   watch: {},
@@ -235,7 +259,22 @@ export default {
       this[flag] = !this[flag];
     },
     // 查看用户协议
-    lookUserAgreement() {},
+    lookUserAgreement() {
+      this.showUseragreement = true;
+    },
+    changeAgreement(flag) {
+      if (flag) {
+        if (this.tabsIndex === 0) {
+          this.loginPwdForm.userAgreeCheck = ["1"];
+        } else {
+          this.loginCodeForm.userAgreeCheck = ["1"];
+        }
+      } else {
+        this.loginPwdForm.userAgreeCheck = [];
+        this.loginCodeForm.userAgreeCheck = [];
+      }
+      this.showUseragreement = false;
+    },
     // 密码登录提交表单
     onSubmitPassword(formName) {
       this.$refs[formName].validate((valid) => {
@@ -527,4 +566,21 @@ export default {
     }
   }
 }
+.login-userAgree {
+  .el-dialog {
+    height: 70%;
+    border-radius: 8px;
+  }
+
+  .el-dialog__header {
+    padding: 0;
+  }
+
+  .el-dialog__body {
+    height: 100%;
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
+  }
+}
 </style>

src/views/register.vue

@@ -81,6 +81,15 @@
           >
           </el-cascader>
         </el-form-item>
+        <el-form-item label="学校" prop="school">
+          <el-input
+            type="text"
+            v-model="registerForm.school"
+            placeholder="请输入学校"
+            maxlength="100"
+            @blur="handleTrim('registerForm', 'school')"
+          ></el-input>
+        </el-form-item>
         <el-form-item label="备注" prop="desc">
           <el-input
             type="textarea"
@@ -110,7 +119,7 @@
             >
             </el-option>
           </el-select>
-          <p class="tips">输入机构代码或手动选择</p>
+          <p class="tips">输入机构代码或手动选择，个人用户勿选</p>
         </el-form-item>
         <el-divider content-position="left">安全信息</el-divider>
         <el-form-item label="手机号" prop="phone">
@@ -193,8 +202,12 @@
         >
           <el-checkbox-group v-model="registerForm.userAgreeCheck">
             <el-checkbox label="1" name="userAgreeCheck"
-              ><a @click.prevent="lookUserAgreement"
-                >阅读并同意《用户协议》</a
+              ><a @click.prevent=""
+                >阅读并同意<span
+                  style="color: #4d78ff; cursor: pointer"
+                  @click="lookUserAgreement"
+                  >《用户协议》</span
+                ></a
               ></el-checkbox
             >
           </el-checkbox-group>
@@ -213,6 +226,20 @@
         </el-form-item>
       </el-form>
     </div>
+    <el-dialog
+      :visible.sync="showUseragreement"
+      width="80%"
+      :append-to-body="true"
+      :modal="false"
+      :show-close="false"
+      :close-on-click-modal="false"
+      class="login-userAgree"
+    >
+      <userAgreement
+        class="userAgree-login"
+        :change-agreement="changeAgreement"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -225,9 +252,10 @@ import { getLogin } from "@/api/ajax";
 import Cookies from "js-cookie";
 import { mapState } from "vuex";
 import { setToken } from "@/utils/auth";
+import UserAgreement from "./userAgreement.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, Upload },
+  components: { Header, Upload, UserAgreement },
   props: [],
   data() {
     //这里存放数据
@@ -308,6 +336,7 @@ export default {
         sex: 1,
         selectedOptions: [],
         desc: "",
+        school: "",
         phone: "",
         email: "",
         newPwd: "", // 密码
@@ -353,7 +382,7 @@ export default {
             trigger: "change",
           },
         ],
-        region: [{ required: true, message: "请选择机构", trigger: "change" }],
+        // region: [{ required: true, message: "请选择机构", trigger: "change" }],
         email: [{ validator: validateEmail, trigger: "blur" }],
       },
       orgList: [], // 筛选之后 机构列表
@@ -364,6 +393,7 @@ export default {
       coverFlag: false,
       loading: false,
       show: false,
+      showUseragreement: false,
     };
   },
   //计算属性 类似于data概念
@@ -421,6 +451,7 @@ export default {
             phone: form.phone,
             city_id: form.selectedOptions[1],
             memo: form.desc,
+            school: form.school,
             password: form.newPwd,
           };
           getLogin(MethodName, data)
@@ -502,6 +533,18 @@ export default {
     handleTrim(form, fild) {
       this[form][fild] = this[form][fild].trim();
     },
+    // 查看用户协议
+    lookUserAgreement() {
+      this.showUseragreement = true;
+    },
+    changeAgreement(flag) {
+      if (flag) {
+        this.registerForm.userAgreeCheck = ["1"];
+      } else {
+        this.registerForm.userAgreeCheck = [];
+      }
+      this.showUseragreement = false;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
@@ -671,5 +714,30 @@ export default {
   .show-icon {
     color: #4e5969;
   }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #165dff;
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background: #165dff;
+    border-color: #165dff;
+  }
+}
+.login-userAgree {
+  .el-dialog {
+    height: 70%;
+    border-radius: 8px;
+  }
+
+  .el-dialog__header {
+    padding: 0;
+  }
+
+  .el-dialog__body {
+    height: 100%;
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 25%);
+  }
 }
 </style>

src/views/userAgreement.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="userAgreementBox">
+    <div class="userAgreement-inner">
+      <h1>二十一世纪智慧阅读平台用户协议</h1>
+      <h2>
+        二十一世纪智慧阅读平台用户协议（以下简称“本协议”）由以下双方根据《中华人民共和国民法典》等相关法律法规签署并遵照执行。
+      </h2>
+      <h3>第一章 总则</h3>
+      <div class="userAgreement-item">
+        <b>定义：</b>
+        <p>
+          本协议中的 “平台”
+          是指由平台独立开发、运营的二十一世纪智慧阅读平台，提供用户注册、登录、发布信息、互动交流等在线服务。“用户”
+          是指同意本协议并在平台上注册、使用服务的个人或单位。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>适用范围：</b>
+        <p>
+          本协议适用于用户在平台上注册、登录、使用服务的行为。用户在使用平台服务过程中，应遵守本协议及平台发布的各项规章制度。
+        </p>
+      </div>
+
+      <br />
+      <h3>第二章 用户注册</h3>
+      <div class="userAgreement-item">
+        <b>用户资格：</b>
+        <p>
+          用户应为具有完全民事行为能力的自然人、法人或其他组织。无民事行为能力人或限制民事行为能力人注册需要监护人的同意或参与。用户承诺所提供的注册信息真实、准确、完整，并对其负责。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>注册流程：</b>
+        <p>
+          用户需按照平台提示填写相关注册信息，包括但不限于姓名、联系方式、邮箱等。用户注册成功后，平台将给予用户一个用户账号，用户应妥善保管账号及密码。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>用户名及密码：</b>
+        <p>
+          用户应自行设置易于记忆且不易被他人猜到的用户名及密码。用户不得将账号及密码泄露给他人，否则由此产生的损失由用户自行承担。
+        </p>
+      </div>
+      <br />
+      <h3>第三章 用户权益与义务</h3>
+      <div class="userAgreement-item">
+        <b>用户权益：</b>
+        <p>
+          用户有权在平台上发布、浏览、评论、转发信息。用户有权参加平台组织的各类活动，享受相应的权益。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b style="color: red">用户线上退款原则：</b>
+      </div>
+      <div class="userAgreement-item userAgreement-item-little">
+        <b style="color: red">1.</b>
+        <p style="color: red">
+          报刊/画刊/精读课：单期订阅不退款；多期预定退款依照发行时间执行，已发行的部分不退，未发行的部分退款。
+        </p>
+      </div>
+      <div class="userAgreement-item userAgreement-item-little">
+        <b style="color: red">2.</b>
+        <p style="color: red">视频课：原则上不退款。</p>
+      </div>
+      <div class="userAgreement-item">
+        <b>用户义务：</b>
+        <p>
+          用户应遵守国家法律法规，不得在平台上发布违法、违规信息。用户应尊重他人权益，不得在平台上发布侮辱、诽谤、侵犯他人权益的信息。
+        </p>
+      </div>
+      <br />
+      <h3>第四章 信息安全与隐私保护</h3>
+      <div class="userAgreement-item">
+        <b>信息安全：</b>
+        <p>
+          平台承诺采取技术措施，保证平台信息的完整性、安全性。用户应加强自我保护意识，谨慎分享个人信息，避免泄露。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>隐私保护：</b>
+        <p>
+          平台承诺保护用户的隐私，未经用户同意，不向第三方透露用户个人信息。平台在法律允许的范围内，有权对用户在平台上的行为进行监督、管理。
+        </p>
+      </div>
+      <br />
+      <h3>第五章 违约责任</h3>
+      <div class="userAgreement-item">
+        <b>平台违约责任：</b>
+        <p>
+          平台违反本协议，导致用户权益受损的，应承担相应的法律责任。平台因不可抗力导致服务中断，应及时通知用户，并尽快恢复服务。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>用户违约责任：</b>
+        <p>
+          用户违反本协议，导致他人权益受损的，应承担相应的法律责任。用户在平台上发布违法、违规信息，平台有权删除相关信息，并保留追究用户法律责任的权利。
+        </p>
+      </div>
+      <br />
+      <h3>第六章 平台服务</h3>
+      <div class="userAgreement-item">
+        <b>服务内容：</b>
+        <p>
+          平台提供平台用户注册、信息发布、信息检索、互动交流等服务。平台根据业务发展，有权增加或调整平台服务内容。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>服务质量：</b>
+        <p>
+          平台应保证平台服务的稳定性、可靠性，及时修复平台故障。平台在平台升级、维护期间，应提前通知用户，并尽可能缩短服务中断时间。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>服务变更与终止：</b>
+        <p>
+          平台有权根据业务需要，变更或终止部分服务功能。用户违反本协议，平台有权暂停或终止用户使用平台服务的权利。
+        </p>
+      </div>
+      <br />
+      <h3>第七章 用户行为规范</h3>
+      <div class="userAgreement-item">
+        <b>信息发布：</b>
+        <p>
+          用户发布的信息应真实、合法、有效，不得含有虚假、违法内容。用户不得利用平台发布广告、推销商品或服务，除非得到平台书面同意。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>互动交流：</b>
+        <p>
+          用户在平台上的言论应遵守法律法规，不得发布不良信息。用户应尊重他人，不得在平台上进行人身攻击、诽谤、骚扰等行为。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>用户行为管理：</b>
+        <p>
+          平台有权对用户在平台上的行为进行监督、管理，对违规行为进行处罚。用户应主动接受平台的管理，对平台的合理要求予以配合。
+        </p>
+      </div>
+      <br />
+      <h3>第八章 版权与知识产权</h3>
+      <div class="userAgreement-item">
+        <b>版权声明：</b>
+        <p>
+          平台上的内容，包括但不限于文字、图片、音频、视频等，均属于平台或相关权利人所有。用户不得未经授权，复制、传播、修改、翻译平台上的内容。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>知识产权保护：</b>
+        <p>
+          用户应尊重他人的知识产权，不得在平台上发布侵犯他人知识产权的信息。用户如发觉平台上有侵犯自己知识产权的行为，可向平台举报，平台将依法处理。
+        </p>
+      </div>
+      <br />
+      <h3>第九章 争议解决</h3>
+      <div class="userAgreement-item">
+        <b>争议解决方式：</b>
+        <p>
+          双方因本协议产生的争议，应优先通过友好协商解决。协商不成时，任何一方均可向平台所在地的人民法院提起诉讼。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>争议期间服务：</b>
+        <p>
+          争议期间，双方应继续履行本协议，除非法律另有规定。平台有权根据争议情况，暂停或终止用户使用平台服务的权利。
+        </p>
+      </div>
+      <br />
+      <h3>第十章 其他约定</h3>
+      <div class="userAgreement-item">
+        <b>本协议的修改：</b>
+        <p>
+          平台有权根据业务发展需要，对本协议进行修改。修改后的协议将在平台上公布，用户继续使用平台服务视为接受修改。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>本协议的效力：</b>
+        <p>
+          本协议自用户注册成功之日起生效。本协议的任何条款部分无效，不影响其他条款的效力。
+        </p>
+      </div>
+      <div class="userAgreement-item">
+        <b>法律适用：</b>
+        <p>
+          本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。本协议的签订地为中华人民共和国北京市。
+        </p>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="userAgreement-btn">
+      <a @click="changeAgreement(false)">不同意</a>
+      <a @click="changeAgreement(true)">我已阅读并同意</a>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["changeAgreement"],
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.userAgreementBox {
+  position: relative;
+  height: 100%;
+  padding: 24px 24px 72px;
+  text-align: justify;
+  background: #fff;
+  border-radius: 8px;
+
+  .userAgreement-inner {
+    height: 100%;
+    padding: 48px;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 28px;
+    color: #000;
+    background: #f8f8f8;
+    border-radius: 8px;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    text-align: center;
+  }
+
+  h2 {
+    margin: 31px 0 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #165dff;
+  }
+
+  h3 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  p {
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .userAgreement-item {
+    // display: flex;
+    padding-left: 18px;
+
+    b {
+      flex-shrink: 0;
+      // min-width: 70px;
+      font-weight: bold;
+      text-align: right;
+      font-size: 15px;
+    }
+
+    &-little {
+      padding-left: 30px;
+      display: flex;
+
+      b {
+        width: 28px;
+      }
+    }
+  }
+
+  .userAgreement-btn {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 416px;
+    height: 72px;
+    margin-left: -208px;
+
+    a {
+      display: inline-block;
+      width: 194px;
+      height: 40px;
+      margin: 16px 7px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 40px;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+      background: #8b8b8b;
+      border-radius: 4px;
+
+      &:nth-child(2) {
+        background: #165dff;
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+</style>