微信小程序实战–集阅读与电影于一体的小程序项目（八）

31.电影详情页面

movie-template.w

<view class=\"movie-container\" catchtap=\"onMovieTap\" data-movieId=\"{{movieId}}\">

movie.js

 onMovieTap:function(event) {
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: \"movie-detail/movie-detail?id=\" + movieId
    })
  },

util.js

function convertToCastString(casts) {
  var castsjoin = \"\";
  for (var idx in casts) {
    castsjoin = castsjoin + casts[idx].name + \" / \";
  }
  return castsjoin.substring(0, castsjoin.length - 2);
}

function convertToCastInfos(casts) {
  var castsArray = []
  for (var idx in casts) {
    var cast = {
      img: casts[idx].avatars ? casts[idx].avatars.large : \"\",
      name: casts[idx].name
    }
    castsArray.push(cast);
  }
  return castsArray;
}

module.exports = {
  convertToStarArray: convertToStarArray,
  http: http,
  convertToCastString: convertToCastString,
  convertToCastInfos: convertToCastInfos
};

movie-detail.js

var util = require(\'../../../utils/util.js\');
var app=getApp()

Page({
  data:{
    movie:{}
  },
   :function(options){
    var movieId = options.id;
    var url = app.globalData.g_ Url +
      \"/v2/movie/subject/\" + movieId;
    util.http(url,this.processDoubanData);
  },
  processDoubanData:function(data){
    var director = {
      avatar: \"\",
      name: \"\",
      id: \"\"
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large

      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    var movie = {
      movieImg: data.images ? data.images.large : \"\",
      country: data.countries[0],
       : data. ,
      original : data.original_ ,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join(\"、\"),
      stars: util.convertToStarArray(data.rating.stars),
      score: data.rating.average,
      director: director,
      casts: util.convertToCastString(data.casts),
      castsInfo: util.convertToCastInfos(data.casts),
      summary: data.summary
    }
    console.log(movie)
    this.setData({
      movie:movie
    })
  }
})

movie-detail.w

<import src=\"../stars/stars-template.w \" />
<view class=\"container\">
  <image class=\"head-img\" src=\"{{movie.movieImg}}\" mode=\"aspectFill\" />
  <view class=\"head-img-hover\" data-src=\"{{movie.movieImg}}\" catchtap=\"viewMoviePostImg\">
    <text class=\"main- \">{{movie. }}</text>
    <text class=\"sub- \">{{movie.country + \" · \"+movie.year}}</text>
    <view class=\"like\">
      <text class=\"highlight-font\">
        {{movie.wishCount}}
      </text>
      <text class=\"plain-font\">
        人喜欢
      </text>
      <text class=\"highlight-font\">
        {{movie.commentCount}}
      </text>
      <text class=\"plain-font\">
        条评论
      </text>
    </view>
  </view>
  <image class=\"movie-img\" src=\"{{movie.movieImg}}\" data-src=\"{{movie.movieImg}}\" catchtap=\"viewMoviePostImg\"/>
  <view class=\"summary\">
    <view class=\"original- \">
      <text>{{movie.original }}</text>
    </view>
    <view class=\"flex-row\">
      <text class=\"mark\">评分</text>
      <template is=\"starsTemplate\" data=\"{{stars:movie.stars, score:movie.score}}\" />
    </view>
    <view class=\"flex-row\">
      <text class=\"mark\">导演</text>
      <text>{{movie.director.name}}</text>
    </view>
    <view class=\"flex-row\">
      <text class=\"mark\">影人</text>
      <text>{{movie.casts}}</text>
    </view>
    <view class=\"flex-row\">
      <text class=\"mark\">类型</text>
      <text>{{movie.generes}}</text>
    </view>
  </view>
  <view class=\"hr\"></view>
  <view class=\"synopsis\">
    <text class=\"synopsis-font\">剧情简介</text>
    <text class=\"summary-content\">{{movie.summary}}</text>
  </view>
  <view class=\"hr\"></view>
  <view class=\"cast\">
    <text class=\"cast-font\"> 影人</text>
    <scroll-view class=\"cast-imgs\" scroll-x=\"true\" style=\"width:100%\">
      <block wx:for=\"{{movie.castsInfo}}\" wx:for-item=\"item\">
        <view class=\"cast-container\">
          <image class=\"cast-img\" src=\"{{item.img}}\"></image>
          <text class=\"cast-name\">{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</view>

movie-detail.wxss

@import \"../stars/stars-template.wxss\";

.container{
    display:flex;
    flex-direction: column;
}

.head-img{
    width:100%;
    height: 320rpx;
}

.head-img-hover{
    width: 100%;
    height: 320rpx;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    flex-direction: column;
}

.main- {
    font-size: 19px;
    color:#fff;
    font-weight:bold;
    margin-top: 50rpx;
    margin-left: 40rpx;
    letter-spacing: 2px;
}

.sub- {
    font-size: 28rpx;
    color:#fff;
    margin-left: 40rpx;
    margin-top: 30rpx;
}

.like{
    display:flex;
    flex-direction: row;
    margin-top: 30rpx;
    margin-left: 40rpx;
}

.highlight-font{
    color: #f21146;
    font-size:22rpx;
    margin-right: 10rpx;
}

.plain-font{
    color: #666;
    font-size:22rpx;
    margin-right: 30rpx;
}


.movie-img{
    height:238rpx;
    width: 175rpx;
    position: absolute;
    top:160rpx;
    right: 30rpx;
}

.summary{
    margin-left:40rpx;
    margin-top: 40rpx;
    color: #777777;
}

.original- {
    color: #1f3463;
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
}

.flex-row{
    display:flex;
    flex-direction: row;
    margin-bottom: 10rpx;
}

.mark{
    margin-right: 30rpx;
    white-space:nowrap;
    color: #999999;
}

.hr{
    margin-top:45rpx;
    height:1px;
    width: 100%;
    background-color: #d9d9d9;
}

.synopsis{
    margin-left:40rpx;
    display:flex;
    flex-direction: column;
    margin-top: 50rpx;
}

.synopsis-font{
    color:#999;
}

.summary-content{
    margin-top: 20rpx;
    margin-right: 40rpx;
    line-height:40rpx;
    letter-spacing: 1px;
}

.cast{
    margin-left:40rpx;
    display:flex;
    flex-direction: column;
    margin-top:50rpx;
}

.cast-font{
    color: #999;
    margin-bottom: 40rpx;
}

.cast-container{
    display:inline-flex;
    flex-direction: column;
    margin-bottom: 50rpx;
    margin-right: 40rpx;
    width: 170rpx;
    text-align:center;
    white-space: normal;
}

.cast-imgs{
    white-space: nowrap;
}

.cast-img{
    width: 170rpx;
    height: 210rpx;
}
.cast-name{
    margin: 10rpx auto 0;
}

结果