fangliaoxiaochengxv/subPages/searchList/searchList.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)">
					<u--image width='160rpx' height='160rpx' radius="10rpx" mode="widthFix" :src="item.cover"
						:fade="true" duration="450" customStyle="margin-top:32rpx;margin-bottom:32rpx;flex-shrink: 0" />
					<view class="good-item-content ml10">
						<view class="text-overflow-single mb20">{{item.goods_name}}</view>
						<view class="display-flex-between">
							<text class="fs13 fw600 color-red">￥{{item.price_selling}}<text
									class="color-2c">起</text></text>
						</view>
					</view>
				</view>
				<u-line :color="index !== (mList && 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 CommercePart from '@/components/CommercePart'
	import { getGoodList } from "@/common/api/good.js";
	export default {
		components: {
			Empty,
			CommercePart
		},
		data() {
			return {
				topData: {
					top: 0,
					height: 0
				},
				keyWord: '',
				page: 1,
				mList: undefined
			}
		},
		computed: {
			searchData() {
				return {
					pageSize: 20,
					page: this.page,
					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()
			},
			toDetails(item) {
				uni.navigateTo({
					url: `/subPages/goodsDetail/goodsDetail?code=${item.code}&type=common`
				})
			},
			toSearchKeyWord(val) {
				console.log(val);
				this.page = 1;
				if (this.keyWord != '') {
					this.mList = [];
					this.getTaskList();
				} else {
					this.mList = [];
					this.mList = undefined;
				}
			},
			getTaskList(cateids) {
				const data = this.searchData;
				getGoodList(data)
					.then((res) => {
						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%;
		box-sizing: border-box;
		padding: 40rpx;
		align-items: center;
	}



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

	.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>