<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="default" open-type="getUserInfo" @getuserinfo="getuserinfo">暂不登录</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>
</view>
</template>
<script>
import code from '../../uni_modules/uview-ui/libs/config/props/code';
export default {
data() {
return {
type: '',
code: '',
openid:'',
unionid:'',
session_key:'',
//登录信息
message: {
"avatarUrl": "",
"nickName": "",
"openId": "",
"phone": "",
"sessionKey": "",
"unionId": "",
"username": ""
}
};
},
onmounted() {
},
methods: {
//返回
goBack() {
uni.navigateBack();
},
// 一键登录
chooseAvatar() {
this.$refs.popup.open('bottom')
// uni.getUserProfile({
// desc: '用于完善用户资料', // 授权说明
// success: (res) => {
// console.log(res, 'res');
// this.message = {
// avatarUrl: res.userInfo.avatarUrl,
// nickName: res.userInfo.nickName
// }
// // 在这里可以将用户信息保存到本地或者发送到服务器
// // uni.switchTab({
// // url:'/pages/home/index'
// // })
// },
// fail: (res) => {
// console.log('用户拒绝授权获取个人信息');
// }
// });
uni.login({
success: (res) => {
if (res.code) {
//微信登录成功 已拿到code
this.code = res.code
uni.request({
url: 'http://192.168.0.15:8080/wechat/getPhoneNumber',
method: 'POST',
data: {
code:res.code
},
success: (cts) => {
console.log(cts, 'login');
}
});
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
//获取用户信息的回调
getuserinfo(e){
// 获取用户信息
console.log(e,'e');
},
//获取手机的回调
getPhoneNumber(e) {
const { detail:{ code, encryptedData, iv, errMsg } } = e;
uni.switchTab({
url:'/pages/home/index'
})
},
}
}
</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>