@kaiyinchem/ky-uniui 1.0.3

package/components/ky-fetch.vue

@@ -0,0 +1,339 @@
+<template>
+	<view class="ky-fetch-wrap">
+		
+		<view v-show="loadState === 1"  class="ky-fetch-content">
+			<slot v-if="!noLoadmore" :list="list"></slot>
+			<slot v-else :data="data"></slot>
+			<view v-if="loadState === 1 && !noLoadmore" class="ky-fetch-more-nodata" @click="reload">
+				<text class="ky-fetch-more-tips">{{ tips }}</text>
+				<image v-if="!noMore && !loadError" class="ky-fetch-more-loading" src="/static/img/load.gif"></image>
+			</view>
+		</view>
+		
+		<view v-if="loadState === 0 || !loadState" :class="{ isRelative }" class="ky-fetch-loading">
+			<ky-loading v-if="!$slots.loading"></ky-loading>
+			<slot name="loading"></slot>
+		</view>
+		
+		<view v-if="loadState !== 0 && loadState !== 1" class="ky-fetch-error">
+			
+			<view v-if="!$slots.nodata || !$slots.error" class="ky-fetch-error-tip" @click="reload">
+				<template v-if="!noIcon">
+					<image v-if="loadState === -1" class="ky-fetch-err-img" src="@/static/img/nodata.png"></image>
+					<image v-else-if="loadState === -2" class="ky-fetch-err-img" src="@/static/img/request_error.png"></image>
+					<image v-else class="ky-fetch-err-img" src="@/static/img/network_error.png"></image>
+				</template>
+				<text class="ky-fetch-err-txt">{{ msg || noDataMsg || (loadState === -1 ? '暂无相关内容' : '加载失败，请点击重试') }}</text>
+			</view>
+			
+			<view v-if="$slots.nodata && loadState === -1" class="ky-fetch-error-tip">
+			  <slot name="nodata" ></slot>
+			</view>
+			
+			<view v-if="$slots.error && loadState === -2" class="ky-fetch-error-tip">
+			  <slot name="error" ></slot>
+			</view>
+			
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		emits: ['load', 'error', 'all'],
+		props: {
+			// 是否加载列表
+			noLoadmore: {
+				type: Boolean,
+				default: false
+			},
+			// api地址
+			api: {
+				type: String,
+				default: '',
+				required: true,
+			},
+			// status 1：请求成功, -1：暂无数据, -2：请求失败， -3: 无网络
+			status: {
+				type: Number,
+				default: 0
+			},
+			// 筛选条件
+			condition: {
+				type: Object,
+				default: () => {}
+			},
+			// 不主动执行请求
+			manual: {
+				type: Boolean,
+				default: false
+			},
+			// 是否相对定位
+			isRelative: {
+				type: Boolean,
+				default: false,
+			},
+			// 是否请求完成就隐藏loading
+			autoHideLoading: {
+				type: Boolean,
+				default: true
+			},
+			// 是否返回合并后的数据
+			concat: {
+				type: Boolean,
+				default: true
+			},
+      noDataMsg: {
+        type: String,
+        default: '',
+      },
+			errMsg: {
+			  type: String,
+			  default: '',
+			},
+			// 无内容或者错误时不显示图标
+			noIcon: {
+			  type: Boolean,
+			  default: false
+			}
+		},
+		data() {
+			return {
+				noMore: false,
+				loadState: 0,
+				filter: {
+					page: 1,
+					size: 10
+				},
+				data: {},
+				list: [],
+				tips: '没有更多了',
+				loadError: false,
+				loading: false,
+				isChangeCondition: false,
+        msg: '',
+			}
+		},
+		watch: {
+			status(v) {
+				this.loadState = v
+			},
+		},
+		mounted() {
+			if (!this.manual) {
+				this.init()
+			}
+			this.msg = this.errMsg
+			this.loadState = this.status
+			this.setFilters(this.condition)
+		},
+		methods: {
+			async init() {
+				this.filter.page = 1
+				this.list = []
+				return await this.getList()
+			},
+			// 为了条件查询后使用的, noReload是否设置loadState为1
+			refresh(noReload) {
+				this.filter.page = 1
+				this.list = []
+				// 不延迟的话，condition里面的东西拿不到
+				setTimeout(() => {
+					this.getList(noReload)
+				})
+			},
+			reload() {
+				if (this.loading || this.noMore) {
+					return
+				}
+				this.loading = false
+				this.getList()
+			},
+			hideLoading() {
+				this.loadState = 1
+			},
+      setErrMsg(msg) {
+      	this.msg = msg
+        this.loadState = -2
+      },
+			setFilters(data = {}) {
+				const obj = { ...this.filter, ...data, }
+				for (let a in obj) {
+					if (!obj[a] && typeof obj[a] !== 'number') {
+						delete obj[a]
+					}
+				}
+				this.filter = obj
+			},
+			async getList(noReload) {
+				this.loading = true
+				this.setFilters(this.condition)
+				let rows = []
+				const params = { ...this.filter }
+				const { page, size } = params
+				
+				if (page === 1 && !noReload) {
+					this.loadState = 0
+				}
+				
+				if (params.requestBodyDic && !this.noLoadmore) {
+					params.requestBodyDic.page = page
+					params.requestBodyDic.size = size
+					delete params.page
+					delete params.size
+				}
+				
+				if (this.noLoadmore) {
+					delete params.page
+					delete params.size
+				}
+				
+				try {
+					const apiUrl = this.api.split('.')
+					const res = await this.$api[apiUrl[0]][apiUrl[1]](params)
+          const { data, lists, list, count } = res
+					
+					if (this.noLoadmore) {
+						this.data = data || res
+						this.loadState = 1
+						this.$emit('load', this.data)
+						return this.data
+					}
+					
+          if (!data) {
+            rows = lists || list || []
+          } else {
+            rows = Array.isArray(data) ? data : data.lists
+          }
+					
+					if (Array.isArray(res)) {
+						rows = res
+					}
+					
+					const newList = rows
+					const isNoData = !newList.length && page === 1
+					
+					this.list = this.concat ? [...this.list, ...newList] : newList
+
+          this.noMore = newList.length < size
+
+          if (data && data.count) {
+             this.noMore = this.list.length >= data.count
+          }
+
+          if (count) {
+            this.noMore = this.list.length >= count
+          }
+
+					this.tips = this.noMore ? '没有更多了' : '加载中...'
+					
+					if (this.autoHideLoading) {
+						this.loadState = isNoData ? -1 : 1
+					}
+					
+					this.loadError = false
+					this.$emit('load', this.list)
+					
+					if (page === 1 && data) {
+						const obj = { ...data }
+						delete obj.lists
+						this.$emit('all', obj)
+					}
+					
+				} catch(e) {
+					if (page === 1) {
+						this.loadState = -2
+					}
+					if (e.code === 504) {
+						this.loadState = -3
+					}
+					this.tips = e.msg || '加载失败，请点击重试'
+          this.msg = this.tips
+					this.loadError = true
+          this.$emit('error', e)
+          return Promise.reject(e)
+				} finally {
+					this.loading = false
+				}
+			},
+			loadMore() {
+				if (this.noMore) {
+					return
+				}
+				if (this.loading) {
+					return
+				}
+        if (this.loadError) {
+        	return
+        }
+				this.filter.page ++
+				this.getList()
+			}
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.ky-fetch-more-nodata {
+	  text-align: center;
+	  padding: 24rpx 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.ky-fetch-more-tips {
+			font-size: 24rpx;
+			color: var(--color-gray);
+		}
+		.ky-fetch-more-loading {
+			width: 40rpx;
+			height: 40rpx;
+			display: inline-block;
+			margin-left: 12rpx;
+		}
+	}
+	.ky-fetch-loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 0;
+		padding: 24rpx;
+		&.isRelative {
+			position: relative;
+			min-height: 100rpx;
+		}
+	}
+	.ky-fetch-error {
+		position: absolute;
+		top: 24rpx;
+		left: 24rpx;
+		right: 24rpx;
+		bottom: 24rpx;
+		margin: auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 0;
+		.ky-fetch-error-tip {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+		}
+		.ky-fetch-err-img {
+			width: 500rpx;
+			height: 333rpx;
+		}
+		.ky-fetch-err-txt {
+			font-size: 24rpx;
+			color: var(--color-gray);
+			word-break: break-all;
+		}
+	}
+</style>

