前言

和首頁一樣，為了方便，個人中心頁同樣的我不一點一點的寫布局和樣式，找一個差不多的模板樣式，然后修改并補(bǔ)充交互。

初始的樣式長這個樣子：

因為樣板的顏色是橙色，我們改為和首頁一樣的色值。 首先修改 pages/mine/mine.json 文件：

// pages/mine/mine.json
{
  "navigationBarTitleText": "我的",
  "navigationBarBackgroundColor": "#99CCFF",
  "navigationBarTextStyle": "white",
  "component": true,
  "usingComponents": {
    "icon": "./icon/index"
  }
}
復(fù)制代碼

然后將 .center .blue-top 的顏色也改為 #99CCFF。同時，我們將原有的“已為您服務(wù)天數(shù)”改為“免費解析次數(shù)”，并將左右交換位置，這樣我們后續(xù)可以增加一個邏輯：讓用戶在超過免費的解析次數(shù)后，觀看激勵廣告才能繼續(xù)解析。

<view class="blue-top">
  <view class="user-card">
    <view class="card-top">
      <view class="user-top">
        <view class="user-vip" style="position:relative;">
          <image class="user-pic" src="{{hasUserInfo ? userInfo.avatarUrl : '/images/my.png'}}"></image>
        </view>
        <view class="user-board">
          <button wx:if="{{!hasUserInfo}}" class="user-name" open-type="getUserInfo" bindgetuserinfo="getUserInfo">點擊登陸</button>
          <view wx:if="{{hasUserInfo}}" class="user-name">{{userInfo.nickName}}</view>
        </view>
      </view>
    </view>
    <view class="card-bottom">
      <view class="left">
        <view class="count">
          <text class="num">{{dailyFreeParseNum}} 次</text>
        </view>
        <text class="txt">今日免費次數(shù)</text>
      </view>
      <view class="right">
        <view class="count">
          <text class="num">{{totalParseNum}} 次</text>
        </view>
        <text class="txt">共為您解析次數(shù)</text>
      </view>
    </view>
  </view>
</view>
復(fù)制代碼

在第一章中，我們封裝了http請求方法，以及一個getUserInfo方法登陸并獲取用戶信息及token，這里我們可以直接復(fù)用該方法。

首先我們在data中定義兩個變量

data: {
  userInfo: null,
  hasUserInfo: false,
},  
復(fù)制代碼

然后可以注意到我們的wxml中，在沒有用戶信息時展示的是登陸button，綁定了getUserInfo方法

<view class="user-board">
 <button wx:if="{{!hasUserInfo}}" class="user-name" open-type="getUserInfo" bindgetuserinfo="getUserInfo">點擊登陸</button>
 <view wx:if="{{hasUserInfo}}" class="user-name">{{userInfo.nickName}}</view>
</view>
復(fù)制代碼

我們在/pages/mine/mine.js中聲明該方法，添加loading提示，核心邏輯復(fù)用app.js中的方法：

/**
 * 授權(quán)登錄
 */
getUserInfo(e) {
  if (e.detail.errMsg !== 'getUserInfo:ok') {
    wx.showToast({
      title: '未授權(quán)，登錄失敗',
      icon: 'none'
    })
    return false;
  }
  wx.showLoading({
    title: "正在登錄",
    mask: true
  });
  // 執(zhí)行登錄
  app.getUserInfo(res => {
    this.setData({
      userInfo: app.globalData.userInfo,
      hasUserInfo: app.globalData.hasUserInfo,
    })
    wx.hideLoading();
  })
}
復(fù)制代碼

這里注意的是我們傳入了一個回調(diào)，來設(shè)置當(dāng)前頁面的userInfo、hasUserInfo變量的值。

在data中增加dailyFreeParseNum、totalParseNum兩個參數(shù)，并將默認(rèn)值設(shè)置為 --,

data: {
  dailyFreeParseNum: '--',
  totalParseNum: '--',
  userInfo: null,
  hasUserInfo: false,
},  
復(fù)制代碼

在onShow階段獲取每日免費解析次數(shù)、總解析次數(shù)

