+

pages/template/base-list.vue

+<template>
+	<view class="content">
+		<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
+		<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
+			left-icon="left" left-text="返回" 
+			:title="option.navBar.title" 
+			:titleRightIcon="option.navBar.center.right.icon"
+			:titleRightIcon2="option.navBar.center.right2.icon"
+			@clickLeft="onNavBarLeftClick"
+			@onClickTitleRightIcon="onClickTitleRightIcon"
+			@onClickTitleRightIcon2="onClickTitleRightIcon2">
+		</uni-nav-bar>
+		<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" :refresher-enabled="refresherEnabled"
+			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
+			:style="{'height':(scrollViewHeight+'px')}">
+			<view class="flex-column" v-if="detail || items.length > 0" :style="{'min-height': (scrollViewHeight + 'px')}">
+				
+			</view>
+			<c-status-view @onStatusClick="onStatusClick" v-if="contentStatus.value"></c-status-view>
+			<uni-load-more :status="loadMoreStatus" :icon-size="16" v-if="detail || items.length > 0"
+				:content-text="loadMoreViewContentText" />
+		</scroll-view>
+		<view class="com-view-bottom" :style="{paddingBottom: bottomBtnPaddingBottom}">
+			<text class="text-bottom-btn" @click="onBottomBtnClick">{{detail.btnText}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import MSC from './../../utils/mishang_constant.js'
+	import constant from './../../utils/constant.js'
+	import util from './../../utils/util.js'
+	export default {
+		data() {
+			return {
+				option: {
+					navBar: {
+						title: '店铺信息认证',
+						center: {
+							right: {
+								icon: ""
+							},
+							right2: {
+								icon: ""
+							}
+						}
+					}
+				},
+				navBarHeight: 0,
+				scrollViewHeight: 1000,
+				refresherEnabled: true,
+				refresherTriggered: false,
+				loadMoreViewContentText: {
+					contentnomore: "到底啦~"
+				},
+				loadMoreStatus: 'noMore',
+				page: 1,
+				total_page: 1,
+				loadMoreStatus: null,
+				contentStatus: {},
+				items: [],
+				channel: "ongoning",
+				firstRequest: true,
+				bottomBtnPaddingBottom: "",
+				detail: {
+					btnText: "下一步",
+				},
+			}
+		},
+		onLoad(option) {
+			var systemInfo = uni.getSystemInfoSync();
+			//scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度）
+			this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
+					.statusBarHeight + this.$refs.navBar.height) -
+				(systemInfo.safeAreaInsets.bottom) -
+				84 / getApp().globalData.pxToRpxScale;
+			this.bottomBtnPaddingBottom = systemInfo.safeAreaInsets.bottom + "px"
+			this.init(option);
+		},
+		onShow() {
+			if (!this.firstRequest && this.page == 1) {
+				this.refreshFlag = true;
+				this.getList();
+			}
+		},
+		methods: {
+			init(option) {
+				this.refresh();
+			},
+			onNavBarLeftClick() {
+				uni.navigateBack();
+			},
+			onClickTitleRightIcon() {
+				console.log("click...");
+			},
+			onClickTitleRightIcon2() {
+				console.log("click...");
+			},
+			onEmptyClick() {
+				this.onRefresh();
+			},
+			onBottomBtnClick() {
+				uni.navigateTo({
+					url: ""
+				})
+			},
+			onItemClick(item) {
+				uni.navigateTo({
+					url: ""
+				})
+			},
+			onStatusClick() {
+				this.refresh();
+			},
+			refresh() {
+				let _this = this;
+				setTimeout(() => {
+					_this.refresherTriggered = true;
+				}, 35);
+			},
+			onRefresh(e) {
+				this.refresherTriggered = true;
+				this.page = 1;
+				this.total_page = 1;
+				this.loadMoreStatus = constant.LOAD_STATUS.noMore;
+				this.request();
+			},
+			onLoadMore(e) {
+				if (constant.LOAD_STATUS.noMore == this.loadMoreStatus) {
+					return;
+				}
+				this.loadMoreStatus = constant.LOAD_STATUS.loading;
+				this.page++;
+				this.request();
+			},
+			request() {
+				this.page = this.page > this.total_page ? this.total_page : this.page;
+				let url = "";
+				if (!url) {
+					let _this = this;
+					setTimeout(() => {
+						_this.refresherTriggered = false;
+						_this.contentStatus = constant.CONTENT_STATUS.EMPTY;
+					}, 300);
+					return;
+				}
+				let param = {
+					channel: this.channel,
+					page: this.page
+				};
+				let option = {
+					isNeedShowLoading: false
+				};
+				util.request(url, param, option, {
+					success: this.requestSuccess,
+					fail: this.requestFail,
+					complete: this.requestComplete
+				});
+			},
+			requestSuccess(res) {
+				if (res.data.code > 0) {
+					this.contentStatus == this.items.length == 0 ? constant.CONTENT_STATUS.ERROR : null;
+					return;
+				}
+				let data = res.data.data;
+				let list = data.list;
+				try {
+					this.total_page = util.calTotalPage(data.total_list);
+				} catch (e) {
+					this.total_page = 1;
+					console.log(e);
+				}
+				if (this.refresherTriggered || this.items.length == 0) {
+					this.items = list;
+					this.loadMoreStatus = this.total_page == 1 ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more;
+				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
+					if (list.length > 0) {
+						this.items = this.items.concat(list);
+					}
+					this.loadMoreStatus = this.page == this.total_page ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS
+						.more;
+				}
+				this.contentStatus = this.items.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
+			},
+			requestFail(res, status) {
+				this.contentStatus = status;
+			},
+			requestComplete() {
+				if (this.refresherTriggered) {
+					this.refresherTriggered = false;
+					if (this.total_page > 1) {
+						this.loadMoreStatus = constant.LOAD_STATUS.more;
+					}
+				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
+					if (this.page > this.total_page) {
+						this.loadMoreStatus = constant.LOAD_STATUS.noMore;
+						this.page = this.total_page
+					} else {
+						this.loadMoreStatus = constant.LOAD_STATUS.more;
+					}
+				}
+				this.refreshFlag = false
+				this.firstRequest = false
+				uni.hideLoading()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.image-fashion-logo {
+		width: 136rpx;
+	}
+</style>

pages/template/base-page.vue

@@ -2,22 +2,20 @@
 	<view class="content">
 		<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
 		<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
-			left-icon="left" left-text="返回" 
-			:title="option.navBar.title" 
-			:titleRightIcon="option.navBar.center.right.icon"
-			:titleRightIcon2="option.navBar.center.right2.icon"
-			@clickLeft="onNavBarLeftClick"
-			@onClickTitleRightIcon="onClickTitleRightIcon"
+			left-icon="left" left-text="返回" :title="option.navBar.title"
+			:titleRightIcon="option.navBar.center.right.icon" :titleRightIcon2="option.navBar.center.right2.icon"
+			@clickLeft="onNavBarLeftClick" @onClickTitleRightIcon="onClickTitleRightIcon"
 			@onClickTitleRightIcon2="onClickTitleRightIcon2">
 		</uni-nav-bar>
 		<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" :refresher-enabled="refresherEnabled"
-			@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
+			@refresherrefresh="onRefresh" :refresher-triggered="refresherTriggered"
 			:style="{'height':(scrollViewHeight+'px')}">
-			<view class="flex-column" v-if="detail || items.length > 0" :style="{'min-height': (scrollViewHeight + 'px')}">
-				
+			<view class="flex-column" v-if="detail"
+				:style="{'min-height': (scrollViewHeight + 'px')}">
+
 			</view>
 			<c-status-view @onStatusClick="onStatusClick" v-if="contentStatus.value"></c-status-view>
-			<uni-load-more :status="loadMoreStatus" :icon-size="16" v-if="detail || items.length > 0"
+			<uni-load-more :status="loadMoreStatus" :icon-size="16" v-if="detail"
 				:content-text="loadMoreViewContentText" />
 		</scroll-view>
 		<view class="com-view-bottom" :style="{paddingBottom: bottomBtnPaddingBottom}">
@@ -35,7 +33,7 @@
 			return {
 				option: {
 					navBar: {
-						title: '店铺信息认证',
+						title: '标题',
 						center: {
 							right: {
 								icon: ""
@@ -120,21 +118,9 @@
 			},
 			onRefresh(e) {
 				this.refresherTriggered = true;
-				this.page = 1;
-				this.total_page = 1;
-				this.loadMoreStatus = constant.LOAD_STATUS.noMore;
 				this.request();
-			},
-			onLoadMore(e) {
-				if (constant.LOAD_STATUS.noMore == this.loadMoreStatus) {
-					return;
-				}
-				this.loadMoreStatus = constant.LOAD_STATUS.loading;
-				this.page++;
-				this.request();
-			},
+			}
 			request() {
-				this.page = this.page > this.total_page ? this.total_page : this.page;
 				let url = "";
 				if (!url) {
 					let _this = this;
@@ -163,42 +149,13 @@
 					return;
 				}
 				let data = res.data.data;
-				let list = data.list;
-				try {
-					this.total_page = util.calTotalPage(data.total_list);
-				} catch (e) {
-					this.total_page = 1;
-					console.log(e);
-				}
-				if (this.refresherTriggered || this.items.length == 0) {
-					this.items = list;
-					this.loadMoreStatus = this.total_page == 1 ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more;
-				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
-					if (list.length > 0) {
-						this.items = this.items.concat(list);
-					}
-					this.loadMoreStatus = this.page == this.total_page ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS
-						.more;
-				}
-				this.contentStatus = this.items.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
+				this.detail = data;
 			},
 			requestFail(res, status) {
 				this.contentStatus = status;
 			},
 			requestComplete() {
-				if (this.refresherTriggered) {
-					this.refresherTriggered = false;
-					if (this.total_page > 1) {
-						this.loadMoreStatus = constant.LOAD_STATUS.more;
-					}
-				} else if (this.loadMoreStatus == constant.LOAD_STATUS.loading) {
-					if (this.page > this.total_page) {
-						this.loadMoreStatus = constant.LOAD_STATUS.noMore;
-						this.page = this.total_page
-					} else {
-						this.loadMoreStatus = constant.LOAD_STATUS.more;
-					}
-				}
+				this.refresherTriggered = false;
 				this.refreshFlag = false
 				this.firstRequest = false
 				uni.hideLoading()
@@ -211,4 +168,4 @@
 	.image-fashion-logo {
 		width: 136rpx;
 	}
-</style>
+</style>
\ No newline at end of file