From c438087ed89654fbbfb373af888a7a161cb81c71 Mon Sep 17 00:00:00 2001
From: wbb <1975655432@qq.com>
Date: Thu, 10 Nov 2022 18:50:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
scr/food/pages/usercenter/usercenter.js | 101 +++++++++++++++++++---
scr/food/pages/usercenter/usercenter.wxml | 70 ++++++++++++++-
scr/food/pages/usercenter/usercenter.wxss | 84 +++++++++++++++++-
3 files changed, 242 insertions(+), 13 deletions(-)
diff --git a/scr/food/pages/usercenter/usercenter.js b/scr/food/pages/usercenter/usercenter.js
index 4643aa5..f3b4f87 100644
--- a/scr/food/pages/usercenter/usercenter.js
+++ b/scr/food/pages/usercenter/usercenter.js
@@ -1,66 +1,145 @@
// pages/usercenter/usercenter.js
+// pages/mine/mine.js
+const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
-
+ userInfo: {},
+ //判断小程序的API，回调，参数，组件等是否在当前版本可用。
+ canIUse: wx.canIUse('button.open-type.getUserInfo'),
+ isHide: false,
+ },
+ //事件处理函数
+ bindViewTap: function() {
+ wx.navigateTo({
+ url: '../logs/logs'
+ })
},
/**
* 生命周期函数--监听页面加载
*/
- onLoad(options) {
+ onLoad: function() {
+ var that = this;
+ // 查看是否授权
+ wx.getSetting({
+ success: function(res) {
+ if (res.authSetting['scope.userInfo']) {
+ wx.getUserInfo({
+ success: function(res) {
+ app.globalData.userInfo = res.userInfo
+ that.setData({
+ userInfo: res.userInfo,
+ })
+ // 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值
+ // 根据自己的需求有其他操作再补充
+ // 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
+ wx.login({
+ success: res => {
+ // 获取到用户的 code 之后：res.code
+ // console.log("用户的code:" + res.code);
+ // 可以传给后台，再经过解析获取用户的 openid
+ // 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：
+ // wx.request({
+ // // 自行补上自己的 APPID 和 SECRET
+ // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
+ // success: res => {
+ // // 获取到用户的 openid
+ // console.log("用户的openid:" + res.data.openid);
+ // }
+ // });
+ }
+ });
+ }
+ });
+ } else {
+ // 用户没有授权
+ // 改变 isHide 的值，显示授权页面
+ that.setData({
+ isHide: true
+ });
+ }
+ }
+ });
+ },
+ bindGetUserInfo: function(e) {
+ if (e.detail.userInfo) {
+ //用户按了允许授权按钮
+ var that = this;
+ // 获取到用户的信息了，打印到控制台上看下
+ console.log("用户的信息如下：");
+ console.log(e.detail.userInfo);
+ //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
+ that.setData({
+ isHide: false,
+ userInfo: e.detail.userInfo
+ });
+ } else {
+ //用户按了拒绝按钮
+ wx.showModal({
+ title: '警告',
+ content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
+ showCancel: false,
+ confirmText: '返回授权',
+ success: function(res) {
+ // 用户没有授权成功，不需要改变 isHide 的值
+ if (res.confirm) {
+ console.log('用户点击了“返回授权”');
+ }
+ }
+ });
+ }
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
- onReady() {
+ onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
- onShow() {
+ onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
- onHide() {
+ onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
- onUnload() {
+ onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
- onPullDownRefresh() {
+ onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
- onReachBottom() {
+ onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
- onShareAppMessage() {
-
+ onShareAppMessage: function() {
}
-})
\ No newline at end of file
+})
diff --git a/scr/food/pages/usercenter/usercenter.wxml b/scr/food/pages/usercenter/usercenter.wxml
index d1caa31..c83934f 100644
--- a/scr/food/pages/usercenter/usercenter.wxml
+++ b/scr/food/pages/usercenter/usercenter.wxml
@@ -1,2 +1,70 @@
-pages/usercenter/usercenter.wxml
+
+
+
+
+
+ 申请获取以下权限
+ 获得你的公开信息(昵称，头像等)
+
+
+
+
+ 请升级微信版本
+
+
+
+
+
+ {{userInfo.nickName}}
+
+
+
+
+ 手机绑定
+
+ >
+
+
+
+
+
+ 写博客
+
+ >
+
+
+
+
+ 我的博客
+
+ >
+
+
+
+
+ 我的收藏
+
+ >
+
+
+
+
+ 意见反馈
+
+ >
+
+
+
+
+ 设置
+
+ >
+
+
+
+
diff --git a/scr/food/pages/usercenter/usercenter.wxss b/scr/food/pages/usercenter/usercenter.wxss
index 5ee4c11..2626c88 100644
--- a/scr/food/pages/usercenter/usercenter.wxss
+++ b/scr/food/pages/usercenter/usercenter.wxss
@@ -1 +1,83 @@
-/* pages/usercenter/usercenter.wxss */
\ No newline at end of file
+/* pages/mine/mine.wxss */
+.userinfo {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #eb6161;
+ width: 100%;
+ height: 300rpx;
+}
+
+.userinfo-avatar {
+ width: 128rpx;
+ height: 128rpx;
+ margin: 20rpx;
+ border-radius: 50%;
+}
+
+.userinfo-nickname {
+ color: black;
+}
+
+.header {
+ margin: 90rpx 0 90rpx 50rpx;
+ border-bottom: 1px solid #ccc;
+ text-align: center;
+ width: 650rpx;
+ height: 300rpx;
+ line-height: 450rpx;
+}
+
+.header image {
+ width: 200rpx;
+ height: 200rpx;
+}
+
+.content {
+ margin-left: 50rpx;
+ margin-bottom: 90rpx;
+}
+
+.content text {
+ display: block;
+ color: #9d9d9d;
+ margin-top: 40rpx;
+}
+
+.bottom {
+ border-radius: 80rpx;
+ margin: 70rpx 50rpx;
+ font-size: 35rpx;
+}
+
+/* 用户中心 */
+
+.hr {
+ width: 100%;
+ height: 15px;
+ background-color: #f4f5f6;
+}
+.item {
+ display: flex;
+ flex-direction: row;
+}
+.title {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ padding-left: 15px;
+ font-size: 15px;
+}
+
+.detail2 {
+ font-size: 15px;
+ position: absolute;
+ right: 10px;
+ height: 50px;
+ line-height: 50px;
+ color: #888;
+}
+
+.line {
+ border: 1px solid #ccc;
+ opacity: 0.2;
+}