162 lines
3.9 KiB
Vue
162 lines
3.9 KiB
Vue
<template>
|
||
<view class="login" style="background-image: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/login/Group_491.png);">
|
||
<view class="login-title">
|
||
<view class="login-tip" style="font-size: 40rpx; color: #000000;">欢迎来到【榴园社区】</view>
|
||
<view class="login-tip" style="font-size: 28rpx; color: #555555; margin-top: 30rpx;">为了更好的体验，申请获取您的公开信息</view>
|
||
<view class="login-tip" style="font-size: 28rpx; color: #555555; margin-top: 14rpx;">（头像、昵称等）</view>
|
||
<view class="login-button">
|
||
<button
|
||
class="login-btn"
|
||
open-type="getPhoneNumber"
|
||
@click="headerLoginClick"
|
||
getPhoneNumber="getPhoneNumber"
|
||
>
|
||
授权登录
|
||
</button>
|
||
</view>
|
||
<view class="login-to-home" >
|
||
<text class="login-to-home-text" @click='tohome'>
|
||
返回首页>>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { apiArr } from '../../api/login';
|
||
import { request } from '../../utils';
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLogin: false,
|
||
}
|
||
},
|
||
methods: {
|
||
headerLoginClick() {
|
||
uni.login({
|
||
onlyAuthorize: true,
|
||
success: (res) => {
|
||
console.log('res',res);
|
||
request(apiArr.login, 'POST', {
|
||
code: res.code
|
||
}).then((res1) => {
|
||
console.log('11231231', res1);
|
||
if(res1.error) return;
|
||
request(apiArr.loginInfo, 'POST', {}, {token: res1.token}).then((res2) => {
|
||
console.log('11231231', res1);
|
||
if(res1.error) return;
|
||
// 保存userId 后续接口使用
|
||
uni.setStorageSync('userId', ress.user_id);
|
||
uni.setStorageSync('openId', ress.open_id);
|
||
uni.setStorageSync('shopId', ress.wshop_id);
|
||
this.isLogin = true;
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getPhoneNumber(event) {
|
||
let that = this
|
||
console.log('thias', that);
|
||
const { isLogin } = this;
|
||
console.log('获取信息', event);
|
||
if (event.detail.errMsg === "getPhoneNumber:ok") {
|
||
request(apiArr.loginGetPhone, 'POST', {
|
||
code: event.detail.code
|
||
}).then((res) => {
|
||
if (isLogin) {
|
||
uni.setStorageSync('phone', res.phone);
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
duration: 2000,
|
||
success: () => {
|
||
// setTimeout(() => {
|
||
// this.tohome();
|
||
// }, 2000)
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '登录失败',
|
||
icon: 'error',
|
||
mask: true,
|
||
duration: 2000,
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
// uni.removeStorageSync('ctoken');
|
||
// uni.removeStorageSync('userId');
|
||
// uni.removeStorageSync('openId');
|
||
// uni.removeStorageSync('phone');
|
||
// uni.removeStorageSync('is_deal');
|
||
// uni.removeStorageSync('is_dev');
|
||
// uni.removeStorageSync('is_shop');
|
||
// uni.removeStorageSync('shopId');
|
||
console.error('用户拒绝授权:', event.detail.errMsg);
|
||
}
|
||
},
|
||
|
||
// 返回主页
|
||
tohome: function () {
|
||
// console.log(123);
|
||
uni.redirectTo({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.login {
|
||
background-size: 100%;
|
||
width: 100%;
|
||
height: 1334rpx;
|
||
position: fixed;
|
||
}
|
||
|
||
.login-title {
|
||
margin-top: 655rpx;
|
||
}
|
||
|
||
.login-tip {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-button {
|
||
margin: 61rpx 52rpx 0 48rpx;
|
||
}
|
||
|
||
.login-btn {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
background: #FF512A;
|
||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||
}
|
||
|
||
.van-button__text {
|
||
font-size: 36rpx;
|
||
margin: 19rpx 253rpx;
|
||
}
|
||
|
||
.login-to-home {
|
||
margin-top: 61rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.login-to-home-text {
|
||
color: #FF512A;
|
||
font-size: 26rpx;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
</style>
|