magicsound/pages/login/LoginPage.vue
2024-09-20 16:17:02 +08:00

82 lines
1.6 KiB
Vue

<template>
<view>
<view class="content" :style="'paddingTop: '+systemBarHeight + 'px;'">
<view class=""
style="display: flex; height: 45rpx; width: 100%; align-items: center;justify-content: center;"
:style="{ marginTop: systemBarHeight + 'px' }">
<image src="/static/image/ic_back.png"
style="width: 24.31rpx; height: 43.06rpx; margin-left: 36rpx; position: absolute; left: 0;"
@click="toBack()" alt="" />
<text style="font-size: 38rpx; color: white;">登录</text>
</view>
<view class="" style="padding-top: 50rpx;">
<view class="" @click="wxLogin()"
style="width: 300rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; background-color: green;">
<text style="color: white;">登录</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
systemBarHeight: 0,
isLogin: false
}
},
onLoad() {
this.getStatusBarHeight();
},
methods: {
// 获取状态栏高度的方法
getStatusBarHeight: function() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.systemBarHeight = res.statusBarHeight
}
});
},
toBack() {
uni.navigateBack();
},
async wxLogin() {
if (this.isLogin) {
return;
}
this.isLogin = true;
var loginRes = await uni.login();
console.log(loginRes);
this.isLogin = false;
}
}
}
</script>
<style>
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #0E0A10FF;
}
</style>