搜索条件添加

tangzy

2022-02-11 0fea9646c92cc2655840d5c0f65f3554ba3a41ea

 pages/alarm_list/industry/industry.vue

@@ -1,12 +1,24 @@
<template>
   <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
      style="width: 100%; margin-top: 15rpx;">
      <view v-for="(i, index) in data" class="advisory-model">
         <u-cell-group :title="i.company">
            <u-cell-item icon="order" @click="goDetail(index)" :title="i.policy" :label="i.time.substring(0,11)"></u-cell-item>
         </u-cell-group>
   <view>
      <view>
         <view class="search-block" style="height: 35px">
            <view class="search-ico-wapper">
               <image src="../../../static/images/search/search.png" class="search-ico" mode=""></image>
            </view>
            <input type="text" v-on:input="getKeyword" v-model="keyword" placeholder="搜索" class="search-text"
               maxlength="10" focus />
         </view>
      </view>
   </scroll-view>
      <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
         style="width: 100%; margin-top: 15rpx;">
         <view v-for="(i, index) in data" class="advisory-model">
            <u-cell-group :title="i.company">
               <u-cell-item icon="order" @click="goDetail(index)" :title="i.policy"
                  :label="i.time.substring(0,11)"></u-cell-item>
            </u-cell-group>
         </view>
      </scroll-view>
   </view>
</template>

<script>
@@ -15,6 +27,7 @@
         return {
            data: [],
            swiperHeight: 0,
            keyword: '',
         }
      },
      onLoad() {
@@ -24,7 +37,7 @@
      methods: {
         goDetail(index) {
            uni.navigateTo({
               url:'./industry_detail?data='+ this.data[index].id
               url: './industry_detail?data=' + this.data[index].id
            })
         },
         onReady() {
@@ -52,25 +65,87 @@
         getData() {
            var that = this;
            uni.request({
               url: that.$store.state.piAPI + '/policy/page',
               url: that.$store.state.piAPI + 'policy/page',
               method: 'GET',
               success: (res) => {
                  that.data = res.data.data.records;
               }
            });
         },
         //on input 通过 keyword 关键字查询
         getKeyword() {
            this.getIndutry();
         },
         getIndutry() {
            var that = this;
            uni.request({
               url: that.$store.state.piAPI + 'policy/page',
               method: 'GET',
               data: {
                  policy: this.keyword,
               },
               success: (res) => {
                  that.data = res.data.data.records;
               }
            });
         }
      }
   }
</script>

<style lang="scss" scoped>
   /* 搜索框 */
   .search-ico,
   .search-ico-1 {
      width: 40upx;
      height: 40upx;
   }

   .search-block {
      width: 94%;
      margin: 0 auto;
      // background-color: #007AFF;
      display: flex;
      flex-direction: row;
      position: relative;
      top: 0.55rem;

      .search-ico-wapper {
         background-color: #F1F1F1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 0upx 0upx 0upx 15upx;
         border-bottom-left-radius: 7px;
         border-top-left-radius: 7px;
      }

      .search-text {
         font-size: 14px;
         background-color: #F1F1F1;
         height: 70upx;
         width: 100%;
         padding-left: 0.5rem;
      }

      .search-ico-wapper1 {
         background-color: #F1F1F1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 0upx 15upx 0upx 0upx;
         border-bottom-right-radius: 7px;
         border-top-right-radius: 7px;
      }
   }

   .u-cell_title {
      width: 250rpx;
      float: left;
      letter-spacing: 1px;
       white-space: nowrap;
      white-space: nowrap;
      overflow: hidden;
       text-overflow:ellipsis;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;