add book detail thumb && del server ls config.js tencent icloud related configuration

README.md

@@ -37,6 +37,16 @@ npm run build --report
 For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 
+
+
+### server
+使用koa开发  
+```
+cd server
+npm run dev
+```
+> server目录下config中需要填写小程序配置信息Appid & App Secret 等（注： 项目放github上App Secret明文显示 会收到腾讯云短信提醒该泄露，安全隐患）
+
 ### mysql语句
 
 Mysql 基本语法

server/config.js

@@ -1,22 +1,22 @@
 const CONF = {
     serverHost: 'localhost',
     tunnelServerUrl: '',
-    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
+    tunnelSignatureKey: '',
     // 腾讯云相关配置可以查看云 API 密钥控制台：https://console.cloud.tencent.com/capi
-    qcloudAppId: '1253858020',
-    qcloudSecretId: 'AKIDve8qJWnBerpdHhbTpwnQo21kDRQ9OqRq',
-    qcloudSecretKey: 'JOEtJVWQ6XjgR4TluoTs5C3f1JCpDLEt',
-    wxMessageToken: 'weixinmsgtoken',
+    qcloudAppId: '',
+    qcloudSecretId: '',
+    qcloudSecretKey: '',
+    wxMessageToken: '',
     networkTimeout: 30000,
 
     port: '5757',
     rootPathname: '',
 
     // 微信小程序 App ID
-    appId: 'wxa28c90f932b1fb61',
+    appId: '',
 
     // 微信小程序 App Secret
-    appSecret: '64520465c87eab44d8c918a6ead2b33c',
+    appSecret: '',
 
     // 是否使用腾讯云代理登录小程序
     useQcloudLogin: false,

src/components/BookInfo.vue

@@ -1,6 +1,21 @@
 <template>
-  <div>
-      <img class="img" :src="info.image"  mode='aspectFit'>
+  <div class="bookinfo">
+    <div class="thumb">
+      <img class="back" 
+           :src="info.image"  
+           mode="scaleToFill">
+      <img class="img" 
+           :src="info.image" 
+           mode="aspectFit">
+      <div class="info">
+        <div class="title">
+          {{info.title}}
+        </div>
+        <div class="author">
+          {{info.author}}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -8,6 +23,38 @@ export default {
   props: ['info']
 }
 </script>
-<style>
-
+<style lang="scss">
+.bookinfo {
+  .thumb {
+    width: 750rpx;
+    height: 450rpx;
+    overflow: hidden;
+    position: relative;
+    .back {
+      filter: blur(15px);
+      width: 100%;
+    }
+    .img {
+      position: absolute;
+      width: 100%;
+      height: 300rpx;
+      left: 0;
+      top: 30rpx;
+    }
+    .info {
+      color: white;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 330rpx;
+      text-align: center;
+      .title {
+        font-size: 16px;
+      }
+      .author {
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>

src/components/Card.vue

@@ -40,19 +40,19 @@
   </a>
 </template>
 <script>
-import Rate from '@/components/Rate';
+import Rate from '@/components/Rate'
 export default {
-  components:{
+  components: {
     Rate
   },
   props: ['book'],
   computed: {
-    detailUrl() {
-      return '/pages/detail/main?id='+ this.book.id
+    detailUrl () {
+      return '/pages/detail/main?id=' + this.book.id
     }
   },
   methods: {
-    preview() {
+    preview () {
       wx.previewImage({
         current: this.book.image,
         urls: [this.book.image]

src/components/TopSwiper.vue

@@ -28,18 +28,18 @@
 export default {
   props: ['tops'],
   computed: {
-    imgUrls() {
+    imgUrls () {
       // 如果通用 请用chunk函数 比如lodash的chunk方法
-      let res = this.tops;
-      console.log([res.slice(0,3), res.slice(3,6), res.slice(6)]);
-      return [res.slice(0,3), res.slice(3,6), res.slice(6)];
+      let res = this.tops
+      console.log([res.slice(0, 3), res.slice(3, 6), res.slice(6)])
+      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
     }
   },
   methods: {
-    bookDetail(item) {
+    bookDetail (item) {
       // console.log('top options', item);
       wx.navigateTo({
-        url: '/pages/detail/main?id='+item.id
+        url: '/pages/detail/main?id=' + item.id
       })
     }
   }

src/pages/books/Book.vue

@@ -39,48 +39,47 @@ export default {
   methods: {
     async getList (init) {
       if (init) {
-        this.page = 0;
-        this.more = true;
+        this.page = 0
+        this.more = true
       }
-      wx.showNavigationBarLoading();
-      const books = await get('/weapp/booklist', {page:this.page});
-      if (books.list.length<10 && this.page>0) {
-        this.more = false;  // 这种情况下 没有更多数据了
+      wx.showNavigationBarLoading()
+      const books = await get('/weapp/booklist', {page: this.page})
+      if (books.list.length < 10 && this.page > 0) {
+        this.more = false // 这种情况下 没有更多数据了
         // console.log(this.more);
       }
       if (init) {
-        this.books = books.list;
-        wx.stopPullDownRefresh();   // 手动停止下拉刷新
+        this.books = books.list
+        wx.stopPullDownRefresh() // 手动停止下拉刷新
       } else {
         // 下拉刷新，不能直接覆盖books 而是累加
-        this.books = this.books.concat(books.list); 
+        this.books = this.books.concat(books.list)
       }
-      wx.hideNavigationBarLoading();  // 关闭下拉刷新加载
+      wx.hideNavigationBarLoading() // 关闭下拉刷新加载
     },
-    async getTop() {
-      const tops = await get('/weapp/top');
-      this.tops = tops.list;
+    async getTop () {
+      const tops = await get('/weapp/top')
+      this.tops = tops.list
     }
   },
-  onPullDownRefresh() {
-    this.getList(true);
+  onPullDownRefresh () {
+    this.getList(true)
     // console.log('下拉');
-    this.getTop();
-
+    this.getTop()
   },
-  onReachBottom() {
+  onReachBottom () {
     // console.log('没有更多了')
     if (!this.more) {
       // 没有更多了
-      return false;
+      return false
     }
-    this.page++;
+    this.page++
     // console.log('上啦加载', this.page)
-    this.getList();
+    this.getList()
   },
   mounted () {
-    this.getList(true);
-    this.getTop();
+    this.getList(true)
+    this.getTop()
   }
 }
 </script>

src/pages/detail/Detail.vue

@@ -1,35 +1,35 @@
 <template>
   <div>
-    图书id{{bookid}}
+    <!-- 图书id{{bookid}} -->
     <BookInfo :info='info'></BookInfo>
   </div>
 </template>
 <script>
-import {get} from '@/util';
+import {get} from '@/util'
 import BookInfo from '@/components/BookInfo'
 export default {
   components: {
     BookInfo
   },
-  data() {
+  data () {
     return {
       bookid: '',
       info: {}
     }
   },
   methods: {
-    async getDetail() {
+    async getDetail () {
       const info = await get('/weapp/bookdetail', {id: this.bookid})
       wx.setNavigationBarTitle({
         title: info.title
       })
-      console.log(info);
-      this.info = info;
-   }
+      console.log(info)
+      this.info = info
+    }
   },
-  mounted() {
-    this.bookid = this.$root.$mp.query.id;
-    this.getDetail();
+  mounted () {
+    this.bookid = this.$root.$mp.query.id
+    this.getDetail()
   }
 }
 </script>