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

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="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-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;
width: 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;
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;
}

结果