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" /></view>
            <view class="clearfix">
                <input v-model="formD2.captcha" placeholder="请输入验证码" confirm-type="go" type="number" maxlength="5" 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">立即注册</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 { get, 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, //是否为注册
        };
    },
    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);
                    uni.navigateBack();
                }
            });
        },

        changVerifyimage() {
            let MathRandom = Math.random();
            this.verifyimage = this.$hosts.Hhost + "login/login/verifyimage.do?random=" + MathRandom;
        },
        getKey() {
            get("login/login/getKey.do").then(res => {
                if (res.resultCode == 1) {
                    this.signKey = res.data.key
                }
            })
        },

        getVerifyCode() {
            console.log(appEv);
            if (!this.isPhone(this.formD2.mobile)) {
                appEv.errTips("手机号填写有误！");
                return
            }
            post("getSms", {
                mobile: this.formD2.mobile
            }).then((res) => {
                if (res.code === 0) {
                    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>