javascript
复制代码
<template>
<view class="page">
<!-- 自定义头部 navbar -->
<u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack"
:background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false"
:is-back="pageStatus != 'home'"></u-navbar>
<!-- logo -->
<view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole'">
<image class="logo"
src="xxxxxxxxxxxxxx/static/login/login_logo.png"></image>
<view class="app-name">欢迎登录</view>
<view class="app-title">弘云艺术中心</view>
</view>
<!-- 默认登录页面显示 -->
<view style="width: 100%;" v-if="pageStatus == 'home'">
<view class="text-area" @click="loginByWx">手机号快捷登录</view>
</view>
<!-- 微信授权登录，获取用户信息 -->
<view style="width: 100%;" v-if="pageStatus == 'getWxRole'">
<view class="info">为提供优质服务,需要获取你的以下信息 :</view>
<view class="public">
<view class="public-dot"></view>
<view class="public-text">你的公开信息(头像、昵称等)</view>
</view>
<view class="text-enter" @click="getWxLoginRole">授权进入</view>
</view>
<!-- 微信登录小程序，再授权获取用户信息之后 -->
<view class="loginWx" v-if="pageStatus == 'loginByWx'">
<view class="title">欢迎使用 弘云艺术中心</view>
<view class="desc">立即登录享受优质服务</view>
<view class="avatar">
<image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image>
</view>
<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>
</view>
<!-- 协议勾选 -->
<view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' ">
<view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag">
<image src="xxxxxxxxxxx/static/mine/check.png">
</image>
</view>
<view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag">
<image src="xxxxxxxxxxxxxxxxx/static/operate/checked.png">
</image>
</view>
<view class="agree_text">
登录代表您已同意
<span>《用户服务协议》《隐私权政策》</span>
</view>
</view>
</view>
</template>
<script>
import FunUniappTheme from '@/theme.scss';
export default {
data() {
return {
// 页面状态，默认为 home
// getWxRole：获取微信权限页，loginByWx：微信授权登录页
// loginByCode：手机号+验证码登录页，loginByPwd：手机号+密码登录
// forgetPwd：找回密码页面，resetPwd，重置密码页面
pageStatus: 'home',
// 协议是否勾选
agree_flag: false,
// 微信授权的用户信息
wxLoginUserInfo: {},
// openid
openId: '',
// 系统内用户信息
userInfo: {},
//openid
openidData: {}
};
},
onShow() {
},
onLoad(ops) {
if (ops && ops.interceptcard && ops.interceptcard === "true") {
uni.showToast({
title: '购买商品,请先登录注册。',
icon: 'none',
duration: 4000,
});
}
if (ops && ops.goods_id_detail) {
console.log(ops.goods_id_detail, '二维码商品详情')
uni.setStorageSync('goods_id_detail', ops.goods_id_detail)
}
console.log(FunUniappTheme);
},
onReady() {
},
methods: {
// 勾选/取消用于协议
changeAgreeFlag() {
this.agree_flag = !this.agree_flag;
},
// 微信登录
loginByWx() {
if (!this.agree_flag) {
uni.showToast({
icon: 'none',
title: '请先阅读并勾选协议'
});
return;
}
this.getUserInfoByWx(() => {
this.getWxCode(code => {
let $this = this;
console.log('执行了吗', code)
uni.request({
url: "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'wxcode': code,
'parent_unionid': uni.getStorageSync('unionid')
},
success(res) {
$this.openidData = res.data.data;
console.log(res.data.data, 9999, $this.openidData);
uni.setStorageSync('OPEN_ID', res.data.data.openid)
}
});
});
});
},
// 自定义navbar的返回方法
navbarBack() {
if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' ) {
this.pageStatus = 'home';
} else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {
this.pageStatus = 'loginByPwd';
} else if (this.pageStatus == 'loginByPwd') {
this.pageStatus = 'loginByCode';
}
},
// 微信授权
getWxLoginRole() {
if (!this.agree_flag) {
uni.showToast({
icon: 'none',
title: '请先阅读并勾选协议'
});
return;
}
this.getUserInfoByWx(() => {
this.getWxCode(code => {
let $this = this;
console.log('执行了吗', code)
uni.request({
url: "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'wxcode': code,
'parent_unionid': uni.getStorageSync('unionid')
},
success(res) {
$this.openidData = res.data.data;
console.log(res.data.data, 9999, $this.openidData);
uni.setStorageSync('OPEN_ID', res.data.data.openid)
}
});
});
});
},
//个人中心
userinfo() {
uni.request({
url: "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo",
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'open_id': uni.getStorageSync('OPEN_ID')
},
success(res) {
console.log(res.data.data, '个人中心222');
uni.setStorageSync('USER_ID', res.data.data.info.user_id)
uni.setStorageSync('user_rank', res.data.data.info.user_rank)
if (uni.getStorageSync('goods_id_detail')) {
uni.reLaunch({
url: '/pages-mall/pages/goods/detail?goods_id_detail=' + uni
.getStorageSync('goods_id_detail')
});
} else {
uni.reLaunch({
url: '/pages/home/index'
});
}
}
});
},
// 基于uni的获取code方法
getWxCode(callBack) {
uni.login({
provider: 'weixin',
onlyAuthorize: true,
success: loginRes => {
console.log(loginRes, '获取信息')
callBack(loginRes.code);
},
fail(e) {}
});
},
// 获取openId
getOpenId(code, callBack) {
this.$u.api.getOpenId(code).then(res => {
// uni.setStorageSync('OPEN_ID', res.openid);
callBack(res);
});
},
// 获取个人信息
getUserInfoByWx(callBack) {
let $this = this;
uni.getUserProfile({
desc: '获取你的昵称、头像',
success: function(data) {
console.log(data, '用户信息')
uni.setStorageSync({
key: 'APP_WX_USERINFO',
data: data
});
$this.wxLoginUserInfo = data;
$this.pageStatus = 'loginByWx';
callBack();
},
fail: function(error) {}
});
},
// 获取手机号回调
decryptPhoneNumber(e) {
let $this = this;
console.log(e.detail, 9898)
uni.request({
url: "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata",
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'session_key': $this.openidData.sessionKey,
'encryptedData': e.detail.encryptedData,
'iv': e.detail.iv
},
success(res) {
console.log(res.data, '手机号');
uni.request({
url: "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register",
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
'mobile': res.data.data.phoneNumber,
'unionid': $this.openidData.unionid,
'openid': $this.openidData.openid
},
success(res) {
console.log(res.data, '登录成功');
if (res.data.code === 0) {
$this.userinfo()
uni.setStorageSync('IS_LOGIN', true);
uni.setStorageSync('fh_type',0)
console.log(uni.getStorageSync('IS_LOGIN'), '成功了？', uni.getStorageSync(
'USER_ID'))
}
}
});
}
});
},
// 微信小程序手机号登录
loginByOpenId() {
const openid = uni.getStorageSync('OPEN_ID');
this.$u.api.loginByOpenId(openid).then(res => {
this.userInfo = res;
});
},
}
};
</script>
<style lang="scss" scoped>
.page {
padding: 0 40rpx;
background-color: $app-theme-bg-color;
}
.logo-wrap {
display: flex;
// justify-content: center;
padding-top: 100rpx;
padding-bottom: 52rpx;
flex-wrap: wrap;
.logo {
height: 168rpx;
width: 166rpx;
margin-left: 76rpx;
margin-top: 50rpx;
}
.app-name {
width: 100%;
padding-top: 80rpx;
margin-left: 78rpx;
font-size: 38rpx;
font-weight: 600;
color: #333333;
line-height: 52rpx;
}
.app-title {
width: 100%;
padding-top: 16rpx;
margin-left: 78rpx;
font-size: 38rpx;
font-weight: 600;
color: #333333;
line-height: 52rpx;
}
}
.text-area {
width: 100%;
height: 96rpx;
background: #19be6b;
font-weight: 400;
border-radius: 56rpx;
color: $app-theme-text-white-color;
line-height: 16px;
font-size: 32rpx;
text-align: center;
line-height: 96rpx;
/* background: url(../../static/img/logo_newhope.png); */
}
.info {
font-size: 28rpx;
font-weight: 400;
color: $app-theme-text-black-color;
line-height: 28rpx;
margin-top: 180rpx;
}
.public {
display: flex;
align-items: center;
margin-top: 30rpx;
.public-dot {
width: 6rpx;
height: 6rpx;
background: #999999;
margin-right: 10rpx;
}
.public-text {
font-size: 24rpx;
font-weight: 400;
color: #8f92a1;
line-height: 24rpx;
}
}
.text-enter {
width: 100%;
margin-top: 50rpx;
height: 96rpx;
background: $app-theme-color;
font-weight: 400;
border-radius: 56rpx;
color: #ffffff;
line-height: 16px;
font-size: 32rpx;
text-align: center;
line-height: 96rpx;
}
.head {
margin-top: 70rpx;
width: 100%;
display: flex;
justify-content: space-between;
}
.back {
width: 40rpx;
height: 40rpx;
}
.agree {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
bottom: 66rpx;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.agree_img image {
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
}
.agree_text {
margin-left: 8rpx;
font-size: 24rpx;
font-weight: 400;
color: #8f92a1;
line-height: 24rpx;
display: flex;
align-items: center;
span {
color: $app-theme-color;
}
}
.loginWx {
width: 100%;
padding-top: 64rpx;
.title {
text-align: left;
font-size: 22px;
font-family: PingFang-SC-Regular, PingFang-SC;
font-weight: 400;
color: #171717;
line-height: 30px;
margin-bottom: 12rpx;
}
.desc {
text-align: left;
font-size: 14px;
font-family: PingFang-SC-Regular, PingFang-SC;
font-weight: 400;
color: #8f92a1;
line-height: 14px;
}
.avatar {
width: 160rpx;
height: 160rpx;
overflow: hidden;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 128rpx auto 160rpx auto;
image {
width: 100%;
height: 100%;
}
}
}
</style>
