stage：注册页面样式以及隐私协议

src/views/business/onlineTaskInfo/index.vue

@@ -89,7 +89,6 @@
             v-hasPermi="['business:onlineTaskInfo:recived']" @click="handleRecived(scope.row)">接收任务</el-button>
           <el-button v-if="scope.row.status == 21" size="mini" type="text" icon="el-icon-upload"
             v-hasPermi="['business:onlineTaskInfo:importPayInfo']" @click="importPayInfo(scope.row)">导入名单</el-button>
-
           <!--          <el-button-->
           <!--            size="mini"-->
           <!--            type="text"-->

src/views/unitRegister.vue

@@ -27,7 +27,8 @@
               <el-col :span="11">
                 <el-form-item label="所属行业" prop="sectorDictDataVal">
                   <el-select v-model="form.sectorDictDataVal" placeholder="请选择所属行业">
-                    <el-option v-for="dict in dict.type.unit_business_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    <el-option v-for="dict in dict.type.unit_business_type" :key="dict.value" :label="dict.label"
+                      :value="dict.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -60,17 +61,21 @@
                 </el-form-item>
               </el-col>
               <el-col :span="11">
-                <el-form-item label="联系电话" prop="phonenumber">
-                  <el-input v-model="form.phonenumber" maxlength="11" placeholder="请输入管理员联系电话" />
+                <el-form-item label="联系邮箱" prop="email">
+                  <el-input v-model="form.email" maxlength="50" placeholder="请输入管理员联系邮箱" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row :gutter="56">
               <el-col :span="11">
-                <el-form-item label="联系邮箱" prop="email">
-                  <el-input v-model="form.email" maxlength="50" placeholder="请输入管理员联系邮箱" />
+                <el-form-item label="联系电话" prop="phonenumber">
+                  <el-input v-model="form.phonenumber" maxlength="11" placeholder="请输入管理员联系电话" />
                 </el-form-item>
               </el-col>
+              <el-col :span="11">
+                <el-alert style="width: 260px;" title="联系电话即是登录账户名称" type="warning">
+                </el-alert>
+              </el-col>
             </el-row>
             <el-row :gutter="56">
               <el-col :span="11">
@@ -80,14 +85,15 @@
               </el-col>
               <el-col :span="11">
                 <el-form-item label="确认密码" prop="confirmPassword">
-                  <el-input type="password" auto-complete="off" v-model="form.confirmPassword" placeholder="请再次输入本系统登录密码" />
+                  <el-input type="password" auto-complete="off" v-model="form.confirmPassword"
+                    placeholder="请再次输入本系统登录密码" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row :gutter="56">
               <el-col :span="20">
                 <el-form-item label="验证码" prop="code">
-                  <el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 63%" >
+                  <el-input v-model="form.code" auto-complete="off" placeholder="验证码" style="width: 63%">
                     <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                   </el-input>
                   <div class="register-code">
@@ -98,30 +104,68 @@
             </el-row>
           </div>
           <div class="fixdBottomMain">
-            <el-button type="primary" style="width:50%;font-size:14px;" @click="submitForm">确认注册</el-button>
+            <el-button :disabled="!reaDagreementValue" type="primary" style="width:50%;font-size:14px;"
+              @click="submitForm">确认注册</el-button>
+          </div>
+          <div style="text-align: center;margin-top: 6px;font-size: 14px;">
+            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
           </div>
+          <!-- 协议阅读部分 -->
+          <div class="reaDagreement"> <el-checkbox @change="reaDagreementValueChange"
+              v-model="reaDagreementValue">我同意</el-checkbox> <span style="color: #1890ff;cursor: pointer;"
+              @click="showService = true">《薪瑞通服务协议》</span>及<span style="color: #1890ff;cursor: pointer;"
+              @click="showPrivacy = true">《薪瑞通隐私权政策》</span>
+            您应确认充分了解并清楚知晓出租、出借、出售、购买账户的相关法律责任和惩戒措施，且您必须承诺依法依规开立和使用支付账户。</div>
         </el-card>
-        <div style="float: right;">
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
-        </div>
-
       </el-form>
     </div>
     <!--  底部  -->
     <div class="el-register-footer">
       <a class="text-color" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> <span
