首页瀑布流修改

weiyunpeng · Aug 19, 2017 · 9d17a20 · 9d17a20
1 parent b575ea0
commit 9d17a20
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 44 deletions.
diff --git a/server/server/site/data/photo_flow.json b/server/server/site/data/photo_flow.json
@@ -1,11 +1,11 @@
 {
-    "code": 200,
+    "code": 0,
     "msg": "success",
     "data": {
         "photo": [
             {
                 "id": 4,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/59926e56c3757097728578.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc03715d241874902.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
                     "小清新"
@@ -14,7 +14,7 @@
             },
             {
                 "id": 5,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/59926e55d47f9148376014.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc031f5b249731766.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "小清新"
@@ -23,7 +23,7 @@
             },
             {
                 "id": 3,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993a8ef57b67410329589.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0abbb1866866982.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "欧美大气"
@@ -32,7 +32,7 @@
             },
             {
                 "id": 9,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992be916ee53544570815.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02cd5b129794462.jpg?imageView2/2/w/280/h/",
                 "fav_num": 4,
                 "tag": [
                     "韩式"
@@ -41,7 +41,7 @@
             },
             {
                 "id": 1,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992be916ee53544570815.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc034002282736480.jpg?imageView2/2/w/280/h/",
                 "fav_num": 4,
                 "tag": [
                     "欧美大气"
@@ -50,7 +50,7 @@
             },
             {
                 "id": 8,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992be9239cf6433770821.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996ef9feeceb904679788.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
                     "韩式"
@@ -59,7 +59,7 @@
             },
             {
                 "id": 7,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b9176c5d7886460548.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
                     "韩式"
@@ -68,7 +68,7 @@
             },
             {
                 "id": 6,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993a8ef90bcc927450878.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "小清新"
@@ -77,7 +77,7 @@
             },
             {
                 "id": 2,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b111ec507918196807.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "欧美大气"
@@ -86,7 +86,7 @@
             },
             {
                 "id": 14,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b1111a7bd407866841.png?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -95,7 +95,7 @@
             },
             {
                 "id": 13,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef645ffd5494656176.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -104,7 +104,7 @@
             },
             {
                 "id": 12,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef63770ce580797649.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -113,7 +113,7 @@
             },
             {
                 "id": 11,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef632e651907595346.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -122,7 +122,7 @@
             },
             {
                 "id": 10,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef63a9ecd993906222.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -133,7 +133,7 @@
         "page": {
             "totalcount": 14,
             "pageSize": 20,
-            "currentPage": 0
+            "currentPage": 1
         }
     }
 }
diff --git a/server/server/site/data/photo_flow2.json b/server/server/site/data/photo_flow2.json
@@ -1,65 +1,65 @@
 {
-    "code": 200,
+    "code": 0,
     "msg": "success",
     "data": {
         "photo": [
             {
                 "id": 4,
-                "img": "https://hbimg.b0.upaiyun.com/b6a4996cca56891011a6c3211982147ea54069ce13d6f-VpOhiY_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc03715d241874902.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
-                    "aa小清新"
+                    "小清新"
                 ],
                 "is_fav": 0
             },
             {
                 "id": 5,
-                "img": "https://hbimg.b0.upaiyun.com/e6b4c54fca6ff07268ba33d2346d369c5694a43e10530-uPVvc3_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc031f5b249731766.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
-                    "aa小清新"
+                    "小清新"
                 ],
                 "is_fav": 1
             },
             {
                 "id": 3,
-                "img": "https://hbimg.b0.upaiyun.com/37806f4788d0c080a5d7db2d4c0f7ca07f35951c3a567-Pi351U_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0abbb1866866982.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
-                    "aa欧美大气"
+                    "欧美大气"
                 ],
                 "is_fav": 1
             },
             {
                 "id": 9,
-                "img": "https://hbimg.b0.upaiyun.com/74ac4ed80dd8977f53ff417cfa0bf19ab9bc1b7018d8b-ke6SIR_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02cd5b129794462.jpg?imageView2/2/w/280/h/",
                 "fav_num": 4,
                 "tag": [
-                    "aaa韩式"
+                    "韩式"
                 ],
                 "is_fav": 1
             },
             {
                 "id": 1,
-                "img": "https://hbimg.b0.upaiyun.com/d88f1f2e9bddc5997bd4d3bda64d75baca1481732665d-yagdOF_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc034002282736480.jpg?imageView2/2/w/280/h/",
                 "fav_num": 4,
                 "tag": [
-                    "aaa欧美大气"
+                    "欧美大气"
                 ],
                 "is_fav": 1
             },
             {
                 "id": 8,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992ba4abf42b277213579.jpg",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996ef9feeceb904679788.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
-                    "aaa韩式"
+                    "韩式"
                 ],
                 "is_fav": 1
             },
             {
                 "id": 7,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef686cdd2227533523.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": [
                     "韩式"
@@ -68,7 +68,7 @@
             },
             {
                 "id": 6,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b917b3f37315484845.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "小清新"
@@ -77,7 +77,7 @@
             },
             {
                 "id": 2,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992ba4ac8064687373954.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 1,
                 "tag": [
                     "欧美大气"
@@ -86,7 +86,7 @@
             },
             {
                 "id": 14,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b969d5b47495112678.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc0354f2431981024.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -95,7 +95,7 @@
             },
             {
                 "id": 13,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef66eb9d1935671751.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -104,7 +104,7 @@
             },
             {
                 "id": 12,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef698dd1e408415220.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -113,7 +113,7 @@
             },
             {
                 "id": 11,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b917a53bc873802097.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -122,7 +122,7 @@
             },
             {
                 "id": 10,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992ba4abf42b277213579.jpg?imageView2/2/w/280/h/",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc02c843298604119.jpg?imageView2/2/w/280/h/",
                 "fav_num": 0,
                 "tag": [
                     "韩式"
@@ -133,7 +133,7 @@
         "page": {
             "totalcount": 14,
             "pageSize": 20,
-            "currentPage": 0
+            "currentPage": 2
         }
     }
 }
diff --git a/server/server/site/data/view_photo.json b/server/server/site/data/view_photo.json
@@ -13,7 +13,7 @@
         "list": [
             {
                 "id": 1,
-                "img": "https://hbimg.b0.upaiyun.com/b6a4996cca56891011a6c3211982147ea54069ce13d6f-VpOhiY_fw236",
+                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc031f5b249731766.jpg?imageView2/2/w/280/h/",
                 "fav_num": 3,
                 "tag": "欧美大气",
                 "is_fav": 0

diff --git a/src/components/user/userHead.vue b/src/components/user/userHead.vue
@@ -74,7 +74,7 @@
                 </div>
                 <div class="user-search clearfix">
                     <div class="nav_search">
-                        <input type="text" v-model.trim="keyword" placeholder="" class="nav_form" @keyup.enter="seaBtn">
+                        <input type="text" v-model.trim="keyword" placeholder="搜商家" class="nav_form" @keyup.enter="seaBtn">
                         <a href="javascript:void(0)" class="focus-search" @click="seaBtn">
                             <img src="/static/images/icon_search.png">
                         </a>

diff --git a/src/page/user.vue b/src/page/user.vue
@@ -37,13 +37,33 @@
                         </li>
                     </ul>
                 </div>
+                <waterfall :line="line" :watch="getPhotoListFill" :line-gap="300">
+                    <waterfall-slot v-for="(item, fillNum) in getPhotoListFill" :width="item.width" :height="item.height" :order="flowNum" :key="fillNum" move-class="photo_move">
+                        <div class="panel photo_box hover_sh">
+                            <div class="img-hover" @click="showPhotoModal(item, fillNum)">
+                                <img :src="item.img" :width="300">
+                            </div>
+                            <div class="photo_info">
+                                <span class="photo_like" @click="photoLikeBtn(item.id,item.is_fav,fillNum)">
+                                    <i v-if="item.is_fav" class="icon_like_act"></i>
+                                    <i v-if="!item.is_fav" class="icon_like"></i>
+                                    {{item.fav_num}}
+                                </span>
+                                <ul>
+                                    <li v-for="(tag,t) in item.tag" :key="t">{{tag}}</li>
+                                </ul>
+                            </div>
+                        </div>
+
+                    </waterfall-slot>
+                </waterfall>
             </div>
             <div class="user-water">
-                <waterfall :line="line" :watch="getPhotoList" :line-gap="280" :min-line-gap="250">
+                <waterfall :line="line" :watch="getPhotoList" :line-gap="290">
                     <waterfall-slot v-for="(item, flowNum) in getPhotoList" :width="item.width" :height="item.height" :order="flowNum" :key="flowNum" move-class="photo_move">
                         <div class="panel photo_box hover_sh">
                             <div class="img-hover" @click="showPhotoModal(item, flowNum)">
-                                <img :src="item.img" :width="280">
+                                <img :src="item.img" :width="290">
                             </div>
                             <div class="photo_info">
                                 <span class="photo_like" @click="photoLikeBtn(item.id,item.is_fav,flowNum)">
@@ -86,6 +106,7 @@ export default {
         ...mapGetters({
             getUser: 'getUser',
             getPhotoList: 'getPhotoList',
+            getPhotoListFill: 'getPhotoListFill',
             getPhotoStatus: 'getPhotoStatus',
         }),
         ...mapActions({
@@ -223,7 +244,7 @@ export default {
     position: relative;
     top: 5px;
     margin-bottom: 20px;
-    left: 54px;
+    left: 20px;
     overflow: hidden;
 }
 

diff --git a/src/store/getters.js b/src/store/getters.js
@@ -38,6 +38,7 @@ export const getIndexPhoto = state => state.index;
 export const getViewPhoto = state => state.viewPhoto.list;
 export const getViewPhotoInfo = state => state.viewPhoto.photoInfo;
 export const getPhotoList = state => state.viewPhoto.photoList;
+export const getPhotoListFill = state => state.viewPhoto.photoListFill;
 export const getPhotoStatus = state => state.viewPhoto.status;
 
 export const getGuideList = state => state.guide.list;

diff --git a/src/store/modules/viewPhoto.js b/src/store/modules/viewPhoto.js
@@ -4,6 +4,7 @@ const state = {
     list: [],
     photoInfo:null,
     photoList: [],
+    photoListFill: [],
     status: 0
 };
 
@@ -13,7 +14,12 @@ const mutations = {
         state.photoInfo = data.data;
     },
     [PHOTO_LIST](state, data) {
-        state.photoList = state.photoList.concat(data.list);
+        for(var i=0;i<3;i++){
+            state.photoListFill = state.photoListFill.concat(data.list[i]);
+        }
+        for(var j=3;j<data.list.length;j++){
+            state.photoList = state.photoList.concat(data.list[j]);
+        }
         state.status = data.status;
     },
     [PHOTO_STATUS](state, data){