Vue 详情模块 2

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情基础内容，日期及电影描述

目录

详情

详情基础内容

初始化与赋值

渲染基础内容

详情样式

日期处理

安装moment

定义过滤器

使用过滤器

电影描述

总结

---

详情

详情基础内容

初始化与赋值

初始化时设置变量值为null；在请求获取数据后进行赋值。

示例如下：

import http from '@/util/http'

export default {
  data () {
    return {
      filmInfo: null
    }
  },
  created () {
    // 当前匹配的路由
    console.log('created', this.$route.params.id)
    // axios 利用 id发请求到详情接口，获取详情数据，布局页面
    http({
      url: `/api/gateway?filmId=${this.$route.params.id}&k=6027054`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17479694011920413022027777","bc":"130100"}'
      }
    }).then(res => {
      // console.log(res.data)
      this.filmInfo = res.data.data.film
    })
  }
}

渲染基础内容

在渲染基础内容时增加判断；动态绑定绑定style。

示例如下：

<template>
    <div v-if="filmInfo">
      <div :style="{
        backgroundImage: 'url('+filmInfo.poster+')'
      }" class="poster"></div>
      <div>{{filmInfo.name}}</div>
      <div>
        <div class="detail-text">{{filmInfo.category}}</div>
        <div class="detail-text">{{filmInfo.premiereAt}}</div>
        <div class="detail-text">{{filmInfo.nation}}
          {{filmInfo.runtime}}分钟
        </div>
      </div>
    </div>
</template>

详情样式

然后设置样式

<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 11.666667rem;
  background-position: center;
  background-size: cover;
}
.content {
  padding: .8333333rem;
  .detail-text {
    color: #797d82;
    font-size:13px;
    margin-top: .222222rem;
  }
}
</style>

 

日期处理

安装moment

在Vue项目中，‌使用Moment.js处理日期和时间。

命令如下：

npm install moment

定义过滤器

首先定义时间戳转化为日期的过滤器。

示例如下：

import moment from 'moment'
import Vue from 'vue'
moment.locale('zhe-cn') // 设置成中文
Vue.filter('dataFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})

使用过滤器

使用过滤器处理，时间戳格式化为日期。

示例如下：

<div class="detail-text">{{filmInfo.premiereAt | dataFilter}}</div>

电影描述

电影描述显示两行，可以使用设置盒子高度/行高，溢出隐藏。

示例如下：

<div class="detail-text">{{filmInfo.nation}}
          {{filmInfo.runtime}}分钟
</div>
<div class="detail-text" style="height:30px;line-height:15px;overflow:hidden">
    {{filmInfo.synopsis}}
</div>

如果有显示全简介的需要 就可以把overflow拿出来 设置一个类。

<div class="detail-text" :class="isHide?'hidden':''">
   {{filmInfo.synopsis}}
</div>

增加向下小箭头，详情全部显示与隐藏

export default {
  data () {
    return {
      filmInfo: null,
      isHide: false
    }
  }

去掉简介中设置的高度，改为到hidden中设置高度。

.hidden {
  overflow: hidden;
  height:30px;
}

小箭头切换 向上和向下

<div style="text-align:center" @click="isHide=!isHide">
   <i class="icon iconfont">{{isHide?'&#xe8e3;':'&#xe8ff;'}}</i>
</div>

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情基础内容，日期及电影描述