9/18

src/Views/BookingOrder/index.vue

@@ -943,12 +943,12 @@ export default {
       dialogFormVisible.value = true;
     };
     const ClickEdit = (e) => {
+      let R = [];
       console.log(e);
       bookingOrderInfo({ id: e.id }).then((res) => {
-        console.log(res);
+        R = res.data;
+        dialogFormVisible.value = true;
       });
-      // dialogFormVisible.value = true;
-      // let R = [];
 
       // e.type.split("[").forEach((a) => {
       //   if (a) {
@@ -959,7 +959,7 @@ export default {
       //     });
       //   }
       // });
-      // return { ...e, type: R };
+      return { ...e, type: R };
     };
     const TableData = reactive([
       { label: "订舱编号", prop: "billNo" },

src/Views/Login/asd.vue

@@ -0,0 +1,29 @@
+<template>
+<div id="apply">
+    <div class="textbox">
+        </div><el-form:model="ruleForm":rules="rules"ref="ruleForm"class="demo-ruleForm"hide-required-asterisk:trueinline-message:true><el-form-item prop="comp"><el-input v-model="ruleForm.comp" placeholder="公司名称"></el-input></el-form-item><el-form-item prop="name"><el-input v-model="ruleForm.name" placeholder="姓名"></el-input></el-form-item><!-- 验证码 -->
+        <el-form-item prop="phone">
+            <el-input v-model="ruleForm.phone" placeholder="手机号"></el-input>
+            </el-form-item><el-form-item prop="verify"><div class="bind_code">
+                <el-input class="bind_code_input code" v-model="ruleForm.verify" type="text"placeholder="手机验证码"/>
+                <el-button @click.native.prevent="bindforgetSendCode" class="codebtn" :disabled="disabled">{{ btnText }}</el-button>
+                </div>
+                </el-form-item><!-- 验证码完毕 -->
+                <el-form-item>
+                    <el-inputv-model="ruleForm.textarea"class="msg"type="textarea"maxlength="200"resize="none"show-word-limitplaceholder="请您对需求进行简述"></el-input></el-form-item><el-form-item><el-buttonclass="applybtn"type="primary"@click="submitForm('ruleForm')">立即申请</el-button></el-form-item></el-form></div>
+</template>
+
+<script>
+import {captchaSms,application} from "@/api/getapi";
+export default {
+    data() {
+        return {
+            ruleForm: {name: "",comp: "",phone: "",verify: "",textarea: "",delivery: false,},
+            rules: {comp: [{ required: true, message: " ", trigger: "blur" },{min: 3,max: 10,message: " ",trigger: "blur",},],name: [{ required: true, message: "  ", trigger: "blur" },{ min: 2, max: 20, message: "  ", trigger: "blur" },],phone: [{ required: true, message: "  ", trigger: "blur" },{ min: 11, max: 11, message: "  ", trigger: "blur" },],verify: [{ required: true, message: "  ", trigger: "blur" },{ min: 4, max: 4, message: "  ", trigger: "blur" },],},
+            //   验证码按钮
+            type: "",btnText: "获取验证码",disabled: false,};},methods: {
+                // 发送验证码
+                bindforgetSendCode() {this.$refs["ruleForm"].validateField("phone", (errorMessage) => {if (!errorMessage) {captchaSms({phonenumber: this.ruleForm.phone}).then(res => {console.log(res);})this.disabled = true;this.btnText = "请稍候...";setTimeout(() => {this.doLoop(60);}, 500);} else {return false;}});},
+                // 手机验证码的倒计时
+                doLoop: function (seconds) {seconds = seconds ? seconds : 60;this.btnText = seconds + "s后获取";let countdown = setInterval(() => {if (seconds > 0) {this.btnText = seconds + "s后获取";--seconds;} else {this.btnText = "获取验证码";this.disabled = false;clearInterval(countdown);}}, 1000);},submitForm(ruleForm) {this.$refs[ruleForm].validate((valid) => {if (valid) {let data = JSON.parse(JSON.stringify(this.ruleForm));delete data.deliveryapplication(data).then(res => {console.log(res);alert("提交成功!");} else {console.log("提交失败!!");return false;}});},},
+};

src/Views/Login/index.vue

@@ -9,7 +9,7 @@
           <img src="@/assets/logo.png" alt="" />
           <span>济舱海工作平台</span>
         </div>
-        <div class="fromBox">
+        <div class="fromBox" v-if="Type == 'login'">
           <el-input
             class="CsUserNmaeI CsI"
             v-model="LoginData.account"
@@ -22,6 +22,7 @@
             v-model="LoginData.password"
             size="large"
             placeholder="密码"
+            show-password
           />
           <el-button
             class="CsLoginB"
@@ -31,7 +32,93 @@
           >
             登录
           </el-button>
-          <el-button class="CsSignB" type="primary" link>注册用户</el-button>
+          <el-button class="CsSignB" type="primary" link @click="FnReg">
+            注册用户
+          </el-button>
+        </div>
+        <div class="fromBox fromBox2" v-else>
+          <el-form :rules="rules" :model="RegData" ref="ruleFormRef">
+            <el-form-item prop="account">
+              <el-input
+                class="CsUserNmaeI CsI2"
+                v-model="RegData.account"
+                size="large"
+                placeholder="用户名"
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                class="CsPasswordI CsI2"
+                type="password"
+                v-model="RegData.password"
+                size="large"
+                placeholder="密码"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item prop="confirmPassword">
+              <el-input
+                class="CsPasswordI CsI2"
+                type="password"
+                v-model="RegData.confirmPassword"
+                size="large"
+                placeholder="确认密码"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item prop="name">
+              <el-input
+                class="CsPasswordI CsI2"
+                v-model="RegData.name"
+                size="large"
+                placeholder="真实姓名"
+              />
+            </el-form-item>
+            <el-form-item prop="phone">
+              <el-input
+                class="CsPasswordI CsI2"
+                v-model="RegData.phone"
+                size="large"
+                placeholder="手机号"
+              />
+            </el-form-item>
+            <!-- <el-form-item prop="checkCode">
+              <el-input
+                class="CsPasswordI CsI2"
+                v-model="RegData.checkCode"
+                size="large"
+                placeholder="验证码"
+              />
+            </el-form-item> -->
+            <el-form-item prop="checkCode">
+              <div class="bind_code">
+                <el-input
+                  class="CsPasswordI CsI2 bind_code_input"
+                  v-model="RegData.checkCode"
+                  size="large"
+                  placeholder="验证码"
+                />
+                <el-button
+                  @click="bindforgetSendCode"
+                  class="codebtn"
+                  :disabled="disabled"
+                  >{{ btnText }}</el-button
+                >
+              </div>
+            </el-form-item>
+          </el-form>
+
+          <el-button
+            class="CsLoginB"
+            size="large"
+            type="primary"
+            @click="Reg(ruleFormRef)"
+          >
+            注册
+          </el-button>
+          <el-button class="CsSignB2" type="primary" link @click="FnLogin">
+            返回
+          </el-button>
         </div>
       </div>
     </div>
@@ -39,21 +126,30 @@
   <!-- <h1 @click="FnClick">{{ name }}</h1> -->
 </template>
 <script>
-import { UserLogin, UserGetLoginUser } from "@/api/Index";
+import {
+  UserLogin,
+  UserReg,
+  UserGetLoginUser,
+  genRegisterCheckCode,
+} from "@/api/Index";
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { ElMessage } from "element-plus";
 export default {
   name: "ViewLogin",
   setup(msg) {
+    const Type = ref("login");
     const router = useRouter();
     const store = useStore();
     const LoginData = reactive({
       account: "",
       password: "",
     });
+    const RegData = ref({});
     console.log(msg);
     const name = ref("Login");
+    const ruleFormRef = ref();
     const FnClick = () => {
       console.log(name.value);
     };
@@ -78,12 +174,137 @@ export default {
         }
       });
     };
+    const FnReg = () => {
+      Type.value = "reg";
+    };
+    const FnLogin = () => {
+      Type.value = "login";
+      RegData.value = {};
+    };
+    const Reg = async (formEl) => {
+      if (!formEl) return;
+      await formEl.validate((valid, fields) => {
+        if (valid) {
+          console.log("通过");
+          UserReg(RegData.value).then((res) => {
+            console.log(res);
+            if (res.code == 200) {
+              ElMessage({
+                message: "注册成功！",
+                type: "success",
+              });
+              FnLogin();
+            }
+          });
+        } else {
+          console.log("error submit!", fields);
+        }
+      });
+    };
+    const validatePass = (rule, value, callback) => {
+      if (value == "") {
+        callback(new Error("请再次确认密码"));
+      } else if (value != RegData.value.password) {
+        callback(new Error("两次输入密码不一致！"));
+      } else {
+        callback();
+      }
+    };
+    const rules = reactive({
+      account: [
+        {
+          required: true,
+          message: "请输入用户名！",
+          trigger: "change",
+        },
+      ],
+      password: [
+        {
+          required: true,
+          message: "请输入密码！",
+          trigger: "change",
+        },
+      ],
+      confirmPassword: [
+        {
+          required: true,
+          validator: validatePass,
+          trigger: "change",
+        },
+      ],
+      name: [
+        {
+          required: true,
+          message: "请输入真实姓名！",
+          trigger: "change",
+        },
+      ],
+      phone: [
+        {
+          required: true,
+          message: "请输入手机号！",
+          trigger: "change",
+        },
+      ],
+      checkCode: [
+        {
+          required: true,
+          message: "请输入验证码！",
+          trigger: "change",
+        },
+      ],
+    });
+    const disabled = ref(false);
+    const btnText = ref("获取验证码");
+    const bindforgetSendCode = () => {
+      ruleFormRef.value.validateField("phone", (errorMessage) => {
+        if (errorMessage) {
+          console.log();
+          // captchaSms({ phonenumber: RegData.value.phone }).then((res) => {
+          //   console.log(res);
+          // });
+          disabled.value = true;
+          btnText.value = "请稍候...";
+          genRegisterCheckCode({ phone: RegData.value.phone }).then((res) => {
+            console.log(res);
+            let i = 0;
+
+            let time = () => {
+              if (i < 60) {
+                setTimeout(() => {
+                  ++i;
+                  btnText.value = `${60 - i}s`;
+                  time();
+                }, 1000);
+              } else {
+                disabled.value = false;
+                btnText.value = "获取验证码";
+              }
+            };
+            time();
+          });
+        } else {
+          console.log(errorMessage);
+          return false;
+        }
+      });
+    };
     return {
+      Type,
       name,
+      ruleFormRef,
       FnClick,
       // -----------------
       LoginData,
+      RegData,
       Login,
+      Reg,
+      FnReg,
+      FnLogin,
+      rules,
+      bindforgetSendCode,
+      disabled,
+      btnText,
     };
   },
 };
@@ -142,9 +363,15 @@ export default {
       }
       .fromBox {
         width: 240px;
+        &.fromBox2 {
+          margin-top: -40px;
+        }
         .CsI {
           margin-bottom: 40px;
         }
+        .CsI2 {
+          // margin-bottom: 10px;
+        }
         .CsLoginB {
           width: 100%;
           margin-bottom: 21px;
@@ -152,8 +379,35 @@ export default {
         .CsSignB {
           margin-left: 180px;
         }
+        .CsSignB2 {
+          margin-left: 210px;
+        }
       }
     }
   }
 }
+.bind_code {
+  width: 100%;
+  position: relative;
+}
+.codebtn {
+  position: absolute;
+  top: 4px;
+  right: 1px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: PingFang SC-Medium, PingFang SC;
+  color: #1b3dd1;
+  height: 32px;
+  line-height: 32px;
+  cursor: pointer;
+  padding: 0 10px;
+
+  border: none;
+  border-left: 1px solid #1b3dd1;
+  border-radius: 0;
+  &:hover {
+    background: none;
+  }
+}
 </style>

src/api/Index.js

@@ -10,13 +10,35 @@ const UserLogin = (data) => {
     },
   });
 };
+// 用户注册
+const UserReg = (data) => {
+  return request({
+    data: {
+      url: "/api/bookingAip/user/register",
+      method: "post",
+      data,
+      // headers: { Authorization: localStorage.getItem("token") },
+    },
+  });
+};
+// 获取用户注册验证码
+const genRegisterCheckCode = (params) => {
+  return request({
+    data: {
+      url: "/api/bookingAip/user/genRegisterCheckCode",
+      method: "get",
+      params,
+      // headers: { Authorization: localStorage.getItem("token") },
+    },
+  });
+};
 // 用户信息
-const UserGetLoginUser = (data) => {
+const UserGetLoginUser = (params) => {
   return request({
     data: {
       url: "/api/bookingAip/user/getLoginUser",
       method: "get",
-      data,
+      params,
       // headers: { Authorization: localStorage.getItem("token") },
     },
   });
@@ -238,6 +260,8 @@ const cobServiceItemTenantList = (params) => {
 
 export {
   UserLogin,
+  UserReg,
+  genRegisterCheckCode,
   UserGetLoginUser,
   bookingCustomList,
   bookingCustomSave,