From 2ec05b6ab54178799a54cfef32217982ff6f1ab6 Mon Sep 17 00:00:00 2001
From: Hunlongyu <hunlongyu@gmail.com>
Date: Fri, 30 Oct 2020 10:05:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=B3=20=E7=A7=BB=E9=99=A4request,=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=B7=B2=E6=9C=89=E5=90=8C=E6=A0=B7=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E7=9A=84axios=E9=87=8D=E5=86=99.=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=B1=86=E7=93=A3=E8=AF=84=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  1 -
 src/components/Recommandation.vue | 32 +++++++++++++++++--------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 11b5b28..4489d6b 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "mousetrap": "^1.6.5",
     "qrcode.vue": "^1.7.0",
     "randomstring": "^1.1.5",
-    "request": "^2.88.2",
     "v-fit-columns": "^0.2.0",
     "vue": "^2.6.12",
     "vue-infinite-loading": "^2.4.5",
diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index 8566878..c7eebe1 100644
--- a/src/components/Recommandation.vue
+++ b/src/components/Recommandation.vue
@@ -3,7 +3,7 @@
     <div class="listpage-content">
       <div class="listpage-header">
         <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
-        <el-button @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
+        <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
       </div>
       <div class="listpage-body" id="recommandataions-table" v-show="viewMode === 'list'">
         <el-table size="mini" fit height="100%" row-key="id"
@@ -63,7 +63,7 @@
               <div class="card">
                 <div class="img">
                   <div class="rate">
-                    <span v-if="props.data.rate && props.data.rate !== '暂无评分'">豆瓣评分: {{props.data.rate}}</span>
+                    <span v-if="props.data.rate && props.data.rate !== '暂无评分'">豆瓣: {{props.data.rate}}</span>
                   </div>
                   <img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
                   <div class="operate">
@@ -94,7 +94,6 @@ import { mapMutations } from 'vuex'
 import { history, recommandation, setting } from '../lib/dexie'
 import zy from '../lib/site/tools'
 import Waterfall from 'vue-waterfall-plugin'
-// import { recommandations as buildInRecommandations } from '../lib/dexie/initData'
 const { clipboard } = require('electron')
 export default {
   name: 'recommandations',
@@ -102,7 +101,8 @@ export default {
     return {
       recommandations: [],
       sites: [],
-      viewMode: 'picture'
+      viewMode: 'picture',
+      loading: false
     }
   },
   components: {
@@ -164,13 +164,12 @@ export default {
     },
     updateEvent () {
       const url = 'https://raw.githubusercontent.com/Hunlongyu/ZY-Player/master/src/lib/dexie/iniData/Recommandations.json'
-      const request = require('request')
-      const options = { json: true }
-      request(url, options, (error, res, body) => {
-        if (!error && res.statusCode === 200) {
-          // do something with JSON, using the 'body' variable
-          if (body.length > 0) {
-            this.recommandations = body
+      this.loading = true
+      const axios = require('axios')
+      axios.get(url).then(res => {
+        if (res.status === 200) {
+          if (res.data.length > 0) {
+            this.recommandations = res.data
             this.recommandations.sort(function (a, b) {
               return b.detail.year - a.detail.year
             })
@@ -178,6 +177,7 @@ export default {
             this.$message.success('更新推荐成功')
           }
         }
+        this.loading = false
       })
     },
     async playEvent (e) {
@@ -313,13 +313,17 @@ export default {
             cursor: pointer;
           }
           .rate{
-            right: 0;
-            top: 0;
             position: absolute;
+            top: 10%;
+            right: -35%;
             width: 100%;
-            font-size: 1rem;
             background-color: #111111aa;
             color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(45deg);
           }
           .operate{
             display: none;