Client-Teapay/src/pages/my/login.vue

<template>
    <view class="login">
        <view class="HLogo">
            <!-- <img src="@/static/img/ycjs.png" alt="" /> -->
            <p>欢迎登录数智云商城</p>
        </view>
        <view class="phoneL" v-if="LoginType == 1">
            <view class="clearfix"><input v-model="formD2.mobile" placeholder="请输入手机号" type="number" maxlength="11" :focus="Focus == 1" /></view>
            <view class="clearfix">
                <input v-model="formD2.captcha" placeholder="请输入验证码" confirm-type="go" type="number" maxlength="5" :focus="Focus == 2" class="w70" />
                <view @click="getVerifyCode" :class="{w30:true,corb:msgNum!=='获取验证码'}">{{msgNum}}</view>
            </view>
            <view v-if="signIn" class="clearfix">
                <input placeholder="请输入邀请码" v-model="formD2.invite" />
            </view>
        </view>
        <view class="numberL" v-else>
            <view class="clearfix">
                <input placeholder="请输入账号" v-model="formD.username" />
            </view>
            <view class="clearfix">
                <input placeholder="请输入密码" v-model="formD.password" password />
            </view>
            <view class="clearfix">
                <input placeholder="请输入验证码" confirm-type="go" maxlength="4" class="w70" v-model="formD.verifyCode" />
                <img :src="verifyimage" @click="changVerifyimage" class="w30 verifyImg" alt="" />
            </view>
        </view>
        <view @click="login" :class="{bagBtn:true,corg:ISFill}">登录</view>
        <view class="btnTxt" @click="signIn = !signIn">{{ signIn ? "老用户登录" : "还没有账号"}}</view>
        <!-- <view class="btnTxt" @click="LoginType = LoginType == 1 ? 0 : 1">
      {{ LoginType == 1 ? "密码登录" : "验证码登录" }}
    </view> -->
    </view>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import { post } from "@/request/api.js";
export default {
    name: "login",
    data() {
        return {
            LoginType: 1,
            timestamp: parseInt((new Date()) / 1),
            formD: {
                username: "",
                password: "",
                verifyCode: "",
            },
            formD2: {
                mobile: '',
                captcha: "",
                invite: ""
            },
            verifyimage: "",
            msgNum: "获取验证码",
            signKey: '',
            messageId: "",

            ISFill: false,
            signIn: false, //是否为注册

            Focus: 1, //输入框焦点  1手机号 2验证码
        };
    },
    onLoad(option) {
        // this.changVerifyimage(); //获取图形验证码
        // this.getKey();
    },
    onLaunch() {},
    onShow() {},
    onHide() {},
    methods: {
        login() {
            if (!this.ISFill) {
                uni.showToast({
                    title: "登录信息填写有误哦",
                    duration: 2000,
                    icon: "none",
                });
                return
            }
            post("login",this.formD2).then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync('token', res.data.token);
                    this.getuserInfo();
                }
            });
        },
        getuserInfo() {
            post("user/userinfo").then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync('userinfo', res.data.data);

                    let pages = getCurrentPages() // 获取栈实例
                    let page = pages[pages.length - 1].route // 获取当前页面的数据，包含页面路由
                    let is = 1;
                    for (const i of pages) {
                        is++;
                        if(i.route != page) break;
                    }

                    uni.navigateBack({
                        delta: is
                    });
                }
            });
        },

        getVerifyCode() {
            if (!this.isPhone(this.formD2.mobile)) {
                appEv.errTips("手机号填写有误！");
                return
            }
            post("getSms", {
                mobile: this.formD2.mobile
            }).then((res) => {
                if (res.code === 0) {
                    this.Focus = 2; //给验证码框焦点
                    let number = 59;
                    let as = setInterval(() => {
                        this.msgNum = number + "s后重发"
                        number--;
                        if (number == 0) {
                            this.msgNum = "重发验证码"
                            clearTimeout(as);
                        }
                    }, 1000);
                }
            });
        },
        isPhone(s) {
            return /^1[0-9]{10}$/.test(s)
        },
        FillIn() {
            if (this.LoginType == 1) {
                let m = this.formD2.mobile
                let v = this.formD2.captcha
                if (m && v && v.length == 5 && this.isPhone(m)) this.ISFill = true
                else this.ISFill = false
            } else {
                let u = this.formD.username
                let p = this.formD.password
                let v = this.formD.verifyCode
                if (u && p && v && v.length == 4) this.ISFill = true
                else this.ISFill = false
            }
        },
    },
    computed: {},

    watch: {
        formD: {
            deep: true,
            handler(val) {
                this.FillIn()
            }
        },
        formD2: {
            deep: true,
            handler(val) {
                this.FillIn()
            }
        },
    },
};
</script>
<style scoped lang='scss'>

.login {
    text-align: center;

    .HLogo {
        padding-top: 80rpx;
        margin-bottom: 60rpx;

        img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid #e6e6e6;
        }

        P {
            // font-weight: 500;
            font-size: 40rpx;
            margin-top: 16rpx;
            font-family: "webfont" !important;
        }
    }

    input {
        width: 100%;
        padding: 20rpx 0;
        font-size: 32rpx;
        text-align: left;
    }

    .phoneL,
    .numberL {
        padding: 0 40rpx;
        margin-bottom: 80rpx;

        .clearfix {
            border-bottom: 1px solid #d9d9d9;
            margin-bottom: 40rpx;

            .w70 {
                width: 70%;
                float: left;
            }

            .w30 {
                width: 30%;
                float: right;
                text-align: right;
                padding: 22rpx 0;
                color: #2e997f;
            }

            .verifyImg {
                width: 162rpx;
                height: 56rpx;
                padding: 0;
                margin: 14rpx 0;
            }

            &:last-child {
                margin-bottom: 0;
            }

            .corb {
                color: #999;
            }
        }
    }

    .bagBtn {
        width: 620rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        color: #fff;
        font-size: 36rpx;
        background: #cde9e3;
        border-radius: 50rpx;
        margin: 0 auto;

        &.corg {
            background: #58B8A1;
        }
    }

    .btnTxt {
        color: #2e997f;
        font-size: 32rpx;
        margin-top: 30rpx;
    }
}
</style>