87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<fix-base-style
|
||
|
|
:styleSpacing="styleSpacing"
|
||
|
|
:styleColor="styleColor"
|
||
|
|
:position="position"
|
||
|
|
:statusBar="statusBar"
|
||
|
|
:flowInner="false"
|
||
|
|
:index="index"
|
||
|
|
>
|
||
|
|
<view class="search-bar" @tap="toSearch">
|
||
|
|
<view class="search-bar__inner" :style="style" :class="[`is-${mode}`]">
|
||
|
|
<cl-icon name="search" :margin="[0, 12, 0, 0]"> </cl-icon>
|
||
|
|
<cl-text :value="placeholder" :color="styleColor.color"></cl-text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</fix-base-style>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup name="fix-search">
|
||
|
|
import { computed } from "vue";
|
||
|
|
import { useCool } from "/@/cool";
|
||
|
|
import { baseProps } from "../../hooks";
|
||
|
|
const { router } = useCool();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
mode: {
|
||
|
|
type: String,
|
||
|
|
default: "mode-1",
|
||
|
|
},
|
||
|
|
backgroundColor: {
|
||
|
|
type: String,
|
||
|
|
default: "#f6f7fa",
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: "请输入关键字进行搜索",
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
...baseProps,
|
||
|
|
statusBar: Boolean,
|
||
|
|
});
|
||
|
|
|
||
|
|
function toSearch() {
|
||
|
|
router.push("/pages/goods/search");
|
||
|
|
}
|
||
|
|
|
||
|
|
const style = computed(() => {
|
||
|
|
const { borderTopLR, borderBottomLR } = props.styleSpacing;
|
||
|
|
|
||
|
|
const { color } = props.styleColor;
|
||
|
|
|
||
|
|
return {
|
||
|
|
color: color,
|
||
|
|
backgroundColor: props.backgroundColor,
|
||
|
|
borderRadius: `${borderTopLR}rpx ${borderTopLR}rpx ${borderBottomLR}rpx ${borderBottomLR}rpx`,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.search-bar {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&__inner {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 70rpx;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #f7f7f7;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
}
|
||
|
|
.is-mode-1 {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.is-mode-2 {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.is-mode-3 {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|