wechat/src/pages/user/mainPage/libraryIndex/index.vue

<template>
  <div class="mainPage">
    <div>
      <div class="header flex-h">
        <div class="flex-item flex-h">
          <i class="iconfont icon-sousuo"></i>
          <router-link
            class="flex-item"
            :to="{name: 'booksSearch', query: {caseid: currentCaseId}}"
          >{{indexSearchKey}}</router-link>
        </div>
        <a @click="showDialog = true">
          <i class="iconfont icon-dingwei"></i>
          <span>{{currentCaseName}}</span>
        </a>
      </div>
      <nav class="nav">
        <a v-for="(item, index) in navList" v-if="(navList || []).length < 9 || index<7" :key="index" @click="navClick(item)">
          <img :src="item.BookTypeImg" alt>
          <span>{{item.BookTypeName}}</span>
        </a>
        <a v-if="(navList || []).length >8 " @click="moreNav()">
          <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/test-icon8.png" alt>
          <span>更多</span>
        </a>
      </nav>
      <div class="list">
        <h1>精选推荐</h1>
        <ul>
          <li v-for="(item, index) in books.list" :key="index">
            <libraryListItem :data="item" @appointmentBook="appointmentBook"></libraryListItem>
          </li>
        </ul>
      </div>
      <van-dialog v-model="showDialog" :show-confirm-button="false">
        <div class="dialogContent">
          <span class="title">选择案场</span>
          <div>
            <radio :data="cases" v-model="caseId"></radio>
          </div>
          <div class="btn">
            <a @click="selectCaseId">确定</a>
          </div>
        </div>
      </van-dialog>
      <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>
  </div>
</template>

<script>
import libraryListItem from '../../../../components/libraryListItem/index'
import radio from '../../../../components/radio/index'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
const { mapState: mapBookState, mapActions: mapBookActions } = createNamespacedHelpers('book')
export default {
  name: '',
  data () {
    return {
      showDialog: false,
      showAppointmentDialog: false,
      caseId: '',
      currentCaseId: '',
      currentCaseName: '',
      cases: [],
      indexSearchKey: '',
      page: 1,
      pagesize: 10,
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList
    }),
    ...mapBookState({
      navList: x => x.types.list,
      books: x => x.recommends
    }),
  },
  components: {
    libraryListItem,
    radio
  },
  created () {
    if (!this.CaseList.length || this.CaseList === null) {
      this.getCaseList().then((res) => {
        (res.cases || []).map((item) => {
          this.cases.push({
            value: item.CaseName,
            id: item.CaseId
          })
        })
        this.currentCaseId = ((res.cases || [])[0] || {}).CaseId
        this.currentCaseName = ((res.cases || [])[0] || {}).CaseName
        this.init()
      })
    } else {
      (this.CaseList || []).map((item) => {
        this.cases.push({
          value: item.CaseName,
          id: item.CaseId
        })
      })
      this.currentCaseId = ((this.CaseList || [])[0] || {}).CaseId
      this.currentCaseName = ((this.CaseList || [])[0] || {}).CaseName
      this.init()
    }
  },
  methods: {
    ...mapAppActions(['getCaseList']),
    ...mapBookActions([
      'getBookType', 
      'getRecommendBook', 
      'getMineBook',
    ]),
    selectCaseId () { // 选择案场
      if (this.currentCaseId !== this.caseId) {
        this.currentCaseId = this.caseId
        this.CaseList.map((item) => {
          if (item.CaseId === this.currentCaseId) this.currentCaseName = item.CaseName
        })
        this.page = 1
        this.init()
      }
      this.showDialog = false
    },
    init () { // 初始化
      this.getBookType({
        caseid: this.currentCaseId,
        page: 1,
        pagesize: 10,
      })
      this.getRecommendBook({
        caseid: this.currentCaseId,
        page: this.page,
        pagesize: this.pagesize,
      })
    },
    appointmentBook () { // 预约图书
      this.showAppointmentDialog = true
    },
    sureAppointmentBook () { // 确定预约图书
      this.showAppointmentDialog = false
    },
    navClick (item) { // 点击nav
      this.$router.push({ name: 'booksList', query: { type: item.BookTypeId, caseid: this.currentCaseId } })
    },
    moreNav () {
      this.$router.push({ name: 'libraryNavList', query: {caseid: this.currentCaseId} })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>