增加找回密码 修改密码

src/pages.json

@@ -322,6 +322,12 @@
             "style": {
                 "navigationBarTitleText": "注册"
             }
+        },
+        {
+            "path": "pages/index/find-password",
+            "style": {
+                "navigationBarTitleText": "找回密码"
+            }
         }
     ]
 }

src/pages/index/find-password.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="page">
+        <div class="main" >
+            <div class="tit">找回密码</div>
+            <div class="inp-box">
+                <input
+                    type="text"
+                    name="phone"
+                    v-model="form.phone"
+                    placeholder="手机号码"
+                />
+            </div>
+
+            <div class="inp-box code-box">
+                <input
+                    type="text"
+                    name="code"
+                    v-model="form.code"
+                    placeholder="验证码"
+                />
+                <span
+                    class="code-btn"
+                    :class="{ dis: timeing }"
+                    @click="getCode()"
+                    >{{ codeStr }}</span
+                >
+            </div>
+
+            <div class="inp-box">
+                <input
+                    type="password"
+                    name="password"
+                    v-model="form.password"
+                    placeholder="请输入密码"
+                />
+            </div>
+            <div class="inp-box">
+                <input
+                    type="password"
+                    name="password2"
+                    v-model="form.password2"
+                    placeholder="确认密码"
+                />
+            </div>
+            <button class="btn" @click="submit">注册</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../components/image/index";
+
+export default {
+    name: "",
+    components: { MyImage },
+    // 数据
+    data() {
+        return {
+            form: {
+                phone: "",
+                code: "",
+                password: "",
+                password2: "",
+                teamNum: "",
+            },
+            timeing: false,
+            codeStr: "发送验证码",
+        };
+    },
+
+    onLoad() {
+        uni.hideLoading();
+    },
+
+    onShow() {},
+
+    // 函数
+    methods: {
+        getCode() {
+            if (this.timeing) {
+                return;
+            }
+            let phoneReg = /^[1][1-9][0-9]{9}$/;
+            if (!this.form.phone) {
+                return this.fn.showToast("请输入手机号");
+            }
+            if (!phoneReg.test(this.form.phone)) {
+                return this.fn.showToast("手机号格式不正确");
+            }
+            // this.sendCode();
+            this.downTime();
+        },
+        sendCode() {
+            this.api.get("").then((res) => {});
+        },
+        downTime() {
+            this.timeing = true;
+            let t = 60;
+            this.codeStr = t + "s重新获取";
+            let timer = setInterval(() => {
+                t--;
+                if (t === 0) {
+                    clearInterval(timer);
+                    this.codeStr = "发送验证码";
+                    this.timeing = false;
+                } else {
+                    this.codeStr = t + "s重新获取";
+                }
+            }, 1000);
+        },
+
+        submit() {
+            console.log(this.mobile);
+            if (!this.form.phone) {
+                this.fn.showToast(`请输入手机号码`);
+                return;
+            }
+            if (!this.form.code) {
+                this.fn.showToast(`请输入验证码`);
+                return;
+            }
+
+            if (!this.form.password) {
+                this.fn.showToast(`请输入密码`);
+                return;
+            }
+
+            if (this.form.password.length < 6) {
+                this.fn.showToast(`密码最少6位`);
+                return;
+            }
+
+            if (!this.form.password2) {
+                this.fn.showToast(`请输入确认密码`);
+                return;
+            }
+
+            if (this.form.password2 !== this.form.password) {
+                this.fn.showToast(`两次密码不一致`);
+                return;
+            }
+
+            // uni.showLoading({
+            //     title: "提交中",
+            // });
+            this.step = 2;
+            console.log(this.form);
+        },
+
+    },
+
+    // 数据计算
+    computed: {},
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+
+<style lang="scss" scoped>
+.page {
+    height: 100%;
+    background-color: #fff;
+}
+.main {
+    padding-top: px(120);
+    padding-left: px(40);
+    padding-right: px(40);
+}
+.tit {
+    font-size: px(50);
+    padding-bottom: px(100);
+    text-align: center;
+    padding-bottom: px(60);
+}
+.inp-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #c3c1c2;
+    padding: px(30) 0;
+    margin-bottom: px(30);
+}
+.inp-box span {
+    font-size: px(32);
+    color: rgb(0, 188, 38);
+    border-radius: px(15);
+    border: 1px solid rgb(0, 188, 38);
+    width: px(230);
+    height: px(80);
+    text-align: center;
+    line-height: px(80);
+    flex-shrink: 0;
+    margin-left: px(30);
+}
+.inp-box input {
+    width: 100%;
+}
+.inp-box .dis {
+    color: #999;
+    border-color: #999;
+    pointer-events: none;
+}
+.btn {
+    margin-top: px(120);
+    color: #fff;
+    background-color: rgb(0, 188, 38);
+    font-size: px(44);
+}
+.code-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .code-btn {
+        width: px(220);
+        flex-shrink: 0;
+        font-size: px(40);
+        padding: 0 px(10);
+        border: none;
+        &.dis {
+            border-color: #f1f1f1;
+            color: #999;
+        }
+    }
+}
+
+</style>

src/pages/index/login.vue

@@ -19,6 +19,7 @@
                 />
             </div>
             <button class="btn" @click="submit">确定</button>
+            <p class="find-password" @click="jump('/pages/index/find-password')">找回密码</p>
         </div>
     </div>
 </template>
@@ -119,7 +120,7 @@ export default {
 
 <style lang="scss" scoped>
 .page {
-    height: 100%;
+    height:100vh;
     background-color: #fff;
 }
 .main {
@@ -164,7 +165,13 @@ export default {
 .btn {
     margin-top: px(120);
     color: #fff;
-    background-color: #e92e25;
+    background-color: rgb(0, 188, 38);
     font-size: px(44);
 }
+.find-password{
+    margin-top: px(50);
+    font-size: px(40);
+    color: #666;
+    text-align: center;
+}
 </style>