zuel-itsm-3.0.2/src/views/checkNumber.vue

<template>
  <div class="bgColor">
    <div slot="content" class="scroll-wrapper">
      <div class="demo">
        <div class="scroll-list-wrap">
          <!-- <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp"
          > -->
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
          >
            <div class="search">
              <input
                type="text"
                placeholder="可简拼、名称搜索"
                v-model="search"
                @input="searchFnDebounce()"
                @click="clickSearch()"
              />
              <span v-if="isShow" @click="cancel()" class="cancel">取消</span>
            </div>
            <ul class="searchList" v-show="isShow">
              <li v-for="item in searchList" :key="item.id" @click="clickSearchItem(item)">
                <i class="dash dash-fangdajing"></i>
                <div class="s_c">
                  <template v-if="item.unit.id">
                    <div class="searchListItem" v-if="item.unit"><strong>单位：</strong><em>{{item.unit.unit}}</em></div>
                    <div class="searchListItem"><strong>部门：</strong><em>{{item.dept}}</em></div>
                  </template>
                  <template v-else><div class="searchListItem"><strong>单位：</strong><em>{{item.unit}}</em></div></template>
                </div>
              </li>
              <li class="wushuju" v-show="wushuju1">
                <img src="./../../static/images/wushuju.svg" alt="" />
                <div class="noDataFont">暂无数据</div>
              </li>
            </ul>
            <ul class="foods-wrapper" :style="{paddingTop:wushuju?'2.4rem':'0'}">
              <li
                v-for="data in items"
                class="food-item border-1px"
                :key="data.id"
              >
                <div class="food-content">
                  <div class="title">
                    <div>
                      <i class="iconfont icon-changjianwenti1"></i>
                    </div>
                    <div class="title_t">
                      <span>{{ data.dept }}</span>
                      <span v-if="data.phone"
                        ><a :href="'tel:' + data.phone"
                          ><i class="iconfont icon-shouji"></i
                          >{{ data.phone }}</a
                        ></span
                      >
                    </div>
                  </div>
                  <div class="content">
                    <span>单位名称：{{data.unit.unit}}</span>
                  </div>
                  <div class="content">
                    <span>办公地址：{{data.address}}</span>
                    <span></span>
                  </div>
                </div>
              </li>
              <li class="wushuju" v-show="wushuju">
                <img src="./../../static/images/wushuju.svg" alt="" />
                <div class="noDataFont">暂无数据</div>
              </li>
            </ul>
            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="props.pullDownStyle"
              >
                <div
                  v-show="props.beforePullDown"
                  class="before-trigger"
                  :style="{ paddingTop: props.bubbleY + 'px' }"
                >
                  <span
                    :class="{
                      rotate: props.bubbleY > pullDownRefreshThreshold - 40
                    }"
                    >↓</span
                  >
                </div>
                <div class="after-trigger" v-show="!props.beforePullDown">
                  <div v-show="props.isPullingDown" class="loading">
                    <cube-loading></cube-loading>
                  </div>
                  <div v-show="!props.isPullingDown" class="text">
                    <span class="refresh-text">更新成功</span>
                  </div>
                </div>
              </div>
            </template>
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow"></load-ing>
  </div>
