仪器搜索

pages.json

@@ -31,6 +31,11 @@
 			"style": {
 				"navigationBarTitleText": "搜索供应商"
 			}
+		},{
+			"path": "pages/search/search-instrument",
+			"style": {
+				"navigationBarTitleText": "搜索仪器"
+			}
 		},{
 			"path": "pages/tabBar/cart/cart",
 			"style": {

pages/search/search-instrument.vue

@@ -0,0 +1,363 @@
+<template>
+	<view class="container supplier clearfix">
+		<view class="supplier-search clearfix">
+			<view class="search-from name">
+				<text class="iconfont icon-sousuo"></text>
+				<input class="input" 
+					   type="text" 
+					   confirm-type="search" 
+					   v-model="searchInputVal" 
+					   @input="onShowClose" 
+					   @confirm="initsupplierList()" 
+					   placeholder="请输入仪器名称" 
+					   maxlength="16"/>
+				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
+			</view>
+			<view class="search-btn">
+				<button class="search-btn" type="default" @click.stop="searchsupplierList">搜索</button>
+			</view>
+		</view>
+		<view class="supplier-main">
+			<view v-if="isEmpty" class="empty-container">
+				<image class="supplier-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png" mode="aspectFit"></image>
+				<view class="txt">暂无供应商数据</view>
+			</view>
+			<view v-else class="supplier-list">
+					<view class="list clearfix" v-for="(item, index) in list" :key="index">
+						<image class="pros-item-image" :src="item.image" mode="scaleToFill"></image>
+						<view class="pros-name">{{ item.name }}</view>
+					</view>
+					<!--加载loadding-->
+					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
+					<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
+					<!--加载loadding-->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import authorize from '@/common/config/authorize.js'	
+	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
+	import tuiNomore from "@/components/tui-components/nomore/nomore"
+	import uniStars from '@/components/uni-stars/uni-stars.vue'
+	
+	import { getFindAllsupplierList } from "@/api/seller.js"
+	export default {
+		components:{
+			tuiLoadmore,
+			tuiNomore,
+			uniStars
+		},
+		data() {
+			return {
+				iconClass:'icon-aixin',
+				iconColor:'#ff9100',
+				serviceProviderId:'',
+				isShowClose:false,
+				searchInputVal:'',
+				isEmpty:false,
+				nomoreText: '上拉显示更多',
+				pageNum:1,
+				pageSize:10,
+				hasNextPage:false,
+				loadding: false,
+				pullUpOn: true,
+				pullFlag: true,
+				allowDataStatus:true,
+				wrapperHeight:'100%',
+				scrollHeight:'',
+				deleteAddressId:'',
+				currPage:'',//当前页面
+				prevPage:'',//上一个页面
+				tabCurrentIndex:0,
+				listStatus:1,
+				list:[
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+							{
+								image:'https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png',
+								name:'北京恩盛众成国际贸易有限公司',
+							},
+						],
+				isIphoneX:this.$store.state.isIphoneX,
+				show_index:0,//控制显示那个组件
+			}
+		},
+		onLoad(){				
+			this.setScrollHeight();
+		},
+		methods: {
+			setScrollHeight() {
+				// 窗口高度 - 底部距离
+				setTimeout(()=> {
+					const query = wx.createSelectorQuery().in(this);
+					query.selectAll('.add-btn').boundingClientRect();
+					query.exec(res => {
+						if(res[0][0]){
+							let winHeight = this.$api.getWindowHeight(),
+								eleTop = res[0][0].top - 1;
+								this.scrollHeight =  eleTop;
+						}
+					})
+				}, 500)
+			},
+			searchsupplierList(){
+				this.pageNum=1
+				this.initsupplierList()
+			},
+			initsupplierList(){	
+				let params = { searchWord:this.searchInputVal,pageNum:1,pageSize:this.pageSize }
+				getFindAllsupplierList(params).then(response =>{
+					let responseData = response.data
+					if(responseData.results&&responseData.results.length > 0){
+						this.isEmpty = false
+						this.hasNextPage = response.data.hasNextPage
+						this.supplierList =responseData.results
+						this.pullFlag = false;
+						setTimeout(()=>{this.pullFlag = true;},500)
+						if(this.hasNextPage){
+							this.pullUpOn = false
+							this.nomoreText = '上拉显示更多'
+						}else{
+							this.pullUpOn = true
+							this.loadding = false
+							this.nomoreText = '已至底部'
+						}
+					}else{
+						this.isEmpty = true
+					}
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},	
+			getOnReachBottomData(){
+				this.pageNum+=1
+				let params = {searchWord:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize }
+				getFindAllsupplierList(params).then(response =>{
+					let responseData = response.data
+					if(responseData.results&&responseData.results.length > 0){
+						this.hasNextPage = response.data.hasNextPage
+						this.supplierList = this.supplierList.concat(responseData.results) 
+						this.pullFlag = false;// 防上拉暴滑
+						setTimeout(()=>{this.pullFlag = true;},500)
+						if(this.hasNextPage){
+							this.pullUpOn = false
+							this.nomoreText = '上拉显示更多'
+						}else{
+							this.pullUpOn = false
+							this.loadding = false
+							this.nomoreText = '已至底部'
+						}
+					}
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},
+			goOperator(item){
+				this.$api.setStorage('orderUserInfo',item)
+				this.$api.navigateTo('/seller/pages/supplier/addoperator')
+			},
+			onShowClose () {//输入框失去焦点时触发
+				if(this.searchInputVal != ''){
+					this.isShowClose = true
+				}else{					
+					this.isShowClose = false
+					this.pageNum=1
+					this.initsupplierList()
+				}
+			},
+			delInputText(){//清除输入框内容
+				this.searchInputVal = ''
+				this.isShowClose = false
+				this.pageNum=1
+				this.initsupplierList()
+			},
+			hidePhone(val){
+				let phone
+				if(val==null || val==""){
+					phone = ""	
+				}else{
+					phone = this.$reg.hidePhone(val)
+				}
+				return phone
+			},
+			checkData (value){
+				let data;
+				if(value == null || value ==""){
+					data = ''
+				}else{
+					data = value
+				}
+				return data
+			},
+			desensitizationName(val){
+				let name = this.$reg.desensitizationName(val)
+				return name
+			}
+		},
+		onReachBottom() {
+			if(this.hasNextPage){
+				this.loadding = true
+				this.pullUpOn = true
+				this.getOnReachBottomData()
+			}	
+		},
+		onShow() {
+			this.$api.getStorage().then(response =>{
+				this.serviceProviderId = response.serviceProviderID
+				this.pageNum = 1;
+				this.initsupplierList();
+			})
+		}
+	}
+</script>
+
+<style lang='scss'>
+	page {
+		height: auto;
+	}
+	page,.container{
+		/* padding-bottom: 120upx; */
+		background: #F7F7F7;
+	}
+	.container{
+		position: relative;
+	}
+	.supplier {
+		width: 100%;
+		height: auto;
+		box-sizing: border-box;
+	}
+	.supplier-search{
+		height: 64rpx;
+		width: 702rpx;
+		padding: 24rpx;
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		.search-from{
+			width: 582rpx;
+			height: 64rpx;
+			background: #F7F7F7;
+			border-radius: 32rpx;
+			float: left;
+			position: relative;
+			.input{
+				width: 500rpx;
+				height: 64rpx;
+				float: left;
+				line-height: 64rpx;
+				color: $text-color;
+				font-size: $font-size-24;
+			}
+			.icon-sousuo{
+				width: 64rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				text-align: center;
+				display: block;
+				font-size: $font-size-38;
+				float: left;
+				color: #999999;
+			}
+			.icon-shanchu1{
+				font-size: $font-size-32;
+				color: #999999;
+				position: absolute;
+				width: 64rpx;
+				height: 64rpx;
+				line-height: 64rpx;
+				text-align: center;
+				top: 0;
+				right: 0;
+				z-index: 10;
+			}
+		}
+		.search-btn{
+			width: 120rpx;
+			line-height: 64rpx;
+			text-align: center;
+			font-size: $font-size-28;
+			color: $text-color;
+			float: left;
+			background: #FFFFFF;
+		}
+	}
+	.supplier-main{
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		background-color:#FFFFFF ;
+		padding-top: 112rpx;
+	}
+	.list{
+		width: 340rpx;
+		height: 301rpx;
+		float: left;
+		margin-right: 20rpx;
+		margin-top: 10rpx;
+		margin-bottom: 10rpx;
+		border-radius: 6rpx;
+		background-color: #FFFFFF;
+		&:nth-child(2n){
+			margin-right: 0;
+		}
+		.pros-item-image{
+			width: 340rpx;
+			height: 227rpx;
+			display: block;
+			float: left;
+			border-radius: 6rpx 6rpx 0 0;
+		}
+		.pros-name{
+			width: 100%;
+			height: 74rpx;
+			background-color: #FFFFFF;
+			line-height: 74rpx;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			font-size: $font-size-24;
+			color: #666666;
+			white-space: normal;
+			word-break: break-all;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 1;
+			text-align: center;
+		}
+	}
+
+</style>
+