water_affairs/pages/login/modules/otherLogin.vue

<template>
    <view class="container">
        <u-divider text="其他登录方式" textSize="3.2vw" textColor="#fff" lineColor="#fff" />
        <view class="grid-box">
            <view class="item" @click="changeLoginMethod">
                <text class="iconfont" :class="loginMethod == 'phone' ? 'icon-zhanghaodenglu' : 'icon-shoujidenglu'" />
            </view>
            <view class="item" style="background-color: #28C445;" v-if="port == 'wechat'" @click="wechatLogin">
                <u-icon name="weixin-fill" size="8vw" color="#fff"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
import { loginMsg } from "./dispose";
export default {
    name: "OtherLogin",
    props: {
        "loginMethod": String,
        onChange: Function,
        isAgreement: Boolean
    },
    data() {
        return {
            port: 'wechat'
        }
    },
    created() {
        // #ifndef MP
        this.port = 'h5'
        // #endif
        // #ifdef MP-WEIXIN
        this.port = 'wechat'
        // #endif
    },
    methods: {
        /* 改变登录方式 */
        changeLoginMethod() {
            this.$emit("onChange", this.loginMethod == 'account' ? 'phone' : 'account')
        },
        /* 微信登录 */
        wechatLogin() {
            if (!this.isAgreement) return uni.showToast({
                title: '请阅读并勾选用户协议',
                icon: 'none',
            })
            let that = this;
            uni.login({
                success(res) {
                    that.$Http.loginbywechat({
                        wechat_code: res.code,
                        "systemclient": "wechat"
                    }).then(res => {
                        console.log("微信快捷登录", res)
                        if (that.cutoff(res.msg)) return;
                        loginMsg(res.account_list, that)
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    width: 275px !important;
    margin: 0 auto;

    .grid-box {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba($color: #fff, $alpha: .3);
            flex-shrink: 0;
            margin: 0 7px 7px;
            color: #fff;

            .iconfont {
                font-size: 20px;
            }
        }
    }
}
</style>