218 lines
3.9 KiB
Vue
218 lines
3.9 KiB
Vue
<template>
|
|
<view class="search" :style="{background:bgClor}">
|
|
<view
|
|
class="search-right"
|
|
:style="{ width: width, height: height, border: border}"
|
|
>
|
|
<input
|
|
type="text"
|
|
class="search-inp"
|
|
:placeholder="placeholder"
|
|
:value="value"
|
|
placeholder-class="inputPlaceholder"
|
|
@input="onInput"
|
|
@confirm="onConfirm"
|
|
confirm-type="search"
|
|
placeholder-style="color: #CCCCCC;"
|
|
/>
|
|
<view class="btn_search" @click.stop="onSearch">搜索</view>
|
|
<image
|
|
class="search-icon"
|
|
src="/static/images/search.png"
|
|
@click.stop="onSearch"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "search-box",
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "请输入搜索内容",
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
width: {
|
|
type: String,
|
|
},
|
|
height: {
|
|
type: String,
|
|
},
|
|
border: {
|
|
type: String,
|
|
},
|
|
bgClor: {
|
|
type: String,
|
|
default: "linear-gradient(134deg, #f52540 0%, #e8101e 100%)",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
searchStyle() {
|
|
// #ifdef APP-PLUS || H5
|
|
return {};
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
return {};
|
|
// #endif
|
|
},
|
|
},
|
|
created() {
|
|
// #ifdef APP-PLUS || H5
|
|
// 获取状态栏高度
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
|
// #endif
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack();
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN || H5
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
// #endif
|
|
},
|
|
onSearch(e) {
|
|
// App阻止冒泡
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation();
|
|
// #endif
|
|
this.$emit("search");
|
|
},
|
|
onInput(e) {
|
|
// #ifdef APP-PLUS || H5
|
|
this.$emit("input", e.detail.value || e.target.value);
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
this.$emit("input", e.detail.value);
|
|
// #endif
|
|
},
|
|
onConfirm(e) {
|
|
// #ifdef APP-PLUS || H5
|
|
this.$emit("confirm", e.detail.value || e.target.value);
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
this.$emit("confirm", e.detail.value);
|
|
// #endif
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search {
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
background: linear-gradient(134deg, #f52540 0%, #e8101e 100%);
|
|
transform: translateY(0rpx);
|
|
}
|
|
|
|
.back {
|
|
width: 16rpx;
|
|
height: 32rpx;
|
|
/* #ifdef H5 */
|
|
cursor: pointer;
|
|
/* #endif */
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.search-right {
|
|
width: 100%;
|
|
height: 66rpx;
|
|
background-color: #fff;
|
|
border-radius: 32rpx;
|
|
position: relative;
|
|
/* #ifdef H5 */
|
|
display: flex;
|
|
align-items: center;
|
|
/* #endif */
|
|
}
|
|
|
|
.search-inp {
|
|
flex: 1;
|
|
height: 66rpx;
|
|
font-size: 26rpx;
|
|
color: #000000;
|
|
border-width: 0;
|
|
padding: 0 136rpx 0 72rpx;
|
|
/* #ifdef H5 */
|
|
outline: none;
|
|
background-color: transparent;
|
|
/* #endif */
|
|
}
|
|
|
|
.search-icon {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 16rpx;
|
|
/* #ifdef H5 */
|
|
cursor: pointer;
|
|
/* #endif */
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
.search-inp::-webkit-input-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.search-inp::-moz-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.search-inp:-ms-input-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.btn_search {
|
|
width: 112rpx;
|
|
height: 58rpx;
|
|
border-radius: 28rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(306deg, #e8101e 0%, #fc563b 100%);
|
|
background-size: cover;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: 4rpx;
|
|
}
|
|
|
|
.inputPlaceholder{
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #CCCCCC;
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
</style>
|