文章描述了实现电影院列表页面的各项功能，包括地图上显示电影院位置、修改影院信息、跳转到放映厅列表、新增放映厅以及在放映厅列表中添加排片计划的详细步骤。涉及到地图操作、页面路由配置、表单验证和API交互等技术。
目录
1.实现电影院列表页（day07已做）
2.点击列表中第一个操作按钮时强调显示当前电影院的位置
3.点击列表中第三个按钮时，修改影院信息
4.点击第二个按钮，跳转到放映厅列表
5.在放映厅列表页中点击新增放映厅，实现相应业务
6.实现放映厅列表的显示
7.实现点击+，添加排片计划
2.点击列表中第一个操作按钮时强调显示当前电影院的位置
- 点击影院列表项的第一个操作按钮时，获取选中项的经纬度。
- 操作地图，将该经纬度显示在地图中心。
创建按钮 绑定点击事件 获取经纬度
<el-button
@click="moveToPosition(
scope.row.longitude, scope.row.latitude)"
size="small" type="info" icon="el-icon-location-outline" circle></el-button>
<el-button moveToPosition方法 ，将地图移动到某一个定位点位置
methods: {
/** 将地图移动到某一个定位点位置 */
moveToPosition(lng, lat){
// console.log({lng, lat})
// 将地图的中心点移动到该位置
this.map.setZoomAndCenter(15, [lng, lat], false, 1000)
},
3.点击列表中第三个按钮时，修改影院信息（方法类似增加电影，此处略）
4.点击第二个按钮，跳转到放映厅列表
**业务需求：**当点击第二个按钮，跳转到放映厅列表页面。提供新增放映厅、查看放映厅列表等功能。
实现步骤：
- 准备好放映厅列表页面：views/cinema/CinemaRoomList.vue。 搭建基本结构。
<template> <div> <!-- 放映厅列表页 --> <el-button type="primary" plain>新增放映厅</el-button> <el-divider content-position="left">放映厅列表</el-divider> <!-- 放映厅表格数据 --> </div> </template> - 配置路由：访问：/home/cinema-room-list/:cinemaId时，看到该放映厅页面。
-
},{ path: 'cinema-room-list/:id', name: '/home/cinema-room-list', component: () => import('../views/cinema/CinemaRoomList.vue'), meta: { breadcrumbs: ['电影院管理', '电影院列表', '放映厅列表'] } - 在放映厅列表页中点击新增放映厅，实现相应业务。
5.在放映厅列表页中点击新增放映厅，实现相应业务
**业务需求：**当点击新增放映厅按钮后，弹出自定义对话框，收集放映厅信息，点击提交，执行新增业务。
实现思路：
-
点击按钮后弹出自定义对话框（表单）。
在mounted中，加载放映厅类型列表，呈现下拉列表选项。
加载所有放映厅的类型queryAllTypes(), 将数据放在types: []中， 在放映厅类型中做type遍历，并将label标签 value绑定类型名称，在下拉框中进行展示
-
import httpApi from '@/http'; export default { data() { return { types: [], // 绑定所有的放映厅类型 dialogFormVisible: false, form: { room_name: '', room_type: '', movie_cinema_id: this.$route.params.id, } } }, methods: { /** 加载所有放映厅的类型 */ listTypes() { httpApi.cinemaRoomApi.queryAllTypes().then(res=>{ console.log(res) this.types = res.data.data }) } }, mounted () { this.listTypes() }, };<el-form-item label="放映厅类型"> <el-select v-model="form.room_type" placeholder="请选择放映厅类型"> <el-option v-for="item in types" :key="item.id" :label="item.type_name" :value="item.type_name"> </el-option> </el-select> </el-form-item>/** 加载所有放映厅的类型 */ listTypes() { httpApi.cinemaRoomApi.queryAllTypes().then(res=>{ console.log(res) this.types = res.data.data }) } -
用户填写表单项，点击确定按钮，发送新增请求，执行业务。
-
添加成功后，关闭对话框，刷新列表即可。
router/index.js 首先添加路由
/**
* 添加放映厅接口
* @param {Object} params 详见接口文档
*/
add(params) {
return myaxios.post(BMDURL + "/cinema-room/add", params);
},
CinemaRoomList.vue 自定义新增放映厅对话框
<template>
<div>
<!-- 放映厅列表页 -->
<el-button type="primary" plain>新增放映厅</el-button>
<el-button
@click="dialogFormVisible = true"
type="primary" plain>新增放映厅</el-button>
<el-divider content-position="left">放映厅列表</el-divider>
<!-- 放映厅表格数据 -->
<!-- 自定义新增放映厅的对话框 -->
<el-dialog title="新增放映厅" :visible.sync="dialogFormVisible">
<el-form :model="form" label-width="110px">
<el-form-item label="放映厅名称">
<el-input v-model="form.room_name" autocomplete="off">
</el-input>
</el-form-item>
<el-form-item label="放映厅类型">
<el-select
v-model="form.room_type"
placeholder="请选择放映厅类型">
<el-option
v-for="item in types" :key="item.id"
:label="item.type_name"
:value="item.type_name">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>添加submit方法，进行表单提交，关闭对话框，刷新列表
submit(){
console.log(this.form)
this.$refs['form'].validate(valid=>{
if(valid){
console.log(this.form)
httpApi.cinemaRoomApi.add(this.form).then(res=>{
if(res.data.code == 200){ // 添加成功
this.$message({
message: '恭喜，添加成功',
type: 'success'
})
this.dialogFormVisible = false // 隐藏弹窗
}
})
}
})
},给确定绑定事件，点击确定就能提交增加放映厅
<el-button type="primary" @click="submit">确 定</el-button>实现效果：
6.实现放映厅列表的显示
业务需求： 列表页面组件挂载完毕后、新增放映厅成功后都需要显示列表数据。以表格的方式显示放映厅的名字、类型、座位数等。
实现思路：
- mounted与新增成功后都需要发送请求，加载（某个电影院的）放映厅列表。
- 获取结果后，显示在表格中即可。
1.实现放映厅列表的静态页面
router/index.js 首先添加路由
},{
path: 'cinema-room-list/:id',
name: '/home/cinema-room-list',
component: () => import('../views/cinema/CinemaRoomList.vue'),
meta: {
breadcrumbs: ['电影院管理', '电影院列表', '放映厅列表']
}CinemaRoomList.vue 增加一个静态页面页面 ，:data="rooms绑定room数据（放映厅数据）
<el-table :data="rooms">
<el-table-column label="放映厅名称" prop="room_name"></el-table-column>
<el-table-column label="放映厅类型" prop="room_type"></el-table-column>
<el-table-column label="放映厅座位数">
<template>
[暂未分配座位模板]
</template>
</el-table-column>
<el-table-column label="操作">
<template>
<el-button size="small" type="success" icon="el-icon-view" circle></el-button>
<el-button size="small" type="primary" icon="el-icon-plus" circle></el-button>
<el-button size="small" type="warning" icon="el-icon-s-grid" circle></el-button>
<el-button size="small" type="danger" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
</el-table>加载所有放映厅数据，绑定，增加方法
export default {
data() {
return {
rooms: [], // 绑定所有的放映厅数据
types: [], // 绑定所有的放映厅类型
dialogFormVisible: false,
form: {
@@ -78,6 +96,7 @@ export default {
type: 'success'
})
this.dialogFormVisible = false // 隐藏弹窗
this.listRooms()
}
})
}
@@ -90,11 +109,23 @@ export default {
console.log(res)
this.types = res.data.data
})
},
/** 加载所有放映厅 */
listRooms(){
let params = {cinema_id: this.form.movie_cinema_id}
httpApi.cinemaRoomApi.list(params).then(res=>{
console.log(res)
this.rooms = res.data.data
})
}
},
mounted () {
// 加载类型列表
this.listTypes()
// 加载放映厅列表
this.listRooms()
},
};实现效果：
7.实现点击+，添加排片计划
**业务需求：**选择某一个放映厅，点击后面的+按钮，可以跳转到添加计划页面。在页面中提供一个表单，可以为该放映厅添加排片计划。（什么时间、什么场次，播放什么电影...）
实现思路：
- 准备一个新的页面：
/views/cinema/ShowingonPlanAdd.vue。 - 配好路由：
/home/showingon-plan-add/:roomId时看到该页面。 - 跳转到新增放映厅页面时需要传参（传递放映厅ID），在页面中通过放映厅ID参数查询放映厅的基本信息，将查询结果显示在页面中。
- 整理每一个表单项，做好双向数据绑定，做好表单验证，实现新增排片计划功能。
（1）准备一个新的页面： /views/cinema/ShowingonPlanAdd.vue。
<template>
<div>
<!-- views/cinema/ShowingonPlanAdd.vue -->
为
<b style="color:#409EFF;">百慕大影城（双井店）</b>
的
<b style="color:#409EFF;">一号厅（4K厅）</b>
添加排片计划
<el-divider></el-divider>
<!-- 表单 -->
<el-form label-width="80px" style="width: 700px">
<el-form-item label="选择电影">
<el-select placeholder="请选择电影">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="放映日期">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker
placeholder="选择时间"
style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="票价">
<el-input></el-input>
</el-form-item>
<el-form-item label="立即发布">
<el-switch></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>（2）配好路由：/home/showingon-plan-add/:roomId 时看到该页面。
path: 'showingon-plan-add/:roomId',
path: 'showingon-plan-add',
path: 'showingon-plan-add/:roomId',
name: '/home/showingon-plan-add',
component: () => import('../views/cinema/ShowingonPlanAdd.vue'),
meta: {配置按钮
<el-table-column label="操作">
<template>
<template slot-scope="scope">
<el-button size="small" type="success" icon="el-icon-view" circle></el-button>
<el-button
@click="$router.push('/home/showingon-plan-add')"
@click="$router.push(
'/home/showingon-plan-add/'+scope.row.id)"
对面包屑导航进行动态绑定
<div>
<!-- views/cinema/ShowingonPlanAdd.vue -->
为
<b style="color:#409EFF;">百慕大影城（双井店）</b>
<b style="color:#409EFF;">
{{roomInfo.cinema_name}}
</b>
的
<b style="color:#409EFF;">一号厅（4K厅）</b>
<b style="color:#409EFF;">
{{roomInfo.cinema_room_name}}
（{{roomInfo.cinema_room_type}}）
</b>
（3）跳转到新增放映厅页面时需要传参（传递放映厅ID），在页面中通过放映厅ID参数查询放映厅的基本信息，将查询结果显示在页面中。
保存放映厅详细信息
import httpApi from '@/http';
export default {
data() {
return {
form: {
cinema_room_id: this.$route.params.roomId
},
roomInfo: {}, // 保存放映厅详情信息
}
},
mounted () {
let params = {id:this.form.cinema_room_id}
httpApi.cinemaRoomApi.queryById(params).then(res=>{
console.log('加载放映厅详情', res)
this.roomInfo = res.data.data
})
},
};（4）整理每一个表单项，做好双向数据绑定，做好表单验证，实现新增排片计划功能。
知识点：
远程搜索电影列表的方法
remoteMethod(query) { // 远程搜索电影列表的方法
if(query != ''){
this.loading = true
let params = {page:1, pagesize:20, name:query}
httpApi.movieApi.queryByNameLike(params).then(res=>{
console.log('模糊查询电影列表结果', res)
this.loading = false
this.movies = res.data.data.result
})
}
}
}, <el-form-item label="选择电影">
<el-select
style="width:100%;"
placeholder="请选择电影"
v-model="form.movie_id"
filterable
remote
reserve-keyword
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in movies" :key="item.id"
:label="item.title+` 【${item.star_actor}】`"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
完成新增排片
ref="selector"
<el-select
ref="selector"
style="width:100%;"
placeholder="请选择电影"
v-model="form.movie_id"
filterable
remote
reserve-keyword
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in movies" :key="item.id"
:label="item.title"
:value="item.id">
</el-option>
<!-- <el-option
v-for="item in movies" :key="item.id"
:label="item.title+` 【${item.star_actor}】`"
:value="item.id">
</el-option> -->
</el-select>完成subim 表单提交
let name = this.$refs['selector'].selectedLabel
<p>标签
submit(){
this.form.cinema_id = this.roomInfo.cinema_id
httpApi.showingonPlanApi.add(this.form).then(res=>{
if(res.data.code==200){ // 新增成功
let name = this.$refs['selector'].selectedLabel
this.$notify({
title: '成功',
dangerouslyUseHTMLString:true,
message:`<p>名称：《${name}》<p>
<p>播放日期：${this.form.showingon_date}
${this.form.showingon_time}<p>
<p>放映厅：${this.roomInfo.cinema_room_name}
${this.roomInfo.cinema_room_type}<p>
<p>票价:￥${this.form.price}<p>
`,
type:'success'
})
this.$router.push('/home/cinema-list')
}
})
},完成效果：
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
