From 8943cfa7c615696051b6fb5e27148ffd6fa543b7 Mon Sep 17 00:00:00 2001
From: link_1999 <1402246900@qq.com>
Date: Wed, 27 Apr 2022 18:31:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20'=E6=96=B0=E9=97=BB=E5=B0=8F=E7=A8=8B=E5=BA=8F/pages/me'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

个人主页
---
 新闻小程序/pages/me/me.js   | 44 +++++++++++++++++++++++++
 新闻小程序/pages/me/me.json |  3 ++
 新闻小程序/pages/me/me.wxml | 25 +++++++++++++++
 新闻小程序/pages/me/me.wxss | 64 +++++++++++++++++++++++++++++++++++++
 4 files changed, 136 insertions(+)
 create mode 100644 新闻小程序/pages/me/me.js
 create mode 100644 新闻小程序/pages/me/me.json
 create mode 100644 新闻小程序/pages/me/me.wxml
 create mode 100644 新闻小程序/pages/me/me.wxss

diff --git a/新闻小程序/pages/me/me.js b/新闻小程序/pages/me/me.js
new file mode 100644
index 0000000..5d403a8
--- /dev/null
+++ b/新闻小程序/pages/me/me.js
@@ -0,0 +1,44 @@
+Page({
+  data: {
+    userInfo: '',
+  },
+  onLoad() {
+    // 获取缓存中的用户信息
+    let user = wx.getStorageSync('user')
+    this.setData({
+      userInfo: user
+    })
+  },
+  // 点击事件-登录
+  login() {
+    console.log('点击了登录按钮')
+    wx.getUserProfile({
+      desc: '登录后才能使用',
+      success: res => {
+        let user = res.userInfo
+        console.log('授权成功', res.userInfo)
+        // 缓存用户信息到本地
+        wx.setStorageSync('user', user)
+        this.setData({
+          userInfo: user
+        })
+      },
+      fail: res => {
+        console.log('授权失败', res)
+      }
+    })
+  },
+  // 点击事件-退出登录
+  loginOut() {
+    this.setData({
+      userInfo: ''
+    })
+    // 将用户信息清空
+    wx.setStorageSync('user', null)
+  },
+  gotoCollect() {
+    wx.navigateTo({
+      url: '/pages/collect/collect',
+    })
+  },
+})
\ No newline at end of file
diff --git a/新闻小程序/pages/me/me.json b/新闻小程序/pages/me/me.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/新闻小程序/pages/me/me.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/新闻小程序/pages/me/me.wxml b/新闻小程序/pages/me/me.wxml
new file mode 100644
index 0000000..08a8451
--- /dev/null
+++ b/新闻小程序/pages/me/me.wxml
@@ -0,0 +1,25 @@
+<view class="header">
+  <button class="login_btn" wx:if="{{!userInfo}}" bindtap="login" type="primary">授权登录</button>
+  <view class="root" wx:else>
+    <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
+    <text class="nickName">{{userInfo.nickName}}</text>
+    <text class="login_out" bindtap="loginOut">退出登录</text>
+  </view>
+</view>
+
+<view wx:if="{{userInfo}}">
+  <view class="item">
+    <button class="button" bindtap="gotoCollect">我的收藏</button>
+    <view class="right_arrow"></view>
+  </view>
+</view>
+
+<view class="item">
+  <button class="button" open-type="feedback">意见反馈</button>
+  <view class="right_arrow"></view>
+</view>
+
+<view class="item">
+  <button class="button" open-type="contact">在线客服</button>
+  <view class="right_arrow"></view>
+</view>
diff --git a/新闻小程序/pages/me/me.wxss b/新闻小程序/pages/me/me.wxss
new file mode 100644
index 0000000..f719a59
--- /dev/null
+++ b/新闻小程序/pages/me/me.wxss
@@ -0,0 +1,64 @@
+.header {
+  height: 400rpx;
+  background: #2b4b6b;
+  padding-top: 1px;
+}
+.login_btn {
+  margin-top: 100rpx;
+  width: 400rpx;
+}
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.touxiang {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  margin-top: 30rpx;
+  margin-bottom: 10rpx;
+}
+.nickName {
+  font-size: large;
+  color: snow;
+  margin-bottom: 30rpx;
+}
+.login_out {
+  font-size: 33rpx;
+  color: rgb(160, 155, 155);
+}
+
+/* 用css画一个箭头 */
+.right_arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  padding: 3px;
+  position: absolute;
+  right: 15px;
+  /* margin-left: 66% */
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.item {
+  display: flex;
+  padding: 25rpx;
+  background: rgb(219, 211, 211);
+  align-items: center;
+  border-bottom: 1px solid snow;
+}
+
+.button {
+  width: 100%;
+  background: rgb(219, 211, 211);
+  border: none;
+  text-align: left;
+  padding: 0px;
+  margin: 0px;
+  line-height: 1.3;
+  font-size: 16px;
+}
+.button::after {
+  border: none;
+  border-radius: 0;
+}
\ No newline at end of file