baiyuApp/pages_mall/recommendList.vue

<template>
	<view class="page">
		<view class="top-fixed">
			<!-- 搜索框 -->
			<view class="search-cont">
				<view class="inner">
					<image class="icon-search" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search.png" mode=""></image>
					<input type="text" @confirm="goSearch"   :value="keyword" placeholder="输入商品名称" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
				<!-- <view class="icon-search">
					<image @click="showChange(2)" v-if="showType==1"  src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search1.png" mode=""></image>
					<image @click="showChange(1)" v-if="showType==2"  src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/search2.png" mode=""></image>
				</view> -->
			</view>
			<!-- 排序框 -->
		<!-- 	<view class="sort-box">
				<view class="item" :class="form.defaultOrder=='desc'?'active':''" @click="searchChange('1')">
					<text class="label">默认</text>
				</view>
				<view class="item" :class="form.defaultOrder=='desc'?'active':''" @click="searchChange('1')">
					<text class="label">新品</text>
				</view>
				<view class="item" :class="form.defaultOrder=='desc'?'active':''" @click="searchChange('1')">
					<text class="label">默认</text>
				</view>
				<view class="item" @click="searchChange('2')">
					<text class="label">价格</text>
					<view class="sort-img">
						<image v-if="form.priceOrder==null||form.priceOrder=='desc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_up.png" mode="" @click="priceUp(true)"></image>
						<image v-if="form.priceOrder=='asc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_up2.png" mode="" @click="priceUp(false)"></image>
						<image v-if="form.priceOrder==null||form.priceOrder=='asc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_down.png" mode="" @click="priceDown(true)"></image>
						<image v-if="form.priceOrder=='desc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_down2.png" mode="" @click="priceDown(false)"></image>
					</view>
				</view>
				<view class="item" @click="searchChange('3')">
					<text class="label">销量</text>
					<view class="sort-img">
						<image v-if="form.salesOrder==null||form.salesOrder=='desc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_up.png" mode="" @click="saleUp(true)"></image>
						<image v-if="form.salesOrder=='asc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_up2.png" mode="" @click="saleUp(false)"></image>
						<image v-if="form.salesOrder==null||form.salesOrder=='asc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_down.png" mode="" @click="saleDown(true)"></image>
						<image v-if="form.salesOrder=='desc'" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/price_arrow_down2.png" mode="" @click="saleDown(false)"></image>
					</view>
				</view>
				<view class="item" :class="form.newOrder=='desc'?'active':''" @click="searchChange('4')">
					<text class="label">新品</text>
				</view>
			</view> -->
		</view>
		<mescroll-body
			top="100rpx" bottom="40rpx"
			ref="mescrollRef"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback"
			:down="downOption"
			:up="upOption"
		>
			<view class="list-wrap">
				<view class="goods-grid">
					<view class="grid-item" v-for="(item, index) in dataList" :key="item.productId">
						<GoodsCard :item="item" :show-price="true" @click="showProduct(item)" />
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import { getHomeGoodsRecommend } from '@/api/home.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import GoodsCard from './components/GoodsCard.vue'

export default {
	name: 'RecommendList',
	components: { GoodsCard },
	mixins: [MescrollMixin],
	data() {
		return {
			type: 'hot',
			titleMap: { hot: '热卖有机', green: '上新推荐' },
			mescroll: null,
			keyword:'',
			downOption: {},
			upOption: {
				onScroll: true,
				use: true,
				page: {
					num: 0,
					size: 10
				},
				noMoreSize: 10,
				empty: {
					icon: 'https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/no_data.png',
					tip: '暂无商品'
				},
				textNoMore: '已经到底了'
			},
			dataList: []
		}
	},
	onLoad(options) {
		this.type = (options.type || 'green').toLowerCase()
		if (this.type !== 'green' && this.type !== 'hot') this.type = 'green'
		uni.setNavigationBarTitle({ title: this.titleMap[this.type]})
	},
	methods: {
		goSearch(e) {
			this.keyword=e.detail.value;
			this.mescroll.resetUpScroll();
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll
		},
		downCallback(mescroll) {
			mescroll.resetUpScroll()
		},
		upCallback(page) {
			const that = this
			getHomeGoodsRecommend({
				keyword:this.keyword,
				type: that.type,
				pageNum: page.num,
				pageSize: page.size
			}).then(res => {
				if(res.code==200){
					//设置列表数据
					if (page.num == 1) {
						that.dataList = res.data.list; 
						
					} else {
						that.dataList = that.dataList.concat(res.data.list);
						 
					}
					that.mescroll.endBySize(res.data.list.length, res.data.total);
					
				}else{
					uni.showToast({
						icon:'none',
						title: "请求失败",
					});
					that.dataList = null;
					that.mescroll.endErr();
				}
			}).catch(() => {
				that.dataList = page.num == 1 ? [] : that.dataList
				that.mescroll.endErr()
			})
		},
		showProduct(item) {
			if (item && item.productId) {
				uni.navigateTo({ url: '/pages/shopping/productDetails?productId=' + item.productId })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.top-fixed{
		width: 100%;
		position: fixed;
		// top: 0;
		left: 0;
		z-index: 10;
	}
	.search-cont{
		padding: 16upx 30upx;
		background-color: #FFFFFF;
		display:flex;
		align-items: center;
		justify-content: space-between;
		.inner{
			box-sizing: border-box;
			width: 100%;
			height: 72upx;
			background: #F7F7F7;
			border-radius: 36upx;
			display: flex;
			align-items: center;
			padding: 0 30upx;
			.icon-search{
				width: 28upx;
				height: 28upx;
				margin-right: 20upx;
			}
			input{
				height: 60upx;
				line-height: 60upx;
				flex: 1;
			}
			
		}
		.icon-search{
			margin-left: 10upx;
			width: 40upx;
			height: 40upx;
			image{
				width: 40upx;
				height: 40upx;
			}
			
		}
	}
.page {
	min-height: 100vh;
	background: #f5f5f5;
}
.list-wrap {
	padding: 24rpx;
}
.goods-grid {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}
.goods-grid .grid-item {
	width: 100%;
}
</style>