add Rate commponet :value

src/components/Card.vue

@@ -6,7 +6,7 @@
     <div class="detail">
       <div class="row text-primary">
         <div class="right">
-          {{book.rate}}
+          {{book.rate}} <Rate :value="book.rate" />
         </div>
         <div class="left">
           {{book.title}}
@@ -33,10 +33,13 @@
   </div>
 </template>
 <script>
+import Rate from '@/components/Rate';
 export default {
-  props: ['book'],
+  components:{
+    Rate
+  },
+  props: ['book']
 
-  
 }
 </script>
 <style lang='scss' scoped>

src/components/Rate.vue

@@ -1,11 +1,34 @@
 <template>
-  
+  <div class="rate">
+    <span>☆☆☆☆☆</span>
+    <div class="hollow" :style="style">
+      ★★★★★
+    </div>
+  </div>
 </template>
 <script>
 export default {
-  
+  props: {
+    value: {type: [Number, String], default: '0'}
+  },
+  computed: {
+    style () {
+      return `width:${this.value / 2}em`
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-
+.rate {
+  position: relative;
+  display: inline-block;
+  .hollow {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: 0;
+    width: 0;
+    overflow: hidden;
+  }
+}
 </style>

src/pages/books/Book.vue

@@ -5,27 +5,26 @@
   </div>
 </template>
 <script>
-import {get} from '@/util';
+import {get} from '@/util'
 import Card from '@/components/Card'
 export default {
   components: {
     Card
   },
-  data() {
+  data () {
     return {
       books: []
     }
   },
   methods: {
-    async getList() {
-      const books = await get('/weapp/booklist');
-      console.log(books);
-      this.books = books.list;
-      
+    async getList () {
+      const books = await get('/weapp/booklist')
+      console.log(books)
+      this.books = books.list
     }
   },
-  mounted() {
-    this.getList();
+  mounted () {
+    this.getList()
   }
 }
 </script>

src/pages/me/Me.vue

@@ -28,16 +28,15 @@ export default {
     }
   },
   created () {
-    this.onShow();
+    this.onShow()
   },
   methods: {
-    async addBook(isbn) {
-     
+    async addBook (isbn) {
       const res = await post('/weapp/addbook', {
         isbn,
         openid: this.userInfo.openId
       })
-      console.log(res);
+      console.log(res)
       showModal('添加成功', `${res.title}添加成功`)
     },
     scanBook () {
@@ -45,7 +44,7 @@ export default {
         success: (res) => {
           if (res.result) {
             console.log(res.result)
-            this.addBook(res.result);
+            this.addBook(res.result)
           }
         }
       })
@@ -77,10 +76,9 @@ export default {
       if (userInfo) {
         this.userInfo = userInfo
       }
-    },
+    }
   }
 }
-
 </script>