his_user_miniapp/pages_index/vesselList.vue

<template>
	<view class="content">
		<view class="top-box">
			<!-- 搜索框 -->
			<view class="search-cont">
				<view class="inner">
					<image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="输入关键字搜索" confirm-type="search" @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
			<view class="tabs">
				 <u-tabs
				  :scrollable="false"
				  :list="tabs"  
				  lineColor="#C39A58"
				 @change="tabChange">
				 </u-tabs>
			</view>
		</view>
		<view class="cont-box">
			<view class="left">
				<view class="items">
					<view v-if="tabIndex==1" @click="vesselClick(item)" v-for="item in vesselOptions" :class="item.dictValue==vessel?'item ellipsis active':'item ellipsis'">
						<text class="line" v-if="item.dictValue==vessel"></text>
						{{$parseText(item.dictLabel,4)}}
					</view>
					<view v-if="tabIndex==2" @click="regionClick(item)" v-for="item in regionOptions" :class="item.dictLabel==region?'item ellipsis active':'item ellipsis'">
						<text class="line" v-if="item.dictLabel==region"></text>
						{{$parseText(item.dictLabel,4)}}
					</view>
				 
				</view>
			</view>
			<view class="right" >
				<view class="title">{{title}}</view>
				<scroll-view @scrolltolower="scrolltolower" scroll-y="true"  style="height: calc(100vh - 180rpx);">
				<view class="items">
					<view class="r-item" @click="showDetail(item)" v-for="item in dataList">
						<view class="r-left">{{item.vesselName}}</view>
						<view class="r-right">
							<image src="../static/images/fire.png"></image>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>
		 
		
	</view>
</template>

<script>
	import {getDictByKey} from '@/api/common.js'
	import {getVesselList} from '@/api/index.js'
	export default {
		data() {
			return {
				tabIndex:1,
				vessel:"",
				region:"",
				title:"",
				pageNum:1,
				pageSize:20,
				vesselOptions:[],
				regionOptions:[],
				tabs: [
					{name:"按经络查询",id:"1"},
					{name:"按部位查询",id:"2"}
				],
				keyword: '',
				dataList: []
			};
		},
		onLoad() {
			this.getDictByKey("sys_vessel");
			this.getDictByKey("sys_vessel_region");
			this.getVesselList()
			
		},
		methods:{
			scrolltolower(e){
				this.pageNum++;
				this.getVesselList()
				console.log(e)
			},
			regionClick(item){
				this.vessel=""
				this.region=item.dictLabel;
				this.title=item.dictLabel;
				this.pageNum=1;
				this.getVesselList()
			},
			vesselClick(item){
				this.region=""
				this.vessel=item.dictLabel;
				this.title=item.dictLabel;
				this.pageNum=1;
				this.getVesselList()
			},
			getDictByKey(key){
				var data={key:key}
				getDictByKey(data).then(
					res => {
						if(res.code==200){
							if(key=="sys_vessel"){
								this.vesselOptions=res.data;
							}
							if(key=="sys_vessel_region"){
								this.regionOptions=res.data;
								 
							}
						}
					},
					err => {
					}
				);
				
			},
			tabChange(item) {
				this.tabIndex = item.id
				this.getVesselList()
			},
			doSearch(){
				this.pageNum=1;
				this.getVesselList()
			},
			getVesselList() {
				//联网加载数据
				var that = this;
				var data = {
					vessel:this.vessel,
					region:this.region,
					keyword:this.keyword,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				// uni.showLoading({
				// 	title:"加载中..."
				// })
				getVesselList(data).then(res => {
					// uni.hideLoading()
					if(res.code==200){
						//设置列表数据
						if (this.pageNum == 1) {
							that.dataList = res.data.list; 
							
						} else {
							that.dataList = that.dataList.concat(res.data.list);
							 
						}
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = [];
					}
				});
			},
			 
			// 查看详情
			showDetail(item) {
				uni.navigateTo({
					url: './vesselDetails?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		height: 100%;
		overflow: hidden;
	}
	.top-box{
		width: 100%;
		height: 180rpx;
		background-color: #FFFFFF;
		.search-cont{
			padding: 16upx 30upx;
			.inner{
				box-sizing: border-box;
				width: 100%;
				height: 72upx;
				background: #F7F7F7;
				border-radius: 36upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				.icon-search{
					width: 28upx;
					height: 28upx;
					margin-right: 20upx;
				}
				input{
					height: 60upx;
					line-height: 60upx;
					flex: 1;
				}
			}
		}
		.tabs{
		}
	}
	.cont-box{
		height: calc(100% - 180rpx);
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		.left{
			padding: 30rpx 0rpx;
			width: 240rpx;
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			.items{
				width: 240rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				.item{
					width: 240rpx;
					padding: 0rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: normal;
					color: #111111;
					font-weight: 500;
					line-height: 80upx;
					.line{
						margin-right: 15rpx;
						border-radius: 5rpx;
						width: 8rpx;
						height:30rpx;
						background-color: #C39A58;
					}
					
				}
				.active{
					background-color: #fff;
					font-weight: bold;
					color: #C39A58;
				}
			}
			
		}
		.right{
			padding: 30rpx 15rpx;
			background-color: #fff;
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			width: calc(100% - 240rpx);
			.title{
				font-size: 40upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #C39A58;
				line-height: 80upx;
			}
			.items{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				.r-item{
					line-height: 80rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.r-left{
						flex: 1;
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #080808;
					}
					.r-right{
						padding: 0rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 22rpx;
							height:30rpx;
						}
					}
					
				}
				 
			}
		}
	}
	 
</style>