保誠-保戶業務員媒合平台
HelenHuang
2022-06-09 9bdb95c9e34cef640534e5e5a1e2225a80442000
PAMapp/pages/myAppointmentList/contactedList.vue
@@ -5,24 +5,26 @@
            placeholder="請輸入關鍵字"
            class="mb-30 pam-clientReserved-input"
            v-model="keyWord"
            @keyup.enter.native="search"
            @input="search"
        >
            <i
                slot="suffix"
                class="icon-search search cursor--pointer"
                @click="search"
            ></i>
        </el-input>
        <div class="mb-10">
          <a class="sort-indicator text--primary text--underline cursor--pointer" @click="changeSortType">
        <div class="mb-10 sort-indicator-container">
          <a class="sort-indicator cursor--pointer" @click="changeSortType">
            {{ this.sortType === 'DESC' ? '新->舊' : '舊->新' }}
            <i v-if="isSortType" class="icon-sort-add"></i>
            <i v-else class="icon-sort-decrease"></i>
          </a>
        </div>
        <ClientList
            :clients="pageList"
            :title="'contactedList'"
            class="mt-10"
        ></ClientList>
        <UiPagination
@@ -106,9 +108,13 @@
    //////////////////////////////////////////////////////////////////////
    search(): void {
        this.filterList = this.contactedList.filter(item => {
            return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
        })
        if (this.keyWord) {
          this.filterList = this.contactedList.filter(item => {
              return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
          })
        } else {
          this.filterList = this.contactedList;
        }
    }
    changePage(pageList: Appointment[]): void {
@@ -123,5 +129,21 @@
      }
    }
    get isSortType () :boolean {
      return this.sortType === 'DESC';
    }
}
</script>
<style lang="scss" scoped>
.sort-indicator-container{
  margin-bottom: 20px;
}
.sort-indicator{
  border-radius:30px;
  border: 1px solid #D0D0CE;
  background-color:#fff;
  padding: 10px 20px;
  color: #68737A;
}
</style>