140 lines
3.6 KiB
Vue
140 lines
3.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="wrap">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="title">欢迎登陆硅谷团购平台</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="buttom">
|
|||
|
|
<view class="loginType">
|
|||
|
|
<!-- 对于按钮需要进行禁用判断，以防止多次点击 -->
|
|||
|
|
<button :disabled="isLogin" class="loginBtn" @click="getUserMsg">
|
|||
|
|
<view class="wechat item">
|
|||
|
|
<view class="icon">
|
|||
|
|
<u-icon color="rgb(83,194,64)" name="weixin-fill" size="200"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
微信登陆
|
|||
|
|
</view>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="hint">
|
|||
|
|
登录代表同意
|
|||
|
|
<text class="link">硅谷团购平台用户协议、隐私政策，</text>
|
|||
|
|
并授权使用您的硅谷团购平台账号信息（如昵称、头像、收获地址）以便您统一管理
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 防止按钮多次点击的布尔值
|
|||
|
|
isLogin: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取用户信息
|
|||
|
|
getUserMsg() {
|
|||
|
|
// 不允许按钮点击
|
|||
|
|
this.isLogin = true;
|
|||
|
|
// 获取用户信息
|
|||
|
|
uni.getUserProfile({
|
|||
|
|
desc: '获取用户信息',
|
|||
|
|
success: res => {
|
|||
|
|
// 获取到用户头像、昵称、性别等内容，并将它们进行本地缓存的存储
|
|||
|
|
const photoUrl = res.userInfo.avatarUrl;
|
|||
|
|
const nickName = res.userInfo.nickName;
|
|||
|
|
const sex = res.userInfo.gender;
|
|||
|
|
uni.setStorageSync('userInfo', {photoUrl, nickName, sex});
|
|||
|
|
// 进行微信登陆操作（具体查看小程序登陆wx.login流程图）
|
|||
|
|
// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
|
|||
|
|
uni.login({
|
|||
|
|
success: async res => {
|
|||
|
|
// 利用小程序登陆，配合code码进行用户登陆操作，并返回用户的token值
|
|||
|
|
const result = await this.$u.api.getWxLogin({code: res.code});
|
|||
|
|
console.log(result, result.token, "<<<")
|
|||
|
|
// 将token值进行本地缓存存储
|
|||
|
|
uni.setStorage({
|
|||
|
|
key: 'token',
|
|||
|
|
data: result.token,
|
|||
|
|
success: async () => {
|
|||
|
|
// 更新用户信息
|
|||
|
|
await this.$u.api.postUpdateUser({
|
|||
|
|
sex,
|
|||
|
|
photoUrl,
|
|||
|
|
nickName
|
|||
|
|
});
|
|||
|
|
// 路由跳转至首页
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/index/index',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: err => {
|
|||
|
|
console.log(err);
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
// 恢复按钮可用性
|
|||
|
|
this.isLogin = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.wrap {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
width: 600rpx;
|
|||
|
|
margin: 80rpx auto 0;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 100rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buttom {
|
|||
|
|
.loginType {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 100rpx;
|
|||
|
|
|
|||
|
|
.loginBtn {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loginBtn::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
color: $u-content-color;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hint {
|
|||
|
|
padding: 20rpx 40rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
|
|||
|
|
.link {
|
|||
|
|
color: $u-type-warning;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|