修改产品搜索界面

tanghaolin

2022-09-06 71b465c1d876e397ada63e2daf8692e77c23ec88

修改产品搜索界面

 src/views/Select/FindKeyWordsData.vue

@@ -119,6 +119,7 @@
          </div>
        </div>
      </div>
      <!-- 搜索的产品弹框 -->
      <van-popup v-model:show="showSearchList">
        <div
          style="
@@ -158,6 +159,62 @@
            </template>
          </van-search>
        </div>
        <!-- 过滤菜单 -->
        <van-dropdown-menu active-color="#528abe" style="flex: 1">
            <van-dropdown-item :title="$t('ebookPage.screen.TR')" ref="filterOne">
            <van-cell left :title="$t('ebookPage.motorFrequency.TR')">
                <template #right-icon>
                <span style="margin-right: 10px"
                    >{{ m_MotorFrequece ? "60" : "50" }}Hz</span
                >
                <van-switch
                    v-model="m_MotorFrequece"
                    size="24"
                    active-color="#528abe"
                />
                </template>
            </van-cell>
            <van-cell left title="UL">
                <template #right-icon>
                <van-switch v-model="m_isUL" size="24" active-color="#528abe" />
                </template>
            </van-cell>
            <van-cell left :title="$t('indexPage.firePump.TR')">
                <template #right-icon>
                <van-switch
                    v-model="m_isFirePump"
                    size="24"
                    active-color="#528abe"
                />
                </template>
            </van-cell>
            <div style="padding: 5px 16px">
                <van-button color="#528abe" block round @click="getFilterValue">
                {{ $t("header.define.TR") }}
                </van-button>
            </div>
            </van-dropdown-item>
            <!-- 品牌 -->
            <van-dropdown-item title="品牌" ref="brandFilter">
            <div class="brand-content">
                <div
                class="brand-item"
                @click="onChangeBrandSelect(brand_item, brand_index)"
                :class="brand_item.isSelect ? 'brand-item-active' : ''"
                v-for="(brand_item, brand_index) in m_allBrandList"
                :key="brand_index"
                >
                <span>{{ brand_item.name }}</span>
                </div>
            </div>
            <div style="padding: 5px 16px">
                <van-button color="#528abe" block round @click="getFilterBrand">
                {{ $t("header.define.TR") }}
                </van-button>
            </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 搜索后的产品列表 -->
        <div class="data_list">
          <van-cell
            @click="goPumpDetail(item)"
@@ -173,6 +230,9 @@
            <template #icon>
              <van-image width="80" height="50" :src="item.ThumbnailImage">
              </van-image>
            </template>
            <template #value>
            <van-tag round type="primary" color="#528abe">{{item.CorpName}}</van-tag>
            </template>
          </van-cell></div
      ></van-popup>
@@ -336,8 +396,8 @@
                SeriesID: item.SeriesID,
                CatalogName: item.CatalogName,
                Name: item.Name,
                ThumbnailImage:
                  _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
                CorpName:item.CorpName,
                ThumbnailImage: item.ThumbnailImage,
                Description: item.Description,
              };
              seriesList.push(productItem);
@@ -420,19 +480,28 @@
    }
    .data_list {
      width: 100%;
      height: calc(100% - 55px);
      height: calc(100% - 103px);
      overflow: auto;
      margin-top: 1px;
      .van-cell__title,
      .van-cell__value {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
      }
      .van-index-anchor {
        text-align: left;
        font-weight: 600;
      }
    .van-cell__title,
    .van-cell__value {
      text-align: left;
      font-size: 13px;
      color: #36489e;
      height: 47px;
    }
    .van-cell__label {
      width: 180px;
    }
    .van-tag {
      position: absolute;
      top: 3px;
      right: 15px;
    }
    }
  }
  .kwy-style {
@@ -518,5 +587,11 @@
    width: 100%;
    height: 100%;
  }
  .van-dropdown-menu__bar{
    box-shadow: 0 2px 2px rgb(100 101 102 / 12%);
  }
  .van-cell__title, .van-cell__value{
    text-align: left;
  }
}
</style>

 src/views/Select/SelParams.vue

@@ -118,6 +118,7 @@
      </van-field>
      <!-- 品牌 -->
      <van-field
      v-if="false"
        readonly
        center
        clearable