xmt/pages/index/searchArt.vue

<template>
	<view class="content">
		<!--搜索 start-->
		<view class="Search-box" @click="">
			<view class="Search-box-size">
				<image class="box-img" src="../../static/img/img01.png"></image>
				<input type="text" class="box-word" placeholder="请输入关键字" v-model="keyword" />
			</view>
			<view class="Search-box-sort" @click="getList('click')">搜索</view>
		</view>
		<!-- 搜索 end-->
		<!-- 补位 -->
		<view class="" style="height: 100rpx;"></view>
		<!-- 文章列表 start-->
		<view class="art-list">
			<template v-for="item in list">
				<!-- 文章图片为一 -->
				<view class="art-item-one flex art-item" v-if="item.image_input.length == 1"
					@click="goToDetail(item.id)">
					<view class="art-left flex">
						<view class="art-tit clamp2">
							{{item.title}}
						</view>
						<view class="art-time">
							<image src="../../static/icon/hot.png" mode="" class="hot" v-if="item.is_hot == 1"></image>
							<text class="store-name">{{item.mername}}</text><text
								class="pl">{{item.comment}}评论</text><text
								class="creat-time">{{item.add_time | showTime}}</text>
						</view>
					</view>
					<view class="art-right">
						<image :src="item.image_input" mode=""></image>
					</view>
				</view>
				<!-- 文章图片为零 -->
				<view class="art-item-zero flex art-item" v-if="item.image_input.length == 0"
					@click="goToDetail(item.id)">
					<view class="art-tit clamp2">
						{{item.title}}
					</view>
					<view class="art-time">
						<image src="../../static/icon/hot.png" mode="" class="hot"></image><text
							class="store-name">{{item.mername}}</text><text class="pl">{{item.comment}}评论</text><text
							class="creat-time">{{item.add_time | showTime}}</text>
					</view>
				</view>
				<!-- 文章图片大于一 -->
				<view class="art-item-three art-item flex" v-if="item.image_input.length > 1"
					@click="goToDetail(item.id)">
					<view class="art-tit clamp2">
						{{item.title}}
					</view>
					<view class="art-img-list">
						<image :src="imgitem" mode="" v-for="imgitem in item.image_input"></image>
					</view>
					<view class="art-time">
						<image src="../../static/icon/hot.png" mode="" class="hot"></image><text
							class="store-name">{{item.mername}}</text><text class="pl">{{item.comment}}评论</text><text
							class="creat-time">{{item.add_time | showTime}}</text>
					</view>
				</view>
			</template>

		</view>
		<!-- 文章列表 start-->
		<!-- <empty v-if=" list.length === 0"></empty> -->
	</view>
</template>

<script>
	import {
		searchArt
	} from '@/api/art.js'
	import empty from '@/components/empty';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	export default {
		components: {
			// uniLoadMore,
			empty
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 20,
				loadingType: 'more',
				keyword: '',
			}
		},
		onReachBottom() {
			this.getList()
		},
		filters: {
			showTime(val) {
				let str = ''
				if (val) {
					let time = timeComputed(val * 1000);
					console.log(time)
					if (time.day > 0) {
						return str = time.day + '天前'
					} else if (time.hour > 0) {
						return str = time.hour + '小时前'
					} else if (time.minutes > 0) {
						return str = time.minutes + '分钟前'
					} else {
						return str = time.seconds + '秒前'
					}
				}
				return str
			}
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/user/article?id=' + id
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getList(type) {
				let obj = this
				if (type == 'click') {
					obj.list = []
					obj.page = 1
					obj.loadingType = 'more'
				}
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				searchArt({
					page: obj.page,
					rows: 20,
					search: obj.keyword
				}).then(res => {
					console.log(res)
					obj.list = obj.list.concat(res.data.list)
					obj.page++
					if (obj.limit = res.data.list) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
	}

	.Search-box {
		position: absolute;
		top: 0;
		width: 750rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 100rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.Search-box-sort {
			font-size: 30rpx;
			flex-shrink: 0;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);

			.sort-text {
				width: 57rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 58rpx;
				margin-right: 19rpx;
			}

			.sort-img {
				width: 21rpx;
				height: 11rpx;
				margin-bottom: 4rpx;
			}
		}

		.Search-box-size {
			width: 605rpx;
			height: 65rpx;
			border-radius: 32rpx;
			background-color: #f1f1f1;
			padding-left: 36rpx;
			display: flex;
			align-items: center;

			.box-img {
				height: 32rpx;
				width: 32rpx;
				margin-right: 16rpx;
			}

			.box-word {
				width: 100%;
				font-size: 22rpx;
				font-weight: 500;
				color: rgba(205, 203, 203, 1);
				line-height: 55rpx;
				color: #000000;
			}
		}
	}

	.dy-wrap {
		width: 707rpx;
		background: #fff;
		margin: auto;
		border-bottom: #E9E9E9 solid 1px;
		padding: 20rpx 0;

		.user-logo {
			flex-shrink: 0;
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.user-num {
			flex-grow: 1;
			padding-left: 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;

			.user-name {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
				padding-right: 20rpx;
				padding: 0 20rpx 20rpx 0;
			}
		}

		.dy-btn {
			flex-shrink: 0;
			text-align: center;
			width: 136rpx;
			line-height: 66rpx;

			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;

			background: #E6645F;
			color: #fff;
		}

		.dying {

			color: #999999;
			background: #E9E9E9;
		}
	}

	.art-list {
		background-color: #fff;
		width: 750rpx;
		font-size: 31rpx;
		font-weight: 500;
		color: #323232;
		// font-weight: bold;
	}

	.art-item {
		width: 691rpx;
		border-bottom: #E1E1E1 1px solid;
		margin: auto;
	}

	.art-item-zero {
		height: 153rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: #E1E1E1 1px solid;
	}

	.art-item-one {
		height: 195rpx;
		margin: auto;
		padding: 30rpx 0 20rpx;

		.art-left {
			height: 100%;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			padding-right: 40rpx;
		}

		.art-right {
			width: 227rpx;
			height: 145rpx;
			border-radius: 10rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.art-item-three {
		height: 345rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx 0;

		.art-img-list {
			width: 100%;
			height: 145rpx;

			// background-color: #bfa;
			// border-radius: 10px;
			image {
				width: 220rpx;
				height: 145rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;

				&:last-child {
					margin-right: 0;
				}
			}

		}
	}

	.hot {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.art-time {
		display: inline-block;
		font-size: 24rpx;
		font-weight: 500;
		color: #7F8699;

		text {
			margin-right: 10rpx;
		}
	}
</style>