全棧項目|小書架|微信小程序-書籍詳情功能實現

效果圖

實現分析

從效果圖上分析，書籍詳情是通過點擊首頁的item后進入。
進入詳情頁之后頁面頂部顯示書籍的相關信息，同時判斷用戶是否登錄，未登錄則彈出一個授權登錄窗口。
點擊登錄之后即可加載出用戶評論信息。

通過上圖我們可以分析出靜態頁面的主要結構如下：

• 書籍信息
  • 左側布局是圖書圖片
  • 中間布局從上到下是：名稱、作者、出版社
  • 右側布局是收藏icon
• 登錄提示彈窗
  • 上部分是提示文本
  • 下部分是登錄按鈕
• 評論列表
  • 左側是評論人頭像
  • 右側上部分是評論人名字
  • 右側中間部分是評論信息
  • 右側下部分是評論時間
• 評論按鈕
  • 固定在底部的一個按鈕

---

ps：如果不想看代碼可直接跳過了，下面都是具體的代碼實現了

具體實現

具體實現主要從wxml，wxss，js這三個文件去介紹。

wxml實現了頁面的繪制，然后通過wxss美化頁面的樣式，最后通過js文件獲取數據並將數據填充wxml。

頂部書籍信息實現

wxml規定了各個組件的擺放順序。

<view class="book-container bg-white">

    <view class="book-info">
    // 書籍圖片
      <image class="book-image" mode="scaleToFill" src="{{bookInfo.bkcover}}"></image>
	// 書籍文字信息
      <view class="book-desc">
        <text class="book-main-text">{{bookInfo.bkname}}</text>
        <text class="book-text">{{bookInfo.bkauthor}}</text>
        <text class="book-text">{{bookInfo.bkpublisher}}</text>
      </view>
    </view>

	// 收藏 icon
    <view class="button-area" catchtap="onLikeClick">
      <block wx:if="{{isLike}}">
        <l-icon name="like" color="#FFE57F" size="50" />
      </block>
      <block wx:else>
        <l-icon name="like" color="#34BFA3" size="50" />
      </block>
    </view>

  </view>

wxss樣式美化了圖書封面，圖書名稱，作者信息等內容

