feat: 展开收起筛选项交互处理

apps/bigmember_pc/src/views/search/bidding/components/search-bid-filter.vue

@@ -19,32 +19,31 @@ const {
   filterState,
   updateFilterBase,
   doQuery,
-  showFilter,
   goLogin,
   disposeFilterSchema,
-  onChangeTab,
+  onChangeTab
 } = SearchBidModel
 
-const  {
+const {
   SearchBidBaseSchema,
   SearchBidMoreSchema,
   searchBidMoreFreeSchema,
   searchBidMoreVipSchema,
   doUpdateData
-} =  disposeFilterSchema()
+} = disposeFilterSchema()
 
 watch(activeTab, (newVal) => {
   doUpdateData()
 })
 
 // 物业专版获取筛选条件，更新视图
-async function getBiPropertyFilters () {
-  const { error_code: code, data} = await getPropertyFilters()
-  if(code === 0) {
+async function getBiPropertyFilters() {
+  const { error_code: code, data } = await getPropertyFilters()
+  if (code === 0) {
     let newData = {}
-    Object.keys(data).forEach(v => {
+    Object.keys(data).forEach((v) => {
       newData[v] = []
-      data[v].forEach(s => {
+      data[v].forEach((s) => {
         let sArr = s.split('#')
         s = {
           label: sArr[0],
@@ -56,20 +55,20 @@ async function getBiPropertyFilters () {
     doUpdateData(newData)
   }
 }
-if(inBIPropertyIframe) {
+if (inBIPropertyIframe) {
   getBiPropertyFilters()
 }
 
 // 中国移动定制搜索条件-融创
-async function getCustomInfo () {
+async function getCustomInfo() {
   const _storageKey = 'search_bidding_expandSearchParams'
   localStorage.removeItem(_storageKey)
-  const { error_code:code, data = [] } = await getCMCustomInfo()
-  if(code === 0) {
+  const { error_code: code, data = [] } = await getCMCustomInfo()
+  if (code === 0) {
     if (data) {
       const expandSearchParams = {}
-      data.forEach(item => {
-        if(item.key && item.defaultVal) {
+      data.forEach((item) => {
+        if (item.key && item.defaultVal) {
           const par = {
             key: item.key,
             value: item.defaultVal
@@ -84,7 +83,7 @@ async function getCustomInfo () {
     }
   }
 }
-if(!inBIPropertyIframe) {
+if (!inBIPropertyIframe) {
   getCustomInfo()
 }
 
@@ -117,66 +116,61 @@ function toLogin() {
 function doChangeFilter() {
   doQuery()
 }
-
 </script>
 
 <template>
-  <el-collapse-transition>
-    <div class="search-bid-filter" v-show="showFilter">
-      <div class="guide-go-workspace" v-if="isInWeb">
-        最近五年数据查询以及更多筛选条件请
-        <span class="highlight-text">"</span>
-        <span class="cursor-button highlight-text" @click="guideGoWorkSpace">{{ isLogin ? '' : '登录后' }}进入工作台</span>
-        <span class="highlight-text">"</span>
-        检索
-      </div>
-      <!--  标准筛选  -->
+  <div class="search-bid-filter">
+    <div class="guide-go-workspace" v-if="isInWeb">
+      最近五年数据查询以及更多筛选条件请
+      <span class="highlight-text">"</span>
+      <span class="cursor-button highlight-text" @click="guideGoWorkSpace"
+        >{{ isLogin ? '' : '登录后' }}进入工作台</span
+      >
+      <span class="highlight-text">"</span>
+      检索
+    </div>
+    <!--  标准筛选  -->
+    <search-schema-filter
+      v-model="filterState"
+      :schema="SearchBidBaseSchema"
+      @change="doChangeFilter"
+    ></search-schema-filter>
+
+    <!--  更多筛选  -->
+    <div class="more-filters-container" :class="{ 'wrap-line': !isVip }">
       <search-schema-filter
+        v-if="isVip && isInApp"
         v-model="filterState"
-        :schema="SearchBidBaseSchema"
+        :schema="SearchBidMoreSchema"
+        :show-label="false"
+        showRowLabel
+        style-type="row"
         @change="doChangeFilter"
-      ></search-schema-filter>
-
-      <!--  更多筛选  -->
-      <div
-        class="more-filters-container"
-        :class="{ 'wrap-line': !isVip }"
       >
-        <search-schema-filter
-          v-if="isVip && isInApp"
+        <span slot="row-label-text">更多筛选：</span>
+      </search-schema-filter>
+      <template v-else>
+        <SelectorWithBasePower
+          :component="SearchSchemaFilter"
+          :commonConf="customMoreSchema.commonConf"
+          :freeConf="customMoreSchema.freeConf"
+          :vipConf="customMoreSchema.vipConf"
           v-model="filterState"
-          :schema="SearchBidMoreSchema"
-          :show-label="false"
-          showRowLabel
-          style-type="row"
+          vipMaskShow
+          :baseMaskShow="!isLogin"
+          :vipModuleShow="isInApp && !inBIPropertyIframe"
+          @clickVipMask="noPower"
+          @clickBaseMask="toLogin"
           @change="doChangeFilter"
-        >
-          <span slot="row-label-text">更多筛选：</span>
-        </search-schema-filter>
-        <template v-else>
-          <SelectorWithBasePower
-            :component="SearchSchemaFilter"
-            :commonConf="customMoreSchema.commonConf"
-            :freeConf="customMoreSchema.freeConf"
-            :vipConf="customMoreSchema.vipConf"
-            v-model="filterState"
-            vipMaskShow
-            :baseMaskShow="!isLogin"
-            :vipModuleShow="isInApp && !inBIPropertyIframe"
-            @clickVipMask="noPower"
-            @clickBaseMask="toLogin"
-            @change="doChangeFilter"
-          ></SelectorWithBasePower>
-        </template>
-      </div>
+        ></SelectorWithBasePower>
+      </template>
     </div>
-  </el-collapse-transition>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-
 @media (min-width: 1456px) {
-  .in-app{
+  .in-app {
     .search-bid-filter {
       .wrap-line {
         ::v-deep {
@@ -203,32 +197,45 @@ function doChangeFilter() {
       }
     }
   }
-  .guide-go-workspace{
+  .guide-go-workspace {
     left: 345px;
     position: absolute;
     border-radius: 4px;
-    background: linear-gradient(270deg, rgba(42, 190, 209, 0.24) 1.5%, rgba(42, 190, 209, 0.12) 97.45%);
+    background: linear-gradient(
+      270deg,
+      rgba(42, 190, 209, 0.24) 1.5%,
+      rgba(42, 190, 209, 0.12) 97.45%
+    );
     padding: 2px 8px;
-    color: #1D1D1D;
+    color: #1d1d1d;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
 
-    .highlight-text{
-      color: #2ABED1;
+    .highlight-text {
+      color: #2abed1;
       font-weight: 700;
-      font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+      font-family:
+        -apple-system,
+        system-ui,
+        BlinkMacSystemFont,
+        Helvetica Neue,
+        PingFang SC,
+        Hiragino Sans GB,
+        Microsoft YaHei,
+        Arial,
+        sans-serif;
     }
-    .cursor-button{
+    .cursor-button {
       text-decoration-line: underline;
       background: transparent;
       padding: 0;
       cursor: pointer;
     }
   }
-  .more-filters-container{
-    margin-top:6px;
+  .more-filters-container {
+    margin-top: 6px;
     margin-right: 38px;
   }
 }

apps/bigmember_pc/src/views/search/bidding/components/search-filter-header.vue

@@ -12,7 +12,6 @@ const {
   onSaveFilter,
   onResetFilter,
   toggleFilter,
-  showFilter,
   fixedTop,
   showCurrentFilterText: filterText,
   doQuery,
@@ -43,27 +42,6 @@ function resetFilterItem(key) {
   <div class="searchTender">
     <div class="filter-header-container" :class="{ 'header-fixed': fixedTop }">
       <div class="filter-header" :class="{ 'fixed-top': fixedTop }">
-        <!--        <div-->
-        <!--          class="f-h-label"-->
-        <!--          @click="toggleFilter"-->
-        <!--        >-->
-        <!--          <span>筛选条件</span>-->
-        <!--          <i class="iconfont icon-xiala highlight-text" :class="{ 'is-reverse': showFilter}"></i>-->
-        <!--        </div>-->
-        <!--        <div-->
-        <!--          class="f-h-action"-->
-        <!--          v-if="isLogin && isInApp && !inBIPropertyIframe"-->
-        <!--        >-->
-        <!--          <span class="action-item reset-item" @click="onResetFilter"-->
-        <!--            >重置筛选</span-->
-        <!--          >-->
-        <!--          <span class="action-item has-item" @click="onHasFilter"-->
-        <!--            >已存筛选 {{ historyFilterCount || '' }}</span-->
-        <!--          >-->
-        <!--          <span class="action-item save-item" @click="onSaveFilter"-->
-        <!--            >保存筛选</span-->
-        <!--          >-->
-        <!--        </div>-->
         <!--        已选条件-->
         <section v-if="isLogin && isInApp && !inBIPropertyIframe">
           <div class="f-h-current">
@@ -77,9 +55,7 @@ function resetFilterItem(key) {
               ></current-filter-text>
             </div>
           </div>
-          <div
-            class="f-h-action"
-          >
+          <div class="f-h-action">
             <span class="action-item save-item" @click="onSaveFilter">
               <i class="icon-square-up"></i>保存
             </span>

apps/bigmember_pc/src/views/search/bidding/index.vue

@@ -116,8 +116,12 @@ const articleRef = ref({
       >个汉字以内。
     </div>
     <div class="search-bidding-filter-container">
-      <search-filter-header></search-filter-header>
-      <search-bid-filter></search-bid-filter>
+      <el-collapse-transition>
+        <div v-show="showFilter">
+          <search-filter-header></search-filter-header>
+          <search-bid-filter></search-bid-filter>
+        </div>
+      </el-collapse-transition>
     </div>
     <div>
       <recommend-card></recommend-card>