封装 页面状态插件 f-status-view（loading、empty、error）并上传插件市场

common/utils/constant.js → common/constant.js

 const CONST = {
 	cMultiTextUI: {
+		id: "",
 		hint: "",
 		prefix: "",
 		value: "",
-		valueInput: "",
 		maxlength: 11,
 		isShowFlag: false,
 		second: 60,
@@ -19,6 +19,23 @@ const CONST = {
 		isShowBottomLine: false,
 		clickActive: false,
 		confirmType: "done",
+	},
+	statusViewUI: {
+		loading: {
+			status: "loading",
+			src: "",
+			text: "请稍候",
+		},
+		empty: {
+			status: "empty",
+			src: "",
+			text: "暂无内容",
+		},
+		error: {
+			status: "error",
+			src: "",
+			text: "服务器开小差，请稍候再试",
+		},
 	}
 }
 

common/ui.js

@@ -10,33 +10,50 @@ const scrollViewUI = {
 	height1: 0, //只有导航栏时，scroll-view 的高度
 }
 
+const statusViewUI = {
+	width: 0, 
+	height: 0, //只有导航栏时，scroll-view 的高度
+	status: {
+		loading: {
+			value: "loading",
+			src: "",
+			text: "请稍候",
+		},
+		empty: {
+			value: "empty",
+			src: "/static/icon-empty.png",
+			text: "暂无内容",
+		},
+		error: {
+			value: "error",
+			src: "/static/icon-error.png",
+			text: "服务器开小差，请稍候再试",
+		},
+	}
+}
+
+const appUI = {
+	screenWidth: 0,
+	screenHeight: 0,
+	saftBottom: 0,
+}
+
 function init() {
 	let systemInfo = uni.getSystemInfoSync()
 	// 导航栏高度固定为 44px，状态栏高度为 systemInfo.statusBarHeight
+	appUI.screenWidth = systemInfo.screenHeight
+	appUI.screenHeight = systemInfo.screenWidth
+	appUI.saftBottom = systemInfo.safeAreaInsets.bottom
 	statusBarUI.height = systemInfo.statusBarHeight
 	navigationBarUI.height = statusBarUI.height + 44
 	scrollViewUI.height1 = systemInfo.screenHeight - navigationBarUI.height - systemInfo.safeAreaInsets.bottom
-}
-
-const uLoadingPageUI = {
-	empty: {
-		isShow: true,
-		iconSize: 220,
-		image: "/static/icon-empty.png",
-		loadingText: "暂无内容",
-		fontSize: 14,
-	},
-	loading: {
-		isShow: true,
-		iconSize: 28,
-		image: "",
-		loadingText: "加载中",
-		fontSize: 14,
-	}
+	statusViewUI.width = systemInfo.screenWidth
+	statusViewUI.height = systemInfo.screenHeight - navigationBarUI.height - 44 - systemInfo.safeAreaInsets.bottom
 }
 
 export default {
-	uLoadingPageUI: uLoadingPageUI,
+	appUI: appUI,
+	statusViewUI: statusViewUI,
 	scrollViewUI: scrollViewUI,
 	init: init,
 }
\ No newline at end of file

components/template-empty.vue

+<template>
+	<view></view>
+</template>
+<script>
+	export default {
+		name: "f-status-view",
+		data() {
+			return {
+				
+			};
+		},
+		props: {
+			
+		},
+		watch: {
+			
+		},
+		created() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	
+</style>
\ No newline at end of file

main.js

 import App from './App'
 
 import ui from './common/ui.js'
+import constant from './common/constant.js'
 
 // #ifndef VUE3
 import Vue from 'vue'
 import './uni.promisify.adaptor'
 Vue.config.productionTip = false
 Vue.prototype.$ui = ui
+Vue.prototype.$constant = constant
 App.mpType = 'app'
 const app = new Vue({
   ...App

package-lock.json

+{
+  "name": "fashion-ui",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@dcloudio/uni-ui": "^1.5.5"
+      }
+    },
+    "node_modules/@dcloudio/uni-ui": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.5.tgz",
+      "integrity": "sha512-DTr8o4lcRgu4JJclA2eT7UFVKtglK63OUtcDGysrSeZhgAJAC2gBYm/pYbv0BFxKqxfbdoAFGAFCigCVY9+NAQ=="
+    }
+  },
+  "dependencies": {
+    "@dcloudio/uni-ui": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.5.tgz",
+      "integrity": "sha512-DTr8o4lcRgu4JJclA2eT7UFVKtglK63OUtcDGysrSeZhgAJAC2gBYm/pYbv0BFxKqxfbdoAFGAFCigCVY9+NAQ=="
+    }
+  }
+}

package.json

+{
+  "dependencies": {
+    "@dcloudio/uni-ui": "^1.5.5"
+  }
+}

pages.json

@@ -3,7 +3,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "fashion-ui"
+				"navigationBarTitleText": "时尚插件库"
 			}
 		}
 	],
@@ -13,5 +13,12 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			// uni-ui 规则如下配置
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+		}
+	}
 }
\ No newline at end of file

pages/index/index.vue

 <template>
