Vue2.5从零开发猫眼①——前言
Vue2.5从零开发猫眼②——项目开始前准备
Vue2.5从零开发猫眼③——启动页开发
Vue2.5从零开发猫眼④——Home页开发
Vue2.5从零开发猫眼⑤——影院页开发
Vue2.5从零开发猫眼⑥——个人中心组件开发
Vue2.5从零开发猫眼⑦——City组件开发
Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线
因为我们上一章已经封装了公共头部组件和底部主见，这里直接拿来使用
在router\index.js 增加影院组件的路由
import Cinema from '@/pages/cinema/Cinema'
{
path: '/cinema',
name: 'cinema',
component: Cinema
}
在cinema组件引入NavMenu组件
import NavMenu from './components/nav-menu/NavMenu'
components: {
CommonHeader,
CommonFooter,
NavMenu
},这里我们编写个loading组件，在ajax没有返回信息的时候使用loading组件。
在src\components\loading 创建loading组件
在cinema组件引入Loading组件
import NavMenu from './components/nav-menu/NavMenu'
components: {
CommonHeader,
CommonFooter,
NavMenu
},在static\mock目录创建cinema.json
{
"code": 1,
"cinemas": [
{
"id": 25654,
"mark": 0,
"nm": "奥斯卡影城又一城店",
"sellPrice": "29",
"addr": "中原区高新区科学大道89号升龙又一城广场3楼",
"distance": "2.9km",
"tag": {
"allowRefund": 0,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 1,
"hallTypeVOList": [ ],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "开卡特惠，首单2张立减3元"
}
},
{
"id": 25984,
"mark": 0,
"nm": "万达影城(郑州公园茂店)",
"sellPrice": "29.5",
"addr": "中原区雪松路与翠竹街交叉口潮流茂4楼万达影城",
"distance": "3.9km",
"tag": {
"allowRefund": 0,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 0,
"hallTypeVOList": [ ],
"sell": 1,
"snack": 0
},
"promotion": { }
},
{
"id": 16560,
"mark": 0,
"nm": "CGV影城(高新IMAX店)",
"sellPrice": "34",
"addr": "中原区高新区科学大道与瑞达路交叉口正弘生活广场4层CGV影城",
"distance": "4.8km",
"tag": {
"allowRefund": 0,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 0,
"hallType": [
"IMAX厅"
],
"hallTypeVOList": [
{
"name": "IMAX厅",
"url": ""
}
],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "折扣卡限时¥20促销开卡"
}
},
{
"id": 25727,
"mark": 0,
"nm": "中影星美国际影城(高新睿达广场店)",
"sellPrice": "19.9",
"addr": "中原区郑州高新区瑞达路与合欢街交叉口睿达广场3层",
"distance": "5.3km",
"tag": {
"allowRefund": 1,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 1,
"hallTypeVOList": [ ],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "开卡特惠，首单2张立减5元"
}
},
{
"id": 8925,
"mark": 0,
"nm": "奥斯卡高新影城(科学大道店)",
"sellPrice": "29",
"addr": "中原区科学大道53号中原广告产业园4楼",
"distance": "5.7km",
"tag": {
"allowRefund": 0,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 1,
"hallTypeVOList": [ ],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "开卡特惠，首单2张立减3元"
}
},
{
"id": 24132,
"mark": 0,
"nm": "悦影绘影城(华强广场店)",
"sellPrice": "24",
"addr": "中原区电厂路华强广场4楼",
"distance": "8.6km",
"tag": {
"allowRefund": 1,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 1,
"hallType": [
"杜比全景声厅"
],
"hallTypeVOList": [
{
"name": "杜比全景声厅",
"url": ""
}
],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "开卡特惠，首单2张立减5元"
}
},
{
"id": 24864,
"mark": 0,
"nm": "横店星光影城",
"sellPrice": "38",
"addr": "荥阳市国泰路与惠民路交叉口东南侧正上豪布斯卡五楼",
"distance": "8.7km",
"tag": {
"allowRefund": 1,
"buyout": 0,
"cityCardTag": 0,
"deal": 0,
"endorse": 1,
"hallType": [
"杜比全景声厅"
],
"hallTypeVOList": [
{
"name": "杜比全景声厅",
"url": ""
}
],
"sell": 1,
"snack": 1,
"vipTag": "折扣卡"
},
"promotion": {
"cardPromotionTag": "限时¥27.9促销开卡，首单更优惠,开卡即赠价值¥48元礼包"
}
}
]
}在src\api目录创建cinema.js
import axios from 'axios'
export function getCinemaList() {
return axios.get('/api/cinema.json', {}).then((res) => {
return Promise.resolve(res.data)
})
}在nav-menu 后添加内容组件html结构
{{ cinema.nm }}
{{ cinema.sellPrice }}元起
{{ cinema.addr }}
{{ cinema.distance }}
改签
小吃
开卡特惠，首单2张立减3元
@import '~stylus/variable.styl'
.loading
margin-top:12px;
.content
position: fixed
width: 100%
top: 96px
bottom: 56px
.wrap_content
overflow: hidden
height: 100%
.cinema
padding: 13px 15px 13px 0;
margin-left: 15px;
background-color: #fff;
position: relative;
overflow: hidden;
.title
height: 23px;
line-height: 23px;
font-size: 16px;
color: #000;
.price-block
padding-top: 9px;
padding-left: 3px;
color: $bgColor
.price
font-size: 18px;
.q
margin-left: 3px;
.location
margin-top: 6px;
font-size: 13px;
color: #666;
.distance
margin-left: 5px;
.label-block
height: 17px;
line-height: 17px;
margin-top: 6px;
margin-bottom: 4px;
overflow: hidden;
font-size: 0;
flex-shrink: 0;
.label
position: relative;
display: inline-block;
padding: 0 3px;
height: 15px;
line-height: 15px;
border-radius: 2px;
font-size: 12px;
margin-right:6px;
&.endorse
color: #589daf;
border: 1px solid #589daf;
&.snack
color: #f90;
border: 1px solid #f90;
.discount-block
color: #999;
margin-bottom: 4px;
.discount-label-icon
padding: 0 2px;
height: 14px;
line-height: 14px;
border-radius: 2px;
font-size: 12px;
margin-right:6px;
display: inline-block;
color: $bgColor;
border: 1px solid $bgColor;
.discount-label-text
margin-left: 0;
font-size: 11px;至此，cinama组件已经完成