先上效果图
登录后:
wxml代码
<view class="body">
<view class="unlogin-body" wx:if="{{ !login }}">
<!-- <view class="unlogin">
<image class="unlogin-image" src="../../images/me.png"></image>
<button class="unlogin-btn" open-type="getUserInfo" bindtap="toLogin">微信一键登录</button>
</view> -->
<button class="avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image src="{{avatarUrl}}"></image>
</button>
<!-- <input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->
<input type="nickname" class="weui-input" value="{{ nickName }}" placeholder="请输入昵称" bindinput="getSearch" />
<button class="unlogin-btn" open-type="getUserInfo" bindtap="toLogin">保存并登录</button>
</view>
<view class="login" wx:else>
<view class="info">
<image class="avatarUrl" src="{{ avatarUrl }}"></image>
<text class="nickName">{{ nickName }}</text>
</view>
<view class="cell-body">
<view class="cell-list">
<view
class="cell"
wx:for="{{ cellList }}"
wx:key="index"
data-page="{{ item.page }}"
bindtap="toDetail"
>
<view class="cell-left">
<image class="cell-left-image" src="{{ item.url }}"></image>
<text class="cell-left-text">{{ item.text }}</text>
</view>
<view class="cell-right">
<image class="cell-right-image" src="../../images/dayu.png"></image>
</view>
</view>
</view>
</view>
</view>
</view>
wxss代码
.body {
}
.unlogin-body {
background-color: #fff;
height: 100vh;
width: 100vw;
}
.unlogin {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 40%;
}
.unlogin .unlogin-image {
width: 150rpx;
height: 150rpx;
}
.unlogin .unlogin-btn {
margin-top: 50rpx;
width: 80%;
background-color: #ff70b4;
color: #fff;
height: 100rpx;
line-height: 2.1;
}
.info {
background-color: #93b8e2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100rpx 0;
}
.info .avatarUrl {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
.info .nickName {
color: #fff;
margin-top: 30rpx;
}
.cell-body {
position: relative;
}
.cell-list {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: 100%;
top: -20rpx;
}
.cell {
display: flex;
justify-content: space-between;
width: 85%;
background-color: #fff;
padding: 30rpx 20rpx;
border-radius: 20rpx;
align-items: center;
margin-bottom: 20rpx;
}
.cell-left {
display: flex;
align-items: center;
}
.cell-left .cell-left-image {
width: 50rpx;
height: 50rpx;
}
.cell-left .cell-left-text {
margin-left: 20rpx;
}
.cell-right .cell-right-image {
width: 30rpx;
height: 30rpx;
}
/* 新添头像昵称编辑获取 */
.avatar{
width: 80px;
height: 80px;
padding:0;
background: none;
}
.avatar image{
width: 80px;
height: 80px;
border-radius: 100px;
}
.weui-input{
width: 90%;
height: 60px;
margin:20px auto;
background: #eee;
border-radius: 5px;
padding-left: 15px;
}
.unlogin-btn{
background-color: #d1e4f8;
}
js代码
// pages/me/me.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
/**
* 页面的初始数据
*/
data: {
login: false,
avatarUrl: defaultAvatarUrl,
nickName: '',
cellList: [
{
url: '../../images/publish.png',
text: '我的发布',
page: '../myPublish/myPublish'
},
{
url: '../../images/collection1.png',
text: '我的收藏',
page: '../myCollection/myCollection'
},
{
url: '../../images/info.png',
text: '我的信息',
page: '../myInfo/myInfo'
},
{
url: '../../images/quit.png',
text: '退出登录'
}
]
},
getSearch(e) {
// 实现简单版本的防抖
this.setData({
nickName: e.detail.value
})},
onChooseAvatar(e) {
var that =this
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
console.log(avatarUrl)
// 将头像上传到服务器
wx.uploadFile({
filePath: avatarUrl,
header: {'content-type': 'multipart/form-data'},
name: 'file',
url: 'https://www.yuegeyu.top/uploadImg', //服务器端接收图片的路径
success: function (res) {
console.log(res); //发送成功回调
// console.log(res)
const { data } = res;
let { path } = JSON.parse(data)[0];
//解决路径中反斜杠造成小程序ipv6协议无法解析的问题(浏览器可以解析)
let __path= path.split('\\') //以反斜杠为基点将字符串拆分为数组
// console.log(__path)
// let _path = `http:/${__path[0]}/${__path[1]}`;
let _path = `https://www.yuegeyu.top/${__path[0]}`;
//输出一下编辑得到的路径
console.log(_path)
that.setData({
avatarUrl:_path
})
},
fail: function (res) {
console.log(res); //发送失败回调,可以在这里了解失败原因
}
})
},
toDetail(e) {
const { page } = e.currentTarget.dataset;
if (page){
wx.navigateTo({
url: page,
})
} else {
wx.showModal({
title: '提示',
content: '确定退出吗?',
success: (res) => {
const { confirm} = res;
if (confirm) {
wx.removeStorageSync('login');
wx.removeStorageSync('userInfo');
wx.removeStorageSync('account');
wx.removeStorageSync('login_account');
this.setData({
login: false
})
wx.redirectTo({
url: '../login/login',
})
}
}
})
}
},
toLogin() {
const { avatarUrl, nickName } = this.data;
const userInfo = {
avatarUrl,
nickName
}
wx.setStorageSync('userInfo', userInfo);
wx.setStorageSync('login', true);
this.setData({
login: true,
avatarUrl,
nickName
})
// wx.getUserProfile({
// desc: '获取用户信息,展示头像昵称',
// success: (res) => {
// console.log(res);
// const { userInfo: { avatarUrl, nickName } } = res;
// const userInfo = {
// avatarUrl,
// nickName
// }
// wx.setStorageSync('userInfo', userInfo);
// wx.setStorageSync('login', true);
// this.setData({
// login: true,
// avatarUrl,
// nickName
// })
// }
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const login = wx.getStorageSync('login');
const userInfo = wx.getStorageSync('userInfo');
if (userInfo) {
const { avatarUrl, nickName } = userInfo;
this.setData({
avatarUrl,
nickName
})
}
this.setData({
login: !!login
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
select: 4
})
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})