uview-ui-wjf 1.0.0

package/components/u-column-notice/u-column-notice.vue

@@ -0,0 +1,160 @@
+<template>
+	<view
+		class="u-notice"
+		@tap="clickHandler"
+	>
+		<slot name="icon">
+			<view
+				class="u-notice__left-icon"
+				v-if="icon"
+			>
+				<u-icon
+					:name="icon"
+					:color="color"
+					size="19"
+				></u-icon>
+			</view>
+		</slot>
+		<swiper
+			:disable-touch="disableTouch"
+			:vertical="step ? false : true"
+			circular
+			:interval="duration"
+			:autoplay="true"
+			class="u-notice__swiper"
+			@change="noticeChange"
+		>
+			<swiper-item
+				v-for="(item, index) in text"
+				:key="index"
+				class="u-notice__swiper__item"
+			>
+				<text
+					class="u-notice__swiper__item__text u-line-1"
+					:style="[textStyle]"
+				>{{ item }}</text>
+			</swiper-item>
+		</swiper>
+		<view
+			class="u-notice__right-icon"
+			v-if="['link', 'closable'].includes(mode)"
+		>
+			<u-icon
+				v-if="mode === 'link'"
+				name="arrow-right"
+				:size="17"
+				:color="color"
+			></u-icon>
+			<u-icon
+				v-if="mode === 'closable'"
+				name="close"
+				:size="16"
+				:color="color"
+				@click="close"
+			></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * ColumnNotice 滚动通知中的垂直滚动 内部组件
+	 * @description 该组件用于滚动通告场景，是其中的垂直滚动方式
+	 * @tutorial https://www.uviewui.com/components/noticeBar.html
+	 * @property {Array}			text 			显示的内容，字符串
+	 * @property {String}			icon 			是否显示左侧的音量图标 （ 默认 'volume' ）
+	 * @property {String}			mode 			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color 			文字颜色，各图标也会使用文字颜色 （ 默认 '#f9ae3d' ）
+	 * @property {String}			bgColor 		背景颜色 （ 默认 '#fdf6ec' ）
+	 * @property {String | Number}	fontSize		字体大小，单位px  （ 默认 14 ）
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度 （ 默认 80 ）
+	 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动 （ 默认 false ）
+	 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms （ 默认 1500 ）
+	 * @property {Boolean}			disableTouch	是否禁止用手滑动切换   目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 （ 默认 true ）
+	 * @example 
+	 */
+	export default {
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		watch: {
+			text: {
+				immediate: true,
+				handler(newValue, oldValue) {
+					if(!uni.$u.test.array(newValue)) {
+						uni.$u.error('noticebar组件direction为column时，要求text参数为数组形式')
+					}
+				}
+			}
+		},
+		computed: {
+			// 文字内容的样式
+			textStyle() {
+				let style = {}
+				style.color = this.color
+				style.fontSize = uni.$u.addUnit(this.fontSize)
+				return style
+			},
+			// 垂直或者水平滚动
+			vertical() {
+				if (this.mode == 'horizontal') return false
+				else return true
+			},
+		},
+		data() {
+			return {
+				index:0
+			}
+		},
+		methods: {
+			noticeChange(e){
+				this.index = e.detail.current
+			},
+			// 点击通告栏
+			clickHandler() {
+				this.$emit('click', this.index)
+			},
+			// 点击关闭按钮
+			close() {
+				this.$emit('close')
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-notice {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left-icon {
+			align-items: center;
+			margin-right: 5px;
+		}
+
+		&__right-icon {
+			margin-left: 5px;
+			align-items: center;
+		}
+
+		&__swiper {
+			height: 16px;
+			@include flex;
+			align-items: center;
+			flex: 1;
+
+			&__item {
+				@include flex;
+				align-items: center;
+				overflow: hidden;
+
+				&__text {
+					font-size: 14px;
+					color: $u-warning;
+				}
+			}
+		}
+	}
+</style>

package/components/u-count-down/props.js

@@ -0,0 +1,24 @@
+export default {
+    props: {
+        // 倒计时时长，单位ms
+        time: {
+            type: [String, Number],
+            default: uni.$u.props.countDown.time
+        },
+        // 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+        format: {
+            type: String,
+            default: uni.$u.props.countDown.format
+        },
+        // 是否自动开始倒计时
+        autoStart: {
+            type: Boolean,
+            default: uni.$u.props.countDown.autoStart
+        },
+        // 是否展示毫秒倒计时
+        millisecond: {
+            type: Boolean,
+            default: uni.$u.props.countDown.millisecond
+        }
+    }
+}

package/components/u-count-down/u-count-down.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="u-count-down">
+		<slot>
+			<text class="u-count-down__text">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	import {
+		isSameSecond,
+		parseFormat,
+		parseTimeData
+	} from './utils';
+	/**
+	 * u-count-down 倒计时
+	 * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+	 * @tutorial https://uviewui.com/components/countDown.html
+	 * @property {String | Number}	time		倒计时时长，单位ms （默认 0 ）
+	 * @property {String}			format		时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
+	 * @property {Boolean}			autoStart	是否自动开始倒计时 （默认 true ）
+	 * @property {Boolean}			millisecond	是否展示毫秒倒计时 （默认 false ）
+	 * @event {Function} finish 倒计时结束时触发 
+	 * @event {Function} change 倒计时变化时触发 
+	 * @event {Function} start	开始倒计时
+	 * @event {Function} pause	暂停倒计时 
+	 * @event {Function} reset	重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 
+	 * @example <u-count-down :time="time"></u-count-down>
+	 */
+	export default {
+		name: 'u-count-down',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				timer: null,
+				// 各单位(天，时，分等)剩余时间
+				timeData: parseTimeData(0),
+				// 格式化后的时间，如"03:23:21"
+				formattedTime: '0',
+				// 倒计时是否正在进行中
+				runing: false,
+				endTime: 0, // 结束的毫秒时间戳
+				remainTime: 0, // 剩余的毫秒时间
+			}
+		},
+		watch: {
+			time(n) {
+				this.reset()
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.reset()
+			},
+			// 开始倒计时
+			start() {
+				if (this.runing) return
+				// 标识为进行中
+				this.runing = true
+				// 结束时间戳 = 此刻时间戳 + 剩余的时间
+				this.endTime = Date.now() + this.remainTime
+				this.toTick()
+			},
+			// 根据是否展示毫秒，执行不同操作函数
+			toTick() {
+				if (this.millisecond) {
+					this.microTick()
+				} else {
+					this.macroTick()
+				}
+			},
+			macroTick() {
+				this.clearTimeout()
+				// 每隔一定时间，更新一遍定时器的值
+				// 同时此定时器的作用也能带来毫秒级的更新
+				this.timer = setTimeout(() => {
+					// 获取剩余时间
+					const remain = this.getRemainTime()
+					// 重设剩余时间
+					if (!isSameSecond(remain, this.remainTime) || remain === 0) {
+						this.setRemainTime(remain)
+					}
+					// 如果剩余时间不为0，则继续检查更新倒计时
+					if (this.remainTime !== 0) {
+						this.macroTick()
+					}
+				}, 30)
+			},
+			microTick() {
+				this.clearTimeout()
+				this.timer = setTimeout(() => {
+					this.setRemainTime(this.getRemainTime())
+					if (this.remainTime !== 0) {
+						this.microTick()
+					}
+				}, 50)
+			},
+			// 获取剩余的时间
+			getRemainTime() {
+				// 取最大值，防止出现小于0的剩余时间值
+				return Math.max(this.endTime - Date.now(), 0)
+			},
+			// 设置剩余的时间
+			setRemainTime(remain) {
+				this.remainTime = remain
+				// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+				const timeData = parseTimeData(remain)
+				this.$emit('change', timeData)
+				// 得出格式化后的时间
+				this.formattedTime = parseFormat(this.format, timeData)
+				// 如果时间已到，停止倒计时
+				if (remain <= 0) {
+					this.pause()
+					this.$emit('finish')
+				}
+			},
+			// 重置倒计时
+			reset() {
+				this.pause()
+				this.remainTime = this.time
+				this.setRemainTime(this.remainTime)
+				if (this.autoStart) {
+					this.start()
+				}
+			},
+			// 暂停倒计时
+			pause() {
+				this.runing = false;
+				this.clearTimeout()
+			},
+			// 清空定时器
+			clearTimeout() {
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		beforeDestroy() {
+			this.clearTimeout()
+		}
+	}
+</script>
+
+<style
+	lang="scss"
+	scoped
+>
+	@import "../../libs/css/components.scss";
+	$u-count-down-text-color:$u-content-color !default;
+	$u-count-down-text-font-size:15px !default;
+	$u-count-down-text-line-height:22px !default;
+
+	.u-count-down {
+		&__text {
+			color: $u-count-down-text-color;
+			font-size: $u-count-down-text-font-size;
+			line-height: $u-count-down-text-line-height;
+		}
+	}
+</style>

package/components/u-count-down/utils.js

@@ -0,0 +1,62 @@
+// 补0，如1 -> 01
+function padZero(num, targetLength = 2) {
+    let str = `${num}`
+    while (str.length < targetLength) {
+        str = `0${str}`
+    }
+    return str
+}
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+export function parseTimeData(time) {
+    const days = Math.floor(time / DAY)
+    const hours = Math.floor((time % DAY) / HOUR)
+    const minutes = Math.floor((time % HOUR) / MINUTE)
+    const seconds = Math.floor((time % MINUTE) / SECOND)
+    const milliseconds = Math.floor(time % SECOND)
+    return {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+    }
+}
+export function parseFormat(format, timeData) {
+    let {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+    } = timeData
+    // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
+    if (format.indexOf('DD') === -1) {
+        hours += days * 24
+    } else {
+        // 对天补0
+        format = format.replace('DD', padZero(days))
+    }
+    // 其他同理于DD的格式化处理方式
+    if (format.indexOf('HH') === -1) {
+        minutes += hours * 60
+    } else {
+        format = format.replace('HH', padZero(hours))
+    }
+    if (format.indexOf('mm') === -1) {
+        seconds += minutes * 60
+    } else {
+        format = format.replace('mm', padZero(minutes))
+    }
+    if (format.indexOf('ss') === -1) {
+        milliseconds += seconds * 1000
+    } else {
+        format = format.replace('ss', padZero(seconds))
+    }
+    return format.replace('SSS', padZero(milliseconds, 3))
+}
+export function isSameSecond(time1, time2) {
+    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+}

package/components/u-count-to/props.js

@@ -0,0 +1,59 @@
+export default {
+    props: {
+        // 开始的数值，默认从0增长到某一个数
+        startVal: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.startVal
+        },
+        // 要滚动的目标数值，必须
+        endVal: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.endVal
+        },
+        // 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+        duration: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.duration
+        },
+        // 设置数值后是否自动开始滚动
+        autoplay: {
+            type: Boolean,
+            default: uni.$u.props.countTo.autoplay
+        },
+        // 要显示的小数位数
+        decimals: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.decimals
+        },
+        // 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+        useEasing: {
+            type: Boolean,
+            default: uni.$u.props.countTo.useEasing
+        },
+        // 十进制分割
+        decimal: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.decimal
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: uni.$u.props.countTo.color
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: uni.$u.props.countTo.fontSize
+        },
+        // 是否加粗字体
+        bold: {
+            type: Boolean,
+            default: uni.$u.props.countTo.bold
+        },
+        // 千位分隔符，类似金额的分割(￥23,321.05中的",")
+        separator: {
+            type: String,
+            default: uni.$u.props.countTo.separator
+        }
+    }
+}

