SxsnWechat/components/CusSearch/index.vue

<template>
	<view class="search adfac">
		<image class="icon" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/d568b395-8490-4e44-af30-7fb5288b8bad.png"></image>
		<div class="input">
			<up-input :placeholder="placeholder" v-model="keyword" border="none" style="font-size: 26rpx;" @confirm="handleSearch"></up-input>
		</div>
		<div class="btn" @tap="handleSearch" v-if="!isCancel">搜索</div>
		<div class="btn" @tap="handleCancel" v-else>取消</div>
	</view>
</template>

<script setup name="CusSearch">
	defineProps({
		placeholder:{
			typeof: String,
			default: '查找公益活动'
		},
		isCancel:{
			typeof: Boolean,
			default: false
		}
	})
	
	import { ref } from 'vue'
	
	const keyword = ref('')
	const emits = defineEmits(['handleSearch','handleCancel'])
	
	const handleSearch = () => {
		emits('handleSearch',keyword.value);
	}
	const handleCancel = () => {
		emits('handleCancel');
	}
</script>

<style scoped lang="scss">
	.search{
		width: 100%;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 6rpx 6rpx 6rpx 26rpx;
		box-sizing: border-box;
		.icon{
			width: 36rpx;
			height: 36rpx;
		}
		.input{
			flex: 1;
			padding: 0 11rpx;
			box-sizing: border-box;
		}
		.btn{
			padding: 9rpx 27rpx;
			background: #B7F358;
			border-radius: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #252525;
			line-height: 37rpx;
		}
	}
</style>