hls_crm/pagesA/product/index.vue

<template>
	<view class="warpbox">
		<!-- 搜索 -->
		<view class="searbox">
			<view class="censear">
				<image :src="BASE_IMG_URL+'ss.png'" class="searimg" ></image>
				<input type="text" placeholder="请输入关键词搜索" @input="queryData" class="lself" placeholder-style="color:#999">
			</view>
			<view class="tab_screen" @click="screenClick">
				<image :src="BASE_IMG_URL+'shaixuan.png'" class="imgaa" mode="scaleToFill"></image>
			</view>
		</view>
		<scroll-view scroll-y class="scrollbox">
			<view class="pop_info_right">
				<view class="pop_info_cen" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="pro_info">
						<image :src="item.img" class="proimg" ></image>
						<view class="pro_info_right">
							<view class="info_text" style="font-size: 28rpx; color: #666;">{{item.name}}</view>
							<view class="info_text">单位：{{item.unit}}</view>
							<view class="info_text">零售价：{{item.price}}</view>
							<view class="info_text">批发价：{{item.wholesale}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</scroll-view>
		<bot-screen ref="screenChild" @sure="sureObj"></bot-screen>
	</view>
</template>

<script>
	import botScreen from './bot_screen.vue'
	import { netContractProduct } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	
	export default{
		components:{
			botScreen
		},
		data(){
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				list:[],
				page:1,
				totalPage:1,
				name:'',
				typeObj:{id:0,name:'全部分类'}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods:{
			queryData(e) {
				this.name = e.detail.value
				this.init()
			},
			init() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				let params = {
					page:this.page,
					name:this.name,
					type_id:this.typeObj.id
				}
				netContractProduct(params).then(res=>{
					this.list = res.data
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url:'/pagesA/product/detail?id='+item.id
				})
			},
			//筛选
			screenClick(){
				this.$refs.screenChild.open()
			},
			sureObj(obj) {
				if(obj.id){
					this.typeObj = obj
				}else{
					this.typeObj = {id:0,name:'全部分类'}
				}
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searbox{
		padding:0 24rpx 20rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background:$uni-text-color;
		.censear{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding:0 24rpx;
			border-radius: 34rpx;
			background:#FFFFFF;
			width:450rpx;
			height:68rpx;
			.searimg{
				padding-right: 15rpx;
				width:35rpx;
				height:35rpx;
			}
			.lself{
				font-size:26rpx;
				width:400rpx;
			}
		}
		.tab_screen{
			display: flex;
			justify-content: center;
			align-items: center;
			width:180rpx;
			color:#fff;
			.imgaa{
				width: 43rpx;
				height: 44rpx;
			}
		}
	}
	.scrollbox{
		width:750rpx;
		height:calc(100vh - 110rpx);
	}
	.pop_info_right{
		padding:0 0 24rpx 0;
		.pop_info_cen{
			width: 690rpx;
			height: 225rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 7rpx 0px rgba(0, 0, 0, 0.15);
			border-radius: 10rpx;
			margin:24rpx auto 0;
		}
		.pro_title{
			padding:24rpx 0;
			font-size:30rpx;
			color:#333333;
		}
		.pro_info{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.proimg{
				margin: 33rpx 0 33rpx 30rpx;
				width: 158rpx;
				height: 158rpx;
				border-radius: 10rpx;
			}
			.pro_info_right{
				margin-left: 75rpx;
				.info_text{
					font-size:26rpx;
					color:#999999;
					margin-bottom:14rpx;
				}
			}
		}
		.pro_num{
			font-size:28rpx;
			color:#0287FF;
			padding:24rpx 0;
		}
	}
	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 100rpx;
		right: 100rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>