Browse Source

照片墙

1002884655 4 years ago
parent
commit
8aaeeea155

+ 1
- 1
project.config.json View File

@@ -27,7 +27,7 @@
27 27
 			"outputPath": ""
28 28
 		},
29 29
 		"useIsolateContext": true,
30
-		"useCompilerModule": false,
30
+		"useCompilerModule": true,
31 31
 		"userConfirmedUseCompilerModuleSwitch": false
32 32
 	},
33 33
 	"compileType": "miniprogram",

+ 1
- 1
src/app.config.js View File

@@ -2,11 +2,11 @@
2 2
 export default {
3 3
   pages: [
4 4
 
5
+    'pages/HuiShengHuo/PhotoList/index', // 荟生活-照片列表
5 6
     'pages/HuiShengHuo/index', // 荟生活
6 7
     'pages/HuiShengHuo/ActivityList/index', // 荟生活-活动列表
7 8
     'pages/HuiShengHuo/ActivityList/ActivityDetail/index', // 荟生活-活动列表-活动详情
8 9
     'pages/HuiShengHuo/ActivityList/ActivityDetail/JoinIn/index', // 荟生活-活动列表-活动详情-报名
9
-    'pages/HuiShengHuo/PhotoList/index', // 荟生活-照片列表
10 10
     'pages/HuiShengHuo/PhotoList/PhotoDetail/index', // 荟生活-照片列表-照片详情
11 11
 
12 12
     'pages/HuiQuanYi/index', // 荟权益

+ 14
- 6
src/iconfont.scss View File

@@ -1,10 +1,10 @@
1 1
 @font-face {font-family: "iconfont";
2
-  src: url('//at.alicdn.com/t/font_1998922_px03xetq40o.eot?t=1597199692796'); /* IE9 */
3
-  src: url('//at.alicdn.com/t/font_1998922_px03xetq40o.eot?t=1597199692796#iefix') format('embedded-opentype'), /* IE6-IE8 */
4
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARkAAsAAAAACUgAAAQYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqFDIQ8ATYCJAMcCxAABCAFhG0HahseCBGVnGnIfmryIDGIJhYQ8a1gyAiCg/4fJAgRYMAAAgyl5OFp7X/nzswK4hI9mTTTTCLzG2LSCE2rhS7ebMEb+V2u5ZfZrlCH7uddAVXZHW5yOcrNZvMwvk53fIUE8q1wnf9xNvFgtaUTo4EEIUrt48S/dH59MA+X4P//71XNmPjBsq49i8teg4I54QAFKOne2lOyFqTYExAt6MEgyOMPDttF3OasV36ZQH+TLRRr3Xx8Ka0CzgrEwaSEKEpbMCodWGg1dcONRVxVadO5dKnnivj5+C0IDkmVwYWbD7jGUlZ2+uJ9emWv0n7jiJazw7qNjIUoxOlG51E5SS6U9Q8Os9iOwVpJ3c0gIhJKckiJeF/So9gLq2EwqiNUiun/eTJR05QDVfLuVE2nTxBBJ0JUdKGIQpeDSHQliJrv+00yaJh68AbpB8QE27QIKNNJfDQJMWjQ8IHUgQOHDRNojCyBfgD4IuSPcQAMO37CL6Yg9MMlvmOh0tJN44Dlqsg+gv63+PNG37ieYP2xt26HoEQRjN0dFNvbrHTfXzXQoniXoF/tG8qh9t9u7lXo3bqluDJwp6pf6XGOw8hJGKiaa1bI4/ubZyoVMba3crZFWcb1tcxXKZmanQPKBwPH7H7m8wsY6+T8+3niRjY/82/8+9rgF4btpqYyJsr4h9sJ+kS6/fS6MlG4yV2ZsvzRS3t31FrDIBdedHD/D/2XEuYxdNE+d+/FmxoXR03MOy6uJ8pdLaQ5O+vAqWliB2VqNnpcPv8y1uCZT6XZA+y0tbT8ZLG93V/2VSauolJaena+MO7eE97D6AfeVdvvX40ktSOX64sM0jEW0XeESrN9FPf4Js8h9VB9aBOYZ9UkbtinNrPJC92gej5g2LuupuZGlS3lxr6CrMxC5V58yuFy2W3ZxjG9w6CHnMsmkJ+mBXq3TmUjg0kczmoJST6VhZomevr8F1MILjvrB9HG4H87oAOfgg5dqcEeKpZLtRKDRT+MaOBMCSVgaoo/nLQINBbk8iT0R0v8Jt7h/pZTjxpcTmiNyiBpTIKsNRNfyAuhMsAiqLVWQH8LnN4+wAhkRpQf5ntSIAz1DMlgLyAb6h1fyL9QGe0fakODDv3tjJ0HDjA7kpYPCRPGHNIJqEy3Yi28LCuvUdo6obxEMO6RjIqA73jlzCm2SEtcYoYyYBYgSDdworwO61pDR7rEjJ2Cueu7rmj6IifTTW/ZGgQlGMqB1ARQMlpLsPVsufL915Bk1RLUMTDgvoeIobYHPoc3AH+qbAcNPMp+Y0gKMCb00wSiNcCJakc1Smqgaz6uhDLMUUyId/pcbZEYqnS2VzfXeQP6gw82UUgzLMdL/z5UUtuxTdqFsVLEFGqhyM/kZayfl74jVavaEawtKVlwrwc=') format('woff2'),
5
-  url('//at.alicdn.com/t/font_1998922_px03xetq40o.woff?t=1597199692796') format('woff'),
6
-  url('//at.alicdn.com/t/font_1998922_px03xetq40o.ttf?t=1597199692796') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
7
-  url('//at.alicdn.com/t/font_1998922_px03xetq40o.svg?t=1597199692796#iconfont') format('svg'); /* iOS 4.1- */
2
+  src: url('//at.alicdn.com/t/font_1998922_8fc4wn6tb9.eot?t=1598086429183'); /* IE9 */
3
+  src: url('//at.alicdn.com/t/font_1998922_8fc4wn6tb9.eot?t=1598086429183#iefix') format('embedded-opentype'), /* IE6-IE8 */
4
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATkAAsAAAAACngAAASYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAgqGfIYUATYCJAMkCxQABCAFhG0HfBs0CRGVnPPIvsKmjN2ycecAAABA95pRJBtQ9z5kpAYsLvYcHDCAD8iH3k3f5UKbuhnMjHYiEjan4mP0a+YWOtOb2Z9C/Otk97rfru0cCZZ4hMM5jMRIvMcJLG/E8o8SKJ3tRvshVC2bFIRIaKIYeOx8auAwoMhbKAx0GSxfrEC7t9asDMJEqLb/svMOPdo/ygKlk8sWzsbUFlE4PPeu3hBcgXiAoCabKRQKNXP8MmUAZTM5I+1UVpPATFrs3H/Th4EAjPFAKEhufmktBBToKAIgY0c1DIWQ8aEapATTOSou5JE2yDC5Fdx1KLQG708+wREBOHQKelRlfd4IZDJ8l1TUiwZQEeJ0EQCHy4ACQgHwQDoqY02gUUMoKPatLY83AEv+TRQYMmLMhCmzd6nXF2gxFkgGjQJi6n95JwYKEx0NiAEITcGc2CgAQ0OAAiMCBBgTMAQmBAyAKQEemBEQ4F0QkMG7HAAOABg5hzU6/YBoQIJctKU40FDo0xDE1NRIZ8zMrE3js62sTF1tx9yvWunV9X6FrkNtWgOLHPsMTavtUtvLM+qGl6O8DSqACrxgWLpC02hXlyqf06NGIa2W8bpee8a3i2GT1+5SDen9Q7nxGinv0vdZq8s/X3PW4O07YlHvStXYlgZb127tFLJypbrLFt3ddiYajWqlfZ8x/saUBo1qq9p2RP1K9WbRTjmiS9zS6NCg7G7cprKfUrKzxsFBo9L/dkmiq9kjSWpU0ipcTQ8fprCo91qYVa+ku/PIAa2zFtvSauc26PmBwnuwk+XOrYi+e6fP4Pdxq6/f9+2nTptk9n/9ut+fOPDI2LH8en7dw0fr6Xru0ePIza+XlA07Ubz23M0o0O1FPLeWmjILfskvi1JaqmvKaH30ZQlRKgmkJUrlqEfrPTO5nBxPT+Pggh3gSf338l++8HtZ47TWnNwg2sPdvc5K2dIit7oGygWihcVxx2OAk3af8VP7p+OGiqy+sTrq7df37eAZ43ewhzFrTnYDLywq0rrEuGiLKLDFOaT0pJ03FxWze5ULbtCD3rNCvdzRymH5jBmTJs50gNhv/nwra6vlDlggQi2hc7m/wS31uq00EADocW47oH+0kfoLOeuhzlU91BhXcblXdv111eUrS/hfv3zBpAA//HeTuX/zmM4xv6B44O9q6Dir7ibyr7pO3gwSsISk9NNaNy+Av2nq5krHvXNXQmCXQGPIDQ4CX2oxQ6EzEQuDIAO2EOHyi42qj9QCT0MAYWkCx9wpoCxtKs88IGPvgQHL9MGYPPsbmvCPnb0yloINxAeUmpLSQZmF3b9Q51By2hTI/pBbWwRLJt/8iQl5ilPaVT93UQCmCF48DkMgECaHtRyyyOXMjKpnOiSKnZkcDJUEaoDoARQ1kii3uJgV3v4L0rKgxA3j3tT/INay6wcWMR2on5g6jbuV3Zsr7VknlDoMGImARwQFbiBAqvdzUE0c5AGVizOW86ErHpZ3xNd6DWz0xCstRyo9I2dmVjbZx5ahHLemTDqUsxtaTfmeyzQubU6tseOsNrG6p2ekr9HKLuQeQpmtNtLpAA==') format('woff2'),
5
+  url('//at.alicdn.com/t/font_1998922_8fc4wn6tb9.woff?t=1598086429183') format('woff'),
6
+  url('//at.alicdn.com/t/font_1998922_8fc4wn6tb9.ttf?t=1598086429183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
7
+  url('//at.alicdn.com/t/font_1998922_8fc4wn6tb9.svg?t=1598086429183#iconfont') format('svg'); /* iOS 4.1- */
8 8
 }
9 9
 
10 10
 .iconfont {
@@ -15,6 +15,14 @@
15 15
   -moz-osx-font-smoothing: grayscale;
16 16
 }
17 17
 
18
+.iconxiala:before {
19
+  content: "\e62b";
20
+}
21
+
22
+.iconshangla:before {
23
+  content: "\e7c3";
24
+}
25
+
18 26
 .iconweigouxuan:before {
19 27
   content: "\e623";
20 28
 }

+ 1
- 1
src/pages/HuiShengHuo/ActivityList/ActivityDetail/index.vue View File

@@ -97,7 +97,7 @@
97 97
 import GetUserIcon from '../../../../components/GetUserIcon/index'
98 98
 import { getCurrentInstance } from '@tarojs/taro'
99 99
 import { createNamespacedHelpers } from 'vuex'
100
-const { mapActions: mapIndexActions } = createNamespacedHelpers('index')
100
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
101 101
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
102 102
 export default {
103 103
   name: 'HuoDongXiangQing',

+ 63
- 31
src/pages/HuiShengHuo/PhotoList/index.vue View File

@@ -1,6 +1,6 @@
1 1
 <template>
2 2
   <view class="page HuoDongZhaoPianQiang">
3
-    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh" @ScrollBottom="ScrollBottom">
3
+    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
4 4
 
5 5
       <!-- 活动照片墙 -->
6 6
       <view class="PhotoList">
@@ -9,18 +9,23 @@
9 9
             <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
10 10
           </view>
11 11
         </view>
12
-        <view class="List">
12
+        <view class="ListContainer">
13 13
           <view v-for="(item, index) in PageList" :key="index">
14
-            <text>{{item.Month}}</text>
15
-            <view>
14
+            <view class="Title flex-h">
15
+              <text class="flex-item">{{item.name}}</text>
16
+              <text class="iconfont iconxiala" v-if="!item.Show" @tap="ShowItemList(item, index)"></text>
17
+              <text class="iconfont iconshangla" v-else @tap="item.Show = false"></text>
18
+            </view>
19
+            <view class="List" v-show="item.Show">
16 20
               <view v-for="(subItem, subIndex) in item.List" :key="subIndex">
17
-                <view class="Img" @tap="CheckBigImg(subItem.imgUrl)">
21
+                <view class="Img" @tap="CheckBigImg(item, subItem.imgUrl)">
18 22
                   <view class="MainItemImg">
19 23
                     <image mode="aspectFill" :src="subItem.imgUrl"></image>
20 24
                   </view>
21 25
                 </view>
22 26
               </view>
23 27
             </view>
28
+            <text class="More" v-if="item.Show" @tap="GetMore(item, index)">{{item.Loading ? '加载中...' : item.pageNum < item.pages ? '加载更多' : '加载完毕'}}</text>
24 29
           </view>
25 30
         </view>
26 31
       </view>
@@ -57,6 +62,7 @@ export default {
57 62
   },
58 63
   computed: {
59 64
     ...mapIndexState({
65
+      GalleryTypeList: x => x.GalleryTypeList, // 照片墙类型列表
60 66
       PhotoList: x => x.PhotoList // 照片墙列表
61 67
     })
62 68
   },
@@ -76,9 +82,11 @@ export default {
76 82
       'EditUserInfo' // 编辑用户信息
77 83
     ]),
78 84
     ...mapIndexActions([
85
+      'GetGalleryType', // 获取照片墙列表类型
79 86
       'GetPhotoList' // 获取照片墙列表
80 87
     ]),
81 88
     ...mapIndexMutations([
89
+      'EmptyGalleryTypeList', // 清空照片墙类型列表
82 90
       'EmptyPhotoList' // 清空照片墙列表
83 91
     ]),
84 92
     Init () { // 初始化
@@ -87,39 +95,63 @@ export default {
87 95
       this.PageList = []
88 96
       this.PhotoUrlArr = []
89 97
       this.EmptyPhotoList() // 清空照片墙列表
90
-      this.ToGetPageList() // 获取列表
91
-    },
92
-    CheckBigImg (url) { // 查看大图
93
-      wx.previewImage({
94
-        current: url, // 当前显示图片的http链接
95
-        urls: this.PhotoUrlArr // 需要预览的图片http链接列表
98
+      this.EmptyGalleryTypeList() // 清空照片墙类型列表
99
+      this.GetGalleryType({ queryData: { pageNum: 1, pageSize: 10000 } }).then(() => {
100
+        this.GalleryTypeList.map((item) => {
101
+          this.PageList.push({ ...item, List: [], Show: false, pageNum: 1, pageSize: 10, pages: 2, Loading: false })
102
+        })
96 103
       })
97 104
     },
98
-    ToGetPageList () { // 获取列表
99
-      this.GetPhotoList({ queryData: { ...this.PageData } }).then((res) => { // 获取照片墙列表
100
-        let Arr = []
101
-        this.PhotoList.map((item) => {
102
-          this.PhotoUrlArr.push(item.imgUrl)
103
-          if (Arr.length && item.typeId === Arr[Arr.length - 1].Month) {
104
-            Arr[Arr.length - 1].List.push({ ...item })
105
-          } else {
106
-            Arr.push({ Month: item.typeId, List: [{ ...item }] })
107
-          }
105
+    GetMore (item, index) { // 加载更多
106
+      if (this.DataLock) return
107
+      this.DataLock = true
108
+      item.Loading = true
109
+      item.pageNum += 1
110
+      this.GetPhotoList({ queryData: { pageNum: item.pageNum, pageSize: item.pageSize, typeId: item.typeId } }).then((res) => {
111
+        item.pageNum = res.data.data.current - 0
112
+        item.pages = res.data.data.pages - 0
113
+        this.PhotoList.map((subItem) => {
114
+          item.List.push({ ...subItem })
108 115
         })
109
-        this.PageList = Arr
110
-        this.HasNextPage = res.data.data.current < res.data.data.pages
111 116
         this.DataLock = false
112
-        this.IsRefreshing = false
113
-      }).catch(() => {
117
+        item.Loading = false
118
+      }).catch((res) => {
114 119
         this.DataLock = false
115
-        this.IsRefreshing = false
120
+        item.Loading = false
116 121
       })
117 122
     },
118
-    ScrollBottom () { // 上拉加载
119
-      if (this.DataLock || !this.HasNextPage) return
120
-      this.DataLock = true
121
-      this.PageData.pageNum += 1
122
-      this.ToGetPageList() // 获取列表
123
+    ShowItemList (item, index) { // 显示图片列表
124
+      if (item.List.length) {
125
+        item.Show = true
126
+      } else {
127
+        if (this.DataLock) return
128
+        this.DataLock = true
129
+        item.Loading = true
130
+        item.List = []
131
+        this.GetPhotoList({ queryData: { pageNum: item.pageNum, pageSize: item.pageSize, typeId: item.typeId } }).then((res) => {
132
+          item.pageNum = res.data.data.current - 0
133
+          item.pages = res.data.data.pages - 0
134
+          this.PhotoList.map((subItem) => {
135
+            item.List.push({ ...subItem })
136
+          })
137
+          item.Show = true
138
+          this.DataLock = false
139
+          item.Loading = false
140
+        }).catch((res) => {
141
+          this.DataLock = false
142
+          item.Loading = false
143
+        })
144
+      }
145
+    },
146
+    CheckBigImg (item, url) { // 查看大图
147
+      this.PhotoUrlArr = []
148
+      item.List.map((item) => {
149
+        this.PhotoUrlArr.push(item.imgUrl)
150
+      })
151
+      wx.previewImage({
152
+        current: url, // 当前显示图片的http链接
153
+        urls: this.PhotoUrlArr // 需要预览的图片http链接列表
154
+      })
123 155
     },
124 156
     Refresh (e) { // 页面下拉刷新
125 157
       if (this.DataLock) return

+ 23
- 9
src/pages/HuiShengHuo/PhotoList/page.scss View File

@@ -34,17 +34,20 @@
34 34
         }
35 35
       }
36 36
     }
37
-    > .List {
37
+    > .ListContainer {
38 38
       > view {
39
-        > text {
39
+        > .More {
40 40
           display: block;
41
-          position: relative;
42
-          overflow: hidden;
41
+          text-align: center;
42
+          font-size: 26px;
43
+          line-height: 60px;
44
+          color: #999;
45
+        }
46
+        > view.Title {
43 47
           padding: 0 3.5vw;
44
-          font-size: 28px;
45
-          line-height: 40px;
46
-          text-indent: 20px;
48
+          align-items: center;
47 49
           margin-top: 20px;
50
+          position: relative;
48 51
           &::after {
49 52
             content: "";
50 53
             display: block;
@@ -53,10 +56,21 @@
53 56
             background: #fddd39;
54 57
             position: absolute;
55 58
             left: 3.5vw;
56
-            top: 5px;
59
+            top: 15px;
60
+          }
61
+          > text {
62
+            &:nth-child(1) {
63
+              overflow: hidden;
64
+              font-size: 28px;
65
+              line-height: 60px;
66
+              text-indent: 20px;
67
+            }
68
+            &:nth-child(2) {
69
+              font-size: 40px;
70
+            }
57 71
           }
58 72
         }
59
-        > view {
73
+        > view.List {
60 74
           font-size: 0;
61 75
           margin-top: 20px;
62 76
           > view {

+ 24
- 1
src/store/index/index.js View File

@@ -5,6 +5,7 @@ import ToolClass from '../../util/PublicMethod/index'
5 5
 export default {
6 6
   namespaced: true,
7 7
   state: {
8
+    GalleryTypeList: [], // 照片墙列表类型
8 9
     ActivityDetail: null, // 活动详情
9 10
     IndexBanner: [], // 首页banner
10 11
     ActivityList: [], // 活动列表
@@ -25,7 +26,7 @@ export default {
25 26
       state.IndexBanner = []
26 27
     },
27 28
     UpdatePhotoList (state, data) { // 更新照片墙列表
28
-      state.PhotoList = state.PhotoList.concat(data || [])
29
+      state.PhotoList = data || []
29 30
     },
30 31
     EmptyPhotoList (state) { // 清空照片墙列表
31 32
       state.PhotoList = []
@@ -83,9 +84,31 @@ export default {
83 84
     },
84 85
     EditActivityDetail (state, data) { // 编辑活动详情
85 86
       state.ActivityDetail = { ...state.ActivityDetail, [data.name]: data.value }
87
+    },
88
+    UpdateGalleryTypeList (state, data) { // 更新照片墙列表类型
89
+      state.GalleryTypeList = data || null
90
+    },
91
+    EmptyGalleryTypeList (state) { // 编辑照片墙列表类型
92
+      state.GalleryTypeList = []
86 93
     }
87 94
   },
88 95
   actions: {
96
+    GetGalleryType (context, payload) { // 获取照片墙列表类型
97
+      return new Promise((resolve, reject) => {
98
+        ToolClass.WxRequest({
99
+          url: Api.GetGalleryType.url,
100
+          method: Api.GetGalleryType.method,
101
+          ...payload,
102
+          success (res) {
103
+            context.commit('UpdateGalleryTypeList', res.data.data.records)
104
+            resolve(res)
105
+          },
106
+          error (res) {
107
+            reject(res)
108
+          }
109
+        })
110
+      })
111
+    },
89 112
     GetNewsDetail (context, payload) { // 获取资讯详情
90 113
       return new Promise((resolve, reject) => {
91 114
         ToolClass.WxRequest({

+ 4
- 0
src/util/Api/index.js View File

@@ -42,6 +42,10 @@ const Api = {
42 42
     method: 'get',
43 43
     url: `${prefix}/gallery`
44 44
   },
45
+  GetGalleryType: { // 获取照片墙列表类型
46
+    method: 'get',
47
+    url: `${prefix}/galleryType`
48
+  },
45 49
   GetActivityList: { // 获取活动列表
46 50
     method: 'get',
47 51
     url: `${prefix}/activity`