fangliaoxiaochengxv/pages/searchList/index.vue

<template>
	<view class="app-page">
		<u-sticky offset-top="0" customStyle="width:100%">
			<view class="top-view"
				:style="'height:' +  topData.height + 'px;' + 'padding-top:' + topData.top + 'px;padding-bottom:20rpx'">
				<u-icon name="arrow-left" color="#000000" size="34rpx" customStyle="padding: 16rpx" @click="toBack()">
				</u-icon>
				<u-search class="serchTitle" placeholder="请输入关键词搜索任务" v-model="keyWord" bg-color="#dfdfdf"
					border-color="#ffffff" margin="0 200rpx 0 0" placeholder-color="#959595" :show-action="false"
					@search="toSearchKeyWord" @clear="toSearchKeyWord"></u-search>
			</view>
		</u-sticky>
		<view class="good-list">
			<template v-for="(item,index) in mList">

				<view class="good-item" @click="toDetails(item.code)">
					<u--image width='196rpx' height='196rpx' radius="10rpx" mode="widthFix" :src="item.cover"
						:fade="true" duration="450" customStyle="margin-top:32rpx;margin-bottom:32rpx;" />
					<view class="good-item-content">
						<view class="good-name-box">
							<!-- <image mode="heightFix" :src="`${$getImgBaseUrl()}tiktok-log.png`"></image> -->
							<text>{{item.task_name}}</text>
						</view>
						<text class="good-desc">{{item.remark}}</text>
						<view class="good-tags">
							<text class="good-tag1">{{item.task_model}}</text>
							<text class="good-tag2">粉丝{{item.fans_require}}起</text>
							<text class="good-tag2">{{item.show_form}}</text>
						</view>
						<view class="good-bottom">
							<text class="good-time">{{item.update_at}}</text>
							<view class="good-view-box">
								<image :src="`${$getImgBaseUrl()}ic-view.png`" mode="heightFix"></image>
								<text>{{item.num_read}}</text>
							</view>
						</view>
					</view>
				</view>

				<u-line :color="index !== mList.length - 1 ? '#E9E9E9' : '#00000000'" length="calc(100%)"
					customStyle="margin-bottom:4rpx;"></u-line>
			</template>
		</view>

		<Empty v-if="mList && mList.length == 0"></Empty>

	</view>
</template>

<script>
	import Empty from "@/components/Empty/index.vue"
	import {
		getTaskList,
	} from "@/common/api/task.js";
	export default {
		components: {
			Empty
		},
		data() {
			return {
				topData: {
					top: 0,
					height: 0
				},
				keyWord: '',
				page: 1,
				mList: undefined
			}
		},
		computed: {
			searchData() {
				return {
					limit: 20,
					page: this.page,
					task_name: this.keyWord
				}
			}
		},
		created() {
			const topData = uni.getMenuButtonBoundingClientRect()
			this.topData.top = topData.top
			this.topData.height = topData.height
		},
		onLoad(options) {},

		onReachBottom() {
			this.page++;
			this.getTaskList()
		},
		methods: {
			toBack() {
				uni.navigateBack()
			},
			toSearchKeyWord(val) {
				console.log(val);
				this.page = 1;
				if (this.keyWord != '') {
					this.mList = [];
					this.getTaskList();
				} else {
					this.mList = [];
					this.mList = undefined;
				}
			},
			toDetails(code) {
				uni.navigateTo({
					url: '/pages/goodDetails/index?code=' + code
				})
			},
			getTaskList(cateids) {
				uni.showLoading({

				})
				const data = this.searchData;
				getTaskList(data)
					.then((res) => {
						uni.hideLoading();
						console.log("getTaskList==>", res.data)
						if (res.data) {
							if (this.page === 1) {
								this.mList = res.data.list;
							} else {
								this.mList = this.mList.concat(res.data.list);
							}
						} else {
							if (this.page != 1) {
								this.page;
							} else {
								this.mList = []
							}
						}
					})
					.catch(() => {
						if (this.page != 1) {
							this.page--;
						}
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100vw;
		display: flex;
		background: white;
		align-items: center;
		flex-direction: column;
	}


	.top-view {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: flex-end;
	}

	.top-view image {
		height: 60rpx;
		margin-left: 30rpx;
		width: 80rpx;
	}

	.top-view text {
		font-size: 26rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
	}


	.good-list {
		background: white;
		display: flex;
		flex-basis: 0;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}



	.good-item {
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: row;
	}

	.good-item-content {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.good-name-box {
		display: flex;
		margin-top: 28rpx;
		flex-direction: row;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			display: block;
		}

		text {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #1D161F;
			// margin-left: 10rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}

	.good-desc {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2C2C2C;
		margin-top: 8rpx;
	}

	.good-tags {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		align-items: center;

		.good-tag1 {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			margin-right: 10rpx;
			color: #765AEE;
			padding: 3rpx 12rpx;
			background: #F3F1FF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			opacity: 1;
		}

		.good-tag2 {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #5E5E5E;
			margin-right: 10rpx;
			padding: 3rpx 12rpx;
			background: #F8F8F8;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			opacity: 1;
		}
	}

	.good-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 32rpx;
		justify-content: space-between;

		.good-time {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #B7B7B7;
		}

		.good-view-box {

			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				height: 16rpx;
				width: 22rpx;
				display: block;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #B7B7B7;
				margin-left: 6rpx;
			}
		}
	}
</style>