|
|
@@ -0,0 +1,277 @@
|
|
|
+<template>
|
|
|
+ <div class="reset" style="padding-top: 46px">
|
|
|
+ <van-nav-bar
|
|
|
+ class="van-nav-bar-my-fixed"
|
|
|
+ :title="'重置密码'"
|
|
|
+ fixed
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ />
|
|
|
+ <div class="reset-box">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="form.mobile"
|
|
|
+ label-width="62px"
|
|
|
+ label="卡号"
|
|
|
+ placeholder="卡号"
|
|
|
+ :rules="[{ validator: asyncmobileValidator }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="form.code"
|
|
|
+ label-width="62px"
|
|
|
+ label="原密码"
|
|
|
+ placeholder="原密码"
|
|
|
+ :rules="[{ validator: asyncpwodValidator1 }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="form.ncode"
|
|
|
+ label-width="62px"
|
|
|
+ label="新密码"
|
|
|
+ placeholder="新密码"
|
|
|
+ :rules="[{ validator: asyncpwodValidator2 }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="form.rcode"
|
|
|
+ label-width="62px"
|
|
|
+ label="确认密码"
|
|
|
+ placeholder="确认密码"
|
|
|
+ :rules="[{ validator: asyncpwodValidator3 }]"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btn-box">
|
|
|
+ <van-button
|
|
|
+ block
|
|
|
+ type="info"
|
|
|
+ :disabled="loadding"
|
|
|
+ :loadding="loadding"
|
|
|
+ loadding-text="加载中..."
|
|
|
+ native-type="submit"
|
|
|
+ @click="onSubmit()"
|
|
|
+ >
|
|
|
+ 保 存
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import asyncRequest from "@/apis/address/index";
|
|
|
+import resToken from "@/mixins/resToken";
|
|
|
+import { isnumber, validAlphabets } from "@/utils/validate";
|
|
|
+export default {
|
|
|
+ mixins: [resToken],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loadding: false,
|
|
|
+ form: {
|
|
|
+ mobile: "CJ1745",
|
|
|
+ code: "",
|
|
|
+ ncode: "",
|
|
|
+ rcode: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.loadding = false;
|
|
|
+ this.form = {
|
|
|
+ mobile: "CJ1745",
|
|
|
+ code: "",
|
|
|
+ ncode: "",
|
|
|
+ rcode: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClickLeft() {
|
|
|
+ window.history.back(-1);
|
|
|
+ },
|
|
|
+ async asyncmobileValidator(val) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let type = true;
|
|
|
+ if (val === "") {
|
|
|
+ this.show_title("请输入卡号！");
|
|
|
+ type = false;
|
|
|
+ } else {
|
|
|
+ if (val.length !== 12) {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
+ type = false;
|
|
|
+ } else {
|
|
|
+ let a = val.slice(0, 2);
|
|
|
+ let b = val.slice(2, 6);
|
|
|
+ let c = val.slice(6, 12);
|
|
|
+ if (a !== "CJ") {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
+ type = false;
|
|
|
+ } else if (b !== "1745") {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
+ type = false;
|
|
|
+ } else if (!isnumber(c)) {
|
|
|
+ this.show_title("卡号不正确！");
|
|
|
+ type = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resolve(type ? "ok" : "error");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async asyncpwodValidator1(val) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let type = true;
|
|
|
+ const { isok, msg } = this.pwdValidator(val, 1);
|
|
|
+ type = isok;
|
|
|
+ if (!type) {
|
|
|
+ this.show_title(msg);
|
|
|
+ }
|
|
|
+ resolve(type ? "ok" : "error");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async asyncpwodValidator2(val) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let type = true;
|
|
|
+ console.log(val)
|
|
|
+ const { isok, msg } = this.pwdValidator(val, 2);
|
|
|
+ console.log(isok, msg);
|
|
|
+ type = isok;
|
|
|
+ if (!type) {
|
|
|
+ this.show_title(msg);
|
|
|
+ }
|
|
|
+ resolve(type ? "ok" : "error");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async asyncpwodValidator3(val) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let type = true;
|
|
|
+ const { isok, msg } = this.pwdValidator(val, 3);
|
|
|
+ type = isok;
|
|
|
+ if (!type) {
|
|
|
+ this.show_title(msg);
|
|
|
+ }
|
|
|
+ resolve(type ? "ok" : "error");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pwdValidator(val, type) {
|
|
|
+ console.log(val,type);
|
|
|
+ let mt = type === 1 ? "原密码" : type === 2 ? "新密码" : "确认密码";
|
|
|
+ let msg = "";
|
|
|
+ let isok = true;
|
|
|
+ if (val === "") {
|
|
|
+ msg = `请输入${mt}！`;
|
|
|
+ isok = false;
|
|
|
+ } else {
|
|
|
+ if (val.length !== 6) {
|
|
|
+ msg = `${mt}为2位字母+4位数字！`;
|
|
|
+ isok = false;
|
|
|
+ } else {
|
|
|
+ let a = val.slice(0, 2);
|
|
|
+ let b = val.slice(2, 4);
|
|
|
+ if (!isnumber(b)) {
|
|
|
+ msg = `${mt}为2位字母+4位数字！`;
|
|
|
+ isok = false;
|
|
|
+ }
|
|
|
+ if (!validAlphabets(a)) {
|
|
|
+ msg = `${mt}为2位字母+4位数字！`;
|
|
|
+ isok = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let model = {
|
|
|
+ ok: isok,
|
|
|
+ msg: msg,
|
|
|
+ };
|
|
|
+ return model;
|
|
|
+ },
|
|
|
+ // 点击 登陆按钮 后执行提交
|
|
|
+ async onSubmit() {
|
|
|
+ if (!this.loadding) {
|
|
|
+ this.loadding = true;
|
|
|
+ const res1 = await this.asyncmobileValidator(this.form.mobile); //校验表单卡号
|
|
|
+ if (res1 === "error") {
|
|
|
+ this.loadding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res2 = await this.asyncpwodValidator1(this.form.code);
|
|
|
+ if (res2 === "error") {
|
|
|
+ this.loadding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res3 = await this.asyncpwodValidator2(this.form.ncode);
|
|
|
+ if (res3 === "error") {
|
|
|
+ this.loadding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res4 = await this.asyncpwodValidator3(this.form.rcode);
|
|
|
+ if (res4 === "error") {
|
|
|
+ this.loadding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let model = JSON.parse(JSON.stringify(this.form));
|
|
|
+ delete model["rcode"];
|
|
|
+ const { code, msg } = await asyncRequest.list(model); //视频预览接口
|
|
|
+ if (code === 0) {
|
|
|
+ this.loadding = false;
|
|
|
+ this.show_title("密码重置成功！");
|
|
|
+ setTimeout(() => {
|
|
|
+ window.history.back(-1);
|
|
|
+ }, 3000);
|
|
|
+ } else {
|
|
|
+ this.show_title(msg);
|
|
|
+ this.loadding = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.reset {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgb(230, 230, 220) !important;
|
|
|
+ .reset-box {
|
|
|
+ width: calc(100% - 32px);
|
|
|
+ margin: 0 16px !important;
|
|
|
+ // padding: 0 16px;
|
|
|
+ overflow: hidden !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+ .van-field__label {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ margin: 30px 5% 0 5%;
|
|
|
+ .van-button {
|
|
|
+ background: linear-gradient(0deg, #a67e4b, #efc180);
|
|
|
+ border-radius: 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #fff;
|
|
|
+ border: 0;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+ //
|
|
|
+ // height: 44px;
|
|
|
+ // text-align: center;
|
|
|
+ // border-radius: 22px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // background: linear-gradient(0deg, #f2c482, #a07947);
|
|
|
+ // font-size: 14px;
|
|
|
+ // line-height: 44px;
|
|
|
+ //
|
|
|
+ // // linear-gradient(0deg, #ff6680 0%, #ffd490 100%);
|
|
|
+ // border: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
