增加资金明细页面

app.json

@@ -7,15 +7,16 @@
     "pages/main/books/books",
     "pages/main/singleBook/singleBook",
     "pages/main/reading/reading",
-    "pages/user/myEdit/myEdit",
+    "pages/main/searchResult/searchResult",
     "pages/groupPage/discount-group/discount-group",
     "pages/groupPage/group-details/group-details",
     "pages/groupPage/grade-details/grade-details",
     "pages/groupPage/collage-details/collage-details",
-    "pages/main/searchResult/searchResult",
-    "pages/user/myconcern/myconcern",
     "pages/groupPage/my-group/my-group",
-    "pages/user/myWallet/myWallet"
+    "pages/user/myEdit/myEdit",
+    "pages/user/myconcern/myconcern",
+    "pages/user/myWallet/myWallet",
+    "pages/user/walletDetails/walletDetails"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/my/my.js

@@ -4,6 +4,7 @@ export const myInit =  (that) => {
     myData: {
         title: '修改资料',
         concern: '我的关注',
+        wallet: '我的钱包',
         address:['北京海淀','中关村','三小'],
         playNum: 31549,
         attentionCount: 10254,

pages/user/myWallet/myWallet.js

@@ -4,28 +4,29 @@ Page({
    * 页面的初始数据
    */
   data: {
+    title: '',
     totalMoney: 3000,
     textDoc: '收到的赏金',
     textPrompt: '收到的奖励自动转入微信钱包',
     walletDetail: '资金明细',
   },
+
   toWalletDetail: function(e) {
-    console.log('GO TO 资金明细');
-    // let title = e.currentTarget.dataset.title;
-    // wx.navigateTo({
-    //   url: `../user/myEdit/myEdit?title=${title}`
-    // });
+    let title = e.currentTarget.dataset.title;
+    wx.navigateTo({
+      url: `../walletDetails/walletDetails?title=${title}`
+    });
   },
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (option) {
-    if (option.title) {
+  onLoad: function (options) {
+    if (options.title) {
       wx.setNavigationBarTitle({
-        title: option.title//页面标题为路由参数
+        title: options.title//页面标题为路由参数
       });
       this.setData({
-        title: option.title
+        title: options.title
       });
     }
   },

pages/user/myWallet/myWallet.wxml

@@ -10,7 +10,6 @@
         </view>
         <view class="text-prompt">{{ textPrompt }}</view>
     </view>
-
     <view class="wallet-container">
         <view class="wallet-detail" bindtap='toWalletDetail' data-title='{{ walletDetail }}'>
             <view class="wallet-center">
@@ -25,6 +24,6 @@
                 </view>
             </view>
         </view>
-
     </view>
+
 </view>

pages/user/myWallet/myWallet.wxss

@@ -63,7 +63,6 @@ image{
     width:16rpx;
     height:28rpx;
 }
-
 .wallet-detail {
     margin-top:20rpx;
     width:716rpx;

pages/user/walletDetails/walletDetails.js

@@ -0,0 +1,112 @@
+// pages/user/walletDetails/walletDetails.js
+Page({
+
+  /**
+   * 页面的初始数据
+   * @param value value = Math.abs(value)
+   */
+  data: {
+    title: '',
+    walletDatails:[
+      {
+        value: '-20.00',
+        time: '2018年9月30日 12:00',
+        nickName: '喔喔',
+      },
+      {
+        value: '-20.00',
+        time: '2018年9月30日 12:00',
+        nickName: '喔喔',
+      },
+      {
+        value: '20.00',
+        time: '2018年9月30日 12:00',
+        nickName: '追忆似水年华',
+      },
+      {
+        value: '-20.00',
+        time: '2018年9月30日 12:00',
+        nickName: '喔喔',
+      },
+      {
+        value: '1822.00',
+        time: '2018年9月30日 12:00',
+        nickName: 'kongzhishuxing',
+      },
+      {
+        value: '20.00',
+        time: '2018年9月30日 12:00',
+        nickName: '喔喔',
+      },
+      {
+        value: '-20.00',
+        time: '2018年9月30日 12:00',
+        nickName: 'hahahahahahahaha',
+      },
+      
+    ],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    if (options.title) {
+      wx.setNavigationBarTitle({
+        title: options.title//页面标题为路由参数
+      });
+      this.setData({
+        title: options.title
+      });
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
+  }
+})

pages/user/walletDetails/walletDetails.json

@@ -0,0 +1 @@
+{}

pages/user/walletDetails/walletDetails.wxml

@@ -0,0 +1,34 @@
+<view class='walletDetails'>
+
+  <view class="walletDetails-center">
+
+    <view class='walletDetails-info' wx:for="{{ walletDatails }}" wx:key="{{ index }}">
+        
+        <view class="walletDetails-left">
+            <view class='avatar-box'>
+                <image src="../../../static/image/walletdetails.png" />
+            </view>
+            <view class="avatar-info">
+                <text class="avatar-doc" wx:if='{{ item.value > 0 }}'>收到的奖金-来自{{ item.nickName }}</text>
+                <text class="avatar-doc" wx:else>发出的奖金-奖励{{ item.nickName }}</text>
+                <text class="avatar-time">{{ item.time }}</text>
+            </view>
+        </view>
+
+        <view class="walletDetails-right">
+            <view class="avatar-value-pos" wx:if='{{ item.value > 0 }}'>
+                <text class="avatar-symbol">+</text>
+                <text>{{ item.value }}</text>
+            </view>
+            <view class="avatar-value-neg" wx:else>
+                <text class="avatar-symbol">-</text>
+                <text>{{ item.value }}</text>
+            </view>
+        </view>
+
+    </view>
+
+
+  </view>
+
+</view>

pages/user/walletDetails/walletDetails.wxss

@@ -0,0 +1,68 @@
+page{
+    width: 750rpx;
+    background: #F0F1F5;
+}
+.walletDetails-center{
+    width: 716rpx;
+    margin: 20rpx auto;
+}
+  
+.walletDetails-info{
+    margin-bottom: 20rpx;
+    width: 100%;
+    height: 122rpx;
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+    border-radius: 12rpx;
+    background: #FFFFFF;
+}
+
+.walletDetails-left, .walletDetails-right{
+    display: flex;
+    align-items: center;
+}
+
+image {
+    width: 100%;
+    height: 100%;
+}
+.avatar-box {
+    margin-left: 16rpx;
+    width: 64rpx;
+    height: 64rpx;
+}
+.avatar-info{
+    display: flex;
+    flex-direction: column;
+    margin-left: 16rpx;
+}
+.avatar-doc{
+    height: 38rpx;
+    color: #3C3C3C;
+    font-size: 28rpx;
+} 
+.avatar-time{
+    height: 32rpx;
+    color: #909090;
+    font-size: 24rpx;
+}
+
+.walletDetails-right{
+    margin-right: 20rpx;
+    font-size: 24rpx;
+}
+
+.avatar-value-pos, .avatar-value-neg{
+    width: 100rpx;
+}
+.avatar-value-pos {
+    color: #FF5200;
+}
+.avatar-value-neg{
+    color: #61CA54;
+}
+.avatar-symbol {
+    font-weight: bold;
+}
+