xc-app/pages/search/search-list.vue

<template>
	<view class="search-list-page" :style="{'paddingTop':`${statusBarHeight}`}">
		<view class="header">
			<image src="@/static/mine/fh.png" mode="" class="go-back" @click="goBack"></image>
			<view class="header-input">
				<input type="text" v-model="productName" class="input">
				<view @click="search" class="btn">搜索</view>
			</view>
		</view>
		
		<view style="padding-top: 200rpx;" v-if="list.length === 0">
			<empty></empty>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="lowerBottom" class="shop-list">
			<view class="list">
				<template v-for="(item,index) in list">
					<view class="shop-item" :key="index" @click="goDetail(item)">
						<image :src="item.coverResource.url" mode="" class="shop-img"></image>
						<view class="shop-detail">
							<view class="shop-name">{{item.name}}</view>
							<view class="shop-price">
								<view class="price"><text class="sym">¥</text>{{item.price.sale}}</view>
								<view class="shu"></view>
								<view class="price-dou">
									<image src="@/static/mine/jf.png" mode="" class="dou-img"></image>{{item.point.mall | numberFormat(item.point.mall)}}
								</view>
							</view>
						</view>
						
					</view>
				</template>
			
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/search/search-list"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { productTagsApi,productApi } from '@/API/product.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default{
	mixins: [myMixins],
		data(){
			return{
				statusBarHeight,
				list:[],
				id:"",
				page:1,
				productName:"",
				sort: "",//sales销量 price价格
				order: "desc",//asc 升  desc降
				total:0
			}
		},
		onLoad(opation) {
			this.id = opation.id ? opation.id : ''
			this.productName = opation.productName ? opation.productName : ''
			this.getList(this.productName)
		},
		methods:{
			goBack(){
				uni.redirectTo({
					url:`/pages/search/index`
				})
			},
			search(){
				this.page = 1
				this.list = []
				this.getList(this.productName)
			},
			// 查看详情
			goDetail(item){
				uni.navigateTo({
					url:`/pages/product/detail?id=${item.id}`
				})
			},
			// 获取商品列表
			getList(productName){
				uni.showLoading()
				productApi({page:this.page,size:10,name:this.productName,}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
						this.total = res.data.total
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 上拉加载
			lowerBottom(){
				if(this.total === this.list.length){
					return
				}
				this.page += 1;
				this.getList()
			},
		}
	}
</script>

<style lang="scss">
	
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.search-list-page{
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 22rpx;
			box-sizing: border-box;
			.go-back{
				width: 19rpx;
				height: 22rpx;
			}
			.header-input{
				width: 631rpx;
				height: 69rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 6rpx 10rpx 6rpx 20rpx;
				.input{
					width: 480rpx;
					font-size: 24rpx;
					color: #000000;
				}
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 104rpx;
					height: 57rpx;
					background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
					border-radius: 28px;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.shop-list{
			padding-top: 30rpx;
			height: calc(100vh - 110rpx);
			.list{
				// display: grid;
				// gap: 22rpx;
				// grid-template-rows: 1fr;
				// margin: 0px auto;
				// grid-template-columns: repeat(2, 1fr);
				  .shop-item{
					  width: 706rpx;
					  background: #FFFFFF;
					  border-radius: 10rpx;
					  padding: 18rpx 23rpx 22rpx 13rpx;
					  display: flex;
					  align-items: center;
					  margin: 0 0 17rpx 22rpx;
					.shop-img{
						width: 230rpx;
						height: 230rpx;
						border-radius: 10rpx;
					}
					.shop-detail{
						margin-left: 29rpx;
						.shop-name{
							width: 361rpx;
							height: 67rpx;
							font-size: 26rpx;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.shop-price{
							display: flex;
							align-items: center;
							margin-top: 100rpx;
							.price{
								color: #F04236;
								font-size: 40rpx;
								font-weight: bold;
								.sym{
									font-size: 28rpx;
								}
							}
							.shu{
								width: 1px;
								height: 24rpx;
								border-left: 1px solid #C9C9C9;
								margin: 0 18rpx;
							}
							.price-dou{
								display: flex;
								align-items: center;
								font-weight: 300;
								font-size: 24rpx;
								color: #888888;
								.dou-img{
									margin-right: 8rpx;
									width: 30rpx;
									height: 31rpx;
								}
							}
						}
					}
				  }
			}
		}
	}
</style>