aiot-app/pages/saleManage/contact/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="公海客户" @clickLeft="back">
			<!--右菜单-->
			<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="$refs.treePicker._show()"
					text="选择分类"></u-button>
			</template>
		</uni-nav-bar>

		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="searchVal" placeholder="名称">
				</uni-easyinput>
			</uni-section>

			<button class="search_btn" @click="doSearch">搜索</button>

			<image class="menu_icon" src="~@/static/pda/menu.svg"></image>



		</view>
		<u-list @scrolltolower="scrolltolower">
			<contactList :btnList="btnList" ref="contactListRef"></contactList>

		</u-list>
		<view class="add" @click="add">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择分类"
			:localdata="classificationList" valueKey="id" textKey="name" />
	</view>
</template>

<script>
	import contactList from './contactList.vue'

	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import {
		getTreeByPid,
	} from '@/api/classifyManage'
	export default {
		components: {
			contactList,
			baTreePicker
		},
		data() {
			return {

				treeList: [],
				btnList: [{
					name: '详情',
					apiName: '',
					btnType: 'primary',
					type: '1',
					pageUrl: '/pages/saleManage/contact/add'
				}, {
					name: '申请',
					apiName: 'addApply',
					btnType: 'primary',
					type: '2',
				}],
				searchVal: '',
				categoryLevelId: '',
				classificationList:[]
			}
		},

		async onLoad() {
			getTreeByPid(17).then(res => {
				this.classificationList = res.data
			
			});
			this.$nextTick(() => {
				this.$refs.contactListRef.getList({
					type: 1,
					assignStatus: 0,
				})
			})
		},

		methods: {
			doSearch(){
				this.$nextTick(() => {
					this.$refs.contactListRef.doSearch({
						type: 1,
						name: this.searchVal,
						categoryId: this.categoryLevelId,
						assignStatus: 0,
					})
				})
			},
			confirm([id]) {
				this.categoryLevelId = id
				this.doSearch()
			},
			add() {
				uni.navigateTo({
					url: '/pages/saleManage/contact/add'
				})
			},
			scrolltolower() {
				this.$refs.contactListRef.getList({
					type: 1,
					assignStatus: 0,
					name: this.searchVal,
					categoryId: this.categoryLevelId,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;
	
		/deep/.uni-section {
			margin-top: 0px;
		}
	
		/deep/.uni-section-header {
			padding: 0px;
	
		}
	
		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}
	
		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}
</style>