张延森 5 年之前
父節點
當前提交
866594f92d
共有 4 個文件被更改,包括 61 次插入25 次删除
  1. 7
    7
      public/index.html
  2. 6
    1
      src/config/api.js
  3. 1
    2
      src/router.js
  4. 47
    15
      src/views/Details.vue

+ 7
- 7
public/index.html 查看文件

@@ -6,14 +6,14 @@
6 6
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7
     
8 8
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9
-    <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
10
-    <script src="./static/js/jquery.min.js"></script>
9
+    <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
10
+    <script src="/static/js/jquery.min.js"></script>
11 11
     <!-- <script src="./until/jquery-1.8.3.min.js"></script> -->
12
-    <script src="./bootstrap/js/bootstrap.min.js"></script>
13
-    <script src="./swiper/dist/js/swiper.min.js"></script>
14
-    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
15
-    <link rel="stylesheet" href="./swiper/dist/css/swiper.min.css">
16
-    <link rel="stylesheet" href="./iconfont.css">
12
+    <script src="/bootstrap/js/bootstrap.min.js"></script>
13
+    <script src="/swiper/dist/js/swiper.min.js"></script>
14
+    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
15
+    <link rel="stylesheet" href="/swiper/dist/css/swiper.min.css">
16
+    <link rel="stylesheet" href="/iconfont.css">
17 17
     <title>foyo</title>
18 18
   </head>
19 19
   <body>

+ 6
- 1
src/config/api.js 查看文件

@@ -20,7 +20,12 @@ const apis = {
20 20
     get: {
21 21
       url: `${commPrefix}/case/:id`,
22 22
       method: 'get',
23
-    }
23
+    },
24
+
25
+    like: {
26
+      url: `${commPrefix}/like/case/:id`,
27
+      method: 'post',
28
+    },
24 29
   },
25 30
   caseType: {
26 31
     list: {

+ 1
- 2
src/router.js 查看文件

@@ -6,7 +6,6 @@ Vue.use(Router)
6 6
 
7 7
 export default new Router({
8 8
   mode: 'history',
9
-  base: process.env.BASE_URL,
10 9
   routes: [
11 10
     {
12 11
       path: '/',
@@ -46,7 +45,7 @@ export default new Router({
46 45
       component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue')
47 46
     },
48 47
     {
49
-      path: '/details',
48
+      path: '/details/:id',
50 49
       name: 'details',
51 50
       // route level code-splitting
52 51
       // this generates a separate chunk (about.[hash].js) for this route

+ 47
- 15
src/views/Details.vue 查看文件

@@ -17,9 +17,9 @@
17 17
 
18 18
       <div class="row" style="margin:0">
19 19
         <div class="col-xs-6 col-md-6" style="padding 0;">
20
-          <div class="pull-left">
20
+          <div class="pull-left" @click="postLike">
21 21
             <span role="button" class="iconfont icon-zan"></span>
22
-            <span>赞 | {{current.likeNum}}</span>
22
+            <span>赞 | {{current.likeNum || 0}}</span>
23 23
           </div>
24 24
         </div>
25 25
         <div class="col-xs-6 col-md-6" style="padding 0;">
@@ -38,8 +38,8 @@
38 38
     <div class="contanier center-block next-prev">
39 39
       <div class="row case-2">
40 40
         <div class="col-xs-4 col-md-4 case-3">
41
-          <div class="btn1 btn-link pull-left case-3 button-hover prev-page" v-if="brothers.length">
42
-            <router-link :to="{name: 'details', query: { id: brothers[0].id }}">
41
+          <div class="btn1 btn-link pull-left case-3 button-hover prev-page" v-if="brothers[0].id">
42
+            <router-link :to="{name: 'details', params: { id: brothers[0].id }}">
43 43
               上一个案例
44 44
             </router-link>
45 45
           </div>
@@ -48,8 +48,8 @@
48 48
           <button type="button" class="btn btn-default button-hover" @click="() => $router.go(-1)">返回</button>
49 49
         </div>
50 50
         <div class="col-xs-4 col-md-4 case-3">
51
-          <div class="btn1 btn-link pull-right case-3 button-hover next-page" v-if="brothers.length > 1">
52
-            <router-link :to="{name: 'details', query: { id: brothers[1].id }}">
51
+          <div class="btn1 btn-link pull-right case-3 button-hover next-page" v-if="brothers[1].id">
52
+            <router-link :to="{name: 'details', params: { id: brothers[1].id }}">
53 53
               下一个案例
54 54
             </router-link>
55 55
           </div>
@@ -62,7 +62,7 @@
62 62
 
63 63
       <div class="row home-case" style="padding:0;width: 100%;">
64 64
         <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in recommends" :key="index">
65
-          <router-link :to="{name: 'details', query: { id: item.id }}">
65
+          <router-link :to="{name: 'details', params: { id: item.id }}">
66 66
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
67 67
               <div class="casetitle">
68 68
                 <p>{{item.caseTitle}}</p>
@@ -96,7 +96,18 @@ export default {
96 96
       return this.detail.current || {}
97 97
     },
98 98
     brothers() {
99
-      return this.detail.brothers || []
99
+      let b = this.detail.brothers
100
+      if (!b || !b.length) {
101
+        b = [{}, {}]
102
+      } else if (b.length === 1) {
103
+        if (b[0].id > this.$route.params.id) {
104
+          b = [{}].concat(b)
105
+        } else {
106
+          b.push({})
107
+        }
108
+      }
109
+
110
+      return b
100 111
     },
101 112
     recommends() {
102 113
       return (this.detail.recommends || []).slice(0, 4)
@@ -106,22 +117,43 @@ export default {
106 117
 
107 118
   },
108 119
   created () {
109
-    this.getDetail()
120
+    this.getDetail(this.$route.params.id)
110 121
   },
111
-  beforeRouteUpdate () {
112
-    // this.getDetail()
122
+  beforeRouteUpdate (to, from, next) {
123
+    this.getDetail(to.params.id)
124
+    next()
113 125
   },
114 126
   methods: {
115
-    getDetail () {
116
-      const id = this.$route.query.id;
117
-
127
+    getDetail (id) {
118 128
       request({
119 129
         ...apis.case.get,
120 130
         urlData: { id },
121 131
       }).then(res => {
122 132
         this.detail = res || {}
123 133
       })
124
-    }
134
+    },
135
+
136
+    postLike () {
137
+      const id = this.$route.params.id;
138
+
139
+      request({
140
+        ...apis.case.like,
141
+        urlData: { id },
142
+      }).then(res => {
143
+        this.detail = {
144
+          ...this.detail,
145
+          current: {
146
+            ...this.current,
147
+            likeNum: res || 0,
148
+          }
149
+        }
150
+
151
+        this.$message({
152
+          message: res == this.current.likeNum ? '已赞' : '赞 +1',
153
+          type: res == this.current.likeNum ? 'warning' : 'success'
154
+        });
155
+      })
156
+    },
125 157
 
126 158
   },
127 159