123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463 |
- <template>
- <div class="page_noPassword">
- <div class="nopasswordTitle">
- <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
- <span class="titleName">修改密码</span>
- </div>
- <div class="forgetmyInput">
- <el-form ref="forgetForm" :model="forgetForm" :rules="rules">
- <el-form-item required prop="phone">
- <div class="phoneLine">
- <i class="el-icon-mobile mobile"></i>
- <el-input
- class="phoneInput"
- placeholder="请填写手机号码"
- v-model="forgetForm.phone"
- v-on:input="watchNum"
- maxlength="11"
- readonly
- @input="change(forgetForm.phone)"
- ></el-input>
- </div>
- </el-form-item>
- <el-form-item required prop="code">
- <div class="code">
- <i class="iconfont icon-dunpai dunpai"></i>
- <el-input
- v-model="forgetForm.code"
- placeholder="请填写验证码"
- v-on:input="watchNum"
- ></el-input>
- <div class="getCode" @click="getVerifyCode()">
- {{ code_btn_title }}
- </div>
- </div>
- </el-form-item>
- <el-form-item>
- <div class="phoneLine">
- <i class="el-icon-lock lock"></i>
- <el-input
- class="phoneInput"
- v-model="psd"
- placeholder="请填写新密码"
- show-password
- v-on:input="watchNum"
- clearable
- ></el-input>
- </div>
- </el-form-item>
- </el-form>
- </div>
-
- <div class="login" @click="modifyAndLogin()" v-show="loginshow">保存</div>
- <div class="logintwo" v-show="loginshowtwo">保存</div>
- <div class="problem">
- 遇到问题?点击
- <span @click="contact = true">联系客服</span>
- </div>
-
- <!-- 弹窗 联系客服 -->
- <el-dialog
- title="客服电话"
- :visible.sync="contact"
- width="19.1875rem"
- top="12.5rem"
- center
- class="myDialog"
- >
- <span class="telephone">0755-86526342</span>
- <span slot="footer" class="dialog-footer">
- <span @click="contact = false">取消</span>
- <span>|</span>
- <span type="primary" @click="callPhone()">拨打</span>
- </span>
- </el-dialog>
- </div>
- </template>
-
- <script>
- // import { getCode, NextStep } from "@/api/login/login";
- import "@/styles/newStyle.scss";
- import { getCodeInit, getVerifyCode, forgetPassWord } from "@/api/login";
- import { checkMobile } from "@/utils/tools";
- import { hex_md5 } from "@/utils/md5";
- import { setRem } from "@/libs/functionRem";
-
- export default {
- data() {
- var checkMobileRule = (rule, value, callback) => {
- if (!checkMobile(value)) {
- callback(new Error("请填写正确的手机号"));
- } else {
- callback();
- }
- };
- return {
- phone: "",
- code: "",
- psd: "",
- contact: false,
- count_downing: false,
- count_down: 0,
- aespass: "",
- forgetForm: {
- phone: "",
- code: ""
- },
- rules: {
- phone: [
- { required: true, message: "手机号码不能为空" },
- { validator: checkMobileRule }
- ],
- code: [{ required: true, message: "验证码不能为空" }]
- },
- loginshow: false,
- loginshowtwo: true,
- codeshow: false,
- codeshowtwo: true
- };
- },
- created() {
- setRem()
- this.GetCodeInit();
- this.forgetForm.phone = this.$store.getters.user.admin.mobile;
- },
- methods: {
- modifyAndLogin() {
- if (this.forgetForm.phone.trim().length == 0) {
- this.$toast({
- message: "手机号码不能为空!"
- });
- return;
- }
- if (!checkMobile(this.forgetForm.phone)) {
- this.$toast({
- message: "请填写正确的手机号码!"
- });
- return;
- }
- if (this.forgetForm.code.trim().length == 0) {
- this.$toast({
- message: "验证码不能为空!"
- });
- return;
- }
-
- let params = {
- mobile: this.forgetForm.phone,
- code: this.forgetForm.code,
- password: hex_md5(this.psd)
- };
- forgetPassWord(params).then(response => {
- if (response.data.state === 1) {
- this.$router.go(-1);
- } else {
- this.$toast({
- message: response.data.msg
- });
- }
- });
- },
- GetCodeInit() {
- getCodeInit().then(response => {
- if (response.data.state === 1) {
- this.aespass = response.data.data.aespass;
- }
- });
- },
- getVerifyCode() {
- if (this.forgetForm.phone.length == 0) {
- this.$toast({
- message: "手机号码不能为空!"
- });
- return;
- }
- if (!checkMobile(this.forgetForm.phone)) {
- this.$toast({
- message: "请填写正确的手机号码!"
- });
- return;
- }
-
- if (!this.count_downing) {
- let parms = {
- phone: this.forgetForm.phone,
- aespass: this.aespass
- };
- getVerifyCode(parms).then(response => {
- if (response.data.state === 1) {
- this.count_downing = true;
- this.count_down = 61;
- this.countDown();
- }
- });
- }
- },
-
- callPhone() {
- window.location.href = "tel://075586526342";
- },
- countDown: function() {
- this.count_down = this.count_down - 1;
- if (this.count_down === 0) {
- this.count_downing = false;
- return;
- }
- var t = this;
- setTimeout(() => {
- this.countDown();
- }, 1000);
- },
- watchNum() {
- if (this.forgetForm.phone.length === 11) {
- this.codeshow = true;
- this.codeshowtwo = false;
- } else {
- this.codeshow = false;
- this.codeshowtwo = true;
- }
-
- if (
- this.forgetForm.phone === "" ||
- this.forgetForm.code === "" ||
- this.psd === ""
- ) {
- this.loginshow = false;
- this.loginshowtwo = true;
- } else {
- this.loginshow = true;
- this.loginshowtwo = false;
- }
- },
- change(value) {
- this.forgetForm.phone = value.replace(/[^0-9]+/g, "");
- }
- },
- computed: {
- code_btn_title: function() {
- if (this.count_down == 0) {
- return "获取验证码";
- } else {
- return "重新发送(" + this.count_down + ")";
- }
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .page_noPassword {
- overflow: hidden;
- height: 100%;
- .nopasswordTitle {
- height: 3.125rem;
- line-height: 3.125rem;
- display: flex;
- align-items: center;
- }
- .jiantou {
- margin-left: 1.25rem;
- font-size: 1.5rem;
- font-weight: 600;
- margin-right: 7rem;
- }
- .titleName {
- font-size: 1.125rem;
- font-weight: 600;
- }
- .forgetmyInput {
- margin-top: 4rem;
- .phoneLine {
- width: 84%;
- margin: 0 auto;
- display: flex;
- border-bottom: 1px solid #e6e6e6;
- .mobile {
- float: left;
- color: #acacac;
- font-size: 1.5rem;
- // margin-left: 0.375rem;
- line-height: 3.375rem;
- width: 1.5rem;
- }
- .phoneInput {
- width: 95%;
- }
- }
-
- .lock {
- float: left;
- color: #acacac;
- font-size: 1.5rem;
- // margin-left: 0.375rem;
- line-height: 3.375rem;
- width: 1.5rem;
- }
- .code {
- line-height: 3.375rem;
- width: 84%;
- height: 3.375rem;
- margin: 0 auto;
- border-bottom: 1px solid #e6e6e6;
- display: flex;
- align-items: center;
-
- .dunpai {
- float: left;
- color: #acacac;
- font-size: 1.5rem;
- // margin-left: 0.375rem;
- }
- .el-input {
- float: left;
- width: 10.6rem;
- border: none;
- padding: 0;
- }
- .el-input__inner {
- padding: 0;
- padding-left: 0.75rem;
- }
- .getCode {
- // float: left;
- width: 5.75rem;
- height: 2rem;
- line-height: 2rem;
- text-align: center;
- color: #fff;
- background: #338afb;
- border-radius: 1.4375rem;
- font-size: 0.8125rem;
- }
- .getCodetwo {
- width: 5.75rem;
- height: 2rem;
- // line-height: 2rem;
- text-align: center;
- color: #fff;
- background: #e5e5e5;
- border-radius: 1.4375rem;
- font-size: 0.8125rem;
- }
-
- .el-button--primary {
- border-color: transparent;
- }
- }
- }
- .login {
- width: 19.25rem;
- height: 2.875rem;
- background: linear-gradient(
- -90deg,
- rgba(129, 159, 246, 1),
- rgba(81, 119, 238, 1),
- rgba(75, 102, 234, 1)
- );
- border-radius: 1.4375rem;
- margin: 0 auto;
- line-height: 2.875rem;
- text-align: center;
- color: #fff;
- margin-top: 2.875rem;
- font-size: 1rem;
- }
- .problem {
- width: 84%;
- font-size: 0.8125rem;
- margin: 15rem auto 0;
- text-align: center;
- span {
- color: #338afb;
- }
- }
- }
-
- .el-form-item__error {
- margin-left: 2.5rem;
- }
-
- .logintwo {
- width: 19.25rem;
- height: 2.875rem;
- background: #e5e5e5;
- border-radius: 1.4375rem;
- margin: 0 auto;
- line-height: 2.875rem;
- text-align: center;
- color: #fff;
- margin-top: 2.875rem;
- font-size: 1rem;
- }
- .el-button--medium {
- padding: 0;
- }
- </style>
- <style lang="scss">
- .forgetmyInput {
- .el-form-item {
- margin-bottom: 0;
- }
- .el-input {
- display: flex;
- align-items: center;
- margin: 0 auto;
- color: rgba(155, 155, 155, 1);
- padding-left: 0.75rem;
- box-sizing: border-box;
- height: 3.375rem;
- line-height: 3.375rem;
- }
- .el-input__inner {
- border: none;
- font-size: 1rem;
- padding-left: 0;
- }
- .el-input__prefix {
- font-size: 1.5rem;
- color: #acacac;
- }
-
- .phoneLine {
- .el-input__clear {
- // margin-right: 0.625rem;
- }
- .el-input__icon {
- line-height: 3.375rem;
- font-size: 1.5rem;
- }
- }
- }
- .myDialog {
- line-height: 50%;
- height: 100%;
- .el-dialog {
- border-radius: 10px;
- }
- .el-dialog__title {
- color: #000000;
- }
- .telephone {
- width: 12.5rem;
- height: 1.125rem;
- font-size: 1.5rem;
- font-weight: 500;
- color: #338afb;
- margin-left: 2.5rem;
- }
- .dialog-footer {
- font-size:1rem;
- > span:nth-of-type(1) {
- color: #9b9b9b;
- }
- > span:nth-of-type(2) {
- padding: 0 3.125rem;
- color: #e6e6e6;
- }
- > span:nth-of-type(3) {
- color: #000000;
- }
- }
- }
- </style>
|