talent_map/uniapp/components/search-list/search-list.vue

<template>
	<mescroll-uni ref="mescrollRef" :top="positionTop" left="" @init="mescrollInit" @down="downCallback"
		@up="upCallback" :down="downOption" :up="upOption" style="left: 100px;">
		<view class="content">
			<!-- 列表 -->
			<view class="talents-item m-t-16" v-for="(item, index) in talentsList" :key="index">
				<!-- 人才 -->
				<router-link :to="{ path: '/pages/talents/detail', query: { id: item.id }}">
					<view class="flex row-between">
						<view class="flex flex-1">
						    <text
						        style="width: 12rpx;height: 12rpx;background: #DD4250;border-radius: 50%; margin-right: 20rpx;"></text>
						    <view class="bold">{{ item.title }}</view>
						    <view class=""><u-tag :text="item.module" type="error" size="mini" shape="circleRight" />
						    </view>
						</view>
						<view class="flex-none p-l-10 p-r-20 primary" v-if="item.position">
						    {{ item.position }}
						</view>
					</view>
					<!-- 内容 -->
					<view style="font-size: 24rpx;">
						<view class="flex row-between m-t-16">
							<view class="line-2 flex-1" v-if="item.chain">产业链：{{ item.chain }}</view>
							<view class="flex" @tap.stop="makePhoneCall(item.tel)">
								<u-icon name="phone-fill" color="#DD4250" size="28"></u-icon>
								<view class="m-l-20">{{ phoneNumHide(item.tel) }}</view>
							</view>
						</view>
						<view class="m-t-16" v-if="item.company">单位：{{ item.company }}</view>
						<view class="m-t-16" v-if="item.module == 'base'">负责人：{{ item.principal }}</view>
						<view class="m-t-16" v-if="item.module == 'pedigreeCompany'">法人：{{ item.principal }}</view>
						<view class="m-t-16" v-if="item.module == 'firm'">秘书长：{{ item.principal }}</view>
						<view class="m-t-16 line-2">
							<text v-if="item.module == 'talent'">研究领域：</text>
							<text v-else-if="item.module == 'base'">基地特色：</text>
							<text v-else-if="item.module == 'university' || item.module == 'association'">研究方向：</text>
							<text v-else-if="item.module == 'fund'">投资产业领域：</text>
							<text v-else-if="item.module == 'pedigreeCompany'">主要产品：</text>
							<text v-else-if="item.module == 'pedigree'">个人简介：</text>
							<text v-else>简介：</text>
							<text>{{ item.description }}</text>
						</view>


						<view class="flex m-t-16 p-t-16" style="border-top: 2rpx solid #DEDEDE;;">
							<u-icon name="map-fill" color="#DD4250" size="28"></u-icon>
							<view class="m-l-10">{{ item.city }}{{ item.address }}</view>
						</view>
					</view>
				</router-link>
			</view>
		</view>


		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</mescroll-uni>
</template>


<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		getTalentsList
	} from '@/api/app';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				statusBarHeight: 0,
				talentsList: [],
				downOption: {
					// use: false,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/order_null.png',
						tip: '暂无数据~', // 提示
						fixed: true,
						top: '100rpx'
					}
				},
				showLoading: false,
				searchKeyword: this.keyword
			};
		},
		props: {
			keyword: {
				type: String
			},
		},
		created() {
			uni.$on("refreshTalentsSearchList", (params) => {
				this.searchKeyword = params.keyword;
				this.refresh()
			})
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});

		},
		destroyed() {
			uni.$off("refreshTalentsSearchList")
		},
		computed: {
			positionTop() {
				return (this.statusBarHeight + 70)
			},
            phoneNumHide(tel) {
                return (tel) => {
                  return tel.substring(0, 3) + '****' + tel.substring(7);
                }
            },
		},
		methods: {
			refresh() {
				this.mescroll.resetUpScroll()
			},
			makePhoneCall(tel) {
				if (tel) {
					uni.makePhoneCall({
						phoneNumber: tel
					});
				}
			},
			
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				getTalentsList({
					page_size: pageSize,
					page_no: pageNum,
					keyword: this.searchKeyword
				}).then(({
					data,
					_meta
				}) => {
					let curPageData = data;
					let curPageLen = curPageData.length;
					let hasNext = _meta.pageCount > _meta.currentPage;
					if (page.num == 1) this.talentsList = [];
					this.talentsList = this.talentsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})

			}
		},
	};
</script>
<style lang="scss" scoped>
	// /deep/ .mescroll-uni-fixed {
	// 	left: 250rpx !important;
	// }

	.content {
		padding: 16rpx;
	}

	.u-search {
		padding: 0;
	}

	.talents-item {
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx 16rpx;
		font-size: 28rpx;
	}

	.u-content {}
</style>