package/components/u-count-to/u-count-to.vue

@@ -0,0 +1,184 @@
+<template>
+	<text
+		class="u-count-num"
+		:style="{
+			fontSize: $u.addUnit(fontSize),
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color
+		}"
+	>{{ displayValue }}</text>
+</template>
+
+<script>
+	import props from './props.js';
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uviewui.com/components/countTo.html
+ * @property {String | Number}	startVal	开始的数值，默认从0增长到某一个数（默认 0 ）
+ * @property {String | Number}	endVal		要滚动的目标数值，必须 （默认 0 ）
+ * @property {String | Number}	duration	滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认 2000 ）
+ * @property {Boolean}			autoplay	设置数值后是否自动开始滚动 （默认 true ）
+ * @property {String | Number}	decimals	要显示的小数位数，见官网说明（默认 0 ）
+ * @property {Boolean}			useEasing	滚动结束时，是否缓动结尾，见官网说明（默认 true ）
+ * @property {String}			decimal		十进制分割 （ 默认 "." ）
+ * @property {String}			color		字体颜色（ 默认 '#606266' )
+ * @property {String | Number}	fontSize	字体大小，单位px（ 默认 22 ）
+ * @property {Boolean}			bold		字体是否加粗（默认 false ）
+ * @property {String}			separator	千位分隔符，见官网说明
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
+ */
+export default {
+	name: 'u-count-to',
+	data() {
+		return {
+			localStartVal: this.startVal,
+			displayValue: this.formatNumber(this.startVal),
+			printVal: null,
+			paused: false, // 是否暂停
+			localDuration: Number(this.duration),
+			startTime: null, // 开始的时间
+			timestamp: null, // 时间戳
+			remaining: null, // 停留的时间
+			rAF: null,
+			lastTime: 0 // 上一次的时间
+		};
+	},
+	mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+	computed: {
+		countDown() {
+			return this.startVal > this.endVal;
+		}
+	},
+	watch: {
+		startVal() {
+			this.autoplay && this.start();
+		},
+		endVal() {
+			this.autoplay && this.start();
+		}
+	},
+	mounted() {
+		this.autoplay && this.start();
+	},
+	methods: {
+		easingFn(t, b, c, d) {
+			return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+		},
+		requestAnimationFrame(callback) {
+			const currTime = new Date().getTime();
+			// 为了使setTimteout的尽可能的接近每秒60帧的效果
+			const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
+			const id = setTimeout(() => {
+				callback(currTime + timeToCall);
+			}, timeToCall);
+			this.lastTime = currTime + timeToCall;
+			return id;
+		},
+		cancelAnimationFrame(id) {
+			clearTimeout(id);
+		},
+		// 开始滚动数字
+		start() {
+			this.localStartVal = this.startVal;
+			this.startTime = null;
+			this.localDuration = this.duration;
+			this.paused = false;
+			this.rAF = this.requestAnimationFrame(this.count);
+		},
+		// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+		reStart() {
+			if (this.paused) {
+				this.resume();
+				this.paused = false;
+			} else {
+				this.stop();
+				this.paused = true;
+			}
+		},
+		// 暂停
+		stop() {
+			this.cancelAnimationFrame(this.rAF);
+		},
+		// 重新开始(暂停的情况下)
+		resume() {
+			if (!this.remaining) return
+			this.startTime = 0;
+			this.localDuration = this.remaining;
+			this.localStartVal = this.printVal;
+			this.requestAnimationFrame(this.count);
+		},
+		// 重置
+		reset() {
+			this.startTime = null;
+			this.cancelAnimationFrame(this.rAF);
+			this.displayValue = this.formatNumber(this.startVal);
+		},
+		count(timestamp) {
+			if (!this.startTime) this.startTime = timestamp;
+			this.timestamp = timestamp;
+			const progress = timestamp - this.startTime;
+			this.remaining = this.localDuration - progress;
+			if (this.useEasing) {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+				} else {
+					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+				}
+			} else {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+				} else {
+					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+				}
+			}
+			if (this.countDown) {
+				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+			} else {
+				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+			}
+			this.displayValue = this.formatNumber(this.printVal) || 0;
+			if (progress < this.localDuration) {
+				this.rAF = this.requestAnimationFrame(this.count);
+			} else {
+				this.$emit('end');
+			}
+		},
+		// 判断是否数字
+		isNumber(val) {
+			return !isNaN(parseFloat(val));
+		},
+		formatNumber(num) {
+			// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+			num = Number(num);
+			num = num.toFixed(Number(this.decimals));
+			num += '';
+			const x = num.split('.');
+			let x1 = x[0];
+			const x2 = x.length > 1 ? this.decimal + x[1] : '';
+			const rgx = /(\d+)(\d{3})/;
+			if (this.separator && !this.isNumber(this.separator)) {
+				while (rgx.test(x1)) {
+					x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+				}
+			}
+			return x1 + x2;
+		},
+		destroyed() {
+			this.cancelAnimationFrame(this.rAF);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-count-num {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	text-align: center;
+}
+</style>