FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/subPages/pages/commitment/home/index.vue

<script>
import TopSearchShow from "./components/topSearchShow/index.vue";
import ContentMenu from "./components/contentMenu/index.vue";
import PromiseList from "./components/promiseList/index.vue";
import EnterPriseList from "./components/enterpriseList/index.vue";
import TemplateList from "./components/templateList/index.vue";
import RecentlySearch from "./components/recentlySearch/index.vue";
import {searchCommitment} from "@/api/commitment";


export default {
  components: {
    TopSearchShow,
    ContentMenu,
    PromiseList,
    EnterPriseList,
    TemplateList,
    RecentlySearch
  },
  data() {
    return {
      activeIndex: 0, // 当前激活的菜单索引
      showSearch: false, // 是否显示搜索框
      searchValue: "", // 搜索框的值
      resultActive: 0, // 搜索结果的tab索引
      showSearchResult: false, // 是否显示搜索结果
      resultList: [], // 搜索结果列表
      activeTemplateId: null // 当前激活的模板的uuid
    };
  },
  methods:{
    // 搜索
    async onSearch(type=0) {
      this.showSearchResult = true;
      this.resultActive = type;
      try {
        const res = await searchCommitment({
          searchCriteria: this.searchValue,
          createUser: 2,
          type
        })
        if(type === 0) {
          this.resultList = res.data || [];
          this.resultList = this.resultList.map(item => {
            return {
              ...item,
              company_name: item.item,
              create_time: item.time,
              remark: item.name
            }
          })
        }else if(type === 1) {
          this.resultList = res.data || [];
          this.resultList = this.resultList.map(item => {
            return {
              ...item,
              company_name: item.item,
              create_time: item.time,
              remark: item.name
            }
          })
        }
      }catch (e) {
        console.log(e);
      }
    },
    handleRecentlySearch(searchCriteria) {
      this.searchValue = searchCriteria;
      this.onSearch();
    },
    // 取消搜索
    onCancel() {
      this.showSearch = false;
      this.showSearchResult = false;
      this.searchValue = "";
    },
    handleTabsClick(name) {
      this.onSearch(name)
    },
    /* 模板点击搜索承诺 */
    handleTemplateClick(item) {
      this.activeTemplateId = item.uuid
    }
  }
};
</script>

<template>
  <view>
    <transition name="fade" mode="out-in">
      <!-- 使用 key 属性区分不同的渲染内容 -->
      <view v-if="!showSearch" class="content" key="not-search">
        <view class="top-search">
          <TopSearchShow :value.sync="showSearch"></TopSearchShow>
          <ContentMenu class='menu' :value.sync="activeIndex"></ContentMenu>
        </view>
        <TemplateList
            v-show="activeIndex === 0"
            class="template-style"
            :activeTemplateId="activeTemplateId"
            @click="handleTemplateClick"></TemplateList>
        <PromiseList
            v-show="activeIndex === 0"
            class="promise-style"
            :templateId="activeTemplateId"
        ></PromiseList>
        <view class="enterprise-top-style" v-show="activeIndex === 1">
          <span>综合</span>
        </view>
        <EnterPriseList v-show="activeIndex === 1" class="enter-style"></EnterPriseList>
      </view>
      <view v-else key="search" class="search-page">
        <van-search
            v-model="searchValue"
            show-action
            autofocus
            :clearable="false"
            placeholder="请输入搜索关键词"
            @search="()=>onSearch(0)"
            @cancel="onCancel"
        />
        <RecentlySearch v-if="!showSearchResult" @search="handleRecentlySearch" class="recently-search"></RecentlySearch>
        <view v-else>
          <van-tabs v-model="resultActive" background='white' color='#1492FF' type='card' @click="handleTabsClick" class="tabs-style">
            <van-tab title="承诺信息">
              <PromiseList :no-request="true" :prop-data-list="resultList"></PromiseList>
            </van-tab>
            <van-tab title="企业信息">
              <EnterPriseList :no-request="true" ::prop-data-list="resultList"></EnterPriseList>
            </van-tab>
          </van-tabs>
        </view>
      </view>
    </transition>
  </view>
</template>

<style scoped>
.top-search {
  height: 101px;
  position: relative;
  background-color: #1492FF;

}
.menu {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  z-index: 1;
}
.template-style {
  background-color: #fff;
}

.promise-style {
  min-height: calc(100vh - 308px);
  background-color: transparent;
  padding: 0 10px;
}

.enter-style {
  margin-top: 10px;
}
.enterprise-top-style {
  width: 375px;
  height: 51px;
  background-image: linear-gradient(180deg, #FFFFFF 35%, #F2F3F5 100%);
  border-radius: 0 0 6px 6px;
  position: relative;

}
span {
  position: absolute;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  left: 20px;
  bottom: 15px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.tabs-style {
  .van-tabs__nav--card{
    margin: 0;
  }
}
</style>