-	<view class="content">
+	<view class="content" :style="[style]">
+		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view>
 		<f-image-01></f-image-01>
 		<f-text-01 :ui="uiAddBtn"></f-text-01>
 		<view style="display: block; width: 100%;">
@@ -15,16 +16,23 @@
 			<f-title-01 title="租金交付方式" subTitle="(押二付二)"></f-title-01>
 			<f-multi-text-01 :ui="cMultiText01Ui" @click="onCMultiText01Click"></f-multi-text-01>
 		</view>
+		<f-status-view :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view>
 	</view>
 </template>
 
 <script>
-	import constant from '@/common/utils/constant.js'
+	import ui from '@/common/ui.js'
+	import constant from '@/common/constant.js'
 	const cTextColorBlue = "#4AA7F7"
 	export default {
 		data() {
 			return {
 				title: 'fashion-ui',
+				style: {},
+				statusViewUI: {
+					isShowStatusView: true,
+					status: ui.statusViewUI.status.loading.value
+				},
 				uiAddBtn: {
 					style: {
 						marginRight: "32rpx",
@@ -64,6 +72,21 @@
 			}
 		},
 		onLoad() {
+			let _this = this
+			setTimeout(function() {
+				_this.statusViewUI.isShowStatusView = false
+				_this.statusViewUI.status = ui.statusViewUI.status.empty.value
+			}, 500)
+			this.styleInit()
+			this.cMultiText01UiInit()
+		},
+		methods: {
+			styleInit() {
+				this.style = {
+					paddingBottom: ui.appUI.saftBottom + "px"
+				}
+			},
+			cMultiText01UiInit() {
 				let ui = JSON.parse(JSON.stringify(constant.CONST.cMultiTextUI));
 				ui.prefix = '面积'
 				ui.value = '56'
@@ -72,7 +95,14 @@
 				ui.clickActive = true
 				this.cMultiText01Ui = ui
 			},
-		methods: {
+			onStatusViewClick() {
+				console.log("click");
+				this.statusViewUI.status = ui.statusViewUI.status.loading.value
+				let _this = this;
+				setTimeout(() => {
+					_this.statusViewUI.status = ui.statusViewUI.status.error.value
+				}, 300)
+			},
 			onCMultiText01Click() {
 				console.log("click");
 			}
@@ -82,7 +112,7 @@
 
 <style>
 	page {
-		background: rgb(208 208 208);
+		background: #eeeeee;
 	}
 
 	.content {

uni_modules/f-multi-text-01/components/f-multi-text-01/f-multi-text-01.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-	import constant from '@/common/utils/constant.js'
+	import constant from '@/common/constant.js'
 	export default {
 		name: "f-multi-text-01",
 		data() {

uni_modules/f-status-view/changelog.md

+## 1.0.0（2024-05-29）
+f-status-view

uni_modules/f-status-view/components/f-status-view/f-status-view.vue

+<template>
+	<view class="f-status-view flex-column" :style="[style]">
+		<uni-load-more v-if="statusUI.value == 'loading'" :status="statusUI.value" :showText="false"
+			style="margin-top: -44px;"></uni-load-more>
+		<image class="i-status" v-if="statusUI.value != 'loading'" :src="statusUI.src" style="margin-top: -44px;"></image>
+		<text class="t-status">{{ statusUI.text  }}</text>
+	</view>
+</template>
+<script>
+	import constant from '../../../../common/constant.js';
+	import ui from '../../../../common/ui.js';
+	const statusViewUI = ui.statusViewUI
+	export default {
+		name: "f-status-view",
+		data() {
+			return {
+				statusUI: statusViewUI.status.loading,
+				style: {}
+			};
+		},
+		props: {
+			status: {
+				type: String,
+				default: statusViewUI.status.loading.value
+			},
+			loadingUI: {
+				type: Object,
+				default: statusViewUI.status.loading
+			},
+			emptyUI: {
+				type: Object,
+				default: statusViewUI.status.empty
+			},
+			errorUI: {
+				type: Object,
+				default: statusViewUI.status.error
+			},
+		},
+		watch: {
+			status(newVal, oldVal) {
+				this.statusTextInit(newVal)
+			}
+		},
+		created() {
+			this.style = {
+				width: ui.statusViewUI.width + "px",
+				height: ui.statusViewUI.height + "px"
+			}
+			this.statusTextInit(this.status)
+		},
+		methods: {
+			statusTextInit(newVal) {
+				if (newVal == this.loadingUI.value) {
+					this.statusUI = this.loadingUI
+				} else if (newVal == this.emptyUI.value) {
+					this.statusUI = this.emptyUI
+				} else if (newVal == this.errorUI.value) {
+					this.statusUI = this.errorUI
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.f-status-view {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.i-status {
+		width: 320rpx;
+		height: 320rpx;
+	}
+
+	.t-status {
+		color: $uni-text-color-grey;
+		font-size: 24rpx;
+	}
+</style>
\ No newline at end of file

uni_modules/f-status-view/package.json

+{
+  "id": "f-status-view",
+  "displayName": "f-status-view",
+  "version": "1.0.0",
+  "description": "页面状态（loading、empty、error）",
+  "keywords": [
+    "f-status-view"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/f-status-view/readme.md

+# f-status-view
\ No newline at end of file