xcx

src/common/css/reset.css

@@ -85,4 +85,60 @@ select option {
 
 .van-dialog__message .van-dialog__message--has-title{
 	text-align: center;
+}
+
+.dialogContent{
+	padding: 0 .15rem;
+}
+
+.dialogContent>.title{
+	width: 100%;
+	text-align: center;
+	display: block;
+	line-height: .26rem;
+	font-size: .16rem;
+	margin: .15rem auto 0;
+}
+
+.dialogContent>div{
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	margin: .15rem auto 0;
+}
+
+.dialogContent .btn{
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	margin-bottom: .2rem;
+	white-space: nowrap;
+	font-size: 0;
+	text-align: center;
+}
+
+.dialogContent>.btn>a{
+	width: 1rem;
+	display: inline-block;
+	line-height: .36rem;
+	border-radius: .05rem;
+	text-align: center;
+	border: 1px solid #787878;
+	margin-left: .2rem;
+}
+
+.dialogContent>.btn>a:first-child{
+	margin-left: 0;
+	background: #fc6243;
+	color: #fff;
+	border: 1px solid #fc6243;
+}
+
+.dialogContent>.btn>a:only-child{
+	width: 1.6rem;
+	display: block;
+	margin:  0 auto;
+	background: #fc6243;
+	color: #fff;
+	border: 1px solid #fc6243;
 }

src/components/libraryListItem/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="libraryListItem flex-h">
+    <div class="img">
+      <a>
+        <img :src="data.img" class="centerLabel cover" alt>
+      </a>
+    </div>
+    <div class="flex-item">
+      <div>
+        <span>{{data.name}}</span>
+        <div class="flex-h" style="margin-top: .06rem;">
+          <span class="flex-item">{{data.author}} 著</span>
+          <span class="status" @click="appointmentBook(data.id)">{{data.status}}</span>
+        </div>
+        <div class="flex-h">
+          <span class="flex-item">{{data.publishingHouses}}</span>
+          <span>剩余可借
+            <em>{{data.stock}}</em>本
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    appointmentBook (id) {
+      this.$emit('appointmentBook', id)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.libraryListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+  .img {
+    width: 0.78rem;
+    position: relative;
+    overflow: hidden;
+    a {
+      width: 100%;
+      display: block;
+      height: 0;
+      position: relative;
+      overflow: hidden;
+      padding-bottom: 143.5%;
+      background: #eee;
+      border-radius: 0.03rem;
+    }
+  }
+  > div.flex-item {
+    margin-left: 0.1rem;
+    > div {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      > span {
+        width: 100%;
+        display: block;
+        line-height: 0.22rem;
+        font-size: 0.16rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        max-height: 0.43rem;
+      }
+      > div {
+        margin-top: 0.03rem;
+        align-items: center;
+        span {
+          line-height: 0.25rem;
+          font-size: 0.12rem;
+          color: #999;
+          white-space: nowrap;
+          em {
+            color: #fc5534;
+            font-size: 0.13rem;
+          }
+          &.status {
+            padding: 0 0.15rem;
+            font-size: 0.12rem;
+            color: #fc674a;
+            background: #fcf3f3;
+            border-radius: 0.25rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/radio/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="radio">
+    <a v-for="(item,index) in data" :key="index" :class="{'active': item.id === value}" @click="cut(item)">{{item.value}}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: ['data', 'value', 'disabled'],
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  methods: {
+    cut (item) {
+      if (!this.disabled) {
+        this.$emit('input', item.id)
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.radio {
+  font-size: 0;
+  white-space: nowrap;
+  > * {
+    display: block;
+    font-size: 0.15rem;
+    position: relative;
+    padding-left: 0.25rem;
+    color: #a1a1a1;
+    margin-left: 0.5rem;
+    line-height: .3rem;
+    &::after {
+      content: "";
+      width: 0.14rem;
+      height: 0.14rem;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      border-radius: 100%;
+      border: 0.01rem solid #fc6243;
+      z-index: 1;
+    }
+    &.active::before {
+      content: "";
+      width: 0.08rem;
+      height: 0.08rem;
+      position: absolute;
+      left: 0.04rem;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      border-radius: 100%;
+      background: #fc6243;
+      z-index: 2;
+    }
+  }
+}
+</style>

src/pages/user/library/navList/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="mainPage">
+    <div>
+      <nav class="nav">
+        <a v-for="(item, index) in navList" :key="index" @click="navClick(item)">
+          <img :src="item.icon" alt>
+          <span>{{item.name}}</span>
+        </a>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapAppActions } = createNamespacedHelpers('app')
+const { mapState: mapLibraryState, mapActions: mapLibraryAction } = createNamespacedHelpers('library')
+export default {
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  computed: {
+    ...mapState({
+      CaseList: x => x.app.CaseList,
+    }),
+    ...mapLibraryState({
+      navList: x => x.navList
+    })
+  },
+  components: {
+  },
+  methods: {
+    ...mapAppActions([
+      'getCaseList',
+    ]),
+    ...mapLibraryAction(['getNavList']),
+    navClick (item) {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  > 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);
+    .nav {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      > a {
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        margin-top: 0.15rem;
+        img {
+          height: 0.48rem;
+        }
+        span {
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.22rem;
+          margin: 0.08rem auto 0;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -2,35 +2,144 @@
   <div class="mainPage">
     <div>
       <div class="header flex-h">
-        <div class="flex-item">
-          <div>
-            <i class="iconfont icon-sousuo"></i>
-            <input type="text">
+        <div class="flex-item flex-h">
+          <i class="iconfont icon-sousuo"></i>
+          <div class="flex-item">
+            <div>
+              <input type="text">
+            </div>
           </div>
         </div>
-        <a>
+        <a @click="showDialog = true">
           <i class="iconfont icon-dingwei"></i>
-          <span>云台天境</span>
+          <span>{{currentCaseName}}</span>
+        </a>
+      </div>
+      <nav class="nav">
+        <a v-for="(item, index) in navList" :key="index" @click="navClick(item)">
+          <img :src="item.icon" alt>
+          <span>{{item.name}}</span>
         </a>
+      </nav>
+      <div class="list">
+        <h1>精选推荐</h1>
+        <ul>
+          <li v-for="(item, index) in bookList" :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: mapLibraryState, mapActions: mapLibraryActions, mapMutations: mapLibraryMutations } = createNamespacedHelpers('library')
 export default {
   name: '',
   data () {
     return {
+      showDialog: false,
+      showAppointmentDialog: false,
+      caseId: '',
+      currentCaseId: '',
+      currentCaseName: '',
+      cases: []
     }
   },
   computed: {
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      CaseList: x => x.app.CaseList
+    }),
+    ...mapLibraryState({
+      navList: x => x.navList,
+      bookList: x => x.bookList
+    }),
   },
   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
+          })
+        })
+      })
+    } else {
+      (this.CaseList || []).map((item) => {
+        this.cases.push({
+          value: item.CaseName,
+          id: item.CaseId
+        })
+      })
+    }
   },
   methods: {
+    ...mapAppActions(['getCaseList']),
+    ...mapLibraryActions(['getNavList', 'getRecommendBookList']),
+    ...mapLibraryMutations(['emptyNavInfo', 'emptyRecommendBookList']),
+    selectCaseId () { // 选择案场
+      if (this.currentCaseId !== this.caseId) {
+        this.currentCaseId = this.caseId
+        this.CaseList.map((item) => {
+          if (item.CaseId === this.currentCaseId) this.currentCaseName = item.CaseName
+        })
+        this.emptyNavInfo() // 清空nav
+        this.getNavList() // 获取nav
+        this.emptyRecommendBookList() // 清空精选推荐书籍列表
+        this.getRecommendBookList() // 获取精选推荐书籍列表
+      }
+      this.showDialog = false
+    },
+    init () { // 初始化
+
+    },
+    appointmentBook () { // 预约图书
+      this.showAppointmentDialog = true
+    },
+    sureAppointmentBook () { // 确定预约图书
+      this.showAppointmentDialog = false
+    },
+    navClick (item) { // 点击nav
+      if (item.id === 'more') {
+        this.$router.push({ name: 'libraryNavList' })
+      } else {
+        this.$router.push({ name: 'libraryNavList', query: { id: item.id } })
+      }
+    }
   }
 }
 </script>

src/pages/user/mainPage/libraryIndex/page.scss

@@ -15,34 +15,85 @@
       padding: .1rem 0;
       >div{
         margin: 0 .1rem 0 .2rem;
+        background: #f2f2f2;
+        align-items: center;
+        i{
+          font-size: .15rem;
+          color: #ccc;
+          margin-left: .08rem;
+        }
         >div{
-          width: 100%;
-          position: relative;
-          overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          background: #f2f2f2;
-          padding: .05rem 0;
+          margin-left: .05rem;
           >*{
             display: inline-block;
             vertical-align: middle;
             line-height: .2rem;
           }
-          i{
-            font-size: .15rem;
-            color: #ccc;
-            margin-left: .08rem;
-          }
-          input{
-            font-size: .13rem;
-            color: #ccc;
-            margin-left: .05rem;
-            background: none;
+          >div{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            input{
+              width: 100%;
+              font-size: .13rem;
+              color: #ccc;
+              background: none;
+              padding: .05rem 0;
+            }
           }
         }
       }
       >a{
         margin-right: .2rem;
+        font-size: 0;
+        white-space: nowrap;
+        >*{
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+    .nav{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      >a{
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        margin-top: .15rem;
+        img{
+          height: .48rem;
+        }
+        span{
+          width: 100%;
+          display: inline-block;
+          text-align: center;
+          font-size: .12rem;
+          line-height: .22rem;
+          margin: .08rem auto 0;
+        }
+      }
+    }
+    .list{
+      padding: 0 .16rem;
+      margin: .32rem auto 0;
+      >h1{
+        line-height: .28rem;
+        font-size: .17rem;
+      }
+      >ul{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        margin: .1rem auto .2rem;
+        >li{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .1rem auto 0;
+        }
       }
     }
   }

src/pages/user/router.js

@@ -14,6 +14,7 @@ import placeOrderDetail from './placeOrderDetail/index' // 城咖啡-点单详
 import orderList from './orderList/index' // 城咖啡-点单列表
 import libraryIndex from './mainPage/libraryIndex/index' // 图书馆首页
 import userCenter from './mainPage/userCenter/index' // 个人中心
+import libraryNavList from './library/navList/index' // 图书馆nav
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
 import vip from './vip/index' // vip卡说明
@@ -65,6 +66,11 @@ const router = new Router({
       component: userCenter,
       children: []
     }]
+  }, { // 图书馆nav
+    path: '/libraryNavList',
+    name: 'libraryNavList',
+    component: libraryNavList,
+    children: []
   }, { // 城咖啡-点单
     path: '/placeOrder',
     name: 'placeOrder',

src/store/index.js

@@ -30,6 +30,7 @@ export const modules = {
   rush: () => require('./rush/index').default,
   making: () => require('./making/index').default,
   customization: () => require('./customization/index').default,
+  library: () => require('./library/index').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/library/index.js

@@ -0,0 +1,138 @@
+import Ajax from '../../util/ajax'
+import api from '../../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    navList: [{
+      icon: '',
+      name: '名著',
+      id: ''
+    }, {
+      icon: '',
+      name: '文学',
+      id: ''
+    }, {
+      icon: '',
+      name: '历史',
+      id: ''
+    }, {
+      icon: '',
+      name: '学术',
+      id: ''
+    }, {
+      icon: '',
+      name: '童话',
+      id: ''
+    }, {
+      icon: '',
+      name: '天文',
+      id: ''
+    }, {
+      icon: '',
+      name: '期刊',
+      id: ''
+    }, {
+      icon: '',
+      name: '更多',
+      id: 'more'
+    }],
+    bookList: [{
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }, {
+      img: '',
+      name: '书名',
+      id: '',
+      status: '状态',
+      author: '作者',
+      publishingHouses: '出版社',
+      stock: '10'
+    }]
+  },
+  mutations: {
+    setNavInfo (state, data) { // 赋值nav
+      (data || []).map((item) => {
+        state.navList.push({
+          icon: '',
+          name: '历史',
+          id: ''
+        })
+      })
+    },
+    emptyNavInfo (state, data) { // 清空nav
+      state.navList = []
+    },
+    setRecommendBookList (state, data) { // 赋值精选推荐书籍列表
+      (data || []).map((item) => {
+        state.bookList.push({
+          img: '',
+          name: '书名',
+          id: '',
+          status: '状态',
+          author: '作者',
+          publishingHouses: '出版社',
+          stock: '10'
+        })
+      })
+    },
+    emptyRecommendBookList (state, data) { // 清空精选推荐书籍列表
+      state.bookList = []
+    }
+  },
+  actions: {
+    getNavList (context, data) { // 获取nav数据
+      return new Promise((resolve, reject) => {
+        Ajax(api.library.getNavList.url, {
+          method: api.library.getNavList.method
+        }).then(res => {
+          context.commit('setNavInfo', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getRecommendBookList (context, data) { // 获取精选推荐书籍列表
+      return new Promise((resolve, reject) => {
+        Ajax(api.library.getRecommendBookList.url, {
+          method: api.library.getRecommendBookList.method
+        }).then(res => {
+          context.commit('setRecommendBookList', res)
+          resolve(res)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    }
+  }
+}

src/util/api.js

@@ -332,6 +332,16 @@ const $api = {
       method: 'get',
       url: `${baseUrl}${wechat}/calendar/isattend/customer`
     }
+  },
+  library: {
+    getNavList: { // 获取图书馆nav
+      method: 'get',
+      url: `${baseUrl}${wechat}/`
+    },
+    getRecommendBookList: { // 获取精选推荐书籍列表
+      method: 'get',
+      url: `${baseUrl}${wechat}/`
+    }
   }
 }
 export default $api