<template>
<view class="container">
<!-- 自定义顶部 -->
<view class="custom-header">
<uni-icons type="left" size="40rpx" class="uni_back" @click="goBack"></uni-icons>
<view class="left-icon" @click="goBack">授权</view>
<view class="title"></view>
</view>
<!-- 页面内容 -->
<view class="content">
<view class="meisheng_first_aid">
<image src="../../static/login/logo.png" mode=""></image>
</view>
<view class="con_btn">
<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
<button type="primary" ref="primaryBtn" @click="zanBtn">暂不登陆</button>
</view>
<!-- 内部使用 -->
<view class="tips">
<uni-icons type="info" size="35rpx" color="#5581FF" style="margin-right: 5rpx;height:30rpx;width: 30rpx;"></uni-icons><text>仅限内部人员使用</text>
</view>
</view>
<!-- 弹出层 -->
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view class="popup_my">
<view class="popup_my_title">
<view class="title_name">
<view class="title_name_icon">
</view>
智慧院前急救
</view>
<view class="title_icon">
<uni-icons type="info" size="30" color="#A3C7AF"></uni-icons>
</view>
</view>
<view class="popup_my_message">
获取你的昵称.头像.地区及性别
</view>
<view class="popup_my_name">
<view class="my_name_icon">
<view class="my_name_img">
</view>
<view class="my_name_message">
<view class="my_name_top">
可可
</view>
<view class="my_name_bon">
微信个人信息
</view>
</view>
</view>
<view class="my_name_ok">
<uni-icons type="checkmarkempty" size="30" color="#A3C7AF"></uni-icons>
</view>
</view>
<!-- <view class="popup_my_other">
使用其他头像和昵称
</view> -->
<view class="popup_my_btn">
<button type="default" >拒绝</button>
<button type="primary" >允许</button>
</view>
</view>
</uni-popup>
<button @click="tologin">点击跳转首页</button>
</view>
</template>
<script>
import { log } from 'util';
import {request} from '../../request/request.js'
export default {
data() {
return {
type:'',
code:'',
userInfo1:{},
avatarUrl:'',
nickName:'',
sessionKey:'',
unionId:'',
username:'',
phone:'',
openId:'',
form:{
}
};
},
onmounted(){
},
methods: {
button(){
uni.switchTab({
url:'/pages/home/index'
})
},
goBack() {
uni.navigateBack();
},
zanBtn(){
uni.navigateTo({
url:"/pages/index/index"
})
// 清空所有数据
uni.clearStorageSync();
},
async loginAndGetUserInfo() {
try {
const res1 = await new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: (res1) => resolve(res1),
fail: (err) => reject(err)
});
});
const res2 = await request({url:'/user/code2Session', data:{code:res1.code}});
this.openId = res2.openid;
this.sessionKey = res2.session_key;
if (this.sessionKey) {
const res = await new Promise((resolve, reject) => {
uni.getUserInfo({
success: (res) => resolve(res),
fail: (err) => reject(err)
});
});
const userInfo = res.userInfo;
const encryptedData = res.encryptedData;
const iv = res.iv;
const wxEncryptedForm = {
encryptedData,
iv,
sessionKey: this.sessionKey
};
const data = await request({url:'/user/encryptedData', method:'POST', data:wxEncryptedForm});
const form = {
sessionKey: this.sessionKey,
avatarUrl: data.avatarUrl,
nickName: data.nickName,
unionId: '',
username: uni.getStorageSync('userName'),
phone: '',
openId: this.openId
};
return form;
}
} catch (error) {
throw error;
}
},
// 一键登录
async getPhoneNumber(e){
try {
const data1 = await this.loginAndGetUserInfo();
const code = e.detail.code;
const res = await request({url:'/getPhoneNumber', data:{code}});
const data = { ...data1, phone: res.purePhoneNumber };
const loginRes = await request({url:'/login', method:'POST', data});
uni.setStorageSync('loginRes',JSON.stringify(loginRes))
uni.switchTab({
url:'/pages/home/index'
})
// 在这里可以获取到loginAndGetUserInfo方法中异步操作的返回值data，并进行进一步处理
} catch (error) {
console.error(error);
}
},
}
}
</script>
<style lang="scss" scoped>
.container {
height: 100%;
position: relative;
}
.custom-header {
height: 77rpx;
background-color: #fff;
color: black;
display: flex;
align-items: center;
padding-top: 10rpx;
}
.uni_back{
margin-left: 25rpx;
}
.left-icon {
font-size: 20rpx;
color: #141414;
// width: 59rpx;
height: 29rpx;
line-height: 29rpx;
font-weight: 400;
font-size: 30rpx;
}
.content{
position: relative;
.meisheng_first_aid{
position: absolute;
top: 300rpx;
left: 273rpx;
width: 205rpx;
height: 158rpx;
image{
width: 100%;
height: 100%;
}
}
.con_btn{
width: 447rpx;
height: 239rpx;
position: absolute;
left: 134rpx;
top: 614rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
button{
width: 325rpx;
height: 75rpx;
border-radius: 35rpx;
line-height: 75rpx;
font-size: 20rpx;
font-style: 400;
}
}
//提示信息
.tips{
position: absolute;
left: 230rpx;
top:1100rpx;
width: 250rpx;
height: 60rpx;
color: #5581FF;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.popup-content{
height: 600rpx;
}
//弹出层
.popup_my{
width: 749rpx;
height: 701rpx;
background: #fff;
border-radius: 20rpx 20rpx 0rpx 0rpx ;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
.popup_my_title{
width: 669rpx;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title_name{
display: flex;
font-weight: 400;
font-size: 32rpx;
color: #141414;
.title_name_icon{
width: 54rpx;
height: 54rpx;
background: #548DEB;
border-radius: 50%;
margin-right: 20rpx;
}
}
}
.popup_my_message{
width: 669rpx;
height: 80rpx;
font-weight: 700;
font-size: 32rpx;
color: #141414;
border-bottom: 1rpx solid #ccc;
}
.popup_my_name{
width: 669rpx;
height: 90rpx;
border-bottom: 1rpx solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 40rpx;
.my_name_icon{
display: flex;
.my_name_img{
width: 93rpx;
height: 92rpx;
background: #A3C7AF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin-right: 20rpx;
}
}
}
.popup_my_other{
width: 669rpx;
height: 60rpx;
color: #548DEB;
font-weight: 400;
font-size: 32rpx;
}
.popup_my_btn{
width: 669rpx;
height: 60rpx;
display: flex;
justify-content: space-around;
align-items: center;
button{
width: 250rpx;
height: 80rpx;
}
}
}
</style>