:art: 添加我的钱包页面

component/my/my.js

@@ -3,6 +3,7 @@ export const myInit =  (that) => {
     myData: {
         title: '修改资料',
         concern: '我的关注',
+        wallet: "我的钱包",
         imgUrl: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18102320',
         name: 'ABC',
         address:['北京海淀','中关村','三小'],
@@ -24,5 +25,11 @@ export const myInit =  (that) => {
       url: `../user/myconcern/myconcern?title=${title}`
     });
   }
+  that.toMyWallet = e => {
+    let title = e.currentTarget.dataset.title;
+    wx.navigateTo({
+      url: `../user/myWallet/myWallet?title=${title}`
+    });
+  }
 
 }

component/my/my.wxml

@@ -57,7 +57,7 @@
           </view>
         </view>
       </view>
-      <view class='wallet-module'>
+      <view class='wallet-module' bindtap='toMyWallet' data-title='{{ myData.wallet }}'>
         <view class='wallet-center'>
           <view class='wallet-left'>
             <view class='icon-box'>

pages/user/myWallet/myWallet.js

@@ -1,20 +1,34 @@
 // pages/user/myWallet/myWallet.js
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
-  
+    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}`
+    // });
   },
-
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-  
+  onLoad: function (option) {
+    if (option.title) {
+      wx.setNavigationBarTitle({
+        title: option.title//页面标题为路由参数
+      });
+      this.setData({
+        title: option.title
+      });
+    }
   },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/user/myWallet/myWallet.wxml

@@ -1,2 +1,30 @@
 <!--pages/user/myWallet/myWallet.wxml-->
-<text>pages/user/myWallet/myWallet.wxml</text>
+<view class="my-wallet">
+    <view class="wallet-header">
+        <view class="total-money">¥ {{ totalMoney }}</view>
+        <view class="text-doc">
+            <view class="text-doc-box">
+                <image src='../../../static/image/mywalletmoney.png'></image>
+            </view>
+            <text>{{ textDoc }}</text>
+        </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">
+                <view class='wallet-left'>
+                    <view class='icon-box'>
+                        <image src='../../../static/image/mywalletdetail.png'></image>
+                    </view>
+                    <text>资金明细</text>
+                </view>
+                <view class='wallet-right'>
+                    <image src='../../../static/image/to.png'></image>
+                </view>
+            </view>
+        </view>
+
+    </view>
+</view>

pages/user/myWallet/myWallet.wxss

@@ -1 +1,75 @@
-/* pages/user/myWallet/myWallet.wxss */
+/* pages/user/myWallet/myWallet.wxss */
+page{
+    width: 750rpx;
+    background: #F0F1F5;
+}
+.wallet-header {
+    width: 750rpx;
+    height: 218rpx;
+    background-color: #61CA54;
+    color: #FFF;
+}
+.total-money {
+    text-align: center;
+    font-size: 52rpx;
+    line-height: 70rpx;
+}
+.text-doc {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    font-size: 32rpx;
+    line-height: 42rpx;
+}
+.text-doc-box {
+    width: 30rpx;
+    height: 32rpx;
+    margin-right: 8rpx;
+}
+.text-prompt {
+    margin-top: 20rpx;
+    text-align: center;
+    font-size: 28rpx;
+    line-height: 38rpx;
+}
+
+image{
+    width: 100%;
+    height: 100%;
+}
+
+.wallet-container {
+    width: 716rpx;
+    margin: 0rpx auto;
+}
+.wallet-center{
+    width:680rpx;
+    height:88rpx;
+    margin:0 auto;
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}
+.wallet-left {
+    display:flex;
+    align-items:center;
+}
+.icon-box {
+    width: 60rpx;
+    height:60rpx;
+    margin-right:16rpx;
+}
+.wallet-right {
+    width:16rpx;
+    height:28rpx;
+}
+
+.wallet-detail {
+    margin-top:20rpx;
+    width:716rpx;
+    height:88rpx;
+    font-size:34rpx;
+    color:#5E5E5E;
+    background:#FFFFFF;
+    border-radius:14rpx;
+}

pages/user/myconcern/myconcern.wxml

@@ -1,5 +1,6 @@
 <view class='my-concern'>
   <view class="concern-center">
+
     <view class='concern-info' wx:for="{{ concerns }}" wx:key="{{ index }}">
       <view class='avatar-box'>
         <image class='avatar-image' src="{{ item.avatar }}" />
@@ -8,18 +9,22 @@
         <text class="nickName">{{ item.nickName }}</text>
         <text class="time">{{ item.time }}</text>
       </view>
+
       <view class="avatar-follow" wx:if='{{ item.flag }}'>
         <view class='avatar-img'>
           <image class='avatar-images' src="../../../static/image/concerned.png" />
         </view>
         <view class="follow-status">{{ item.concerned }}</view>
       </view>
+
       <view class="avatar-follow" wx:elif='{{ item.followBack === item.followBack || item.flag }}'>
         <view class='avatar-img'>
           <image class='avatar-images' src="../../../static/image/concernback.png" />
         </view>
         <view class="follow-status">{{ item.followBack }}</view>
       </view>
+
     </view>
+    
   </view>
 </view>