474 lines
10 KiB
Vue
474 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 头部 -->
|
|
<status-nav :ifReturn="true" navBarTitle="登录" titleColor="#333" backgroudColor="#fff"
|
|
:ifBold="true"></status-nav>
|
|
<view class="pl30 pr30">
|
|
<view class='login-header'>
|
|
<view class="infoImg">
|
|
<image class="image" mode="widthFix" src="/static/public/logo.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="agreement-box">
|
|
<u-checkbox-group v-model="checkboxValue" @change="checkboxChange">
|
|
<u-checkbox :name="item.name" shape="circle" v-for="(item, index) in checkboxList" activeColor="#3d9f3d" :key="index">
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
阅读并同意
|
|
<text @tap="goBack(1)" class="agreement">《用户协议》</text>和<text @tap="goBack(2)"
|
|
class="agreement">《隐私协议》</text>
|
|
</view>
|
|
<view class="login-footer">
|
|
<button v-if="checkboxValue[0]" class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">快速登录</button>
|
|
<button v-else class="login-btn" @click="getClick">快速登录</button>
|
|
<view class="mt25 fs14 dark" @tap="goBack(3)">暂不登录</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 隐私政策弹框 -->
|
|
<u-popup :show="policy" @close="close(1)" mode="bottom">
|
|
<view class="policy">
|
|
<div class="title">用户协议及隐私保护</div>
|
|
<view class="st">
|
|
我已阅读并同意
|
|
<text @tap="goBack(1)" class="agreement">《用户协议》</text>和<text @tap="goBack(2)"
|
|
class="agreement">《隐私协议》</text>
|
|
</view>
|
|
<button class="login-btn" @click="policyClick">同意并登录</button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 获取头像&昵称 -->
|
|
<u-popup :show="empowerShow" @close="close(2)" mode="center" round="16">
|
|
<view class="user-info-box">
|
|
<view class="info">
|
|
<view class="cover">
|
|
<image src="/static/public/logo.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name">{{appletName}}</view>
|
|
<view class="tips">
|
|
<view>邀请您补全个人信息</view>
|
|
<view>(昵称、头像)</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="msg">
|
|
<view class="item">
|
|
<text>头像</text>
|
|
<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
|
<view class="img">
|
|
<image :src="userInfo.baseUrl || logoAvatar" mode="aspectFit"></image>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
<view class="item">
|
|
<text>昵称</text>
|
|
<input class="nick-name" type="nickname" @blur="nickNameInput" v-model="userInfo.nickName"
|
|
placeholder="请输入昵称" placeholder-style="color:#999" />
|
|
</view>
|
|
</view>
|
|
<view class="empower-btns">
|
|
<view class="btn" @tap="refuseEv">拒绝</view>
|
|
<view class="btn" @tap="bindGetUserInfo('other')">授权</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
postEditInfo,
|
|
postUserInfo,
|
|
postUpload,
|
|
postBindPhone
|
|
} from "@/api/index";
|
|
export default {
|
|
data() {
|
|
return {
|
|
checkboxValue:['选中'],
|
|
checkboxList: [
|
|
{
|
|
name:'选中',
|
|
}
|
|
],
|
|
userInfo: {
|
|
nickName: '',
|
|
avatarUrl: '',
|
|
baseUrl: '' //展示头像需要添加域名
|
|
}, //用户信息
|
|
baseHttps: `${getApp().globalData.hostapi}`, //接口链接
|
|
imgSrc: uni.getStorageSync('baseInfo').logo, //默认logo头像
|
|
logoAvatar: '/static/public/logo-avatar.png', //默认头像
|
|
appletName: uni.getStorageSync('baseInfo').platform, //小程序名称
|
|
empowerShow: false, //是否显示授权弹窗
|
|
isActive: false, //头像昵称是否填写完成
|
|
|
|
policy:false, //隐私政策弹框
|
|
};
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
goBack(num) {
|
|
if(num == 1) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/singlePage/address?id=1'
|
|
})
|
|
}else if(num == 2) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/singlePage/address?id=2'
|
|
})
|
|
}else if(num == 3) {
|
|
uni.reLaunch({
|
|
url: '/pages/home/home'
|
|
})
|
|
}
|
|
},
|
|
checkboxChange(e) {
|
|
this.checkboxValue[0] = e;
|
|
},
|
|
|
|
getClick() {
|
|
this.policy = true;
|
|
},
|
|
|
|
/* 关闭弹框 */
|
|
close(e) {
|
|
if(e == 1) {
|
|
this.policy = false;
|
|
}else {
|
|
this.empowerShow = false;
|
|
}
|
|
},
|
|
|
|
policyClick() {
|
|
this.policy = false;
|
|
this.checkboxValue[0] = '选中';
|
|
},
|
|
|
|
// 获取手机号
|
|
getPhoneNumber(e) {
|
|
if (e.detail.code) {
|
|
let params = {
|
|
iv: e.detail.iv,
|
|
encryptedData: e.detail.encryptedData
|
|
}
|
|
postBindPhone(params).then(res => {
|
|
if (res.code == 0) {
|
|
uni.setStorageSync('mobile', res.data.phone) //缓存电话
|
|
this.empowerShow = true;
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
}, error => {
|
|
|
|
})
|
|
} else {
|
|
this.$toolAll.tools.showToast('您已拒绝授权');
|
|
}
|
|
},
|
|
|
|
// // 头像上传
|
|
uploadImg(url) {
|
|
uni.showLoading({
|
|
title: '上传中'
|
|
});
|
|
postUpload(url).then(res => {
|
|
if (res.code == 0) {
|
|
this.userInfo.avatarUrl = res.data.src;
|
|
this.userInfo.baseUrl = this.baseHttps + res.data.src;
|
|
}
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
|
|
// 获取头像
|
|
chooseAvatar(e) {
|
|
// 上传头像
|
|
this.uploadImg(e.detail.avatarUrl);
|
|
},
|
|
|
|
// 获取昵称
|
|
nickNameInput(e) {
|
|
this.userInfo.nickName = e.detail.value
|
|
},
|
|
|
|
// 拒绝登录
|
|
refuseEv() {
|
|
this.$toolAll.tools.showToast('您已拒绝授权');
|
|
this.empowerShow = false;
|
|
},
|
|
|
|
// 验证登录信息
|
|
checkForm() {
|
|
if (this.userInfo.avatarUrl == '') {
|
|
this.$toolAll.tools.showToast('请选择头像！')
|
|
return false;
|
|
} else if (this.userInfo.nickName == '') {
|
|
this.$toolAll.tools.showToast('请输入昵称！')
|
|
return false;
|
|
} else {
|
|
this.isActive = true;
|
|
return true;
|
|
}
|
|
},
|
|
|
|
//调起登录授权
|
|
bindGetUserInfo() {
|
|
let ya = this;
|
|
ya.checkForm();
|
|
//新版登录方式
|
|
if (ya.isActive == true) {
|
|
ya.updateUserInfo();
|
|
}
|
|
},
|
|
|
|
//调用登录接口
|
|
updateUserInfo() {
|
|
let ya = this;
|
|
uni.showToast({
|
|
title: '登录中...',
|
|
icon: 'loading',
|
|
duration: 10000
|
|
})
|
|
var params = {
|
|
nickname: ya.userInfo.nickName, //用户昵称
|
|
headimgurl: ya.userInfo.avatarUrl, //用户头像
|
|
}
|
|
postEditInfo(params).then(res => {
|
|
uni.hideToast();
|
|
if (res.code == 0) {
|
|
uni.showToast({
|
|
title: '授权成功',
|
|
icon: 'loading',
|
|
duration: 1000
|
|
})
|
|
postUserInfo().then(resData => {
|
|
if (resData.code == 0) {
|
|
uni.setStorageSync('userInfo', resData.data) //缓存用户信息
|
|
}
|
|
}, error => {
|
|
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
fail: () => {
|
|
uni.reLaunch({
|
|
url: '/pages/home/home'
|
|
})
|
|
}
|
|
})
|
|
let pages = getCurrentPages();
|
|
if (pages.length > 1) {
|
|
//上一个页面实例对象
|
|
var prePage = pages[pages.length - 2];
|
|
//关键在这里
|
|
prePage.onLoad()
|
|
}
|
|
}, 1500)
|
|
}
|
|
}, error => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.login-header {
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-top: 160rpx;
|
|
}
|
|
|
|
.infoImg {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 100%;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #d8d8d8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
.image {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
.logo-name {
|
|
margin-top: 20rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
letter-spacing: 4rpx;
|
|
text-indent: 4rpx;
|
|
}
|
|
|
|
.login-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
line-height: 94rpx;
|
|
margin: 0 auto;
|
|
background-color: #3d9f3d;
|
|
border-radius: 90rpx;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
letter-spacing: 2rpx;
|
|
box-shadow: 0rpx 8rpx 20rpx rgba(5, 103, 184, .3);
|
|
}
|
|
|
|
.agreement-box {
|
|
margin: 70rpx 0 50rpx 0;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.agreement {
|
|
color: #ef8904;
|
|
}
|
|
|
|
/* 授权弹窗 */
|
|
.user-info-box {
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
width: 600rpx;
|
|
border-radius: 16rpx;
|
|
padding: 40rpx 45rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.user-info-box .info {
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-info-box .cover {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 100%;
|
|
box-shadow: 0px 0px 20rpx 4rpx rgba(5, 103, 184, .1);
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-info-box .cover image {
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-info-box .name {
|
|
font-size: 30rpx;
|
|
line-height: 1.5;
|
|
margin: 22rpx 0 16rpx 0;
|
|
}
|
|
|
|
.user-info-box .tips {
|
|
font-size: 26rpx;
|
|
line-height: 1.6;
|
|
color: #666666;
|
|
}
|
|
|
|
.user-info-box .tips view:last-child {
|
|
font-size: 24rpx;
|
|
color: #e42417;
|
|
}
|
|
|
|
.user-info-box .msg {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.user-info-box .item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10rpx 0;
|
|
border-bottom: 2rpx solid #f1f5f9;
|
|
}
|
|
|
|
.user-info-box .item text {
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.user-info-box .avatar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
width: calc(100% - 80rpx);
|
|
height: 100rpx;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none;
|
|
}
|
|
|
|
.user-info-box .avatar::after {
|
|
display: none;
|
|
}
|
|
|
|
.user-info-box .avatar .img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-info-box .avatar image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-info-box .nick-name {
|
|
width: calc(100% - 80rpx);
|
|
height: 60rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.user-info-box .empower-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.user-info-box .empower-btns .btn {
|
|
width: 50%;
|
|
text-align: center;
|
|
align-items: 1.5;
|
|
color: #666666;
|
|
font-size: 30rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-info-box .empower-btns .btn:nth-of-type(2) {
|
|
color: #fff;
|
|
background: #3d9f3d;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.policy {
|
|
padding:70rpx 40rpx 50rpx 40rpx;
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
text-align: center;
|
|
}
|
|
.st {
|
|
margin: 40rpx 0;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
.login-btn {
|
|
width: 80%;
|
|
}
|
|
}
|
|
</style> |