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>
|