dev/dcp-app-gate/pages/order/search/search.vue

<template>
	<view>
		<u-navbar  :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff" 
			:title="i18n('SearchResults')" 
			:background="background">
		</u-navbar>
		<view class="" style="margin: 20upx 50upx;position: relative;">
			<u-input v-model="keyword" type="text" :border="true" />
			<u-button type="primary" style="padding: 0 20upx; height: 100%;position: absolute;right: 0;top: 0;"
			@click="keywordChange"
			>{{i18n('Search')}}
			</u-button>
		</view>
		<u-tabs :list="list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			
			<view  style="min-height:200upx">
			  <u-gap height="20" bg-color="#f3f4f5"></u-gap>
			  <view class="cursor" v-for="(item,index) in initData" @click="toViewNew(item)"
				   style="padding:30upx 20upx 0upx 20upx;" >
				  <view class="div1"> 
					<u-tag :text="item.type=='meeting'?i18n('Conference'):
										item.type=='project'?i18n('Project'):
											item.type=='unit'?i18n('Enterprise'):
												item.type=='information'?i18n('News'):
													item.type=='activity'?i18n('Activity'):
														item.type=='country'?i18n('Country'):''" type="primary" />
					
					<text style="font-weight: 700;font-size: 34upx;margin-left: 15upx;" v-html="item.title"></text>
				  </view>
				  <view class="div2">
					<text v-html="item.content" 
					class="plate"
					style="line-height: 60upx;color: #333;font-size: 28upx;
						 -webkit-box-orient: vertical;
						  position:relative;
						  overflow: hidden;
						  display: inline-block;
						  max-height:180upx;overflow: hidden;"></text></view>
				  <view class="div3" style="margin-bottom: 30upx;">{{i18n('LatestUpdateTime')}}: {{formatDate(item.update_date)}}</view>
				   <u-gap height="20" bg-color="#f3f4f5"></u-gap>
			  </view>
			 
		  </view>
		<u-loadmore :status="status" />
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				scrollTop: 0,
				list: [{
					name: this.i18n('All'),
					value:'all',
				}, {
					name: this.i18n('Project'),
					value:'project'
				}, {
					name: this.i18n('Enterprise'),
					value:'unit'
				}, {
					name: this.i18n('News'),
					value:'information'
				}, {
					name: this.i18n('Events'),
					value:'activity'
				}, {
					name: this.i18n('Conference'),
					value:'meeting',
				}, {
					name: this.i18n('Country'),
					value:'country'
				}],
				current:0,
				initData: [],
				activeId:'project,unit,information,activity,meeting,country',
				page: 1,
				total2:0,
				status:'loadmore'
			}
		},
		onShow(){
			this.getData(this.page);
		},
		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.getData(this.page);
			} 
		},
		methods: {
			async getData(page){
				let indexName = this.activeId;
				let search = '/search/' + indexName + '/search'
				const res = await this.$myRequest({
					url: search,
					data: {
						pageNo: page,
						keyword:this.keyword,
						pageSize: 10,
						language: this.$i18n.locale
					}
				});
				
				if(this.page==1){
					this.initData = res.data.list;
				}else {
					this.initData=this.initData.concat(res.data.list)
				}
				this.total2 = res.data.totalCount;
				if(this.total2<4){
					this.status = 'nomore';
				}
			},
			i18n (data) {
			    return this.$t('common.'+data);
			},
			tabChange(index){
				this.current = index;
				this.activeId = this.list[index].value;
				this.page = 1;
				this.getData(this.page );
			},
			keywordChange(){
				this.page =1;
				this.getData();
			},
			toViewNew(item){
				let router =null;
				switch (item.type) {
					case 'meeting':
						//	会议
						router = '/pages/conference/meetingIndexCh/meetingOver?id=' + item.id;
						break;
					case 'project':
						// 项目
						router = '/pages/country/projectPresentation/projectPresentationDetails?id=' + item.base_entity_id;
						break;
					case 'unit':
						// 企业
						router = '/pages/country/enterprise/enterpriseDetail?baseEntityId=' + item.base_entity_id;
						break;
					case 'information':
						// 资讯
						router = '/pages/information/components/rankDetail?key=' + item.base_entity_id;
						break;
					case 'activity':
						// 活动
						router = '/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=' + item.base_entity_id;
						break;
					case 'country':
						// 国别
						router = '/pages/country/countryList/countryDetail?baseEntityId=' + item.base_entity_id;
						break;
				}
				uni.navigateTo({
				  url: router,
				});
			},
		},
		onLoad(options){
			this.keyword = options.keyword;
		}
	}
</script>

<style>
page {
	background-color: #fff;
}
.cursor:active {
	background-color: #f1f2f3;
}
</style>