project init

pages/seach/seach.vue

@@ -0,0 +1,180 @@
+<template>
+	<view>
+		<view class="headSearch">
+			<view class="search-view">
+				<view class="search-item">
+					<image src="../../static/img/search.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
+					<input type="text" confirm-type="搜索"  v-model="keywords" @confirm="getList('search')"  placeholder="请输入任务名称或公司名称"/>
+				</view>
+				<view class="close" @click="closeBack">
+					取消
+				</view>
+			</view>
+		</view>
+		<view  v-if="companyList.length>0">
+			<block v-for="(item, index) in companyList" :key="item.id">
+				<companyList :companyitem="item"></companyList>
+				<view class="baddd"></view>
+			</block>
+		</view>
+		<view v-else>
+			<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
+			<view class="nothingContnt">
+				暂无任务信息
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+import {newMissionAll} from '@/api/mission.js';
+import companyList from '@/components/companyList/companyList.vue';
+import testData from '@/common/textdata.js';
+export default {
+	components: {
+		companyList
+	},
+	data() {
+		return {
+			companyList: [],
+			keywords:'',
+			page:{
+				current:1,
+				size:10,
+				total:0
+			}
+		};
+	},
+	onLoad:function(option) {
+		this.keywords = option.keywords?option.keywords:''
+	},
+	onShow:function(){
+		this.getList('search');
+	},
+	/*页面滚动到底部*/
+	onReachBottom:function(){
+		this.upLoad()
+	},
+	methods: {
+		//最新任务；
+		getList:function(type){
+			//改变搜索条件，页码值变为1
+			if(type==='search'){
+				this.page.current = 1;
+			};
+			if(this.keywords){
+				newMissionAll(this.page.current,this.page.size,this.keywords).then(res => {
+					if(this.page.current===1){
+						this.companyList=[];
+					}
+					this.page.current +=1;
+					this.page.total = res.data.data.total;
+					if(res.data.data&&res.data.data.records.length){
+						this.companyList = this.companyList.concat(res.data.data.records);
+					}
+					//搜索关键词高亮
+					if(this.companyList.length){
+						this.companyList.forEach((item, index) => {
+							item.missionTitle = this.getInf(item.missionTitle, this.keywords);
+						});
+					}
+				})
+			}		
+		},
+		//上拉加载
+		upLoad:function(){
+			if(this.page.current<=Math.ceil(this.page.total/this.page.size)){
+				this.getList();
+			}else{
+				uni.showToast({
+					icon: "none",
+					title: '已经是最后一页',
+				})
+				return 
+			}
+		},
+		closeBack(){
+			uni.navigateBack({
+				delta:1
+			})
+		},
+		/**
+		 * 指定关键字高亮
+		 * @param {*} str 字符串
+		 * @param {*} key  关键字
+		 */
+		getInf(str, key) {
+			if (str && key) {
+				let replaceReg = new RegExp(key, 'g')// 匹配关键字正则
+				let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
+				return str.replace(replaceReg, replaceString);
+			}
+		}
+	}
+};
+</script>
+
+<style>
+	.baddd{
+		background-color: #f6f6f6;
+		height: 20rpx;
+	}
+	.close{
+		position: absolute;
+		right: 24rpx;
+		top: 0;
+		height: 60rpx;
+		padding: 5rpx 0;
+		line-height: 60rpx;
+		font-family: PingFangSC-Regular;
+		font-size: 32rpx;
+		color: #333333;
+	}
+	.headSearch .search-view {
+		border-bottom: 1rpx solid #dddddd;
+	    padding: 10rpx 32rpx;
+	    background: rgba(255, 255, 255, 1);
+	}
+	.headSearch .search-item{
+		display: flex;
+		width: 80%;
+	    padding: 0 24rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+	    background: rgba(249, 249, 249, 1);
+	    border-radius: 200px;
+	    align-items: center;
+	}
+	.headSearch .search-item input {
+	    padding: 0 24rpx;
+	    height: 80rpx;
+	    font-weight: 400;
+	    flex: 1;
+	    text-align: start;
+	    font-size: 28rpx;
+	    font-family: PingFang-SC-Bold, PingFang-SC;
+	    color: rgba(51, 51, 51, 1);
+	}
+	.headSearch .search-item .placeholderClass {
+	    color: #CCCCCC; 
+	}
+	.headSearch .search-item image {
+	    height: 32rpx;
+	    width: 32rpx;
+	}
+	.nothingContnt{
+		font-family: PingFangSC-Regular;
+		font-size: 28rpx;
+		color: #666;
+		margin-top: 30rpx;
+		text-align: center;
+	}
+	.nothing{
+		width: 400rpx;
+		height: 200rpx;
+		display: block;
+		margin: 0 auto;
+		margin-top: 50%;
+	}
+</style>