veterans_H5/h5_web/pages/cooperativeEnterprise/cooperativeEnterprise.vue

<!-- 企业列表 -->
<template>
	<view class="enterprose-list">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
		<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"
					@search="searchKeyword"
					@clear="searchKeyword"
				/>
			</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.id})"
				>
					<view class="enterprose-list-content-item-left">
						<view class="image">
							<u-image :src="item.logoUrl" width="112" height="112" border-radius="10">
								<view slot="error">
									<u-image src="../../static/img/default-company.png" width="112" height="112" border-radius="10"/>
								</view>
							</u-image>
						</view>
						<view class="info">
							<view>{{ item.companyName }}</view>
							<view class="company">
								<!-- <view class="icon"><u-icon name="star-fill" color="#EF651F"/>{{ item.star }}</view> -->
								<view>{{ getCompanyScopeName(item.scope) }} · {{ getCompanyTradeName(item.trade) }}</view>
							</view>
						</view>
					</view>
					<view class="enterprose-list-content-item-right">
						<u-icon name="arrow-right" color="#d2d3d5"/>
					</view>
				</view>
			</view>
		</z-paging>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索关键词
				keyword: '',
				// 选中类型
				tradeType: '',
				// tab
				tabList: [
					{
						value: '',
						name: '全部'
					}
				],
				// tab选中项
				tabCur: 0,
				// 公司列表
				companyList: [],
				// 企业规模
				companyScopeList: [],
				// 企业类型
				companyTradeList: []
			}
		},
		onShow() {
			this.getDict('company_scope');
			this.getDict('company_trade');
		},
		methods: {
			/**
			 * 获取企业列表
			 * @param { Number } pageNum
			 * @param { Number } pageSize
			 * @param { String } companyName
			 * @param { String } trade
			 */
			getList(pageNum, pageSize, companyName, trade) {
				this.$u.api.company.getCompanyList({
					pageNum,
					pageSize,
					companyName,
					trade
				}).then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.data.rows)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
						this.$refs.paging.complete([])
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
					this.$refs.paging.complete([])
				})
			},
			/**
			 * 获取字典
			 * company_scope  公司规模
			 * company_trade  公司类型
			 */
			getDict(key) {
				this.$u.api.getDictdataUrl({
					key: key
				}).then(res => {
					if (res.code === 200) {
						if (key === 'company_scope') {
							this.companyScopeList = res.data
						} else if (key === 'company_trade') {
							this.companyTradeList = res.data;
							this.tabList = res.data.map(item => {
								return {
									...item,
									name: item.label,
									value: item.text
								}
							})
							this.tabList.unshift({
								value: '',
								name: '全部'
							})
						}
					}
				})
			},
			/**
			 * @param {Object} val
			 */
			getCompanyScopeName(val) {
				let name;
				this.companyScopeList.forEach(item => {
					if (Number(item.text) === Number(val)) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * @param {Object} val
			 */
			getCompanyTradeName(val) {
				let name;
				this.companyTradeList.forEach(item => {
					if (Number(item.text) === Number(val)) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * @param { String } value
			 */
			searchKeyword(value) {
				this.$refs.paging.reload(true)
				this.getList(1, 10, this.keyword, this.tradeType)
			},
			/**
			 * tab切换
			 */
			tabChange(val) {
				this.tabCur = val
				this.tabList.forEach((item, index) => {
					if (index === val) {
						this.tradeType = item.value
					}
				})
				this.$refs.paging.reload(true)
				this.getList(1, 10, this.keyword, this.tradeType)
			},
			/**
			 * @param {String} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url: url,
					params: params
				})
			},
			/**
			 * 列表加载触发
			 */
			queryList(pageNo, pageSize) {
				this.getList(pageNo, pageSize, this.keyword, this.tradeType)
			}
		}
	}
</script>

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