vue五十九:电影院售票项目案例之详情页面
实现点击电影信息跳转到详情页面
获取传递给detail组件的参数,去请求接口获取数据
渲染数据
图片css和渲染图片
<template>
<div v-if="filminfo">
<img :src="filminfo.poster" class="poster">
<h2>{{ filminfo.name }}</h2>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
filminfo: []
}
},
mounted() {
// console.log('获取到的参数: ', this.$route.params.myId)
axios({
url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.myId}&k=1820854`,
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1597564345482951892566017"}',
'X-Host': 'mall.film-ticket.film.info'
}
}).then(res => {
console.log(res.data)
this.filminfo = res.data.data.film
})
},
}
</script>
<style lang="scss" scoped>
.poster {
width: 100%;
height: 50%;
}
</style>
讨论群:249728408