'Code_Review_加入混入——贼好用'

mixins/list.js

@@ -11,7 +11,7 @@ export default {
       isLoading: false,
       mixinListCofig: {
         // 数据返回的直接路径
-        responsePath: 'result.record',
+        responsePath: 'result.records',
         // 列表是否需要下拉刷新
         isPullDownRefresh: true,
         // 列表是否需要上拉加载
@@ -20,7 +20,11 @@ export default {
 		}
 	},
 	methods: {
-    // 刷新时 会保留的请求参数
+    // 解析分路径获取嵌套值
+    resolvePath(obj, path) {
+      return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj)
+    },
+    // 刷新时保留的请求参数
     setParams() {
       return {  }
     },
@@ -45,17 +49,19 @@ export default {
     // 获取列表
     async getList() {
       this.isLoading = true
-      if (!this.$api[this.mixinListApi]) {
+      const apiMethod = this.resolvePath(this.$api, this.mixinListApi)
+      if (typeof apiMethod !== 'function') {
         console.log('mixinApi不存在', this.mixinListApi);
         return
       }
-      const res = await this.$api[this.mixinListApi]({
+      const res = await apiMethod({
         ...this.extraParams,
         pageNo: this.pageNo,
         pageSize: this.pageSize
       })
-      if (res.code === 200 && res.result.record.length) {
-        this.list = [...this.list, ...res.result.record]
+      const resData = this.resolvePath(res, this.mixinListCofig.responsePath) || []
+      if (res.code === 200 && resData.length) {
+        this.list = [...this.list, ...resData]
         this.pageNo++
       }else {
         uni.showToast({

subPages/index/announcement.vue

@@ -4,7 +4,7 @@
     <view class="announcement-list">
       <view 
         class="announcement-item" 
-        v-for="(item, index) in announcementList" 
+        v-for="(item, index) in list" 
         :key="index"
         @click="goToDetail(item)"
       >
@@ -25,54 +25,16 @@
 </template>
 
 <script>
+import ListMixin from '@/mixins/list.js'
 export default {
   name: 'Announcement',
+  mixins: [ListMixin],
   data() {
     return {
-      announcementList: [],
-      pageNo: 1,
-      pageSize: 10
+      mixinListApi: 'home.queryNoticeList'
     }
   },
-  async onShow() {
-    this.announcementList = []
-    this.pageNo = 1
-    // 页面加载时的逻辑
-    await this.queryAnnouncementList()
-  },
-  methods: {
-    goToDetail(item) {
-      uni.navigateTo({
-        url: `/subPages/index/announcementDetail?id=${item.id}`
-      })
-    },
-    async queryAnnouncementList() {
-      const res = await this.$api.home.queryNoticeList({
-        pageNo: this.pageNo,
-        pageSize: this.pageSize
-      })
-      if (!res.result.records.length) {
-        uni.showToast({
-          title: '没有更多数据了',
-          icon: 'none'
-        })
-        return
-      }
-      this.announcementList.push(...res.result.records)
-      this.pageNo++
-    }
-  },
-  onReachBottom() {
-    // 上拉加载更多的逻辑
-    this.queryAnnouncementList()
-  },
-  async onPullDownRefresh() {
-    // 下拉刷新的逻辑
-    this.pageNo = 1
-    this.announcementList = []
-    await this.queryAnnouncementList()
-    uni.stopPullDownRefresh()
-  }
+
 }
 </script>
 

subPages/my/activityFavorites.vue

@@ -56,19 +56,19 @@ export default {
 			})
 		},
 		async getActivityCollectionList() {
-		const res = await this.$api.activity.queryActivityCollectionList({
-			pageNo: this.pageNo,
-			pageSize: this.pageSize
-		})
-		if (!res.result.records.length) {
-			uni.showToast({
-				title: '没有更多数据了',
-				icon: 'none'
+			const res = await this.$api.activity.queryActivityCollectionList({
+				pageNo: this.pageNo,
+				pageSize: this.pageSize
 			})
-			return
-		}
-		this.favoritesList.push(...res.result.records.map(item => item.communityActivity))
-		this.pageNo++
+			if (!res.result.records.length) {
+				uni.showToast({
+					title: '没有更多数据了',
+					icon: 'none'
+				})
+				return
+			}
+			this.favoritesList.push(...res.result.records.map(item => item.communityActivity))
+			this.pageNo++
 		}
 	},
 	async onShow() {

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -20002,6 +20002,192 @@ module.exports = index_cjs;
 
 /***/ }),
 
+/***/ 570:
+/*!*************************************!*\
+  !*** E:/前端项目合集/木邻有你/mixins/list.js ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/* WEBPACK VAR INJECTION */(function(uni) {
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ 4);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ 30));
+var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ 18));
+var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ 32));
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ 11));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// 简化版列表的混入
+var _default = {
+  data: function data() {
+    return {
+      list: [],
+      pageNo: 1,
+      pageSize: 10,
+      // 此处为拓展参数
+      extraParams: {},
+      mixinListApi: '',
+      isLoading: false,
+      mixinListCofig: {
+        // 数据返回的直接路径
+        responsePath: 'result.records',
+        // 列表是否需要下拉刷新
+        isPullDownRefresh: true,
+        // 列表是否需要上拉加载
+        isReachBottomLoad: true
+      }
+    };
+  },
+  methods: {
+    // 解析分路径获取嵌套值
+    resolvePath: function resolvePath(obj, path) {
+      return path.split('.').reduce(function (acc, key) {
+        return acc && acc[key] !== undefined ? acc[key] : null;
+      }, obj);
+    },
+    // 刷新时保留的请求参数
+    setParams: function setParams() {
+      return {};
+    },
+    // 初始化数据
+    initData: function initData() {
+      this.list = [];
+    },
+    // 初始化请求参数
+    initParams: function initParams() {
+      this.extraParams = _objectSpread({}, this.setParams());
+    },
+    // 初始化分页
+    initPage: function initPage() {
+      this.pageNo = 1;
+    },
+    // 全部初始化
+    initAll: function initAll() {
+      this.initData();
+      // this.initParams()
+      this.initPage();
+    },
+    // 获取列表
+    getList: function getList() {
+      var _this = this;
+      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var apiMethod, res, resData;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this.isLoading = true;
+                apiMethod = _this.resolvePath(_this.$api, _this.mixinListApi);
+                if (!(typeof apiMethod !== 'function')) {
+                  _context.next = 5;
+                  break;
+                }
+                console.log('mixinApi不存在', _this.mixinListApi);
+                return _context.abrupt("return");
+              case 5:
+                _context.next = 7;
+                return apiMethod(_objectSpread(_objectSpread({}, _this.extraParams), {}, {
+                  pageNo: _this.pageNo,
+                  pageSize: _this.pageSize
+                }));
+              case 7:
+                res = _context.sent;
+                resData = _this.resolvePath(res, _this.mixinListCofig.responsePath) || [];
+                if (res.code === 200 && resData.length) {
+                  _this.list = [].concat((0, _toConsumableArray2.default)(_this.list), (0, _toConsumableArray2.default)(resData));
+                  _this.pageNo++;
+                } else {
+                  uni.showToast({
+                    title: '暂无数据',
+                    icon: 'none'
+                  });
+                }
+                // 如果有在加载中
+                if (_this.isLoading) {
+                  _this.isLoading = false;
+                }
+                // 有过有在下拉加载
+                uni.stopPullDownRefresh();
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  },
+  onShow: function onShow() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (_this2.list.length) {
+                _context2.next = 3;
+                break;
+              }
+              _context2.next = 3;
+              return _this2.getList();
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  },
+  onHide: function onHide() {
+    this.initAll();
+  },
+  onPullDownRefresh: function onPullDownRefresh() {
+    var _this3 = this;
+    return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _this3.initAll();
+              _context3.next = 3;
+              return _this3.getList();
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }))();
+  },
+  onReachBottom: function onReachBottom() {
+    var _this4 = this;
+    return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return _this4.getList();
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }))();
+  }
+};
+exports.default = _default;
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
+
+/***/ }),
+
 /***/ 6:
 /*!***************************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/arrayWithHoles.js ***!

unpackage/dist/dev/mp-weixin/subPages/index/announcement.js

@@ -164,16 +164,14 @@ __webpack_require__.r(__webpack_exports__);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(uni) {
+
 
 var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ 4);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ 30));
-var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ 18));
-var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ 32));
+var _list = _interopRequireDefault(__webpack_require__(/*! @/mixins/list.js */ 570));
 //
 //
 //
