huajucanyin/pages/lanhu_gongyinglian/index.vue

<template>
	<view class="page flex-col" style="">
		<view class="block_1 flex-row">
			<view class="box_1 flex-col justify-end">
				<view class="input_1 flex-row">
					<image class="icon_1" referrerpolicy="no-referrer"
						src="/static/lanhu_gongyinglian/0debd1cd292419106182a61d790f584a.png"
						@click="changeTab('search')" />
					<input class="text_1" placeholder="请输入供应链商品名称进行检索" v-model="search"></input>
				</view>

				<view class="text-wrapper flex-row justify-between" style="display: '';overflow-x: auto;">
					<text class="text_3" :class="{ active: activeTab === '0' }" @click="changeTab('0')">全部</text>
					<text class="text_3" :class="{ active: activeTab === item.id }" @click="changeTab(item.id)"
						v-for="(item, index) in fenlei" :key="index">{{item.name}}</text>
				</view>


				<view class="group_2 flex-row justify-between" @click="go(item.id)" v-for="(item, index) in goods"
					:key="index" style="border-bottom: 1px solid lightgray;width:95%;padding-bottom: 200rpx;">
					<image class="box_2 flex-col" :src="item.image"></image>
					<view class="box_3 flex-col justify-between" style="margin-left: 10rpx;width: 60%;">
						<text class="text_6">{{item.title}}</text>
						<view class="text-wrapper_2 flex-row justify-between">
							<text class="text_7">{{item.price}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				activeTab: '0',
				search: '',
				fenlei: [],
				goods: [],
				page:1,
				isAllGood:false,
			};
		},
		onReachBottom() {
		  console.log("到底")
		  if(!this.isAllGood){
			  this.page++;
			  this.getData2()
		  }
		  
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onLoad() {
			this.getData()
			this.getData2()
			uni.setNavigationBarColor({
				backgroundColor: '#802931', // 背景颜色
				frontColor: '#ffffff' // 前景颜色（包括标题、返回图标等）
			})

		},
		methods: {
			getData() {
				this.$api.get({
					url: '/wanlshop/data/getFenLei',
					success: res => {
						this.fenlei = res
					}
				})
			},

			getData2() {
				this.$api.get({
					url: '/wanlshop/data/getGoodsList',
					data: {
						'id': this.activeTab,
						'search': this.search,
						'page':this.page
					},
					success: res => {
						if(res.length==0){
							this.isAllGood = true;
						}else{
							this.isAllGood = false;
							this.goods.push(...res)
							
						}
						
					}
				})
			},

			go(id) {
				if (!this.user.id) {
					this.$wanlshop.msg('请先登录');
					return false
				}
				uni.navigateTo({
					url: '/pages/product/goods?id=' + id
				});
			},
			changeTab(tab) {
				console.log(tab)
				this.activeTab = tab;
				this.page = 1;
				this.goods = [];
				this.getData2()
			}
		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';


	.text-wrapper {
		width: 100%;
		padding: 20px 0;

	}


	.text-wrapper .text_3 {
		width: auto;
		padding: 0 20rpx;

		height: 40rpx;
		margin: 0 3%;

		text-align: center;
		text-decoration: none;
	}

	.text-wrapper .active {
		color: black;
		font-size: 15px;
		font-weight: 900;
		border-bottom: 3px solid #802931;
	}
</style>