veterans_H5/h5_web/pages/cooperativeEnterprise/cooperativeEnterprise.vue

<!-- 企业列表 -->
<template>
	<view class="enterprose-list">
		<z-paging
			ref="paging"
			v-model="companyList"
			@query="queryList"
		>
			<!-- 搜索 -->
			<view class="enterprose-list-search" slot="top">
				<u-search
					class="enterprose-list-search-input"
					placeholder="请输入关键词"
					v-model="keyword"
					shape="square"
					input-align="center"
					:show-action="false"
					bg-color="#ffffff"
					height="70"
				/>
			</view>
			
			<!-- tab -->
			<view class="enterprose-list-tab" slot="top">
				<u-tabs
					:list="tabList"
					:is-scroll="true"
					:current="tabCur"
					height="70"
					font-size="28"
					inactive-color="#5F5F5F"
					@change="tabChange"
				/>
			</view>
			
			<!-- 列表 -->
			<view class="enterprose-list-content">
				<view
					class="enterprose-list-content-item"
					v-for="(item, index) in companyList"
					:key="index"
					@click="jumpPage('/pages/businessDetails/businessDetails', { id: item.company})"
				>
					<view class="enterprose-list-content-item-left">
						<view class="image">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="info">
							<view>{{ item.company }}</view>
							<view class="company">
								<view class="icon"><u-icon name="star-fill" color="#EF651F"/>{{ item.star }}</view>
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
					<view class="enterprose-list-content-item-right">
						<u-icon name="arrow-right"/>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索关键词
				keyword: '',
				// tab
				tabList: [
					{
						name: '全部'
					},
					{
						name: '金融类'
					},
					{
						name: '酒店类'
					},
					{
						name: 'IT类'
					},
					{
						name: '餐饮类'
					},
					{
						name: '保险类'
					},
					{
						name: '其他'
					}
				],
				// tab选中项
				tabCur: 0,
				// 公司列表
				companyList: []
			}
		},
		methods: {
			/**
			 * tab切换
			 */
			tabChange(val) {
				this.tabCur = val
			},
			/**
			 * @param {String} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url: url,
					params: params
				})
			},
			/**
			 * 
			 */
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(
				[
					{
						img: require('@/static/img/avatar.jpg'),
						position: '保安员',
						company: '保利贵州酒店管理有限公司',
						content: '20-99人 · 餐饮',
						area: '4.0 ~ 8.0k',
						date: '2020-12.25',
						star: 4.2
					},
					{
						img: require('@/static/img/avatar.jpg'),
						position: '保安员',
						company: '保利贵州酒店管理有限公司',
						content: '20-99人 · 餐饮',
						area: '4.0 ~ 8.0k',
						date: '2020-12.25',
						star: 4.2
					},
					{
						img: require('@/static/img/avatar.jpg'),
						position: '保安员',
						company: '保利贵州酒店管理有限公司',
						content: '20-99人 · 餐饮',
						area: '4.0 ~ 8.0k',
						date: '2020-12.25',
						star: 4.2
					},
					{
						img: require('@/static/img/avatar.jpg'),
						position: '保安员',
						company: '保利贵州酒店管理有限公司',
						content: '20-99人 · 餐饮',
						area: '4.0 ~ 8.0k',
						date: '2020-12.25',
						star: 4.2
					}
				])
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './cooperativeEnterprise.scss';
</style>