Files
tk-mini-program/pages/UserInformation/UserInformation.vue
pengxiaolong ff546bd9a9 登录
2025-05-19 18:34:04 +08:00

144 lines
3.3 KiB
Vue

<template>
<view class="container">
<button class="login-btn" open-type="chooseAvatar" @chooseavatar="Userinfo">
<image class="avatar" :src="userinfo"></image>
</button>
<input
type="nickname"
class="weui-input"
placeholder="请输入昵称"
@blur="inputName"
/>
<button class="weui-btn" @click="wxLogin">登录</button>
</view>
</template>
<script>
import request from "../../components/request.js";
export default {
inject: ['$global'],
data() {
return {
userinfo:
"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
name: "",
id: "",
info: {},
userSig: "",
};
},
onLoad(option) {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
},
});
uni.getStorage({
key: "userSig",
success: (res) => {
this.userSig = res.data;
},
});
// const { info } = option;
// this.id = JSON.parse(info).id
},
methods: {
// 输入昵称
inputName(e) {
this.name = e.detail.value;
},
// 选择头像
async Userinfo(e) {
const { avatarUrl } = e.detail;
this.userinfo = avatarUrl;
},
// 微信登录
async wxLogin(e) {
uni.showLoading({
title: "登录中...",
mask: true,
});
const { code } = await uni.login({
provider: "weixin",
onlyAuthorize: true,
});
console.log("code", code);
console.log("code", this.name);
console.log("code", this.userinfo);
console.log("code", this.id);
console.log("code", this.userSig);
const res = await request({
url: "user/inputUserInfo",
method: "POST",
data: {
id: this.id,
headerIcon: this.userinfo,
nickName: this.name,
code,
usersig: this.userSig,
},
userInfo: false,
});
console.log("res", res);
if (res.code === 200) {
uni.showToast({
title: "登录成功",
icon: "success",
});
console.log("登录成功", res.data);
uni.setStorageSync("userinfo", res.data.info);
uni.hideLoading();
//```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
uni.reLaunch({
url: this.$global.lastPage || "/pages/Home/Home", // 默认页
});
//````````````````````````````````````````````````````````````````````
} else {
uni.showToast({
title: "登录失败",
icon: "none",
});
}
},
},
};
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
}
.login-btn {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
padding: 0px;
margin-bottom: 60rpx;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.weui-input {
width: 80%;
text-align: center;
margin-bottom: 40rpx;
}
.weui-btn {
width: 40%;
margin-top: 20rpx;
background-color: #11cb2a00;
color: #fff;
}
</style>