uniapp实现仿猫眼购票选座

前言

#本人学生一枚，最近在写一个uniapp的结课项目，是类似于猫眼的一个电影购票小程序。随手记录一下自己的学习生活。

        在做选座的时候有点小懒，正好在插件市场看到了大佬分享的《电影在线选座 - DCloud 插件市场》就寻思借用一下大佬的吧，本文章手把手教学，即适用于新手小白跟着练习。有错误的地方麻烦大佬批评指正。

配置安装插件

        1.首先进入插件市场将所需要的插件下载并到自己本地的项目中

        

           点击绿色的可以直接导入，有时候因为网络问题，不是那么好下载。如果没直接下载并导入成功，可以点击那个蓝色的将整个示例项目拉取下来。然后在Hbuilderx中，大家可以先运行这个项目看看样子。

        具体的使用就不给大家详细介绍了，大家可以看看大佬的文章，写的很不错。因为我是直接下载的示例项目，所以就以这种方式记录了，如果直接导入的插件可以忽略这一步。

实现流程

        1.将示例项目中的静态图片文件，uni_mdules中的插件，同步迁移到自己的项目中。

        
                 首先在自己想要实现业务的页面中引入组件

<template>
	<view class="page">
		<anil-seat 
			ref="anilSeatRef"
		  :title="movielist.name" 
		  info="2021年01月22日 国语 奇幻 喜剧 儿童"
		  :room-name="roomInfo.name">
		</anil-seat>
	</view>
</template>

import anilSeat from '@/uni_modules/anil-seat/components/anil-seat/anil-seat.vue'
export default {
    components: {anilSeat},
        onLoad () {
            // 座位图初始化 - seatData座位数据
            this.$refs['anilSeatRef'].initData(seatData)
        }
}

        这里调用了anliSeatRef中的initData函数 ，并对其传入了一个参数。因为是直接套用插件，除非对业务的需求有所变化，所以尽量避免修改插件中的源码。父组件中通过ref传入到子组件的参数有特定格式

// 电影座位格式
[{
    "YCoord": "3", // -Y坐标
    "XCoord": "11", // -X坐标
    "SeatCode": "4413141101#01#14", // 座位code
    "Status": 0, // 座位状态
    "RowNum": "1", // 排
    "ColumnNum": "14", // 列
  "Price": "23.6" // 当前座位票价
}]

        

        我们只需要将自己的数据打包成这个形式传入就好。如果通过API得到的数据格式与之匹配，可以跳过第二点。

        2.但是当通过API获取的数据不能和这个匹配的时候。

        我们只需要将网络请求到的数组去进行修改参数名，自定义一个数组去存入就好，这里使用的一个简单的for循环去遍历进行修改，最后将修改的数值对象添加到目标数组seatArray中

    data() {
			return {
		 	// 目标数组
				seatArray: [],
			};
		  },		
    onLoad(option) {
			console.log(option)
			// 查询座位信息列表API
			getSeat().then(
				res => {
					console.log(res)
					if (res.code == 200) {
						const arr = res.rows
						for (let i = 0; i < arr.length; i++) {
							const demo = arr[i]
							this.seatArray.push({
								YCoord: demo.row,
								XCoord: demo.col,
								SeatCode: demo.id,
								Status: demo.status,
								RowNum: demo.row,
								ColumnNum: demo.col,
								Price: option.price
							},)
						}
						console.log(this.seatArray)
						this.$refs['anilSeatRef'].initData(this.seatArray)
					}
				}
			).catch()

		},

        3.将数据支持一切准备好之后

        回到自己刚刚导入的anli-seat.vue文件中。将所有图片路径改变成自己图片存放的路径！下面只举一个例子！

        并如下图格式，给initData()函数添加一个参数用于接收咱刚刚传入的数据集，并将参数赋值给arr进行业务操作。最后将creatd()中调用的initData()方法注释掉就好了。

 最终结果

最后这就是得到的效果啦