serverSearch.vue
3.16 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<div>
<div class="box">
<el-card class="mt20 mb20" :body-style="{'padding':'0'}">
<div class="lineHead">
<h3>{{ language==0?'服务查询': 'Service Search' }}</h3>
</div>
<div class="pd20">
<div class="topsearch">
<el-input v-if="activeTab==0" placeholder="请输入护照号搜索"/>
<el-input v-else placeholder="请输入姓名搜索"/>
<el-button class="btn-lineG" type="primary" @click="search">
<el-icon class="mr20">
<Search/>
</el-icon>
{{ language==0?'搜索': 'Search' }}
</el-button>
</div>
<div class="stab">
<div :class="activeTab==0?'active':''" @click="activeTab=0">
<img v-show="activeTab!=0" src="@/assets/img/tag01@2x.png"/>
<img v-show="activeTab==0" src="@/assets/img/tag01_dwn@2x.png"/>
{{language==0?'签证服务':''}}
</div>
<div :class="activeTab==1?'active':''" @click="activeTab=1">
<img v-show="activeTab!=1" src="@/assets/img/tag02@2x.png"/>
<img v-show="activeTab==1" src="@/assets/img/tag02_dwn@2x.png"/>
{{language==0?'酒店预定':''}}
</div>
<div :class="activeTab==2?'active':''" @click="activeTab=2">
<img v-show="activeTab!=2" src="@/assets/img/tag03@2x.png"/>
<img v-show="activeTab==2" src="@/assets/img/tag03_dwn@2x.png"/>
{{language==0?'接送服务':''}}
</div>
</div>
<div>
<div v-for="item in list"></div>
</div>
<el-empty v-if="list.length==0"/>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref, computed, onMounted} from 'vue'
import {queryTicket} from "@/apiPc/common";
import {ElMessage} from "element-plus";
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
const activeTab = ref(0)
const form = ref({})
const list = ref([])
const query = ref({
status: 1
})
const loading = ref(false)
function search() {
if (!query.value.idCard) {
ElMessage.warning('请输入证件号')
return
}
loading.value = true
queryTicket(query.value).then(res => {
list.value = res.data
for (let bill of list.value) {
// p.idCard = p.idCard.substring(0,4)+'****'+p.idCard.substring(8,p.idCard.length)
const pattern = new RegExp(query.value.idCard, 'gi')
bill.idCard = bill.idCard.replace(pattern, `<span class="highlight">$&</span>`)
}
loading.value = false
})
}
</script>
<style scoped lang="scss">
.highlight {
background: yellow;
}
.topsearch{display: flex;gap:10px;
.el-input {--el-input-bg-color: #F5F7F9;height: 50px;
--el-input-border-radius: 10px;}
.btn-lineG{border-radius: 10px;height: 50px;width: 130px;font-size: 20px;}
}
.stab{display: flex;gap: 20px;margin: 20px 0 0 ;
div{font-weight: 400;padding: 10px 0;display: flex;align-items: center;
font-size: 18px;cursor: pointer;
color: #4C5359;
img{height: 30px;}
}
.active{color: #030303;border-bottom: 2px solid #030303;}
}
</style>