You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
2.9 KiB
124 lines
2.9 KiB
<template>
|
|
<uv-popup ref="loginPopup"
|
|
mode="center"
|
|
:round="20"
|
|
:closeable="false"
|
|
:maskClick="false"
|
|
:closeOnClickOverlay="false"
|
|
:customStyle="{backgroundColor: '#fff', padding: 0}"
|
|
overlayOpacity="0.8">
|
|
<view class="login-card">
|
|
<view class="login-title">登录后即可查看分享内容</view>
|
|
<view class="login-content">
|
|
<button class="login-btn" @click="handleLogin">
|
|
微信一键登录
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
open(){
|
|
this.$refs.loginPopup.open()
|
|
},
|
|
close(){
|
|
this.$refs.loginPopup.close()
|
|
},
|
|
|
|
// 处理登录
|
|
handleLogin() {
|
|
uni.showLoading({
|
|
title: '登录中...'
|
|
})
|
|
uni.login({
|
|
success : (res) => {
|
|
if (res.errMsg != "login:ok") {
|
|
return
|
|
}
|
|
|
|
let data = {
|
|
code: res.code,
|
|
}
|
|
|
|
if (uni.getStorageSync('shareId')) {
|
|
data.shareId = uni.getStorageSync('shareId')
|
|
}
|
|
|
|
if (uni.getStorageSync('id')) {
|
|
data.id = uni.getStorageSync('id')
|
|
}
|
|
|
|
if (uni.getStorageSync('state')) {
|
|
data.state = uni.getStorageSync('state')
|
|
}
|
|
|
|
this.$api('wxLogin', data, res => {
|
|
|
|
uni.hideLoading()
|
|
|
|
if (res.code != 200) {
|
|
this.close()
|
|
return
|
|
}
|
|
|
|
uni.setStorageSync('token', res.result.token)
|
|
this.$store.commit('getUserInfo')
|
|
this.close()
|
|
this.$emit('login')
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.login-card {
|
|
width: 600rpx;
|
|
padding: 40rpx;
|
|
text-align: center;
|
|
|
|
.login-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.login-content {
|
|
.login-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.login-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
height: 88rpx;
|
|
background: #07C160;
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
|
|
.wechat-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|