【金秋打卡】第16天 破解JavaScript高级玩法 第二讲

课程名称： 破解JavaScript高级玩法

课程章节： 课程导学

主讲老师： Cloud

课程内容：

今天学习的内容包括：

课程的基本介绍

课程收获：

2.1 心得：

var app = getApp();
// pages/scenicEvaluate/scenicEvaluate.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentData: 0,
    evaluateList: [],
    scenicSpotId: '',
    pagenum: 1,
    scrollTop: 0,
    isShowCoupon: false,
    hasMoreData: true,
    isRefreshing: false,
    isLoadingMoreData: false,
    isNew: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.data.scenicSpotId = options.id;
    that.getEvaluateList();
  },

  getEvaluateList: function () {
    var that = this;
    wx.showLoading({
      title: "数据加载中..."
    });

    wx.request({
      url: app.getUrl(app.globalData.getEvaluateList),
      data: {
        type: that.data.currentData,
        scenicSpotId: that.data.scenicSpotId,
        pageNum: that.data.pagenum, //从数据里获取当前页数
        pageSize: 10, //每页显示条数
      },
      success: function (res) {
        //console.log(res)
        var result = res.data;
        if (result.result) {
          if (that.data.isNew) {
            that.data.evaluateList = [];
            that.data.isNew = false;
          }

          var listNew = that.data.evaluateList.concat(result.data.rows); //合并数组
          that.setData({
            evaluateList: listNew,
            isLoadingMoreData: false,
            isNew: that.data.isNew
          });
          //console.log(result.data.rows.length)
          if (result.data.rows == null || result.data.rows.length == 0) {
            that.setData({
              hasMoreData: false
            });
          }
        }
        wx.hideLoading();
      },
      fail: function (err) {
        wx.hideLoading();
      }, //请求失败
      complete: function () { } //请求完成后执行的函数
    })
  },
  onReachBottom: function () { //触底开始下一页
    var that = this;
    if (that.data.isRefreshing || that.data.isLoadingMoreData || !that.data.hasMoreData) {
      return
    }
    var pagenum = that.data.pagenum + 1; //获取当前页数并+1
    that.setData({
      pagenum: pagenum, //更新当前页数
      isLoadingMoreData: true
    })
    that.getEvaluateList(); //重新调用请求获取下一页数据
  },

  checkCurrent: function (e) {
    var that = this;

    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.data.pagenum = 1;
      that.data.isNew = true;
      that.data.currentData = e.target.dataset.current;
      that.getEvaluateList();
      that.setData({
        currentData: e.target.dataset.current,
        isNew: that.data.isNew
      })
    }
  },
  // 获取滚动条当前位置
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop,

    });

    if (e.scrollTop > 100) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
    }
  },
  previewImg: function (e) {
    var src = e.currentTarget.dataset.src;
    var srcList = e.currentTarget.dataset.srclist;
    var previewList = [];
    for (var i = 0; i < srcList.length; i++) {
      previewList.push(srcList[i].CommentImage);
    }

    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: previewList // 需要预览的图片http链接列表
    })
  },
})

/* pages/scenicEvaluate/scenicEvaluate.wxss */
page{
  background-color: #fff;
}

.tag_list{
  display: flex;
  margin: 55rpx 0 40rpx 30rpx;
}

.tag{
  width:94rpx;
  height:54rpx;
  border-radius:24rpx;
  color: #999999;
  background-color: #F5F5F5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 60rpx;
}

.tag.all{
  width:151rpx;
}

.active {
  color: #FFFFFF;
  background-color: #0F95FD;
}

.active all{
  width:137rpx;
}

.user_evaluation {
  margin-bottom: 10rpx;
}

.evalutaion_title {
  display: flex;
  justify-content: space-between;
  margin: 30rpx;
}

.user_info {
  display: flex;
  align-items: center;
}

