Skip to content

F
fashion-ui
Commit e366b0a4 authored by tangfh's avatar tangfh
Browse files
Options

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

parent a6036426
Hide whitespace changes
Inline Side-by-side
Showing with 331 additions and 33 deletions
common/utils/constant.js → common/constant.js
View file @ e366b0a4
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
View file @ e366b0a4
......@@ -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 0 → 100644
View file @ e366b0a4
<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
View file @ e366b0a4
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 0 → 100644
View file @ e366b0a4
{
"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 0 → 100644
View file @ e366b0a4
{
"dependencies": {
"@dcloudio/uni-ui": "^1.5.5"
}
}
pages.json
View file @ e366b0a4
......@@ -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
View file @ e366b0a4
<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,15 +72,37 @@
}
},
onLoad() {
let ui = JSON.parse(JSON.stringify(constant.CONST.cMultiTextUI));
ui.prefix = '面积'
ui.value = '56'
ui.iconRight = "/static/icon-dropdown.png"
ui.isShowIconRight = true
ui.clickActive = true
this.cMultiText01Ui = ui
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'
ui.iconRight = "/static/icon-dropdown.png"
ui.isShowIconRight = true
ui.clickActive = true
this.cMultiText01Ui = ui
},
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
View file @ e366b0a4
......@@ -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 0 → 100644
View file @ e366b0a4
## 1.0.0（2024-05-29）
f-status-view
uni_modules/f-status-view/components/f-status-view/f-status-view.vue 0 → 100644
View file @ e366b0a4
<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 0 → 100644
View file @ e366b0a4
{
"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 0 → 100644
View file @ e366b0a4
# f-status-view
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment