supervise/supervise-uniapp/pages/index/WarehouseList.vue

<template>
	<view class="page">

		<view v-for="(item,index) in dataList" class="newslist">

			<view class="listcard" :class="{'listcard2':index+1<dataList.length}" @click="navToDetailPage(item.sid)">

				<image :src="item.picUrl" mode="aspectFill" class="img"></image>

				<view class="rightlayout">

					<text class="rightlayout-top">{{item.name}}</text>

					<view class="rightlayout-centre">
						<text class="text">{{item.provinceName}}-{{item.cityName}}-{{item.countyName}}</text>
						<!-- <text class="text">{{item.provinceName}}-{{item.cityName}}-{{item.countyName}}</text> -->
						<!-- <text class="text" >{{item.attributeNames==''?'--':item.attributeNames}}</text> -->
						<!-- <text class="btn2" :class="{'btn1':item.isEdit===1}" @click="editData">编辑</text> -->
					</view>

					<view class="rightlayout-bootm">
						<text class="text">{{item.linkerName==''?'--':item.linkerName}}</text>
						<text class="text">{{item.acreage==''?'--':item.acreage}}㎡</text>
						<text class="text2" style="text-align: right;">{{item.monthlyPrice==''?'--':item.monthlyPrice}}/年</text>
					</view>

				</view>

			</view>

		</view>

		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listQuery: {
				  current: 1,
				  size: 10,
				  params: {
				  }
				},
				loadingType: 'more', //加载更多状态
				dataList: [
					// {
					// sid:"1",
					// 	img: "https://pic3.zhimg.com/v2-c6ae9c3aff36b9b221258f6a90577902_r.jpg",
					// 	name: "石家庄鸿彩字业制作有限公司",
					// 	type: "库房",
					// 	label: "物流仓储",
					// 	isEdit: 1,
					// 	userName: "孙宁",
					// 	address: "长安区",
					// 	distance: "6Km",
					// },
					// {
					// 	sid:"2",
					// 	img: "https://pic3.zhimg.com/v2-c6ae9c3aff36b9b221258f6a90577902_r.jpg",
					// 	name: "石家庄鸿彩字业制作有限公司2",
					// 	type: "库房2",
					// 	label: "物流仓储2",
					// 	isEdit: 2,
					// 	userName: "孙宁2",
					// 	address: "长安区2",
					// 	distance: "6Km2",
					// }
				],
			}
		},
		onShow() {
		this.listQuery.current = 1
			this.dataList = [];
			this.loadData();
		},
		onLoad() {

		},
		onPullDownRefresh() {
			this.listQuery.current = 1
			this.loadData('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		//加载更多
		onReachBottom() {
			this.listQuery.current = this.listQuery.current + 1
			this.loadData();
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				
				var list = []
				
				this.$api.storeHouseListPage(this.listQuery).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					
					this.listQuery ={
						current: resp.current,
						size: 10,
						params: {
							
						}
					}
					list = resp.records
					
					console.log("消息列表", list)
					// this.goodsList = list;
					// let goodsList = await this.$api.json('goodsList');
					if (type === 'refresh') {
						this.dataList = [];
					}
					
					this.dataList = this.dataList.concat(list);
					console.log("消息列表>>>>>", this.dataList.length)
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType = this.dataList.length > list.total ? 'nomore' : 'more';
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
					
				}).catch(e => {
					console.log('eeeee', e)
				})
			
			},

			//详情
			navToDetailPage(sid) {
				console.log("sid>>>>", sid)
				uni.navigateTo({
						url: 'WarehouseDetaile?sid='+sid
				});
				// uni.navigateTo({
				// 	url: 'WarehouseDetaile?sid='+sid,
				// 	// // 版本2.8.9+ 支持
				// 	// success: (res) => {
				// 	// 	// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
				// 	// 	res.eventChannel.emit('sendTestValue', {
				// 	// 		info: item
				// 	// 	})
				// 	// }
				// });
			},

			editData() {

			},
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;

		.newslist {
			display: flex;
			flex-direction: column;

			.listcard {
				margin-left: 20px;
				margin-right: 20px;
				padding-bottom: 20px;
				padding-top: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.img {
					width: 120px;
					height: 80px;
					border: 1px solid #1684FC;
					flex-shrink: 0;
				}

				.rightlayout {
					margin-left: 10px;
					display: flex;
					flex: 1;
  					flex-direction: column;
   
					.rightlayout-top {
						width: 100%;
						font-size: 16px;
						font-weight: 600;
						font-family: sans-serif;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.rightlayout-centre {
						margin-top: 10px;
						display: flex;
						width: 100%;
						flex-direction: row;
						align-items: center;

						.text {
							flex: 1;
							font-size: 14px;
							color: #5C5C5C;
						}

						.btn1 {
							text-align: center;
							background: #1684FC;
							border-radius: 5px;
							color: #fff;
							font-size: 12px;
							padding: 2px 5px;
						}

						.btn2 {
							border-radius: 5px;
							text-align: center;
							background: #D5D5D5;
							color: #fff;
								font-size: 12px;
							padding: 2px 5px;
						}
					}

					.rightlayout-bootm {
						margin-top: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;

						.text {
							flex: 1;
							font-size: 14px;
							color: #5C5C5C;
						}
						
						.text2 {
							flex: 1.2;
							font-size: 14px;
							color: red;
						}
					}


				}

				.view {
					width: 100%;
					background: #D5D5D5;
					height: 1px;
					margin-left: 10px;
					margin-right: 10px;
				}
			}

			.listcard2 {
				border-bottom: 1px solid #D5D5D5;
			}
		}
	}
</style>