11

components/common-search/index.vue

@@ -0,0 +1,154 @@
+//搜索
+<template lang='pug'>
+  view.item-out-view
+    view.search-view
+      view.search-item
+        image(src='../../static/img/search.svg')
+        input(
+          v-model="inputValue"
+          @input='onInputListen'
+          :placeholder='placeholder'
+          :placeholder-class='placeholderClass')
+	  
+      view.search-content(
+          v-if="historyDatas&&historyDatas.length>0&&inputValue.length<=0")
+        view.title-view
+          text 搜索历史
+          image(src='./icon_delete.png' @tap.stop='onDelete(ALL)')
+        view.item-view(v-for="(item,index) in historyDatas" :key="index" @tap.stop='onItemClick(item,index)')
+          text {{item.key}}
+          image(src='./icon_close.png' @tap.stop='onDelete(index)')
+      view.search-content(v-if="keyworkDatas&&keyworkDatas.length>0")
+        view.item-view(v-for="(item,index) in keyworkDatas" :key="index" @tap.stop='onItemClick(item,index)')
+          text(v-for="textContent in item.keyword" 
+            :key="item.id" 
+            :class="textContent===inputValue?'__vital':''") {{textContent}}
+         
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                inputValue: '',
+                ALL: 'ALL',
+                SEARCH_DATA: 'SEARCH_DATA'
+            }
+        },
+        props: {
+            //搜索历史内容
+            historyDatas: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            },
+            //搜索关键内容
+            keyworkDatas: {
+                type: Array,
+                default: () => {
+                    return [];
+                }
+            },
+            placeholder: {
+                type: String,
+                default: '请输入搜索内容'
+            },
+        },
+        methods: {
+            //监听输入框内容变化
+            onInputListen(event) {
+                let detail = event.detail;
+                let value = detail.value;
+                this.inputValue = value;
+                this.$emit('onInputListen', value);
+            },
+            //清除搜索历史
+            onDelete(event) {
+                this.$emit('onDelete', event);
+            },
+            //列表点击事件
+            onItemClick(item, index) {
+                this.$emit('onItemClick', {
+                    item,
+                    index
+                });
+            }
+        },
+    }
+</script>
+<style scoped lang='scss'>
+    .item-out-view {
+        flex-direction: column;
+        .search-view {
+			border-bottom: 1rpx solid #dddddd;
+            flex-direction: column;
+            padding: 10rpx 32rpx;
+            background: rgba(255, 255, 255, 1);
+            .search-item {
+				width: 80%;
+                padding: 0 24rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+                background: rgba(249, 249, 249, 1);
+                border-radius: 200px;
+                align-items: center;
+                input {
+                    padding: 0 24rpx;
+                    height: 80rpx;
+                    font-weight: 400;
+                    flex: 1;
+                    text-align: start;
+                    font-size: 28rpx;
+                    font-family: PingFang-SC-Bold, PingFang-SC;
+                    color: rgba(51, 51, 51, 1);
+                }
+                .placeholderClass {
+                    color: #CCCCCC; 
+                }
+                image {
+                    height: 32rpx;
+                    width: 32rpx;
+                }
+            }
+            .search-content {
+                padding: 40rpx 0;
+                flex-direction: column;
+                .title-view {
+                    text {
+                        color: rgba(51, 51, 51, 1);
+                    }
+                }
+                .item-view {
+                    align-items: center;
+                    width: 100%;
+                    padding: 32rpx 0;
+                    border-bottom: 1px solid rgba(245, 245, 245, 1);
+                    text {
+                        color: rgba(102, 102, 102, 1);
+                    }
+                    .next-ico {
+                        width: 24rpx;
+                        height: 24rpx;
+                    }
+                    .__vital {
+                        color: rgba(51, 130, 255, 1);
+                    }
+                }
+                image {
+                    margin-left: auto;
+                    width: 44rpx;
+                    height: 44rpx;
+                }
+            }
+            text {
+                font-size: 28rpx;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+            }
+            view {
+                flex-direction: row;
+                display: flex;
+            }
+        }
+    }
+</style>