<template>
|
<view class="serach">
|
<view class="left-box" @tap="onClickLeft">
|
<u-icon name="arrow-left" size="40" color="#666"></u-icon>
|
</view>
|
<view class="content" :style="{ 'border-radius': radius + 'px' }">
|
<!-- HM修改 增加进入输入状态的点击范围 -->
|
<view class="content-box" :class="{ center: mode === 2 }">
|
<u-icon name="search" size="32" style="padding:0 15rpx;"></u-icon>
|
<!-- HM修改 增加placeholder input confirm-type confirm-->
|
<input style="width:100%; " :placeholder="placeholder" placeholder-class="placeholder-color"
|
@input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input"
|
:class="{ center: !active && mode === 2 }" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur" />
|
<u-icon name="close" v-if="isDelShow" style="padding:0 30rpx;" @click="clear"></u-icon>
|
</view>
|
|
</view>
|
<view class="button active" >
|
<view v-if="isShowSeachGoods !=true" class="button-item">
|
<div @click="out()">取消</div>
|
</view>
|
|
<view v-else class="button-item">
|
<u-icon name="grid-fill" size="50" @click="handelListClass()" v-if="!switchLayout"></u-icon>
|
<u-icon v-else @click="handelListClass()" name="list-dot" size="50"></u-icon>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
|
|
export default {
|
components: {UIcon},
|
props: {
|
mode: {
|
value: Number,
|
default: 1,
|
},
|
//HM修改 定义默认搜索关键词(水印文字)
|
placeholder: {
|
value: String,
|
default: "请输入搜索内容",
|
},
|
value: {
|
type: String,
|
default: "",
|
},
|
// 默认半径为60
|
radius: {
|
value: String,
|
default: 60,
|
},
|
// 是否获取焦点
|
isFocusVal: {
|
value: Boolean,
|
default: true,
|
},
|
},
|
data() {
|
return {
|
isShowSeachGoods: false, //是否显示查询的商品
|
active: false, //是否选中
|
inputVal: "", //Input中内容
|
isDelShow: false, //是否显示右侧删除icon
|
isFocus: false, //是否获取焦点
|
switchLayout: true, //切换当前商品的布局，默认为两列
|
};
|
},
|
mounted() {
|
this.isFocus = this.isFocusVal;
|
},
|
methods: {
|
//
|
out() {
|
uni.reLaunch({
|
url: "/pages/tabbar/home/index",
|
});
|
},
|
// 切换排列顺序
|
handelListClass() {
|
this.switchLayout = !this.switchLayout;
|
this.$emit("SwitchType");
|
},
|
//HM修改 触发组件confirm事件
|
triggerConfirm() {
|
this.$emit("confirm", false);
|
uni.hideKeyboard();
|
},
|
//HM修改 触发组件input事件
|
inputChange(event) {
|
var keyword = event.detail.value;
|
this.$emit("input", keyword);
|
if (this.inputVal) {
|
this.isDelShow = true;
|
}
|
},
|
focus() {
|
this.active = true;
|
//HM修改 增加获取焦点判断
|
if (this.inputVal) {
|
this.isDelShow = true;
|
}
|
},
|
blur() {
|
this.isFocus = false;
|
if (!this.inputVal) {
|
this.active = false;
|
}
|
},
|
clear() {
|
//HM修改 收起键盘
|
uni.hideKeyboard();
|
this.isFocus = false;
|
this.inputVal = "";
|
this.active = false;
|
//HM修改 清空内容时候触发组件input
|
this.$emit("input", "");
|
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索
|
},
|
|
/**
|
* 回退到上一级
|
*/
|
onClickLeft() {
|
const paths = getCurrentPages();
|
console.log(paths)
|
if(paths.length > 1){
|
uni.navigateBack();
|
}else{
|
uni.switchTab({
|
url:"/pages/tabbar/home/index"
|
})
|
}
|
},
|
|
/**
|
* 内容为空时，输入默认关键字
|
*/
|
search() {
|
if (!this.inputVal) {
|
if (this.searchName == "取消") {
|
uni.hideKeyboard();
|
this.isFocus = false;
|
this.active = false;
|
return;
|
}
|
}
|
this.$emit("search", this.inputVal ? this.inputVal : this.placeholder);
|
},
|
},
|
watch: {
|
/**
|
* 监听当前是否有值 是否显示清除图标
|
*/
|
inputVal(newVal) {
|
newVal ? (this.isDelShow = true) : (this.isDelShow = false);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.serach {
|
display: flex;
|
width: 100%;
|
//border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框
|
box-sizing: border-box;
|
font-size: $uni-font-size-base;
|
|
.left-box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 15%;
|
/* #ifndef APP-NVUE */
|
text-align: center;
|
// display: flex;
|
// /* #endif */
|
}
|
|
.content {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 70rpx;
|
color: #999;
|
background: #eee;
|
overflow: hidden;
|
transition: all 0.2s linear;
|
.content-box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
&.center {
|
justify-content: center;
|
}
|
|
.icon {
|
padding: 0 15rpx;
|
|
&.icon-serach:before {
|
content: "\e61c";
|
}
|
}
|
|
.input {
|
width: 100%;
|
max-width: 100%;
|
line-height: 60rpx;
|
height: 60rpx;
|
transition: all 0.2s linear;
|
|
&.center {
|
width: 200rpx;
|
}
|
|
&.sub {
|
// position: absolute;
|
width: auto;
|
color: grey;
|
}
|
}
|
}
|
}
|
|
.button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
flex-shrink: 0;
|
width: 0;
|
transition: all 0.2s linear;
|
white-space: nowrap;
|
overflow: hidden;
|
|
&.active {
|
padding-left: 15rpx;
|
width: 100rpx;
|
}
|
}
|
}
|
|
.icon {
|
font-family: iconfont;
|
font-size: 32rpx;
|
font-style: normal;
|
color: #999;
|
}
|
|
.placeholder-color {
|
color: #999;
|
opacity: 0.4;
|
}
|
</style>
|
