index.vue
1.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
<!-- 公用nav -->
<view class="navBox">
<view class="search ">
<!-- 头部自定义导航 -->
<!-- <uni-nav-bar right-text="取消" @clickRight="handleCancel"> -->
<view class="uni-navbar">
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input
confirm-type="search"
class="nav-bar-input"
type="text"
v-model="searchVal"
clearable
placeholder="输入四位或完整运单号/手机号、姓名"
@confirm="handleBlur"
@input="handleSearch"
/>
<text v-if="searchVal" class="icon_close" @click="handleClear"></text>
<!-- <view class="scanIcon" @click="handleQr"></view> -->
</view>
<view class="concelBox" @click="handleCancel" v-if="isShowCancel">取消</view>
</view>
<!-- </uni-nav-bar> -->
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import {ref} from 'vue';
import {useStore} from 'vuex';
const store = useStore(); //vuex获取、储存数据
const users = store.state.user;
const props = defineProps({
isShowCancel:{
type:Boolean,
default: false
}
})
// ------定义变量------
const emit = defineEmits('handleSearch'); //子组件向父组件事件传递
const searchVal = ref('');
// -----方法------
// 取消搜索
const handleCancel = () => {
searchVal.value = '';
// 设置搜索的内容，从详情页返回搜索页的时候显示默认搜索的内容
store.commit('user/setSearchText', '');
if(users.taskStatus===-1){
uni.redirectTo({
url: '/pages/my/index'
});
}else{
emit('goBack')
}
};
// 搜索
const handleSearch = () => {
emit('handleSearch', searchVal);
};
// 离开input框
const handleBlur =()=>{
emit('handleBlur')
}
// 清空
const handleClear=()=>{
searchVal.value = '';
emit('clearSearchData')
}
// 扫二维码
const handleQr = () => {};
// 暴漏给父组件
defineExpose({
searchVal
});
</script>