31.电影详情页面
movie-template.wxml
<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:{} }, onLoad:function(options){ var movieId = options.id; var url = app.globalData.g_baseUrl + "/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], title: data.title, originalTitle: data.original_title, 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.wxml
<import src="../stars/stars-template.wxml" /><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-title">{{movie.title}}</text> <text class="sub-title">{{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-title"> <text>{{movie.originalTitle}}</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="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{ 100%; height: 320rpx;}.head-img-hover{ 100%; height: 320rpx; position:absolute; top:0; left:0; display:flex; flex-direction: column;}.main-title{ font-size: 19px; color:#fff; font-weight:bold; margin-top: 50rpx; margin-left: 40rpx; letter-spacing: 2px;}.sub-title{ 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; 175rpx; position: absolute; top:160rpx; right: 30rpx;}.summary{ margin-left:40rpx; margin-top: 40rpx; color: #777777;}.original-title{ 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; 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; 170rpx; text-align:center; white-space: normal;}.cast-imgs{ white-space: nowrap;}.cast-img{ 170rpx; height: 210rpx;}.cast-name{ margin: 10rpx auto 0;}结果
