xnzt/xnzt-h5/pages/find/price/index.vue

<template>
	<view class="container">
		<view class="p-top u-flex u-row-between u-col-center">
			<view class="l u-flex u-col-center u-col-center" @click="navChange">
				<text v-if="index==-1">所有分类</text>
				<text v-else>{{nlist[index].title}}</text>
				<image src="@/static/images/index/xia.png" mode="aspectFill"></image>
			</view>
			<view class="r u-flex u-row-between u-col-center">
				<view class="ico">
					<uni-icons type="search" size="24" color="#999"></uni-icons>
				</view>
				<view class="input">
					<input type="text" v-model="title" placeholder="请输入">
				</view>
				<view class="btn" @click="search">
					查询
				</view>
			</view>
		</view>
		<view class="p-bottom">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMore">
				<uni-table emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="left">品名</uni-th>
						<uni-th align="left" width="100">种类</uni-th>
						<uni-th align="left" width="100">均价</uni-th>
					</uni-tr>
					<uni-tr v-for="(item,index) in list" :key="index">
						<uni-td>{{item.prodName}}</uni-td>
						<uni-td>{{item.prodCat}}</uni-td>
						<uni-td style="font-size: 24rpx;">{{item.avgPrice}}/{{item.unitInfo}}</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"",
				nid:'',
				page:1,
				total:1,
				list:[],
				nolist:false,
				index:-1,
				nlist:[{
					id:'1186',
					title:'蔬菜'
				},{
					id:'1187',
					title:'水果'
				},{
					id:'1189',
					title:'肉禽蛋'
				},{
					id:'1190',
					title:'水产'
				},{
					id:'1188',
					title:'粮油'
				},{
					id:'1203',
					title:'豆制品'
				},{
					id:'1204',
					title:'调料'
				}]
			}
		},
		onLoad(o) {
			// if (!uni.getStorageSync('userId')) {
			// 	uni.showToast({
			// 		title: '请先登录',
			// 		icon: "none",
			// 		duration: 1500
			// 	});
			// 	setTimeout(() => {
			// 		uni.reLaunch({
			// 			url: '/pages/index/login?name=index'
			// 		})
			// 	}, 1500)
			// } else {
			// 	//0：办公室   1：农安科  2:领导  3:起草人
			// 	this.dept = uni.getStorageSync('dept')
			// }
			// this.getnavList()
			// this.nid = o.id
			this.getList()
		},
		onReachBottom() {
			if(this.page<this.total){
				this.page++
				this.getList()
			}
		},
		methods: {
			getMore(){
				if(this.page<this.total){
					this.page++
					this.getList()
				}
			},
			navChange(){
				let list = this.nlist.map(item=>item.title)
				uni.showActionSheet({
					itemList: list,
					success:  (res)=> {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.index = res.tapIndex
						this.nid=this.nlist[this.index].id
						this.list = []
						this.page = 1
						this.getList()
					},
					fail:  (res) =>{
						console.log(res.errMsg);
						this.index = -1
						this.nid=''
						this.list = []
						this.page = 1
						this.getList()
						
					}
				});
			},
			search(){
				this.list = []
				this.page = 1
				this.getList()
			},
			getnavList(){
				uni.request({
					url: 'http://xinfadi.com.cn:8098/getChildCat.html',
					data: {
						
					},
					method: 'post',
					header:{
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					success: (res) => {
						console.log(res,1111)
					}
				})
			},
			getList(){
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: 'http://xinfadi.com.cn:8098/getPriceData.html',
					data: {
						prodPcatid:this.nid,
						current:this.page,
						limit:20,
						prodName: this.title
					},
					method: 'post',
					header:{
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					success: (res) => {
						uni.hideLoading();
						console.log(res,1111)
						this.list = [...this.list,...res.data.list]
						this.total =Math.ceil(res.data.count/20) 
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #4892FD;

	.container {
		min-height: 100vh;
		padding-top: 120rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.p-bottom {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			flex: 1;
			height: 1rpx;
			.scroll-Y{
				width: 100%;height: 100%;
			}
		}

		.p-top {
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #eee;
			width: 100%;
			height: 90rpx;
			z-index: 999;
			background-color: #fff;
			box-sizing: border-box;

			.l {
				width: 180rpx;

				text {
					flex: 1;
					width: 1rpx;
					padding-right: 6rpx;
					font-size: 24rpx;
					color: #666;

				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.r {
				flex: 1;
				width: 1rpx;
				margin-left: 10rpx;
				padding-left: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				background-color: #F4F5F7;

				.ico {
					width: 60rpx;
					height: 70rpx;
					text-align: center;
				}

				.input {
					flex: 1;
					width: 1rpx;
					padding: 0 10rpx;

					input {
						width: 100%;
						font-size: 28rpx;
						color: #333;
					}
				}

				.btn {
					width: 140rpx;
					border: 2rpx solid @color;
					color: @color;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					background-color: #fff;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>