yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/dt_login.vue

<template>
    <FootDialog direction="center" :config="config" :isTitle="false" :isRadius="false" :visible.sync="dialogShow"
                @close="$emit('close')">
        <!-- #ifdef MP-WEIXIN -->
        <template slot="main">
            <view class="dt-login-wrap">
                <view class="title">您还没登录</view>
                <view class="subtitle">请先登录再进行操作</view>
                <image class="login-icon" src="/static/common/login.png"></image>

                <view class="btn-wrap">
                    <button class="btn-base"
                            hover-class="button-hover"
                            @tap="hide">暂不登录
                    </button>
                    <button class=" btn-base "
                            style="color: #2f7ff5;"
                            hover-class="button-hover"
                            open-type="getPhoneNumber"
                            @getphonenumber="tapGetPhoneNumber">立即登录
                    </button>
                </view>
            </view>
        </template>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <template slot="main">
            <view class="dt-login-wrap">
                <view class="title">登 录</view>
                <view>
                    <view>
                        <text>账号：</text>
                        <input v-model="formData.account" type="number" placeholder="请输入账号"/>
                    </view>
                    <view class="line"></view>
                    <view>
                        <text>密码：</text>
                        <input v-model="formData.passwd" placeholder="请输入密码"/>
                    </view>
                </view>
                <view class="btn-wrap">
                    <button class="btn-base dt-color-primary"
                            hover-class="button-hover"
                            @tap="touristLogin">登 录
                    </button>
                </view>
            </view>
        </template>
        <!-- #endif -->

    </FootDialog>
