zoukankan      html  css  js  c++  java
  • 微信小程序实战–集阅读与电影于一体的小程序项目(八)

    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;
    }
    

    结果

  • 相关阅读:
    Vue+element tree使用,当弹窗关闭时,this.$refs.tree.setCheckedKeys([])不能清空选中
    npm ERR! A complete log of this run can be found in
    Vue面试题之vue实现MVVM数据绑定
    渐变色的ie兼容
    安徽地图
    数组去重的四种方法
    EF Code First创建数据库
    Code First Migrations更新数据库结构(数据迁移)
    Bootstrap 样式大全
    C#程序中:如何向记事本中写入内容和导出内容
  • 原文地址:https://www.cnblogs.com/derek1184405959/p/9502317.html
Copyright © 2011-2022 走看看