onShow: function() {
  if (app.globalData.hasUserInfo) {
    this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: app.globalData.hasUserInfo,
    })
  }
  // 獲取每日剩余免費解析次數(shù)
  this.getDailyFreeParseNum(),
  // 獲取當(dāng)前用戶總解析次數(shù)
  this.getTotalParseNum();
},
復(fù)制代碼

下面我們來實現(xiàn)這兩個方法

每日的免費解析次數(shù)使用本地存儲，不走服務(wù)端，不做強(qiáng)限制。

/**
* 獲取當(dāng)日免費次數(shù)
* 使用本地存儲，不走服務(wù)端
*/
getDailyFreeParseNum() {
 var today = util.formatDate(new Date(), '');
 var lastParseDate = wx.getStorageSync('lastParseDate');
 if (lastParseDate != today) {
   wx.setStorageSync('lastParseDate', today);
   wx.setStorageSync('dailyFreeParseNum', DEFAULT_DAILY_FREE_PARSE_NUM);
   return DEFAULT_DAILY_FREE_PARSE_NUM;
 } else {
   return wx.getStorageSync('dailyFreeParseNum');
 }
},
復(fù)制代碼

該處使用的url網(wǎng)絡(luò)請求的數(shù)據(jù)。

/**
* 獲取總解析次數(shù)
* 返回示例：
* {"total_num":354}
*/
getTotalParseNum() {
 app.apiRequest({
   url: '/records/total',
   success: res => {
     this.setData({
       totalNum = res.data.total_num
     })
   }
 })
},
復(fù)制代碼

這里我們只保留幾個認(rèn)為有用的菜單項：

<view class="center-list">
  <navigator bindtap="pingMenu" class="center-list-item" url="/pages/history/history">
    <icon class="icon1" color="#00c8fd" size="50" type="download"></icon>
    <text class="list-text">解析記錄查詢</text>
    <icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
  </navigator>
  <!--navigator target="miniProgram"/--->
  <button class="center-list-item" openType="contact">
    <icon class="icon1" color="#00c8fd" size="50" type="kefu"></icon>
    <text class="list-text">聯(lián)系客服</text>
    <icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
  </button>
  <button class="center-list-item" openType="share">
    <icon class="icon1" color="#00c8fd" size="40" type="share"></icon>
    <text class="list-text">分享</text>
    <icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
  </button>
  <button bindtap="showQrcode"  open-type="navigate" class="center-list-item" >
    <icon class="icon1" color="#00c8fd" size="50" type="zan1"></icon>
    <text class="list-text">贊賞支持</text>
    <icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
  </button>    
</view>
復(fù)制代碼

<button class="center-list-item" openType="contact">
  <icon class="icon1" color="#00c8fd" size="50" type="kefu"></icon>
  <text class="list-text">聯(lián)系客服</text>
  <icon class="icon2" color="#8a8a8a" size="30" type="youjiantou"></icon>
</button>
復(fù)制代碼

如上，我們只要對button添加openType="contact"即可。

<button class="center-list-item" openType="share">
復(fù)制代碼

如上，同樣的，對button添加openType="share"即可，不過要定義分享函數(shù) onShareAppMessage:

//分享小程序
 onShareAppMessage: function() {
    return {
      title: this.data.config_base_list.share_title ? this.data.config_base_list.share_title : '推薦一款超好用的視頻去水印工具，免費解析不限次，大家都在用',
      path: '/pages/index/index',
      imageUrl: this.data.config_base_list.share_imageUrl ? this.data.config_base_list.share_imageUrl : '/images/share.jpg',
      success: function(e) {
        wx.showToast({
          title: "分享成功",
          icon: "success",
          duration: 2e3
        });
      },
      fail: function(e) {
        wx.showToast({
          title: "分享失敗",
          icon: "none",
          duration: 2e3
        });
      }
    }
  },
}
復(fù)制代碼

這里為了菜單多一點，添加了一個打賞菜單，實現(xiàn)簡單，點擊后彈出個圖片就行：

//打賞
showQrcode() {
  wx.previewImage({
    urls: ['http://xxxx/images/xxx.jpg'],
    current: 'http://xxxx/images/xxxx.jpg' // 當(dāng)前顯示圖片的http鏈接      
  })
},
復(fù)制代碼