</template>
<script>
    import FootDialog from './foot_dialog.vue'
    import {setTimeout} from 'timers';

    export default {
        components: {
            FootDialog
        },
        data() {
            return {
                config: {
                    mainBgColor: 'transparent'
                },
                dialogShow: false,
                respWx: {},
                respWx2: {},
                respLogin: {},
                timer: null,
                inviteCode: null,
                formData: {
                    account: '',
                    passwd: ''
                },
                formRules: {
                    account: [{
                        required: true,
                        message: '请输入账号'
                    }, {
                        type: 'mobile',
                        message: '手机号码有误！'
                    }],
                    passwd: [{
                        required: true,
                        message: '请输入密码'
                    }]
                }
            }
        },
        methods: {
            show() {
                console.log("show");
                let that = this
                this.inviteCode = this.$auth.getInviteCode()
                console.log("inviteCode", this.inviteCode);
                this.dialogShow = true;
                this.$mpi.wxLogin().then(res => {
                    this.respWx = res
                    console.log("res", res);
                })
                this.setTimer()
            },
            hide() {
                console.log("hide");
                if (this.timer) {
                    clearTimeout(this.timer)
                    this.timer = null
                    console.log('clearTimeout')
                }
                this.dialogShow = false;
            },

            async setTimer() {
                console.log("setTimer");
                this.respWx = await this.$mpi.wxLogin()
                this.timer = setTimeout(() => {
                    this.setTimer()
                }, 240000) // 每隔4分钟重新请求 jscode
            },

            async login(detail) {
                console.log("2:login", detail);
                try {
                    this.$dialog.showLoading()
                    if (!this.respLogin.sessionKey) {
                        this.respLogin = await this.$api.loginByCode({
                            _isReject: true,
                            code: this.respWx.code
                        })

                    }
                    console.log(this.respLogin);
                    let resp = await this.$api.loginByWxapp({
                        _isReject: true,
                        openId: this.respLogin.openId,
                        sessionKey: this.respLogin.sessionKey,
                        encryptedData: detail.encryptedData,
                        iv: detail.iv,
                        inviteCode: this.inviteCode
                    })
                    console.log(56, resp)
                    resp.openId = this.respLogin.openId
                    resp.sessionKey = this.respLogin.sessionKey
                    let userType = this.$global.userType.member
                    this.$auth.login(userType, resp.sessionId, resp.userId, resp)
                    this.hide()
                    // this.$auth.setInviteCode(null);
                    this.$auth.removeInviteCode();
                    let a = this.$auth.getInviteCode();
                    if (this.inviteCode) {
                        this.$emit('getDistributorCoupon')
                    } else {
                        this.$emit('signIn', resp)
                    }

                } catch (err) {
                    // console.log(72,err)
                    this.$dialog.alert({
                        content: err.errmsg || '服务繁忙~'
                    })
                } finally {
                    this.$dialog.hideLoading()
                    if (this.timer) {
                        clearTimeout(this.timer)
                        this.setTimer()
                    }
                }
            },
            /**
             * app 登陆逻辑
             */
            async touristLogin() {
                console.log("");
                if (!this.validate(this.formRules, this.formData)) {
                    return
                }
                try {
                    this.$dialog.showLoading()
                    if (!this.respLogin.sessionKey) {
                        this.respLogin = await this.$api.loginByCode({
                            _isReject: true,
                            code: this.respWx.code
                        })
                    }
                    let resp = await this.$api.touristLogin({
                        account: this.formData.account,
                        passwd: this.formData.passwd
                    })
                    console.log(resp)
                    let userType = this.$global.userType.member
                    resp.openId = this.respLogin.openId
                    resp.sessionKey = this.respLogin.sessionKey
                    this.$auth.login(userType, resp.sessionId, resp.userId, resp)
                    this.hide()
                    this.$auth.removeInviteCode();
                    let a = this.$auth.getInviteCode();
                    if (this.inviteCode) {
                        this.$emit('getDistributorCoupon')
                    } else {
                        this.$emit('signIn', resp)
                    }
                } catch (err) {
                    // console.log(72,err)
                    this.$dialog.alert({
                        content: err.errmsg || '服务繁忙~'
                    })
                } finally {
                    this.$dialog.hideLoading()
                    if (this.timer) {
                        clearTimeout(this.timer)
                        this.setTimer()
                    }
                }

            },
            /**1 ：点击登陆
             * @param {Object} e
             */
            async tapGetPhoneNumber(e) {
                console.log(1, "点击登陆")
                // console.log(48,e.detail)

                if (e.detail.errMsg != 'getPhoneNumber:ok') {
                    return
                }

                // let authSetting = await this.$mpi.wxGetSetting()
                // if(authSetting['scope.userInfo']) {
                //   let userInfo = await this.$mpi.wxGetUserInfo()
                //   console.log(56,userInfo)
                // }
                // console.log(55,authSetting)
                this.login(e.detail)
            },

        },
        beforeDestroy() {
            if (this.timer) {
                clearTimeout(this.timer)
                this.timer = null
                console.log('clearTimeout')
            }
        }
    }
</script>

<style lang="scss">
    button {
        font-size: 28 rpx;
    }

    .dt-login-wrap {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 560 upx;
        background-color: #fff;
        border-radius: 16 upx;

        .title {
            padding-top: 60 upx;
            padding-bottom: 28 upx;
            font-size: 32 upx;
            font-weight: bold;
        }

        .subtitle {
            color: #7e7e7e;
            font-size: 26 upx;
        }

        .login-icon {
            margin: 25 upx auto 52 upx;
            width: 320 upx;
            height: 340 upx;
        }

        .btn-wrap {
            display: flex;
            width: 100%;
            line-height: 80 upx;
            padding: 8 rpx 0 rpx;
            font-size: 24 rpx;
            border-top: 1 upx solid #f2f2f2;

            .btn-base {
                padding: 0 60 rpx;
                flex: 1;
                text-align: center;
                color: #66656a;
                border-radius: 0;
            }

            .btn-base:before {
                position: absolute;
                top: 0;
                right: 1 upx;
                width: 100%;
                height: 100%;
                border-right: 1 upx solid #ebebeb;
                content: "";
            }

            .btn-base:last-child:before {
                display: none;
                content: "";
            }
        }

    }
</style>