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> <template>
<view> <view class="sch-cont">
<u-row justify="start"> <view>
<view v-for="(item) in list" @click="handleChangeTab(item)" <u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;`"
:class="`sta-item ${value == item.val?'active':''} stai-${mode}`"> @focus="handleSwitchFouce()" @blur="handleSwitchFouce()" @confirm="triggerChange()" @change="handleChange()">
<view class="stai-text"> <!-- <template v-slot:prefix>
{{item.title}} <u-icon name="search" size="32"></u-icon>
<view class="stai-chk-line"></view> </template> -->
</view> <template v-slot:suffix>
</view> <u-row>
</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> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
list: { timelyTrigger: {
default () { default () {
return [] return true
}
},
placeholder: {
default () {
return ''
}
},
bgColor: {
default () {
return '#f2f2f2'
}
},
height: {
default () {
return 50
} }
}, },
value: { value: {
@ -25,15 +51,12 @@
return '' return ''
} }
}, },
mode: {
default () {
return 'primary' // primary info
}
}
}, },
data() { data() {
return { return {
focused: false,
keyword: this.value
} }
}, },
created() { created() {
@ -45,52 +68,32 @@
destroyed() {}, destroyed() {},
methods: { methods: {
handleChangeTab(cur){ handleSwitchFouce() {
this.$emit('tabchange', cur.val) setTimeout(()=> {
this.$emit('update:value', cur.val) 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sta-item { .sch-cont{
flex: 1;
padding: 0 0 30rpx 0;
margin-right: 30rpx;
position: relative; 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> </style>

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

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