caimei-applets-caimei/pages/login/logincode.vue

<template>
    <view class="container login">
        <view class="login-main">
            <image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
        </view>
        <view class="login-input">
            <keyInput borderValueColor="#E1E1E1" borderActiveColor="#E1E1E1" ref="vcodeInputRef" @vcodeInput="keyInput"
                @vcodeChange="keyInputChangeHandle" sum="6">
            </keyInput>
        </view>
        <button class="login-btn" @click.stop="goLogin" :class="isDisabled ? 'disabled' : ''"
            :disabled="isDisabled">邀请码登录</button>
        <view class="login-tips">
            邀请码是采美平台为了方便机构内成员互相邀请并快速注册采美账号推出的一项邀请机制。机构成员在任一渠道（包括采美365网站和微信“采美采购商城”小程序）注册了采美账号，该成员可在其个人中心添加其他机构成员，系统自动为每一个成员生成邀请码。其他成员使用邀请码可直接登录“采美采购商城”小程序。
        </view>
    </view>
</template>

<script>
    import authorize from '@/common/config/authorize.js'
    import wxLogin from '@/common/config/wxLogin.js'
    import { mapState, mapMutations } from 'vuex'
    import keyInput from '@/components/uni-keyinput/uni-keyinput'

    export default {
        components: {
            keyInput
        },
        data() {
            return {
                params: {
                    invitationCode: '', //获取用户登录的邀请码
                    unionId: 0,
                    nickName: '',
                    avatarUrl: '',
                },
            }
        },
        onLoad(option) {

        },
        computed: {
            ...mapState(['isWxAuthorize', 'isLoginType', 'isLoginOrderId']),
            isDisabled() { // 邀请码长度是否符合要求
                return this.params.invitationCode.trim().length < 6
            },
        },
        methods: {
            ...mapMutations(['login', 'wxLogin']),
            goLogin() {
                if (this.params.invitationCode == '') {
                    this.$util.msg('请输入邀请码', 2000)
                    return
                }
                this.isUserInfo = false
                this.params.unionId = uni.getStorageSync('unionId')
                // 友盟埋点邀请码确认登录点击事件
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent('Um_Event_InvitationCode', {
                        Um_Key_PageName: '邀请码登录',
                        Um_Key_SourcePage: '邀请码页面',
                    })
                }
                this.GetUserProfile()
            },
            navigatorRegirst(url) {
                // 友盟埋点注册入口点击事件
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent('Um_Event_zhuce', {
                        Um_Key_PageName: '立即注册',
                        Um_Key_SourcePage: '个人中心',
                    })
                }
                this.$api.navigateTo(url)
            },
            GetUserProfile() { //获取用户微信个人信息
                const self = this
                wx.getUserProfile({
                    desc: '采美采购商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success(res) {
                        console.log('微信获取用户信息新API', res)
                        self.wxLogin(res.userInfo)
                        self.params.nickName = res.userInfo.nickName
                        self.params.avatarUrl = res.userInfo.avatarUrl
                        self.BindingWechat(self.params)
                    },
                    fail() {
                        self.$util.msg('授权失败', 2000)
                    }
                })
            },
            async BindingWechat(params) {
                //绑定微信并登陆
                try {
                    await this.UserService.InvitationCodeLogin(params)
                    const url = uni.getStorageSync('LOGIN_REDIRECT_URL')
                    wxLogin.wxLoginAuthorize()
                    setTimeout(() => {
                        if (url) {
                            if (url.indexOf('tabBar') > -1) {
                                uni.switchTabTo(url)
                            } else {
                                this.$api.reLaunch(url)
                            }
                        } else {
                            if (this.userIdentity === 3) {
                                this.$api.navigateTo('/pages/supplier/index/index')
                            } else {
                                this.$api.switchTabTo('/pages/tabBar/user/user')
                            }
                        }
                        uni.removeStorageSync('LOGIN_REDIRECT_URL')
                    }, 1000)
                } catch (error) {
                    this.$util.msg(error.msg, 2000)
                    this.isUserInfo = false
                }
            },
            keyInput(val) { // 输入框输入介绍
                // this.params.invitationCode = val
                console.log(val)
            },
            keyInputChangeHandle(val) { // 输入框输入事件
                this.params.invitationCode = val
                // console.log(val)
            },
            setFocus() { // 控制组件获取焦点
                this.$refs.VcodeInput.setFocus()
            },

            setBlur() { // 控制组件失去焦点
                this.$refs.VcodeInput.setBlur()
            },
            clearValue() { // 清除已输入
                this.$refs.VcodeInput.clearValue()
            },
            InitAuthorize() { //是否已授权 0:为取消授权 1:为已授权 2:为未操作
                wxLogin.wxLoginQuick()
            }
        },
        onShow() {
            this.$api.getStorage().then((resolve) => {
                this.params.unionId = resolve.unionId ? resolve.unionId : 0
            })
            this.InitAuthorize()
        }
    }
</script>

<style lang="scss">
    .login {
        width: 100%;
        height: auto;

        .model-warp.none {
            display: none;
        }

        .model-warp.show {
            display: block;
        }

        .login-main {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 284rpx;
            padding: 60rpx 0 40rpx 0;
            margin-bottom: 70rpx;

            .logo {
                width: 611rpx;
                height: 284rpx;
                display: block;
            }
        }

        .login-input {
            width: 600rpx;
            height: 88rpx;
            padding: 24rpx 0;
            margin: 30rpx auto;
            margin-bottom: 30rpx;
            background: #FFFFFF;
            position: relative;
        }

        .login-row {
            padding: 0 75rpx;
            font-size: $font-size-28;
            line-height: 40rpx;
            color: #FF5B00;
            margin-bottom: 48rpx;
            text-align: right;
        }

        .login-btn {
            width: 600rpx;
            height: 88rpx;
            border-radius: 44rpx;
            font-size: $font-size-28;
            line-height: 88rpx;
            color: #FFFFFF;
            margin: 0 auto;
            text-align: center;
            background: $btn-confirm;

            &.disabled {
                background: #E1E1E1;
            }
        }

        .login-btn-last {
            width: 600rpx;
            height: 86rpx;
            border-radius: 44rpx;
            font-size: $font-size-28;
            line-height: 88rpx;
            color: $color-system;
            margin: 0 auto;
            text-align: center;
            border: 1px solid $color-system;
            margin-top: 20rpx;
        }

        .login-tips {
            width: 100%;
            height: auto;
            margin-top: 80rpx;
            box-sizing: border-box;
            padding: 0 75rpx;
            line-height: 44rpx;
            font-size: $font-size-20;
            color: #fea785;
            text-align: justify;
            text-indent: 40rpx;
        }

        .model-authorization {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;

            .authorization {
                width: 518rpx;
                height: 320rpx;
                position: absolute;
                background: rgba(255, 255, 255, .7);
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;

                .to-btn {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    width: 70%;
                    height: 88rpx;
                    font-size: $font-size-28;
                    line-height: 88rpx;
                    color: #FFFFFF;
                    text-align: center;
                    border-radius: 44rpx;
                }
            }
        }
    }
</style>