-        style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
+          style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
     </div>
+    <el-dialog title="用户隐私政策" :visible.sync="showAgreement" width="70%" :show-close="false"
+      :close-on-click-modal="false" center>
+      <div v-html="agreementHtml" style="height: 500px; overflow: auto"></div>
+      <span slot="footer">
+        <el-button type="primary" @click="showAgreement = false">
+          同意并继续
+        </el-button>
+      </span>
+    </el-dialog>
+    <!-- 服务协议 -->
+    <el-dialog :visible.sync="showService" width="70%" center>
+      <serviceAgreement></serviceAgreement>
+      <span slot="footer">
+        <el-button type="primary" @click="showService = false">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
+    <!-- 隐私协议 -->
+    <el-dialog :visible.sync="showPrivacy" width="70%" center>
+      <privacyAgreement></privacyAgreement>
+      <span slot="footer">
+        <el-button type="primary" @click="showPrivacy = false">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getCodeImg, register, unitRegister } from '@/api/login'
-import { listAllTaxCode } from '@/api/business/taxClassCode'
+import serviceAgreement from "@/components/agreement/service.vue";
+import privacyAgreement from "@/components/agreement/privacy.vue";
 
 export default {
   name: "Register",
   dicts: ['unit_business_type'],
+  components: {
+    serviceAgreement,
+    privacyAgreement
+  },
   data() {
     const equalToPassword = (rule, value, callback) => {
       if (this.form.password !== value) {
@@ -178,13 +222,19 @@ export default {
         address: [
           { required: true, message: "经营地址不能为空", trigger: "blur" }
         ],
-      }
+      },
+      reaDagreementValue: false,
+      showService: false,
+      showPrivacy: false,
     };
   },
   created() {
     this.getCode();
   },
   methods: {
+    reaDagreementValueChange(e) {
+      this.reaDagreementValue = e
+    },
     getCode() {
       getCodeImg().then(res => {
         this.codeUrl = "data:image/gif;base64," + res.img;
@@ -213,7 +263,7 @@ export default {
       });
     },
     gotoLogin() {
-      this.$router.push({ path: "/login"});
+      this.$router.push({ path: "/login" });
     },
     /** 提交按钮 */
     submitForm() {
@@ -256,10 +306,11 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.cardMain .el-divider__text{
+.cardMain .el-divider__text {
   font-size: 18px;
   color: #337ab7;
 }
+
 .register {
   height: 100vh;
   background-image: url("../assets/images/login-background.png");
@@ -267,24 +318,27 @@ export default {
   background-repeat: no-repeat;
   overflow: hidden;
 }
-.register-main::-webkit-scrollbar{
+
+.register-main::-webkit-scrollbar {
   display: none;
 }
-.register-main{
+
+.register-main {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
   //margin-top: 12vh;
   overflow: scroll;
+
   .loginTitleStyle {
-    position: absolute;
-    left: 80vh;
-    top: 12vh;
     width: 200px;
     height: 45px;
+    margin-top: -60px;
   }
 }
+
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
@@ -346,15 +400,29 @@ export default {
 .register-code-img {
   height: 38px;
 }
-.fixdBottomMain{
+
+.fixdBottomMain {
   display: flex;
   align-items: center;
   justify-content: center;
   //margin-bottom: 50px;
 }
-.box-card{
-  width: 80vh;
+
+.reaDagreement {
+  // text-align: center;
+  font-size: 14px;
+  padding: 0px 32px;
+  margin-top: 32px;
+  margin-bottom: 22px;
+}
+
+.box-card ::v-deep {
+  width: 60vw;
+  border-radius: 15px;
+  background-image: linear-gradient(135deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, .7) 80%);
+
 }
+
 .cardMain {
 
   // 表单label样式
@@ -400,3 +468,16 @@ export default {
   }
 }
 </style>
+<style scoped>
+.el-card {
+  background-color: transparent !important;
+}
+
+.el-col {
+  padding: 0 !important;
+}
+
+.el-divider__text {
+  background-color: transparent !important;
+}
+</style>