aike/emis-sapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uu

Browse Source
This commit is contained in:
aihe 2023-12-06 19:54:44 +08:00
parent 045619b37a
commit 5f92b1982a
2 changed files with 62 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
components/tpx-search/tpx-search.vue
View File

@ -1,23 +1,49 @@
<template>
<view>
<u-row justify="start">
<view v-for="(item) in list" @click="handleChangeTab(item)"
:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
<view class="stai-text">
{{item.title}}
<view class="stai-chk-line"></view>
</view>
</view>
</u-row>
<view class="sch-cont">
<view>
<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;`"
@focus="handleSwitchFouce()" @blur="handleSwitchFouce()" @confirm="triggerChange()" @change="handleChange()">
<!-- <template v-slot:prefix>
<u-icon name="search" size="32"></u-icon>
</template> -->
<template v-slot:suffix>
<u-row>
<view v-if="focused && keyword.length > 0" style="0 20rpx 0 0">
<u-icon @click="handleClear()" color="#999" name="close-circle-fill" size="36"></u-icon>
</view>
<view>
<u-icon @click="triggerChange()" name="search" size="40" margin="0 0 0 20rpx"></u-icon>
</view>
</u-row>
<!-- <u-button type="primary" shape="circle" custom-style="margin:0;height: 50rpx;">搜索</u-button> -->
</template>
</u-input>
</view>
</view>
</template>
<script>
export default {
props: {
list: {
timelyTrigger: {
default () {
return []
return true
}
},
placeholder: {
default () {
return ''
}
},
bgColor: {
default () {
return '#f2f2f2'
}
},
height: {
default () {
return 50
}
},
value: {
@ -25,15 +51,12 @@
return ''
}
},
mode: {
default () {
return 'primary' // primary info
}
}
},
data() {
return {
focused: false,
keyword: this.value
}
},
created() {
@ -45,52 +68,32 @@
destroyed() {},
methods: {
handleChangeTab(cur){
this.$emit('tabchange', cur.val)
this.$emit('update:value', cur.val)
handleSwitchFouce() {
setTimeout(()=> {
this.focused = !this.focused
}, 100)
},
handleChange() {
if(this.timelyTrigger) {
this.triggerChange()
}
},
handleClear( ) {
debugger
this.keyword = ''
this.triggerChange()
},
triggerChange() {
let val = this.keyword
this.$emit('change', val)
this.$emit('update:value', val)
}
}
}
</script>
<style scoped lang="scss">
.sta-item {
flex: 1;
padding: 0 0 30rpx 0;
margin-right: 30rpx;
.sch-cont{
position: relative;
font-size: 28rpx;
color: #FFF;
opacity: 0.8;
.stai-text {
position: relative;
display: inline-block;
}
&.active {
font-weight: 600;
opacity: 1;
.stai-text {
.stai-chk-line{
content: ' ';
position: absolute;
bottom: -30rpx;
left: 0;
margin-left: 10%;
width: 80%;
height: 4rpx;
background: #FFF;
border-radius: 2rpx;
}
}
}
&.stai-primary{
color: #0E0708;
&.active {
.stai-chk-line{
background: $u-primary;
}
}
}
}
</style>

3
pages/tabBar/search/search.vue
View File

@ -4,8 +4,7 @@
<view class="customer_nav_bar">
<view class="com-jianju" style="width: 490rpx;">
<!-- 关键字搜索框 -->
<u-search placeholder="请输入运单号/订单号" v-model="searchParam.keyword" height="56" search-icon-size="40"
:clearabled="true" @change="(e)=> { handleSearchParamChange() }" :show-action="false"></u-search>
<tpx-search placeholder="请输入运单号/订单号" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" bgColor="#FFF" :timelyTrigger="false"></tpx-search>
</view>
<view class="com-jianju" style="padding-top: 40rpx;">