影视列表

介绍

影视列表和大多列表页一样，使用 container-layout 组件，分为上中下三部分，上部分为搜索表单区域，中间为内容区域，下部分为分页组件区域。

搜索表单区域

<!-- 自定义搜索条件表单 -->
<template v-slot:header>
	<!-- 用户点击搜索时，需要重置页码与list值 -->
	<m-button type="search" @click="getData(true)" :loading="loading" />
</template>

内容区域

内容区域可以写 v-slot:default，也可以不写这个默认模板。如果写了，则引入的组件必须放于默认模板中，否则会无法加载。

<template v-slot:default>
<!-- 内容与三方组件 -->
</template>

分页区域

<template v-slot:footer>
	<!-- 分页组件如下使用即可 -->
	<m-pagination :pagination.sync="pagination" @on-change="getData()" />
</template>

数据获取

// 引入查询影视列表接口
import { getMovies } from "@/api/movie";

export default {
	data() {
		return {
			// 设置默认值
			...this.$defaults(),
			// form 数据会与 this.$defaults 中的 form 对象合并
			form: {
				keyword: "",
			},
		}
	},

	// 在 Layout 中已将本组件加入 `keep-alive`，
	// 所以此处需要早 `activated` 生命周期中调用查询列表接口
	activated() {
		// 统一查询列表方法
		this.getData();
	},

	methods: {
		getData(isReset) {
			// 具体使用方法说明查看 `global.js`
			this.$getData(getMovies, this, isReset);
		},
	}
}