ui库和web端产品库合并版本(还需修复细节)

ui/packages/common/AiSign/changePwd.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-form class="changePwd" ref="form" :model="signUpForm" :rules="rules">
+    <div class="backLogin" type="text" @click="$emit('toLogin')"><i class="el-icon-caret-left"/> 重置密码</div>
+    <el-form-item prop="account" style="white-space: nowrap">
+      <el-input placeholder="请输入您的手机号" v-model="signUpForm.account" clearable>
+        <i slot="prefix" class="iconfont iconPhone"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="verifictCode">
+      <el-input class="code" placeholder="请输入短信验证码" maxlength="6" v-model="signUpForm.verifictCode" clearable>
+        <el-button slot="suffix" style="padding-right: 14px" type="text" @click="getVerifictCode"
+                   :disabled="verify.disable">{{ verify.btnLabel }}
+        </el-button>
+        <i slot="prefix" class="iconfont iconMessage"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="password">
+      <el-input class="form-item-width" type="password" show-password placeholder="密码（8-16个字符，区分大小写）"
+                v-model="signUpForm.password" clearable>
+        <i slot="prefix" class="iconfont iconPassword"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="confirmPassword">
+      <el-input class="form-item-width" type="password" show-password placeholder="再次输入密码"
+                v-model="signUpForm.confirmPassword" clearable>
+        <i slot="prefix" class="iconfont iconPassword"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button class="form-item-width" type="primary" @click.native="submitChangePwd">重置密码</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "changePwd",
+  inject: ["actions"],
+  props: {
+    instance: Function
+  },
+  computed: {
+    rules() {
+      const _ = this
+      return {
+        account: [
+          {required: true, message: "请输入您的手机号", trigger: 'blur'},
+          {pattern: /^1[345789]\d{9}$/, message: "手机号格式有误", trigger: 'blur'},
+        ],
+        verifictCode: [{
+          trigger: 'blur', validator(r, v, cb) {
+            if (/^\d{6}$/.test(v)) {
+              cb()
+            } else {
+              cb(new Error("请输入6位验证码"))
+            }
+          }
+        }],
+        password: [
+          {required: true, message: "请输入新密码", trigger: 'blur'},
+          {
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*,.?_-])[\da-zA-Z~!@#$%^&*,.?_-]{8,16}$/,
+            message: "数字和字母及特殊字符(~!@#$%^&*,.?_-)组合,长度8到16位"
+          }
+        ],
+        confirmPassword: [
+          {required: true, message: "请再次输入新密码", trigger: 'blur'},
+          {
+            trigger: 'blur', validator(r, v, cb) {
+              if (v == _.signUpForm.password) {
+                cb()
+              } else {
+                cb(new Error("两次填写的密码不一致"))
+              }
+            }
+          }
+        ],
+      }
+    }
+  },
+  data() {
+    return {
+      signUpForm: {
+        account: "",
+        password: "",
+        confirmPassword: "",
+        verifictCode: "",
+      },
+      verify: {
+        disable: false,
+        timer: 0,
+        btnLabel: "获取验证码",
+      },
+    }
+  },
+  methods: {
+    getVerifictCode() {
+      this.$refs.form.validateField("account", v => {
+        if (!v) {
+          this.verify.disable = true
+          this.verify.timer = 60
+          this.verify.btnLabel = this.verify.timer + "秒"
+          const timer = setInterval(() => {
+            if (this.verify.timer === 0) {
+              this.verify.btnLabel = "获取验证码"
+              this.verify.disable = false
+              clearInterval(timer)
+            } else {
+              this.verify.timer--
+              this.verify.btnLabel = this.verify.timer + "秒"
+            }
+          }, 1000)
+          this.instance.post(this.actions.verification, null, {
+            auth: {},
+            params: {
+              phone: this.signUpForm.account
+            }
+          }).then(() => this.$message.success("短信发送成功!"))
+        }
+      })
+
+    },
+    submitChangePwd() {
+      this.$refs.form.validate(v => {
+        if (v) {
+          this.$emit("signUp", this.signUpForm)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.changePwd {
+  // margin: 0 20px;
+
+  ::v-deep .code {
+    .el-button {
+      width: auto !important;
+    }
+  }
+
+  ::v-deep.backLogin {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 16px;
+    height: 40px;
+    color: $primaryColor;
+    cursor: pointer;
+    width: 100px;
+    margin-bottom: 46px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    .el-icon-caret-left {
+      padding: 0;
+      font-size: 22px;
+    }
+  }
+
+  .el-button {
+    width: 100%;
+  }
+
+  ::v-deep.el-form-item {
+    margin-bottom: 24px;
+
+    i {
+      padding-left: 7px;
+      padding-right: 7px;
+    }
+  }
+
+  .form-item-width {
+    font-size: 16px;
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    padding: 0;
+  }
+}
+</style>