crm-xcx/pages-approve/search/index.vue

<template>
	<view class="search-page white-wrap">
		<van-sticky>
			<view class="white-wrap" style="padding: 20rpx 34rpx 10rpx 34rpx;">
				<van-search use-left-icon-slot use-action-slot shape="round" focus :placeholder="placeholder" @change="onChange"
					@search="onSearch" custom-class="search-box" field-class="search-con">
					<view slot="left-icon">
						<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
					</view>
					<view slot="action" @click="onSearch" class="search-btn">搜索</view>
				</van-search>
			</view>
		</van-sticky>
		<van-empty description="未找到搜索结果" :image="require('@/static/empty.png')" v-if="empty" />
		<view class="search-result" v-else>
			<view class="result-item flex" v-for="item in list" :key="item" @click="handleGoDetail(item)">
				<image src="../static/search-icon.png" mode="aspectFill" class="search-icon"></image>
				<view class="con van-ellipsis">{{item}}</view>
				<image src="../static/click-icon.png" mode="aspectFill" class="click-icon"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {apiCustomeSearch} from '@/api/approve/custome.js'
	import {apiContractSearch} from '@/api/approve/contract.js'
	import {apiSealSearch} from '@/api/approve/seal.js'
	export default {
		data() {
			return {
				value: '',
				placeholder: '',
				type: '',
				list: [],
				empty:false,
			}
		},
		onLoad(options) {
			this.type = options.type
			this.initPage(options.type)
		},
		methods: {
			// 初始化界面
			initPage(type) {
				let navBarTitle = ''
				switch (type) {
					case 'custome':
						navBarTitle = '客户审批'
						this.placeholder = '客户名称/社会信用码'
						break;
					case 'contract':
						navBarTitle = '合同审批'
						this.placeholder = '客户名称/社会信用码'
						break;
					case 'seal':
						navBarTitle = '用印审批'
						this.placeholder = '客户名称/社会信用码'
						break;
				}
				uni.setNavigationBarTitle({
					title: navBarTitle
				})
			},

			//跳转搜索结果页
			handleGoDetail(e) {
				// 如果是合同则跳转合同搜索结果页 否则跳转公共的搜索结果页
				if(this.type==='contract'){
					uni.navigateTo({
						url:"/pages-approve/contract/search?val="+e
					})
				}else{
					uni.navigateTo({
						url:`./result?type=${this.type}&val=${e}`
					})
				}
			},

			// 客户审批搜索
			async handleCustome() {
				const res = await apiCustomeSearch({
					Keyword: this.value,
				})
				if (res.code === 200) {
					
					this.list = res.data
					if(res.data.length===0){
						this.empty=true
					}else{
						this.empty=false
					}
				}
			},

			// 合同审批搜索
			async handleContract() {
				const res = await apiContractSearch({
					Keyword: this.value,
				})
				if (res.code === 200) {
					this.list = res.data
					if(res.data.length===0){
						this.empty=true
					}else{
						this.empty=false
					}
				}
			},
			
			//用印搜索
			async handleSeal(){
				const res=await apiSealSearch({
					Keyword: this.value,
				})
				if (res.code === 200) {
					this.list = res.data
					if(res.data.length===0){
						this.empty=true
					}else{
						this.empty=false
					}
				}
			},

			onChange(e) {
				this.value = e.detail
			},

			onSearch() {
				if(!this.value){
					uni.showToast({
						title:'请输入搜索关键字',
						icon:'none'
					})
					return
				}
				if (this.type === 'custome') {
					this.handleCustome()
				}

				if (this.type === 'contract') {
					this.handleContract()
				}
				
				if(this.type==='seal'){
					this.handleSeal()
				}
			}
		}
	}
</script>

<style lang="scss">
	.search-page {
		width: 100%;
		min-height: 100vh;
		// padding: 20rpx 34rpx;
	}

	.search-box {
		border: 1px solid #3385FF;
		padding: 0 !important;
		border-radius: 60rpx;
		background-color: #fff !important;
	}

	.search-con {
		background-color: #fff !important;
	}

	.van-search__content {
		background-color: #fff !important;
		padding-left: 30rpx !important;
	}

	.search-btn {
		position: relative;
		color: #3385FF;

		&::before {
			content: '';
			display: block;
			width: 1px;
			height: 60%;
			background-color: #D1D1D1;
			position: absolute;
			left: -16rpx;
			top: 20%;
		}
	}

	.search-icon {
		width: 40rpx;
		height: 40rpx;
		display: block;
		position: relative;
		top: 4rpx;
		margin-right: 20rpx;
	}

	.click-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.search-result{
		padding: 20rpx 34rpx;
	}
	.result-item {
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #EBEBEB;

		.con {
			flex: 1;
			margin-right: 20rpx;
		}
	}
</style>