.user_avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user_name {
  display: flex;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.user_score {
  display: flex;
  align-items: center;
  font-size: 20rpx;
}

.user_score_title{
  padding-right: 20rpx;
}

.rating {
  display: flex;
  align-items: center;
}

.evaluation_star {
  padding-right: 12rpx;
  height: 20rpx;
  width: 20rpx;
}

.evalutaion_date {
  display: flex;
  font-size: 26rpx;
  margin-top: 4rpx;
  color: #999;
}

.evaluation_text {
  color: #666;
  margin: 0 30rpx 0rpx 30rpx;
  line-height: 1.5;
  font-size: 28rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.reply_text {
  color: #666;
  margin: 30rpx 30rpx 0 30rpx;
  line-height: 1.8;
  font-size: 24rpx;
  display: -webkit-box;
  background-color:#f5f5f5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.all_evaluation_img {
  display: flex;
  margin: 0 30rpx;
}

.evaluation_img {
  height: 135rpx;
  width: 200rpx;
  border-radius: 12rpx;
  margin-right: 10rpx;
  margin-top: 30rpx;
}


.no_evaluate{
  font-size: 32rpx;
  text-align: center;
  color: #C5C2C5;
  margin-top: 30rpx;
}

.no_evaluate image{
  margin: 0 auto;
  width: 343rpx;
  height: 254rpx;
}

<!--pages/scenicEvaluate/scenicEvaluate.wxml-->
<view class="tag_list">
	<view class='tag all {{currentData == 0 ? "active" : ""}}' data-current="0" bindtap='checkCurrent'>全部评价</view>
	<view class='tag {{currentData == 1 ? "active" : ""}}' data-current="1" bindtap='checkCurrent'>好评</view>
	<view class='tag {{currentData == 2 ? "active" : ""}}' data-current="2" bindtap='checkCurrent'>中评</view>
	<view class='tag {{currentData == 3 ? "active" : ""}}' data-current="3" bindtap='checkCurrent'>差评</view>
</view>

  <block wx:for="{{evaluateList}}" wx:key="{{index}}" wx:for-item="evaluateItem" wx:if="{{evaluateList.length>0}}">
    <view class="user_evaluation">
      <view class="evalutaion_title">
        <view class="user_info">
          <view class="user_info_left">
            <image class="user_avatar" src="{{evaluateItem.Photo}}"></image>
          </view>
          <view class="user_info_right">
            <view>
              <text class="user_name">{{evaluateItem.UserName}}</text>
            </view>
            <view class="user_score">
              <text class="user_score_title">评分</text>
              <view class='flex_item rating' wx:if="{{evaluateItem.ReviewMark==1}}">
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
              </view>
              <view class='flex_item rating' wx:elif="{{evaluateItem.ReviewMark==2}}">
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
              </view>
              <view class='flex_item rating' wx:elif="{{evaluateItem.ReviewMark==3}}">
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
              </view>
              <view class='flex_item rating' wx:elif="{{evaluateItem.ReviewMark==4}}">
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_gray.png"></image>
              </view>
              <view class='flex_item rating' wx:elif="{{evaluateItem.ReviewMark==5}}">
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
              </view>
              <view class='flex_item rating' wx:else>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
                <image class="evaluation_star" src="/images/star_yellow.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view>
          <text class="evalutaion_date">{{evaluateItem.ReviewDateStr}}</text>
        </view>
      </view>
      <view>
        <text class="evaluation_text">{{evaluateItem.ReviewContent}}</text>
      </view>
      <view class="all_evaluation_img">
        <block wx:for="{{evaluateItem.EvalueteImages}}" wx:key="{{item.Id}}" wx:if="{{evaluateItem.EvalueteImages.length>0}}">
          <image class="evaluation_img" src="{{item.CommentImage}}" data-src="{{item.CommentImage}}" data-srclist="{{evaluateItem.EvalueteImages}}" bindtap='previewImg'></image>
        </block>
      </view>
      <view>
        <text class="reply_text" wx:if="{{evaluateItem.ReplyContent.length>0}}">商家回复：{{evaluateItem.ReplyContent}}</text>
      </view>
    </view>
  </block>

  
  <view class="no_evaluate" wx:if="{{evaluateList.length==0}}">
      <image src="/images/non_scenic.png"></image>
      <view>暂无评价</view>
  </view>