wechat/src/pages/user/library/booksSearch/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="header flex-h">
      <div class="flex-item flex-h">
        <i class="iconfont icon-sousuo"></i>
        <div class="flex-item">
          <div>
            <input type="text" v-model="searchKey" placeholder="请输入图书名">
          </div>
        </div>
      </div>
      <a @click="search">搜索</a>
    </div>
    <div class="searchRemark" v-if="showSearchRemark">
      <span>
        关于“
        <em>{{indexSearchKey}}</em>”的搜索结果：
      </span>
    </div>
    <div class="flex-item">
      <div>
        <div class="noData" v-if="noData">
          <img src="../../../../common/icon/kong.png" alt>
          <span>暂无内容</span>
        </div>
        <ul>
          <li v-for="(item, index) in searchBooksList" :key="index">
            <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
          </li>
        </ul>
      </div>
    </div>
    <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
      <div class="dialogContent">
        <span class="title">确认在线预约当前图书?</span>
        <div>
          <span style="color: #666;">在线预约需在2018年12月20日前前往案场借阅图书, 否则 将取消预约资格</span>
        </div>
        <div class="btn">
          <a @click="sureAppointmentBook">确定</a>
          <a @click="showAppointmentDialog = false">取消</a>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import libraryListItem from '../../../../components/libraryListItem/index'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
const { mapState: mapLibraryState, mapActions: mapLibraryAction, mapMutations: mapLibraryMutations } = createNamespacedHelpers('library')
export default {
  data () {
    return {
      searchKey: '',
      showSearchRemark: false,
      noData: false,
      showAppointmentDialog: false
    }
  },
  created () {
  },
  computed: {
    ...mapState({
      CaseList: x => x.app.CaseList,
    }),
    ...mapLibraryState({
      indexSearchKey: x => x.indexSearchKey,
      searchBooksList: x => x.searchBooksList
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.searchKey = this.indexSearchKey || ''
    })
  },
  components: {
    libraryListItem
  },
  methods: {
    ...mapAppActions([
      'getCaseList',
    ]),
    ...mapLibraryAction(['']),
    ...mapLibraryMutations(['setIndexSearchKey']),
    search () { // 搜索
      if (this.searchKey !== '') {
        this.setIndexSearchKey(this.searchKey)
        this.showSearchRemark = true
      } else {
        this.$toast('搜索关键词不能为空')
      }
    },
    appointmentBook () { // 预约图书
      this.showAppointmentDialog = true
    },
    sureAppointmentBook () { // 确定预约图书
      this.showAppointmentDialog = false
    },
  }
}
</script>

<style lang="scss" scoped>
.mainPage {
  .header {
    padding: 0.1rem 0.2rem;
    > div {
      background: #f2f2f2;
      position: relative;
      overflow: hidden;
      i {
        font-size: 0.15rem;
        color: #ccc;
        margin-left: 0.08rem;
        line-height: 0.3rem;
      }
      > div {
        margin-left: 0.1rem;
        > div {
          width: 100%;
          position: relative;
          overflow: hidden;
          input {
            width: 100%;
            display: block;
            line-height: 0.2rem;
            padding: 0.05rem 0;
            background: none;
            font-size: 0.13rem;
          }
        }
      }
    }
    > a {
      line-height: 0.3rem;
      margin-left: 0.1rem;
      font-size: 0.14rem;
    }
  }
  .searchRemark {
    padding: 0 0.2rem;
    span {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      line-height: 0.22rem;
      font-size: 0.14rem;
      color: #616161;
      em {
        line-height: 0.22rem;
        font-size: 0.14rem;
        color: #fc5634;
      }
    }
  }
  > .flex-item {
    position: relative;
    overflow: hidden;
    > div {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      .noData {
        width: 100%;
        margin: 0.5rem auto 0;
        position: relative;
        overflow: hidden;
        img {
          width: 0.7rem;
          display: block;
          margin: 0 auto;
        }
        span {
          width: 100%;
          display: block;
          text-align: center;
          line-height: 0.3rem;
          color: #b4b4b4;
          font-size: 0.14rem;
          margin: 0.05rem auto 0;
        }
      }
      > ul {
        padding: 0 0.2rem;
        margin: 0 auto 0.1rem;
        position: relative;
        overflow: hidden;
        > li {
          width: 100%;
          position: relative;
          overflow: hidden;
          margin: .1rem auto 0;
        }
      }
    }
  }
}
</style>