package/components/ky-head.vue

@@ -0,0 +1,292 @@
+<template>
+  <view class="top-bar">
+    <!--noSpace为false时可以把页面内容顶下来-->
+    <view v-if="!noSpace" class="space">
+      <view v-if="!noBar" class="status-height"></view>
+      <view v-if="!noMenuBtn" :style="{ height: menuButtonTop + 'px' }" class="menu-height"></view>
+      <view :style="{ height: height + 'px' }" class="nav-height"></view>
+    </view>
+    <!--头部-->
+    <view class="tb-main">
+      <view class="tb-bg" :class="{ blur }" :style="{ opacity, background: noBg ? 'transparent' : bgColor }"></view>
+      <!--电量条高度-->
+      <view v-if="!noBar" class="status-height"></view>
+      <view v-if="!noMenuBtn" :style="{ height: menuButtonTop + 'px' }" class="menu-height"></view>
+      <!--end 电量条高度-->
+      <view :class="{ 'white-color': transparent && !isScrollTo }" class="top-nav" :style="{ height: height + 'px' }">
+
+        <view class="tn-left">
+          <text v-if="!noBack" class="iconfont inline-block" style="transform: rotate(180deg);" @click="goBack">&#xe62a;</text>
+          <slot name="left"></slot>
+        </view>
+
+        <view :class="{ hasCenter: $slots.center }" class="tn-center">
+          <text v-if="title && !$slots.center" :style="{ opacity }">{{ title }}</text>
+          <slot name="center"></slot>
+        </view>
+
+        <view class="tn-right">
+          <text v-if="right" @click="onRightClick">{{ right }}</text>
+          <slot name="right"></slot>
+        </view>
+      </view>
+    </view>
+    <!--电量条背景-->
+  </view>
+</template>
+
+<script>
+	const isDark = uni.getSystemInfoSync().theme === 'dark'
+
+  export default {
+		emits: ['rightClick', 'scrollTo'],
+    props: {
+      /**
+       * 标题
+       */
+      title: {
+        type: String,
+        default: ''
+      },
+      /**
+       * 背景颜色
+       */
+      background: {
+        type: String,
+        default: isDark ? 'rgba(55,55,55, 0.9)' : 'rgba(255,255,255, 0.9)'
+      },
+      /**
+       * 右侧文字
+       */
+      right: {
+        type: String,
+        default: ''
+      },
+      /**
+       * 是否显示后退按钮
+       */
+      noBack: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 是否把导航部分的间距顶下来
+       */
+      noSpace: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 不显示statusBar高度
+       */
+      noBar: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 不显示小程序胶囊高度
+       */
+      noMenuBtn: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 是否只在网页显示
+       */
+      onlyH5: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 是否透明背景
+       */
+      transparent: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 标题栏高度，px
+       */
+      height: {
+        type: Number,
+        default: 45
+      },
+      /**
+       * 背景高斯模糊
+       */
+      blur: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        sLoad: false,
+        isLogin: false,
+        messageNum: 0,
+        barTop: 0,
+        opacity: 0,
+        isScrollTo: false,
+        menuButtonTop: 0, // 小程序胶囊按钮高度
+				isDark
+      };
+    },
+    computed: {
+      noBg() {
+        return this.opacity <= 0
+      },
+			bgColor() {
+				if (!this.background) {
+				  return this.color
+				}
+				return this.isDark ? 'rgba(55,55,55, 0.9)' : 'rgba(255,255,255, 0.9)'
+			}
+    },
+    created() {
+      this.barTop = uni.getSystemInfoSync().safeArea.top + 50
+      // #ifdef MP-WEIXIN
+      const button = uni.getMenuButtonBoundingClientRect()
+      this.menuButtonTop = button.top + 5
+      // #endif
+      this.opacity = this.transparent ? 0 : 1
+			uni.onThemeChange(res => {
+				this.isDark = res.theme === 'dark'
+			})
+    },
+		destroyed() {
+			uni.offThemeChange()
+		},
+    methods: {
+      goBack() {
+        this.$nav.back()
+      },
+      onRightClick() {
+        this.$emit('rightClick')
+      },
+      setOpacity(scrollTop) {
+        const barTop = this.barTop + this.menuButtonTop
+        let opacity = Number((1 / barTop) * scrollTop).toFixed(2)
+
+        if (opacity >= 1) {
+          this.opacity = 1
+          if (!this.isScrollTo) {
+            this.isScrollTo = true
+            this.$setBarStyle(!this.isDark ? 'dark' : 'light');
+            this.$emit('scrollTo', true)
+          }
+        } else {
+          if (opacity <= 0.5 && this.isScrollTo) {
+            this.isScrollTo = false
+            this.$setBarStyle(!this.isDark ? 'light' : 'dark')
+            this.$emit('scrollTo', false)
+          }
+          this.opacity = opacity
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  $barheight: var(--status-bar-height);
+  $navheight: 45px;
+  $txtcolor: var(--color-dark);
+
+  .tb-main {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    background: none;
+
+    .tb-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      &.blur {
+        backdrop-filter: saturate(100%) blur(10rpx);
+      }
+    }
+
+    .top-nav {
+      background: none;
+      height: $navheight;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+
+      &.hasOneRight {
+        width: 100%;
+        justify-content: flex-end;
+      }
+    }
+
+    .status-height {
+      height: $barheight;
+      background: none;
+      position: relative;
+      z-index: 1;
+    }
+
+    .tn-left,
+    .tn-right {
+      position: absolute;
+      min-width: 32rpx;
+      display: block;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      color: inherit;
+      font-size: 18px;
+      z-index: 2;
+    }
+
+    .tn-left {
+      left: 15px;
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .tn-right {
+      right: 15px;
+      font-size: 16px;
+    }
+
+    .tn-center {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: auto 15px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: inherit;
+      font-size: 16px;
+      text-align: center;
+      &.hasCenter {
+        flex: none;
+        margin: auto;
+      }
+    }
+  }
+
+  .space {
+    background: none;
+
+    .status-height {
+      height: $barheight;
+    }
+
+    .nav-height {
+      height: $navheight;
+    }
+  }
+</style>