@@ -202,105 +200,14 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/r
 //
 var _default = {
   name: 'Announcement',
+  mixins: [_list.default],
   data: function data() {
     return {
-      announcementList: [],
-      pageNo: 1,
-      pageSize: 10
+      mixinListApi: 'home.queryNoticeList'
     };
-  },
-  onShow: function onShow() {
-    var _this = this;
-    return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _this.announcementList = [];
-              _this.pageNo = 1;
-              // 页面加载时的逻辑
-              _context.next = 4;
-              return _this.queryAnnouncementList();
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }))();
-  },
-  methods: {
-    goToDetail: function goToDetail(item) {
-      uni.navigateTo({
-        url: "/subPages/index/announcementDetail?id=".concat(item.id)
-      });
-    },
-    queryAnnouncementList: function queryAnnouncementList() {
-      var _this2 = this;
-      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this2$announcementLi;
-        var res;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return _this2.$api.home.queryNoticeList({
-                  pageNo: _this2.pageNo,
-                  pageSize: _this2.pageSize
-                });
-              case 2:
-                res = _context2.sent;
-                if (res.result.records.length) {
-                  _context2.next = 6;
-                  break;
-                }
-                uni.showToast({
-                  title: '没有更多数据了',
-                  icon: 'none'
-                });
-                return _context2.abrupt("return");
-              case 6:
-                (_this2$announcementLi = _this2.announcementList).push.apply(_this2$announcementLi, (0, _toConsumableArray2.default)(res.result.records));
-                _this2.pageNo++;
-              case 8:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }))();
-    }
-  },
-  onReachBottom: function onReachBottom() {
-    // 上拉加载更多的逻辑
-    this.queryAnnouncementList();
-  },
-  onPullDownRefresh: function onPullDownRefresh() {
-    var _this3 = this;
-    return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              // 下拉刷新的逻辑
-              _this3.pageNo = 1;
-              _this3.announcementList = [];
-              _context3.next = 4;
-              return _this3.queryAnnouncementList();
-            case 4:
-              uni.stopPullDownRefresh();
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    }))();
   }
 };
 exports.default = _default;
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
 
 /***/ })
 

