Sun-Official
/
frontend
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feats

张延森 5 年前
父节点
0fc7b36ce8
当前提交
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 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
7
8 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 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 
     <!-- <script src="./until/jquery-1.8.3.min.js"></script> -->
 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 
     <title>foyo</title>
 17 
     <title>foyo</title>
18 
   </head>
 18 
   </head>
19 
   <body>
 19 
   <body>

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

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

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

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

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

17
17
18 
       <div class="row" style="margin:0">
18 
       <div class="row" style="margin:0">
19 
         <div class="col-xs-6 col-md-6" style="padding 0;">
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 
             <span role="button" class="iconfont icon-zan"></span>
21 
             <span role="button" class="iconfont icon-zan"></span>
22 
-            <span>赞 | {{current.likeNum}}</span>
22 
+            <span>赞 | {{current.likeNum || 0}}</span>
23 
           </div>
23 
           </div>
24 
         </div>
24 
         </div>
25 
         <div class="col-xs-6 col-md-6" style="padding 0;">
25 
         <div class="col-xs-6 col-md-6" style="padding 0;">
38 
     <div class="contanier center-block next-prev">
38 
     <div class="contanier center-block next-prev">
39 
       <div class="row case-2">
39 
       <div class="row case-2">
40 
         <div class="col-xs-4 col-md-4 case-3">
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 
             </router-link>
44 
             </router-link>
45 
           </div>
45 
           </div>
48 
           <button type="button" class="btn btn-default button-hover" @click="() => $router.go(-1)">返回</button>
48 
           <button type="button" class="btn btn-default button-hover" @click="() => $router.go(-1)">返回</button>
49 
         </div>
49 
         </div>
50 
         <div class="col-xs-4 col-md-4 case-3">
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 
             </router-link>
54 
             </router-link>
55 
           </div>
55 
           </div>
62
62
63 
       <div class="row home-case" style="padding:0;width: 100%;">
63 
       <div class="row home-case" style="padding:0;width: 100%;">
64 
         <div class="col-xs-6 col-md-3 home-case" style="margin:0" v-for="(item,index) in recommends" :key="index">
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 
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
66 
             <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
67 
               <div class="casetitle">
67 
               <div class="casetitle">
68 
                 <p>{{item.caseTitle}}</p>
68 
                 <p>{{item.caseTitle}}</p>
96 
       return this.detail.current || {}
96 
       return this.detail.current || {}
97 
     },
97 
     },
98 
     brothers() {
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 
     recommends() {
112 
     recommends() {
102 
       return (this.detail.recommends || []).slice(0, 4)
113 
       return (this.detail.recommends || []).slice(0, 4)
106
117
107 
   },
118 
   },
108 
   created () {
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 
   methods: {
126 
   methods: {
115 
-    getDetail () {
116 
-      const id = this.$route.query.id;
117 
-
127 
+    getDetail (id) {
118 
       request({
128 
       request({
119 
         ...apis.case.get,
129 
         ...apis.case.get,
120 
         urlData: { id },
130 
         urlData: { id },
121 
       }).then(res => {
131 
       }).then(res => {
122 
         this.detail = res || {}
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