uniapp微信小程序登录

<template>
    <view class="vue_page">
        <!-- html start -->
        <view class="navbar">
            <view class="title_main">
                <text>海川检测</text>
            </view>
            <image class="logobg" src="../../static/images/loginbg.jpg" mode=""></image>
            <image class="logo" src="../../static/images/logo.jpg" mode=""></image>
        </view>

        <view style="margin-top: 400rpx;" v-if="flag">
            <view style="color: #444;font-size: 32rpx;font-weight: bold;text-align: center;margin-bottom: 50rpx;">
                请完成微信授权以继续使用</view>
            <view class="vue_main">
                <button @click="getPhoneNumber">授权微信用户信息</button>
            </view>
        </view>
        <view style="margin-top: 250rpx;text-align: center;" v-else>
            <view class="vue_main">
                <button type="default" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">获取手机号</button>
                <view style="margin-top: 30rpx;">登录即表示您同意《用户隐私协议》</view>
            </view>
        </view>
        <!-- html end -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // data start
                imageUrlone: this.$globalPath.img,
                flag: true,
                // data end
            }
        },
        onLoad() {},
        methods: {
            // methods start
            getPhoneNumber(e) {
                uni.getUserProfile({
                    desc: '登录',
                    lang: 'zh_CN',
                    success: (el) => {
                        uni.login({
                            success: (e) => {
                                // 请求 start
                                let obj = {
                                    userInfo: el.userInfo,
                                    iv: el.iv,
                                    signature: el.signature,
                                    encryptedData: el.encryptedData,
                                    code: e.code
                                }
                                uni.setStorageSync('arg', JSON.stringify(obj))
                                this.flag = false
                            }
                        })
                    }
                })
            },
            onGetPhoneNumber(e) {
                let options = JSON.parse(uni.getStorageSync('arg'));
                uni.showLoading({
                    title: '登录中'
                })
                this.$u.api.http({
                    method: 'post',
                    url: this.$globalPath.login,
                    data: {
                        ...options,
                        phoneCode: e.detail.code
                    },
                }).then(res => {
                    uni.hideLoading()
                    if (res.code === 200) {
                        uni.setStorageSync('token', res.result.token);
                        uni.setStorageSync('userInfo', res.result.userInfo);
                        uni.setStorageSync('role', res.result.role);
                        uni.switchTab({
                            url: '../index/index'
                        });
                    } else {
                        uni.showToast({
                            icon: 'error',
                            title: res.message
                        });
                    }
                })
            },
            // methods end
        }
    }
</script>

<style scoped lang="scss">
    // 头部
    .navbar {
        width: 750rpx;
        position: relative;
        // background-image: url('~@/static/images/myachievement.png');
        // background-image: url('../../../static/images/myachievement.png');
    }

    .navbar>.logobg {
        width: 750rpx;
        position: fixed;
        width: 100%;
        height: 800rpx;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .navbar>.logo {
        width: 220rpx;
        height: 220rpx;
        margin-top: 200rpx;
        margin-left: 200rpx;
    }

    .title_main {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-top: 90rpx;
        z-index: 11111;
        width: 750rpx;
    }

    .navbar>view>text {
        padding-left: 180rpx;
    }

    .vue_page {
        padding-left: 52rpx;
        padding-right: 52rpx;
    }

    .vue_logo {
        padding-top: 20vh;
    }

    .logo {
        display: block;
        margin-left: auto;
        margin: auto;
        width: 200rpx;
        height: 200rpx;
    }

    .vue_main>button {
        background-image: linear-gradient(to bottom right, #1576ff, #1576ff);
        color: #fff;
        font-size: 40rpx;
        width: 500rpx;
    }

    .vue_footer {
        margin-top: 36rpx;
        color: #666;
        font-size: 28rpx;

        navigator {
            display: inline-block;
            color: $themeColor;
            padding: 0 12rpx;
        }
    }

    .btn_a {
        color: #ff0000 !important;
    }

    .vue_btn {
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 50rpx;
        border: 1px solid $themeColor;
        box-sizing: border-box;
        margin-top: 30rpx;
        color: $themeColor;
        text-align: center;
        font-size: 30rpx;
    }
</style>