三、歷史解析列表

該處使用的url網(wǎng)絡(luò)請求的數(shù)據(jù)。

3.1 頁面樣式

<view class="no-data" wx:if="{{!list||list.length==0}}">暫無相關(guān)信息~</view>
<view class="container">
  <view class="scroll-gap"></view>
  <view class="video-box shadow" wx:for="{{list}}" wx:key="id">
    <view class="video-btm">
      <view class="video-title ellipsis" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.url}}" data-tip="標(biāo)題已復(fù)制">{{item.url}}</view>
      <button data-content="{{item}}" openType="share">
        <icon color="#9cf" size="30" type="share"></icon>
      </button>
    </view>
    <video autoplay class="video-item" bindlongpress="Copy_video_info" data-content="{{item.image_url}}" data-tip="圖片鏈接已復(fù)制" poster="{{item.image_url}}" src="{{item.no_water_mark_url}}" wx:if="{{index===downloadIndex}}"></video>
    <view class="video-cover" wx:else>
      <image class="video-cover-poster" mode="aspectFit" src="{{item.image_url}}" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.image_url}}" data-tip="圖片鏈接已復(fù)制"></image>
      <icon bindtap="videoPlay" data-idx="{{index}}" class="video-cover-icon" color="#00c8fd" size="55" type="bofang"></icon>
      <text class="video-date">{{item.updated_at}}</text>
    </view>
    <view class="btn">
      <button class="btn-left" bindtap="Copy_video_info" bindlongpress="Copy_video_info" data-content="{{item.url}}" data-tip="視頻地址已復(fù)制">復(fù)制鏈接</button>
      <button class="btn-center" bindtap="Download" data-link="{{item.url}}">重新下載</button>
      <button class="btn-right" bindtap="DEL" data-key="{{index}}" data-id="{{item.id}}">刪除記錄</button>
    </view>
  </view>
  <view class="scroll-gap"></view>
</view>
復(fù)制代碼

3.2 獲取歷史解析列表

分頁獲取

/**
 * 歷史解析記錄
 */
history: function() {
  this.setData({
    loading: true
  })
  wx.showLoading({
    title: '加載中...',
  });
  app.apiRequest({
    url: '/records',
    data: {
      page: this.data.page,
    },
    success: res => {
      console.log(res);
      this.setData({
        list: this.data.list.concat(res.data.data),
      })
    },
    complete: (res) => {
      this.setData({
        loading: false
      })
      wx.hideLoading();
    }
  })
},
復(fù)制代碼

觸底加載下一頁

/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
 this.setData({
   page: this.data.page + 1
 })
 this.history();
},
復(fù)制代碼

3.3 刪除記錄

DEL: function(e) {
  var id = e.currentTarget.dataset.id;
  var key = e.currentTarget.dataset.key;
  wx.showModal({
    title: '提示',
    content: '你確定要刪除嗎？',
    success: res => {
      if (res.confirm) {
        app.apiRequest({
          url: '/records/' + id,
          method: 'DELETE',
          success: res => {
            this.data.list.splice(key, 1);
            this.setData({
              list: this.data.list
            })
          }
        })
      } else if (res.cancel) {}
    }
  })
},
復(fù)制代碼

3.4 重新下載

/**
 * 重新下載 
 * 復(fù)制原始鏈接跳轉(zhuǎn)首頁重新讓用戶解析
 * @param e 
 */
Download: function(e) {
  console.log(e)
  wx.setClipboardData({
    data: e.currentTarget.dataset.link,
  })
  wx.reLaunch({
    url: "/pages/index/index"
  })
},
復(fù)制代碼

3.5 復(fù)制地址

//復(fù)制視頻詳情內(nèi)容
Copy_video_info: function(t) {
  wx.setClipboardData({
    data: t.currentTarget.dataset.content,
    success: function(a) {
      wx.showToast({
        title: t.currentTarget.dataset.tip,
        duration: 1200
      });
    }
  });
},
復(fù)制代碼

總結(jié)

最終，我們的個人中心頁長這個樣子：

歷史解析記錄列表長這個樣子：