</template>
<script>
import Vue from "vue";
import debounce from "lodash/debounce";
import CubePage from "../components/cube-page.vue";
import SwitchOption from "../components/switch-option";
import InputOption from "../components/input-option";
import SelectOption from "../components/select-option";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      items: [],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "Refresh success",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "Load more",
      pullUpLoadNoMoreTxt: "没有更多数据",
      wushuju: true,
      wushuju1: true,
      customPullDown: true,
      search: "",
      sum: 10,
      idx: 0,
      loadShow: false,
      lastSearchKey: "",
      searchFnDebounce: null,
      isShow:false,//是否显示下拉框
      searchList:[],//下拉框内容
    };
  },
  components: {
    CubePage,
    SwitchOption,
    InputOption,
    SelectOption,
    LoadIng
  },
  computed: {
    options() {
      return {
        // pullDownRefresh: this.pullDownRefreshObj,
        // pullUpLoad: this.pullUpLoadObj,
        // scrollbar: true
      };
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  methods: {
    // getParams() {
    //   if (this.$route.params.keword) {
    //     this.search = this.$route.params.keword;
    //   }
    // },
    clickSearch(){
      this.isShow = true;
      this.items = [];
    },
    //点击搜索出来的项
    clickSearchItem(item){
      this.isShow = false;
      this.wushuju = false;
      this.items = [];
      if(item.unit.id){
        //部门
        this.items = [item];
      }else{
        //单位
        this.loadShow = true;
        this.$http
        .post("service/user/queryPhone", {unitId:item.id})
        .then((res) => {
            this.items = res.data.data;
            this.loadShow = false;
        });
      }
    },
    // 取消
    cancel(){
      this.isShow = false;
      this.search = '';
      this.searchList = [];
    },
    searchFn() {
      var that = this;
      this.isShow = true;
      that.loadShow = true;
      this.idx = 0;
      this.lastSearchKey = that.search;
      let postData = {};
      if(that.search){
        postData.keyword = that.search;
      }
      this.$http
        .post("service/user/queryPhone", postData)
        .then(function(res) {
          if (that.lastSearchKey == that.search) {
            if (res.data.data.length > 0) {
              that.searchList = res.data.data;
              that.wushuju1 = false;
            } else {
              that.wushuju1 = true;
              that.searchList = [];
            }
            that.loadShow = false;
          }
        });
    },
    toKnowDetails(data) {
      this.$router.push({
        name: "KnowDetails",
        params: {
          data: JSON.stringify(data)
        }
      });
    },
    // onPullingDown() {
    //   // 模拟更新数据
    //   this.idx = 0;
    //   setTimeout(() => {
    //     var that = this;
    //     this.$http
    //       .post("service/user/data/fetchDataList/phoneDirectory", {
    //         idx: 0,
    //         sum: 10,
    //         phoneDirectory: {
    //           keyword: that.search
    //         }
    //       })
    //       .then(function(res) {
    //         if (res.data.list.length > 0) {
    //           that.items = res.data.list;
    //           that.wushuju = false;
    //         } else {
    //           that.$refs.scroll.forceUpdate();
    //           that.wushuju = true;
    //         }
    //       });
    //   }, 1000);
    // },
    // getData(idx, sum) {
    //   var that = this;
    //   this.$http
    //     .post("service/user/data/fetchDataList/phoneDirectory", {
    //       idx: idx,
    //       sum: sum,
    //       phoneDirectory: {
    //         keyword: that.search
    //       }
    //     })
    //     .then(function(res) {
    //       if (res.data.list.length > 0) {
    //         that.items = res.data.list;
    //         that.wushuju = false;
    //       } else {
    //         that.wushuju = true;
    //       }
    //       that.loadShow = false;
    //     });
    // },
    // onPullingUp() {
    //   var that = this;
    //   that.idx = that.idx + 1;
    //   this.$http
    //     .post("service/user/data/fetchDataList/phoneDirectory", {
    //       idx: that.idx,
    //       sum: that.sum,
    //       phoneDirectory: {
    //         keyword: that.search
    //       }
    //     })
    //     .then(function(res) {
    //       setTimeout(() => {
    //         if (res.data.list.length > 0) {
    //           that.items = that.items.concat(res.data.list);
    //         } else {
    //           that.$refs.scroll.forceUpdate();
    //         }
    //       }, 1000);
    //     });
    // },
    updatePullDownRefresh(val) {
      this.pullDownRefresh = val;
    },
    updatePullDownRefreshThreshold(val) {
      this.pullDownRefreshThreshold = val;
    },
    updatePullDownRefreshTxt(val) {
      this.pullDownRefreshTxt = val;
    },
    updatePullUpLoad(val) {
      this.pullUpLoad = val;
    },
    updatePullUpLoadThreshold(val) {
      this.pullUpLoadThreshold = val;
    },
    updatePullUpLoadMoreTxt(val) {
      this.pullUpLoadMoreTxt = val;
    },
    updatePullUpLoadNoMoreTxt(val) {
      this.pullUpLoadNoMoreTxt = val;
    },
    updateCustomPullDown(val) {
      this.customPullDown = val;
    },
    rebuildScroll() {
      Vue.nextTick(() => {
        this.$refs.scroll.destroy();
        this.$refs.scroll.initScroll();
      });
    }
  },
  created() {
    this.searchFnDebounce = debounce(this.searchFn, 500);
    // this.getParams();
    // this.getData(this.idx, this.sum);
  },
  beforeDestroy() {
    this.searchFnDebounce.cancel();
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroll-list-wrap
  /* height: 350px */
  height:100vh
  /* border: 1px solid rgba(0, 0, 0, 0.1) */
  border-radius: 5px
  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden

.foods-wrapper
  .food-item
    display: flex
    /* min-width: 0 */
    /* padding: 18px
    border-bottom: 1px solid rgba(7, 17, 27, 0.1) */

    &:last-child
      border-none()
      margin-bottom: 0

    .food-content
      flex: 1
      min-width: 0;
      .cartcontrol-wrapper
        position: absolute
        right: 0
        bottom: 12px
        .scroll-wrapper{
  .cube-pulldown-wrapper{
    .before-trigger{
      font-size: 30px;
      line-height: 30px;
      align-self: flex-end;
      span{
        display: inline-block;
        transition: all 0.3s;
        color: #666;
        &.rotate{
            transform: rotate(180deg)
          }
      }
    }
    .after-trigger{
      .refresh-text{
        color: grey
      }
    }
 }
}
</style>
<style scoped>
.bgColor {
  background-color: white;
}
.search {
  padding: 0.16rem 0.24rem;
  height: 0.6rem;
  background-color: #eeeeee;
  border-bottom: 0.01rem #999999 solid;
  display: flex;
}
.search input {
  flex: 1;
  height: 0.56rem;
  border-radius: 4px;
  text-align: center;
  font-size: 0.28rem;
}
.search .cancel{
  line-height: 0.56rem;
  text-align: center;
  margin-left: 0.1rem;
}
.search:focus {
  outline: none;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title {
  display: flex;
  min-width: 0;
  padding: 0.2rem 0.24rem;
  line-height: 0.45rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title .title_t {
  display: flex;
  justify-content: space-between;
}
.title div:nth-child(1) {
  width: 6%;
}
.title div:nth-child(1) i {
  font-size: 0.32rem;
  color: #005395;
  line-height: 0.49rem;
}
.title div:nth-child(2) {
  width: 94%;
  font-size: 0.32rem;
  overflow: hidden;
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
}
.content {
  font-size: 0.28rem;
  /* margin-top: .3rem; */
  line-height: 0.39rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding: 0 0.64rem;
  margin: 0.24rem 0;
  max-height: 0.78rem;
}
.timeBox {
  display: flex;
  justify-content: space-between;
  /* margin-top: .3rem; */
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0.2rem 0.64rem;
}
.timeBox .time {
  color: #999999;
  font-size: 0.24rem;
}
.timeBox .good i {
  font-size: 0.3rem;
  color: #a37200;
}
.timeBox .good span {
  color: #a37200;
  font-size: 0.24rem;
}
.wushuju {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
.searchList{
  position: absolute;
  top: 0.92rem;
  width: 100%;
  height: calc(100vh - 0.92rem);
  font-size: 0.3rem;
  background-color: #eee;
  box-shadow: 0 0.05rem 0.05rem #ccc;
  overflow: hidden;
}
.searchList li {
  padding: 0.2rem;
  border-bottom: 0.02rem solid #fff;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.searchList li .s_c{
  flex: 1;
}
.searchList li .dash-fangdajing{
  margin-right: 0.2rem;
}
.searchList .searchListItem{
  display: flex;
}
.searchList .searchListItem em{
  flex: 1;
  font-style: normal;
  word-break: break-all;
}
</style>