luojigou_xcx_agent/src/pages/index/index.vue

<template>
    <view class="Home">
        <div class="Home-overlay"> </div> 
        <div class="home-content">
            <view class="empty" :style="{height: statusBarHeight + 2 +'px'}"/>
            <view class="title">
                中德智慧教育 <br/> 
                全球儿童思维教育专家
            </view>
            <view class="line"/>
            <view class="clause">
                <view class="clause-first">
                    内部系统，我们需要您授权以下信息
                </view>
                <view class="clause-seconed">
                    <view class="dot" />
                    获取您的公开信息（昵称、头像等）
                </view>
            </view>
            <button 
                class="auth-btn"
                open-type="getPhoneNumber" 
                @getphonenumber="getPhoneNumber"
                :loading="loading"
                :disabled="loading"
            >
                授权登录
            </button>

            <view class="rule">
                仅限中德智慧内部代理商使用
            </view>
 
        </div>
        <view class="logo">
            <image :src="staticPicture.logo" mode="aspectFit"/>
        </view>
           
    </view>
</template>

<script>
import { Login } from '@/api/user.js'
import { setLocalStorage } from '@/utils/wxTool.js'
import { staticPicture }  from '@/utils/global.js'
import Tip from '@/utils/tip'
export default {
    name: 'Home',
    computed: {
        statusBarHeight () {
            return this.$store.state.systemInfo.statusBarHeight
		},
    },
    onReady () {
        this.wxLogin()
    },
    data () {
        return {
            code: '',
            staticPicture,
            loading: false
        }
    },
    methods: {
        //  wx.login 
        async wxLogin () {
         
            const res = await wx.login()
            console.log(res);
            const { code } = res
            if (code) {
                this.code = code
            }
            
        },
        //获取手机号 
        getPhoneNumber (e) {
            console.log(e);
            const { encryptedData, iv} = e.detail
           
            this.Login(encryptedData, iv)
        },
        // 用户登录
        async Login (encryptedData, iv) {
          this.loading = true
          const {data, status} =  await Login({encryptedData, iv, code: this.code})
          this.loading = false
          if (status === 200) {
                Tip.success('登录成功')
                setLocalStorage('token', data.token)
                this.$store.commit('set_userInfo', data)
                // const routes = getCurrentPages()
                // console.log(routes, 'routes');
                // const route =  routes[routes.length - 2]
         
                // const param = route.__displayReporter.showOptions.query
                // uni.redirectTo({
                //     url: '/' + route.route + '?' + param
                // })
                uni.reLaunch({
                    url: '/pages/user/index'
                })
          } else {
            this.code = ''
            this.wxLogin()
          }
        }
    }
}
</script>
<style scoped lang="less">
.Home {
    width: 100vw;
    height: 100vh;
    background-color: #CFD0DE;
    padding: 12% 6% 34%;
    box-sizing: border-box;
    position: relative;
    .Home-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(38, 38, 58, 0.8);
        z-index: 3;
    }

    .home-content {
        position: absolute;
        z-index: 4;
    }
    .title {
        width: 600rpx;
        height: 160rpx;
        font-size: 60rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 80rpx;
        margin-bottom: 48rpx;
    }
    .line {
        width: 100rpx;
        height: 8rpx;
        background-color: #44CEB6;
        margin-bottom: 186rpx;
    }
    .clause {
        margin-bottom: 84rpx;
        .clause-first {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
        .clause-seconed {
            margin-top: 16rpx;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            .dot {
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                background-color: #fff;
                margin-right: 20rpx;
            }
        }
    }

    .auth-btn {
        width: 656rpx;
        height: 96rpx;
        background: #1677FF;
        border-radius: 200rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-left: -0%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rule {
        width: 100%;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        margin-top: 20rpx;
        margin-bottom: 98rpx;
    }

    .logo {
        width: 100%;
        height: 266rpx;
        margin-left: -53rpx;
        position: fixed;
        bottom: 12%;
        z-index: 1;
        image {
            width: 42.96%;
            height: 100%;
            object-fit: cover;
            display: block;
            margin: 0 auto;
        }
    }
}
</style>