talent_map/pc/pages/index.vue

<template>
	<div class="index flex-1 flex col-top">
		<category @chain="getChainList" class="flex-none" />
		<div class="flex-1 " style="overflow: auto;">
			<el-tabs v-model="chainIndex" :stretch="false" @tab-click="changeChain">
				<el-tab-pane :label="item.title" v-for="(item, index) in chainList" :key="index">
				</el-tab-pane>
			</el-tabs>
			<div v-if="talentsList.length > 0">
				<talents-list :list="talentsList" />
				<div class="pagination flex row-center" style="padding-bottom: 38px" v-if="count">
					<el-pagination background hide-on-single-page layout="prev, pager, next" :page-size="9"
						:total="count" prev-text="上一页" next-text="下一页" @current-change="changePage">
					</el-pagination>
				</div>
			</div>
			<null-data v-else :img="require('@/static/images/goods_null.png')" text="暂无数据~"></null-data>
		</div>
		
	</div>
</template>

<script>
	// import HomeSeckill from '../components/home-seckill.vue'
	import Category from '~/components/category'
	import TalentsList from '~/components/talents-list'
	import Cookies from 'js-cookie'
	export default {
		head() {
			return {
				title: this.$store.getters.headTitle,
				link: [{
					rel: 'icon',
					type: 'image/x-icon',
					href: this.$store.getters.favicon,
				}, ],
			}
		},
		layout: 'index',
		components: {
			Category,
			TalentsList,
		},
		async asyncData({
			$get
		}) {

		},
		data() {
			return {
				chainList: [],
				cateTwoId: 0,
				chainIndex: '0',
				chain: '',
				talentsList: [],
				page: 1,
			}
		},
		watch: {
		},
		created() {
		},
		mounted() {
		},
		updated() {
		},
		methods: {
			getChainList(list) {
				this.chainList = list
				this.cateTwoId = list[0].pid
				this.chainIndex = '0'
				this.setChain()
			},
			changeChain(tab) {
				this.chainIndex = tab.index
				this.setChain()
			},
			setChain() {
				this.chain = this.chainList[this.chainIndex].title
				this.page = 1
				this.getTalents()
			},
			changePage(current) {
				this.page = current
				this.getTalents()
			},
			async getTalents() {
				const params = {
					page_size: 9,
					page_no: this.page,
					cid: this.cateTwoId,
					chain: this.chain
				}
				const {
					code,
					data,
					_meta
				} = await this.$get('article', {
					params,
				})
				if (code == 1) {
					this.talentsList = data
					this.count = _meta.totalCount
				}
			},
		},
	}
</script>

<style lang="scss">
	.index {
		:deep(.el-tabs__item:last-child) {
			padding: 0 20px;
		}
	}
</style>