unpackage/dist/dev/mp-weixin/subPages/index/announcement.wxml

@@ -1 +1 @@
-<view class="announcement-page data-v-c1e78b5e"><view class="announcement-list data-v-c1e78b5e"><block wx:for="{{announcementList}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['goToDetail',['$0'],[[['announcementList','',index]]]]]]]}}" class="announcement-item data-v-c1e78b5e" bindtap="__e"><view class="item-content data-v-c1e78b5e"><view class="text-content data-v-c1e78b5e"><view class="title data-v-c1e78b5e">{{item.title}}</view><rich-text class="description data-v-c1e78b5e" nodes="{{item.details}}"></rich-text><view class="time data-v-c1e78b5e">{{item.createTime}}</view></view></view></view></block></view></view>
+<view class="announcement-page data-v-c1e78b5e"><view class="announcement-list data-v-c1e78b5e"><block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['goToDetail',['$0'],[[['list','',index]]]]]]]}}" class="announcement-item data-v-c1e78b5e" bindtap="__e"><view class="item-content data-v-c1e78b5e"><view class="text-content data-v-c1e78b5e"><view class="title data-v-c1e78b5e">{{item.title}}</view><rich-text class="description data-v-c1e78b5e" nodes="{{item.details}}"></rich-text><view class="time data-v-c1e78b5e">{{item.createTime}}</view></view></view></view></block></view></view>