bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/components/Search.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,184 @@
<template>
   <view class="search">
      <view class="search_box">
         <view class="search_input">
            <image src="@/static/ic_search@2x.png" alt="">
            <input v-model="text" @confirm="searchInput()" type="text" :placeholder="placeholder" />
         </view>
         <view class="search_operation" v-if="isShow">
            <view class="search_operation_w"></view>
            <image @click="openCate()" src="@/static/filter@2x.png" mode="widthFix">
         </view>
      </view>
      <u-popup closeOnClickOverlay :show="open" @close="open=false" :round="10" mode="bottom">
         <scroll-view scroll-y class="content">
            <slot name="content"></slot>
         </scroll-view>
         <view class="zhanwei"></view>
         <view class="footer">
            <view class="footer_close" @click="closes">重置</view>
            <view class="footer_submit" @click="submit">确定</view>
         </view>
      </u-popup>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            text: '',
            open: false
         };
      },
      props: {
         isShow: Boolean,
         placeholder: String
      },
      methods: {
         // æœç´¢æ¡†æœç´¢
         searchInput() {
            this.$emit('searchInput', this.text)
         },
         // æ‰“开弹窗
         openCate() {
            this.open = true
         },
         // é‡ç½®
         closes() {
            this.open = false
            this.text = ''
            this.$emit('reset', this.text)
         },
         // æœç´¢æäº¤
         submit() {
            this.open = false
            this.$emit('submit')
         }
      }
   }
</script>

<style lang="scss" scoped>
   .search {
       width: 100%;
       height: 68rpx;
       display: flex;
       align-items: center;
       .zhanwei {
         width: 100%;
         height: calc(88rpx + 30rpx);
           background: #ffffff;
       }
       .content {
           padding: 30rpx 30rpx 0 30rpx;
         width: 100%;
         height: 800rpx;
         box-sizing: border-box;
       }
       .footer {
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding-left: 40rpx;
           padding-right: 40rpx;
           padding-bottom: env(safe-area-inset-bottom);
           box-sizing: border-box;
           position: fixed;
           bottom: 0;
           left: 0;
           background: #ffffff;
           z-index: 99;
           .footer_close {
               flex: 1;
               padding: 28rpx 0;
            height: 88rpx;
               box-sizing: border-box;
               margin-right: 22rpx;
               font-size: 32rpx;
               font-weight: 500;
               color: #999999;
               background: #F7F7F7;
               display: flex;
               align-items: center;
               justify-content: center;
           }
           .footer_submit {
               flex: 1;
            height: 88rpx;
               padding: 28rpx 0;
               box-sizing: border-box;
               font-size: 32rpx;
               font-weight: 500;
               color: #ffffff;
               background: $nav-color;
               display: flex;
               align-items: center;
               justify-content: center;
           }
       }
      .search_box {
         width: 100%;
         display: flex;
         align-items: center;
         .search_input {
             flex: 1;
             height: 100%;
             background: #F7F7F7;
             border-radius: 8rpx;
             display: flex;
             align-items: center;
             padding: 15rpx 30rpx;
             box-sizing: border-box;
             image {
                 width: 28rpx;
                 height: 28rpx;
                 margin-right: 10rpx;
             }
             input {
                 width: 100%;
                 border: none;
                 outline: none;
                 background: #F7F7F7;
                 font-size: 26rpx;
             }
             input::-webkit-input-placeholder { /* WebKit browsers */
                 font-size: 26rpx;
                 font-weight: 400;
                 color: #B2B2B2;
             }
             input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                 font-size: 26rpx;
                 font-weight: 400;
                 color: #B2B2B2;
             }
             input::-moz-placeholder { /* Mozilla Firefox 19+ */
                 font-size: 26rpx;
                 font-weight: 400;
                 color: #B2B2B2;
             }
             input:-ms-input-placeholder { /* Internet Explorer 10+ */
                 font-size: 26rpx;
                 font-weight: 400;
                 color: #B2B2B2;
             }
         }
         .search_operation {
             flex-shrink: 0;
             /*width: 150rpx;*/
             display: flex;
             justify-content: flex-end;
             align-items: center;
             /*margin-left: 30rpx;*/
             image {
                 width: 44rpx;
                 height: 44rpx;
             }
             .search_operation_w {
                 width: 30rpx;
             }
         }
      }
   }
</style>