ROBOT-APP/code/HBX/pages/native/robot.nvue

<template>
	<view class="page-news">
		<view class="listview">
			<view class="robot">
				<robot-list :dataList="dataList"></robot-list>
			</view>
			<view>
				<view class="loading-more">
					<view class="creatView" v-if="isNoData">
						<image class="imsa" src="../../../static/nodata.png" mode=""></image>
						<text class="c-te">暂无消息</text>
					</view>
				</view>
			</view>

		</view>
	</view> 
</template>

<script>
	import uniList from '@/components/uni-list.vue';
	import uniCell from '@/components/uni-cell.vue';
	import uniRefresh from '@/components/uni-refresh.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import robotList from '@/components/dl-product-class/index.nvue'
	import {
		getRobotList,
	} from '@/common/api.js'
	export default {
		components: {
			uniList,
			uniCell,
			uniRefresh,
			robotList,
			uniLoadMore,
		},
		props: {
			nid: {
				type: [Number, String],
				default: ''
			},
		},
		data() {
			return {
				searchContent: "",
				dataList: [],
				navigateFlag: false,
				pulling: false,
				refreshing: false,
				refreshFlag: false,
				refreshText: "",
				isLoading: false,
				isNoData: false,
				pulling: false,
				angle: 0,
				loadingMoreText: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				requestParams: {},
				refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="
			}
		},
		created() {
			this.pullTimer = null;
			this.loadData()
		},
		methods: {
			loadData(refresh) {
				if (this.isLoading) {
					return;
				}
				this.isLoading = true;
				this.isNoData = false;
				getRobotList({
				}, (e) => {
					this.isLoading = false;
					if (refresh) {
						this.refreshing = false;
						this.refreshFlag = false;
						this.refreshText = "已刷新";
						if (this.pullTimer) {
							clearTimeout(this.pullTimer);
						}
						this.pullTimer = setTimeout(() => {
							this.pulling = false;
						}, 1000); 
					}
				}).then(result => {
					let data_list = result;
					let namelist = []
					let arr = []
					try{
						data_list.map((item,index) =>{
							if(!namelist.includes(item.usePlace)){
								namelist.push(item.usePlace)
								arr[index] = {
									name:item.usePlace,
									list:[
										{
											...item
										}
									]
								}
							}
							else{
								let ind = namelist.indexOf(item.usePlace)
								arr[ind].list.push(item)
							}
						})
					}catch(e){
						console.log(e)
					}
					this.dataList = arr;
					if (this.dataList.length == 0) {
						this.isNoData = true
					}
					this.isLoading = false;

				}).catch(e => {

				})
			},
			clear() {
				this.dataList = [];
			},
			refreshData() {
				if (this.isLoading) {
					return;
				}
				this.pulling = true;
				this.refreshing = true;
				this.refreshText = "正在刷新...";
				this.clear()
				this.loadData(true);
			},
			onrefresh(e) {
				console.log(e)
				this.isNoData = false
				this.refreshData();
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				this.pulling = false;

				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
		}
	}
</script>

<style scoped >
	.creatView {
		display: flex;
		justify-content: center;
		align-items: center; 
		flex-direction: column;
		
	}
	.c-te{
		color: #0581FD;
		padding:30rpx;
		font-size: 30rpx;
	}
	.imsa {
		margin-top:260rpx;
		width: 387rpx;
		height: 200rpx;
	}
	.no-data {
		flex: 1;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.page-news {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.listview {
		position: absolute;
		left: 0;
		background-color: #F9F9F9;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
	}
	.robot{
		position: absolute;
		left: 0;
		background-color: #F9F9F9;
		top: 0rpx;
		right: 0;
		bottom: 0;
	}
	.refresh {
		justify-content: center;
	}

	.refresh-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		width: 750rpx;
		height: 64px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 32px;
		height: 32px;
		transition-duration: .5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		color: gray;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28upx;
		color: #999;
	}
</style>