frontend-app/pages/supply_chain/supply_chain.vue

<template>
	<view class="content-two" >
		<TopSafe></TopSafe>
		<view class="head-view">
			<view class="head-search" @click="onJumpSearch">
				<u-icon size="24" name="search" color="#999"></u-icon>
				<text class="text-28 text-fu" style="margin-left:12rpx">搜索</text>
			</view>
			
		</view>
		<view class="tab-view">
			<view class="tab-list" @click="onTab(index)" v-for="(item,index) in tabList" :key="index">
				<text class="text-28 text-space" :style="{
					color:curTab == index ? '#7A35F6' : '#666'
				}">{{item.name}}</text>
				<view class="line" v-if="curTab == index"></view>
			</view>
		</view>
		<view class="setting-view">
			<view class="name-box">
				<PingItem @ok="onJumpShop" style="margin-top:24rpx" :obj="item" v-for="(item,index) in dataList" :key="index"></PingItem>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
			<!-- #ifndef H5 -->
		<CustomTabBar :tabIndex="3" />
		<!-- #endif -->
	</view>
</template>

<script>
import { getCascadeCategory } from '@/api/common.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import MyBtn from '@/components/common/my-btn.vue'
import PingItem from '@/components/shop/ping-item.vue'
import CustomTabBar from '@/components/custom-tab-bar.vue';
import { searchList } from '@/api/product.js';
import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe,MyBtn,PingItem },
	data() {
		return {
			dataList:[],
			tabList:[],
			curTab:0
		};
	},
	onShow() {
	},
	onLoad() {
		this.init();
	},
	methods: {
		async cascadeCategory(){
			getCascadeCategory({parentId: 0}).then(res=>{
				if (res && res.bizcode === 100) {
					this.tabList = res.data;
					this.getSearchList()
				}
			})
		},
		onTab(index){
			if(index != this.curTab){
				this.curTab = index;
				this.getSearchList()
			}
		},
		init() {
			this.cascadeCategory();
			
		},
		async getSearchList(){
			const params = {
				type:2,
				page:1,
				pageSize:99,
				categoryId:this.tabList[this.curTab].id,
				isPar:true
			}
			const resp = await searchList(params);
			if(resp && resp.bizcode === 100){
				this.dataList = resp.data || [];
			}
		},
		onJumpSearch(){
			uni.navigateTo({
			    url: '/pages/rwa_package/dongjian/search',
			})
		},
		onJumpShop(id){
			uni.navigateTo({
			    url: '/pages/other_package/productInfo/productInfo?id='+id,
			})
		},
		onShare(){
			uni.navigateTo({
			    url: '/pages/other_package/invite_friends/invite_friends',
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.content-two{
		display: flex;
		min-width: 750rpx;
		max-width: 750rpx;
		height: calc(100vh - env(safe-area-inset-bottom)); 
		// // #ifdef H5
		// height: calc(100vh - 100rpx);
		// //#endif
		// // #ifndef H5
		// height:500rpx;
		// //#endif
		// height: calc(100vh - 20rpx - var(--window-bottom));
		padding: 0;
		margin: 0;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top:0;
		left:0;
		overflow: hidden;
		background-color: $app-bj;
	}
.head-view{
	width:100%;
	min-height:88rpx;
	height:88rpx;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	background-color: #fff;
	.head-search{
		width:100%;
		height:76rpx;
		padding: 0 24rpx;
		flex-direction: row;
		display: flex;
		background-color: #F7F7F7;
		align-items: center;
		border-radius: 16rpx;
	}
}
.tab-view{
	width:100%;
	height:80rpx;
	min-height:80rpx;
	display: flex;
	flex-direction: row;
	padding: 0 32rpx;
	box-sizing: border-box;
	background-color: #fff;
	overflow-x: auto;
	.tab-list{
		margin-right:24rpx;
		display: flex;
		flex-direction: column;
		height:60rpx;
		min-height:60rpx;
		align-items: center;
		justify-content: space-between;
		margin-top:22rpx;
	}
	.line{
		width:48rpx;
		height:4rpx;
		background-color: #7A35F6;
	}
}
.setting-view {
	width: 100%;
	height: calc(100% - 88rpx - 80rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
	.name-box{
		width:100%;
		border-radius: 16rpx;
		height:100%;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		
		box-sizing: border-box;
		
	}
	
}
</style>