我的

app.json

@@ -11,8 +11,8 @@
     "pages/filter/filter",
     "pages/item/item",
     "pages/auth/auth",
-    "pages/search/search"
-
+    "pages/search/search",
+    "pages/attention/attention"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/attention/attention.js

@@ -0,0 +1,66 @@
+// pages/attention/attention.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/attention/attention.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "关注",
+  "usingComponents": {}
+}

pages/attention/attention.wxml

@@ -0,0 +1,2 @@
+<!--pages/attention/attention.wxml-->
+<text>关注</text>

pages/attention/attention.wxss

@@ -0,0 +1 @@
+/* pages/attention/attention.wxss */

pages/me/me.js

@@ -1,18 +1,58 @@
 // pages/me/me.js
+const app = getApp()
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    userInfo: {
+      avatarUrl:"../../images/person.png"
+    }, 
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    if (app.globalData.userInfo) {
+      this.setData({
+        userInfo: app.globalData.userInfo, //将全局用户信息赋值给变量
+      })
+    } else if (this.data.canIUse) { //getUserInfo在当前版本可用
+      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+      // 所以此处加入 callback 以防止这种情况
+      app.userInfoReadyCallback = res => {
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        })
+      }
+    } else {
+      // 在没有 open-type=getUserInfo 版本的兼容处理
+      wx.getUserInfo({
+        success: res => {
+          app.globalData.userInfo = res.userInfo
+          this.setData({
+            userInfo: res.userInfo,
+          })
+        }
+      })
+    };
+  },
+  getUserInfo: function(e) {
+    //点击取消按钮
+    if (e.detail.userInfo == null) {
+      console.log("授权失败")
+    } 
+    else {//点击允许按钮
+      this.setData({
+        userInfo: e.detail.userInfo,
+        hasUserInfo: true
+      })
+    }
+    //全局对象用户信息赋值
+    app.globalData.userInfo = e.detail.userInfo
   },
 
   /**
@@ -62,5 +102,10 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+  gotoAttention(){
+    wx.navigateTo({
+      url: '../attention/attention',
+    })
   }
 })

pages/me/me.wxml

@@ -1,2 +1,31 @@
-<!--pages/me/me.wxml-->
-<text>pages/me/me.wxml</text>
+<view class="container">
+  <view class="topView">
+   <cover-image src='{{userInfo.avatarUrl}}'  class="personLogo"></cover-image>
+      <text class="phoneText">{{userInfo.nickName}}</text>
+  </view>
+  <view class="seasonCard">
+      <view class="seasonLeft">
+        <text>季卡会员</text>
+        <text>888</text>
+        <button type="default" plain="true" class="seasonOpen">立即开通</button>
+      </view>
+      <view class="seasonRight">
+          <cover-image src="../../images/money.png" style="width:68px;height:68px;"></cover-image>
+      </view>
+  </view>
+  <view class="yearCard">
+      <view class="yearLeft">
+        <text>年卡会员</text>
+        <text>8888</text>
+        <button type="default" plain="true" class="yearOpen">立即开通</button>
+      </view>
+      <view class="yearRight">
+          <cover-image src="../../images/money.png" style="width:68px;height:68px;"></cover-image>
+      </view> 
+  </view>
+  <view class="mineButton">
+      <view class="mine">我的</view>
+      <view class="mineAttion" bindtap="gotoAttention">关注</view>
+  </view> 
+     
+</view>

pages/me/me.wxss

@@ -1 +1,61 @@
-/* pages/me/me.wxss */
+.topView{
+  overflow: hidden;
+  text-align:center;
+  width:100%;
+  height:80px;
+  margin:10px auto;
+  /* border:1px solid white; */
+}
+.personLogo{
+   width:72px;
+   height:72px; 
+   float:left;
+   margin-left:6%;
+   border-radius:50%;
+   display:inline-block;
+}
+.phoneText{
+  color:white;
+  display:inline-block;
+  float:left;
+  margin-left:7%;
+  margin-top:6%;
+}
+.seasonCard,.yearCard{
+  width:90%;
+  height:100px;
+  border-radius:5px;
+  background:#DFDFDF;
+  margin-top:10px;
+  margin-bottom:10px;
+  overflow:hidden;
+  text-align:center;
+}
+.yearCard{
+  background:#FFEEAC;
+}
+.seasonLeft,.yearLeft{
+  float:left;
+  margin-left:6%;
+}
+.seasonRight,.yearRight{
+  float:right;
+  margin-top:5%;
+}
+.seasonOpen,.yearOpen{
+  margin-top:10px;
+}
+.mineButton{
+  margin-top:10px;
+  color:white;
+  width:100%;
+}
+.mine,.mineAttion{
+  width:100%;
+  height:48px;
+  line-height: 48px;
+  border:1px solid #373535;
+  text-align:left;
+  background:#101010;
+  /* margin-left:6%; */
+}

pages/next/next.wxml

@@ -1,2 +1,21 @@
 <!--pages/next/next.wxml-->
-<text>pages/next/next.wxml</text>
+ <scroll-view scroll-y="true"  class="bground">
+   
+        <!-- <button type="default" bindtap="backBtn">返回上一页</button> -->
+        <view class="top">
+            <view class="topTitle">
+              <text class="titleBig">DOWN J</text>
+              <text class="titleSmall">xxxxxxxxxxxxxxx</text>
+            </view>
+            <view class="line"></view>
+            <view class="topText">
+              <text class="textOne">1111111</text>
+              <text class="textTwo">+527.4</text></view>
+        </view>
+        <view class="middleCharts">
+          <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
+        </view>
+        
+        
+  
+</scroll-view>

pages/next/next.wxss

@@ -1 +1,76 @@
-/* pages/next/next.wxss */
+/* pages/details/details.wxss */
+.bground{
+  background:#000;
+  color:white;
+  height:100%;
+  width:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  right:0;
+}
+.top{
+  width:95%;
+  height:18%;
+  background:#1C1C1C;
+  position:relative;
+  /* top:50px;  */
+  margin:5% auto; 
+  border-radius:3px;
+}
+.topTitle{
+  padding:10px;
+}
+.topText{
+  padding:10px;
+  position:absolute;
+  bottom:5px;
+}
+.titleBig{
+  font-size:1.8rem;
+  font-weight:bold;
+}
+.titleSmall{
+    color:#78777D;
+    margin-left:30px;
+}
+.line{
+  width:100%;
+  height:1rpx;
+  background:#2C2C2C;
+}
+.textOne{
+  font-weight:bold;
+}
+.textTwo{
+  color:#DC3329;
+  margin-left:20px;
+}
+.middleCharts{
+  width:95%;
+  height:40%;
+  background:#1C1C1C;
+  /* position:relative;
+  top:50px; */
+  margin:5% auto; 
+  border-radius:3px;
+}
+#mychart{
+  margin:0 auto;
+}
+.buttonText{
+  width:95%;
+  height:20%;
+  background:#1C1C1C;
+  /* position:relative;
+  top:50px; */
+  margin:5% auto; 
+  border-radius:3px;
+}
+.nextText{
+  /* width:90%; */
+  /* height:5%; */
+  background:#1C1C1C;  
+  border-radius:3px;
+  margin:0 auto;
+}