源文件

2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
--- a/jeepay-ui-uapp-agent/components/jeepaySearch/jeepaySearch.vue
+++ b/jeepay-ui-uapp-agent/components/jeepaySearch/jeepaySearch.vue
@@ -0,0 +1,148 @@
+<template>
+	<view class="search-box">
+		<view class="jeepay-search" @touchmove.stop.prevent="moveHandle">
+			<image src="/static/img/list-search.svg" alt="" /><!--放大镜-->
+			<input type="text" v-model="searchText" :placeholder="placeholder" placeholder-style="font-size:28rpx" @focus="focusHandle" @input="changeHandle($event)" :focus="props.isFocus">
+			
+			<!-- 清空图片 -->
+			<image @click="clearText"  src="../../static/img/clear-test.svg" class="clear-text" mode="" v-if="searchBtn && clearTextIsShow"></image>
+			
+			<view class="btn">
+				<!-- <slot v-if="!searchBtn" name="option"></slot> -->
+				<view v-if="searchBtn" @click="searchHandle" class="search-text">
+					搜索
+				</view>
+				
+			</view>
+			
+		</view>
+		<slot v-if="!searchBtn" name="option" class="slot"></slot>
+	</view>
+	<view class="mark" @click="hiddenMask" v-show="searchBtn" @touchmove.stop.prevent="moveHandle">
+	</view>
+</template>
+
+<script setup>
+	import { ref, nextTick, watch } from 'vue'
+	import { onShow } from '@dcloudio/uni-app'
+	const props = defineProps({
+		value: {type: String, default: null},
+		placeholder: {type: String, default: '搜索内容'},
+		isFocus:{type: Boolean, default: false}
+	})
+	
+	let searchText = ref('') // 搜索内容
+	let clearTextIsShow = ref(false) // 清空按钮是否展示
+	
+	// 搜索按钮
+	let searchBtn = ref(false)
+	// 获得焦点
+	const focusHandle = () => {
+		searchBtn.value = true
+		emit('focusHandle')
+	}
+	
+	function hiddenMask() {
+		searchBtn.value = false
+	}
+	onShow(() => {
+		hiddenMask();
+	})
+	//监听搜索框中有无内容
+	watch( () => searchText.value, () => {
+		if(!searchText.value) {
+			clearTextIsShow.value = false
+		} else {
+			clearTextIsShow.value = true
+		}
+	})
+	watch( () => props.value, () => {
+		if(props.value === ''){
+			searchText.value = ''
+		}
+	})
+	
+	// 禁止页码滚动
+	const moveHandle = () => {}
+	
+	const emit = defineEmits(['update:value', 'searchHandle','focusHandle','backPressHandel','orderBackPressHandel'])
+	const changeHandle = (e) => emit('update:value', e.detail.value)
+	const clearText = () => {
+		searchText.value = ''
+		emit('update:value', '')
+	}
+	
+	const searchHandle = () => {
+		searchBtn.value = false
+		emit('searchHandle')
+	}
+	const backPressHandel = ()=>{
+		if(searchBtn.value){
+			searchBtn.value = false
+			return true
+		}
+		return false
+	}
+	const orderBackPressHandel = ()=>{
+		if(searchBtn.value){
+			searchBtn.value = false
+		}
+	}
+defineExpose({ backPressHandel,orderBackPressHandel });
+</script>
+
+<style scoped lang="scss">
+	.mark {
+		position: absolute; 
+		width: 100%;
+		height: calc(100vh - 180rpx);
+		top: 120rpx;
+		left: 0;
+		z-index:99;
+		background-color: rgba(0,0,0, 0.5);
+	}
+	.search-box{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #f2f2f2;
+		border-bottom: 1rpx solid #e6e6e6;
+		
+		.jeepay-search {
+			display: flex;
+			padding: 30rpx;
+			box-sizing: border-box;
+			align-items:center;
+			position: relative;
+			height: 70rpx;
+			width: 100%;
+			background-color: #FFF;
+			margin: 20rpx 30rpx 30rpx;
+			border-radius: 12rpx;
+			
+			image {
+				width: 26rpx;
+				height: 26rpx;
+				margin-right: 25rpx;
+			}
+			input {
+				flex-grow: 1;
+				margin-right: 20rpx;
+			}
+			.btn{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.search-text {
+			color: $uni-color-primary;
+			width: 90rpx;
+		}
+		.clear-text {
+			width: 20rpx;
+			height: 20rpx;
+		}
+	}
+
+</style>