.book-container {
  /*border: 1px solid black;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 50rpx 30rpx;
}

.book-info {
  /*border: 1px solid red;*/
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.book-image {
  width: 200rpx;
  height: 300rpx;
  box-shadow: 0 0 10rpx #cdcdcd;
}

.book-desc {
  /*border: 1px solid yellow;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 30rpx;
}

.book-main-text {
  color: #1e1e1e;
  font-size: 35rpx;
}

.book-text {
  color: #8a8a8a;
  font-size: 30rpx;
}

.button-area {
  /*border: 1px solid blue;*/
  display: flex;
  flex-direction: row;
  align-items: center;
}

js文件偽代碼如下：獲取了書籍信息、用戶是否收藏圖書的信息

// 獲取書籍信息
_getBookInfo(bk_id) {
    bookModel.getBookInfo(bk_id)
      .then(res => {
        this.data.bookInfo = res
        this.setData({
          bookInfo: this.data.bookInfo
        });
      })
  },
  
// 獲取用戶是否收藏該書籍
_getUserLikeIt(bk_id) {
  bookModel.getLikeStatus(bk_id)
      .then(res => {
        this.data.bookIsLike = res
        this.setData({
          isLike: this.data.bookIsLike
        });
      })
  },

登錄彈窗實現

彈窗使用了lin-ui中的l-popup組件，具體的組件使用可查看 官方文檔。

wxml文件實現了組件的擺放順序。

<!-- 彈出登錄彈窗 -->
<l-popup show="{{unLogin}}" content-align="center" showMask="true" bind:lintap="onPopupTap" locked="{{true}}">

  <view class='center'>
    <text>收藏功能需要</text>
    <text>登錄之后才能使用呢~</text>
    <l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo">允許登錄</l-button>
  </view>
</l-popup>

wxss文件控制了彈窗居中顯示，已經窗口大小、字體大小等內容。

.center {
  height: 250rpx;
  width: 500rpx;
  line-height: 100rpx;
  background: #fff;
  text-align: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  color: #555;
  border-radius: 8rpx;
  font-size: 28rpx;
}

js文件中判斷了用戶是否登錄，根據不同的登錄狀態控制彈窗是否顯示

if (app.globalData.userInfo != null) {
      that.setData({
        unLogin: false
      })
      // 評論需要登錄
      this._getCommentData(that.data.bk_id)
    } else {
      that.setData({
        unLogin: true
      })
    }

評論列表實現

進入評論列表，首先會加載loading進度條，如果沒有評論列表會顯示暫無評論的提示，如果有評論數據會顯示評論數據。

評論列表的wxml如下：

<view class="comment-container">
    <view class="comment-title">
      <text>--------- 評論 ---------</text>
    </view>

	// 加載中進度條
    <view class="comment-loading" wx:if="{{commentLoading}}">
      <view class="donut"></view>
    </view>
    
	// 評論布局列表
    <view class="comment-area" wx:else>
		// 有評論數據
      <block wx:if="{{commentList.length > 0}}">
        <view class="comment-item" wx:for="{{commentList}}" wx:key="index">
        	// 頭像
          <view class="avatar-container">
            <image mode="scaleToFill" src="{{item.uavatar}}" class="user-avatar"></image>
          </view>
			// 用戶名、內容、評論時間
          <view class="comment-content">
            <text class="user-name">{{item.uname}}</text>
            <text class="user-comment">{{item.ucontent}}</text>
            <text class="comment-time">{{item.created_at}}</text>
          </view>
        </view>
      </block>
		// 沒有評論提示布局
      <block wx:else>
        <view class="comment-placeholder">來當第一個評論的人吧～</view>
      </block>

    </view>
  </view>

評論列表的wxss如下：

.comment-container {
  padding-top: 30rpx;
}

.comment-title {
  /*border: 1px solid black;*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

.comment-title > text {
  font-size: 30rpx;
  color: #cdcdcd;
}

.comment-area {
  /*border: 1px solid black;*/
  padding: 20rpx 30rpx;
}

.comment-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.comment-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dcdcdc;
}

.comment-item:last-child {
  margin-bottom: 180rpx;
}

.avatar-container {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  /*border: 1px solid red;*/
}

.comment-content {
  display: flex;
  max-width: 590rpx;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.user-name {
  color: #8a8a8a;
  font-size: 30rpx;
}

.user-comment {
  display: inline-block;
  margin-top: 10rpx;
  color: #1e1e1e;
  font-size: 35rpx;
}

.comment-time {
  display: inline-block;
  margin-top: 10rpx;
  color: #cdcdcd;
  font-size: 20rpx;
}

.comment-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

評論列表的js如下：調用接口獲取數據庫中的評論數據。

_getCommentData(bk_id) {
    let that = this
    bookModel.getPageData(bk_id)
      .then(res => {
        console.log(res)
        if (res.length > 0) {
          // 關閉進度條
          that._commentSetTimeOut(res, false)
        } else if (res.error_code == 10006) {
          // token 不合法，需要登錄
          app.showInfo('token不合法，請去登錄');
          // 關閉進度條
          that._commentSetTimeOut([], false)
        } else {
          // 關閉進度條
          that._commentSetTimeOut([], false)
        }

      })
      .catch(err => {
        console.log('錯誤信息：' + err);
        // 關閉進度條
        that._commentSetTimeOut([], false)
      })
  },

底部固定的評論按鈕實現

主要就是如何使按鈕底部固定，同時不會遮擋住評論列表

wxml如下：有意思的是class中也能直接寫樣式，新發現！

  <view class="fixed-bottom block-full-width flex-container bg-white">
    <button class="full-button" type="primary" open-type="getUserInfo" catchtap="goComment" data-id="{{bookInfo.id}}" data-name="{{bookInfo.name}}"> 寫評論 </button>
  </view>

以上就是本次的介紹。

---

掃碼關注公眾號，輕撩即可。