aiot-app/pages/pda/workOrder/search/index.vue

<template>
	<view class="content-box">

		<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">
			<view class="searchBox rx-bc">
				<input v-model="searchFrom.keyWord" placeholder="请输入关键字搜索" class="searchInput" />

				<view>
					<u-button @click="doSearch" type="success" class="u-reset-button" text="搜索">
					</u-button>
				</view>

			</view>
		</view>

		<view class="list_box">
			<u-list>
				<view v-for="(item,index) in 100">
					<view>{{item}}</view>
				</view>
			</u-list>
		</view>


		<view class="bottom-wrapper rx-bc">
			<view>
				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
				</checkbox>
			</view>
			<view>
				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen" >
					<view class="selBtn"> 选择( {{ checkListLen }} ) </view>
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				searchFrom: {
					keyWord: null
				},

				seletedAll: false, //全选状态
				checkListLen: 0,
			}
		},
		methods: {
			_seletedAll() {
				this.seletedAll = !this.seletedAll
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}

	.searchBox {
		background-color: #dedede;
		height: 100rpx;
		padding: 0 20rpx;

		input {
			height: 80rpx;
			width: 540rpx;
			background: #f9f9f9 !important;

			padding-left: 10rpx;
			border-radius: 5rpx;
		}

	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 6rpx 0;

		.u-list {
			height: 100% !important;
		}
	}

	.bottom-wrapper {
		height: 80rpx;
		background: #fff;
		padding: 0 32rpx;
		
		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color:  $theme-color !important;
		}
	}
</style>