dev/dcp-app-gate/pages/country/enterprise/enterpriseList.vue

<template>
	<view>
		<!-- <u-index-list :scrollTop="scrollTop">
				<view v-for="(item, index) in indexList" :key="index">
						
						
				</view>
		 </u-index-list> -->
		<!-- :options="options1" -->
		<!-- @change="dropdownChange" -->
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('EnterpriseShow')" :background="background">
		</u-navbar>
		<u-dropdown class="u-dropdown" style="background-color: #fff;width: 100%;">
			<u-dropdown-item v-model="value1" :title="i18n('Comprehensive')" :options="options1"
				@change="dropdownChange"></u-dropdown-item>
			<u-dropdown-item v-model="value2" :title="i18n('Region')" :options="Dict1" @change="dropdownChange">
			</u-dropdown-item>
			<u-dropdown-item v-model="value3" :title="i18n('UnitType')" :options="Dict2" @change="dropdownChange">
			</u-dropdown-item>
		</u-dropdown>
		<view @click="toView(item.baseEntityId)"
			style="margin: 20upx 20upx;height: 200upx;border-radius: 30upx;overflow: hidden;background-color: #fff;"
			v-for="(item,index) in infos">
			<img :src="websiteUrl+ item.photo" alt="" v-if="item.photo" style="width: 200upx;height: 200upx;">
			<img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else style="width: 200upx;height: 200upx;">
			<view class="recommend-bottom">
				<text class="recommend-bottom-name">
					{{item.unitName}}
				</text>
				<text class="tabs" v-if="item.recommendFlag=='y'">
					{{i18n('recommend2')}}
				</text>
				<view>
					<text>
						{{$i18n.locale === 'zh'?item.unitCountry:item.unitCountryDict.charAt(0).toUpperCase() + item.unitCountryDict.slice(1)}}
					</text>
					<!-- <text v-show="item.unitRegion"> - </text>
					<text>{{item.unitRegion}}</text> -->
				</view>
				<text v-for="(item,index) in item.labelList">
					<u-tag :text="item" mode="light" style="margin:10px 15upx 15upx 0upx;" v-if="index<3" />
				</text>
				<!-- <view>{{item.labelList}}</view> -->
				<!-- <view>发布日期：{{handlePublishTimeDesc(toDate,item.createDate,$i18n.locale)}} {{$t('common.release')}}</view> -->
			</view>
			<u-toast ref="uToast" />
		</view>
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
	</view>
</template>

<script>
	let timer = null
	export default {
		data() {
			return {
				options1: [{
						label: this.$t('common.LatestRelease'),
						value: 0,
					},
					{
						label: this.$t('common.MostAttention'),
						value: 1,
					}
				],
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				// scrollTop: 0,
				// indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
				// 		"V", "W", "X", "Y", "Z"],
				value1: 0,
				status: 'loadmore',
				scrollTop: 0,
				value2: null,
				value3: null,
				page: 1,
				Dict1: [],
				Dict2: [],
				infos: [],
				labels: [],
				pageNo: 1,
			}
		},
		onReady() {
			this.dict1();
			this.dict2();
			this.getList();
		},
		computed: {
			unitLabelList(label) {
				return label.toString().split(",");
			}
		},
		onLoad(options) {
			this.value1 = options.type
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 加载更多
		onReachBottom() {
			if (this.page * 10 >= this.total2) return;
			this.status = 'loading';
			this.page = this.page + 1;

			if ((this.page - 1) * 10 >= this.total2) {
				this.status = 'nomore';
			} else {
				this.status = 'loading';
				this.getList(this.page);
			}


		},
		methods: {
			dropdownChange() {
				this.getList();
			},
			async dict1() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'en' ? "CONTINENT_CODE_DICT_EN" : "CONTINENT_CODE_DICT"
					}
				});

				if (res.data) {
					let both = {
						label: this.$t('common.All'),
						value: null
					};
					this.Dict1 = res.data[0];
					this.Dict1.unshift(both);
				}
			},
			async dict2() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'en' ? "INDUSTRY_DICTS_EN" : "INDUSTRY_DICTS"
					}
				});

				if (res.data) {
					res.data[0].forEach(item => {
						if (item.value == '06' || item.value == '09' || item.value == '11' || item.value ==
							'01' || item.value == '02' ||
							item.value == '04' || item.value == '05') {
							this.Dict2.push(item);
						}
					});
					let both = {
						label: this.$t('common.All'),
						value: null
					};
					this.Dict2.unshift(both);
				}
			},
			async getList() {
				const res = await this.$myRequest({
					url: '/project/baseUnitViews/',
					data: {
						pageSize: 10,
						pageNo: this.page,
						descStatus: this.value1,
						areDict: this.value2,
						industryDict: this.value3,
						language: this.$i18n.locale.toUpperCase()
					}
				});

				if (res.data) {
					res.data.baseUnitViews.forEach(item => {

						if (item.unitLabel) {
							item["labelList"] = item.unitLabel.split(",");
						} else {
							item["labelList"] = []
						}


					})
					this.total2 = res.data.page.totalCount;
					if (this.page == 1) {
						this.infos = res.data.baseUnitViews;
					} else {
						this.infos = this.infos.concat(res.data.baseUnitViews)
					}
					if (this.infos.length >= this.total2 - 0) {
						this.status = 'nomore';
					}


				}
			},
			toView(baseEntityId) {
				this.$mRouter.push({
					route: `/pages/country/enterprise/enterpriseDetail?baseEntityId=${baseEntityId}`
				});
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-bottom {
		float: right;
		height: 200upx;
		width: 488upx;
		position: relative;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24upx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.tabs {
		padding: 5upx 10upx;
		border-radius: 10upx;
		color: #fff;
		position: absolute;
		top: 8upx;
		right: 10upx;
		font-size: 24upx;
		margin-top: 10upx;
		background-color: #fab019;

	}

	.tabs2 {
		padding: 10upx 20upx;
		border: #2B85E4 1px solid;
		border-radius: 10upx;
		color: #2B85E4;
		margin-top: 10upx;
		font-size: 1px;
		margin-left: 1upx;


	}

	.recommend-bottom-name {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		// overflow: hidden;
		// -webkit-line-clamp: 1;
		// text-overflow: ellipsis;
		display: -webkit-box;
		width: 330upx;
		// -webkit-box-orient: vertical;
		color: #0B0B11;
		line-height: 45upx;
		margin-top: 30upx;
		vertical-align: top;
	}

	.recommend-bottom-name span {}
</style>