From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 07 十一月 2023 15:47:13 +0800
Subject: [PATCH] bug

---
 minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue |  330 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 330 insertions(+), 0 deletions(-)

diff --git a/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue b/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
new file mode 100644
index 0000000..20f43c3
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
@@ -0,0 +1,330 @@
+<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>
+		<view
+			class="u-notice__content"
+			ref="u-notice__content"
+		>
+			<view
+				ref="u-notice__content__text"
+				class="u-notice__content__text"
+				:style="[animationStyle]"
+			>
+				<text
+					v-for="(item, index) in innerText"
+					:key="index"
+					:style="[textStyle]"
+				>{{item}}</text>
+			</view>
+		</view>
+		<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'"
+				@click="close"
+				name="close"
+				:size="16"
+				:color="color"
+			></u-icon>
+		</view>
+	</view>
+</template>
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * RowNotice 婊氬姩閫氱煡涓殑姘村钩婊氬姩妯″紡
+	 * @description 姘村钩婊氬姩
+	 * @tutorial https://www.uviewui.com/components/noticeBar.html
+	 * @property {String | Number}	text			鏄剧ず鐨勫唴瀹癸紝瀛楃涓�
+	 * @property {String}			icon			鏄惁鏄剧ず宸︿晶鐨勯煶閲忓浘鏍� (榛樿 'volume' )
+	 * @property {String}			mode			閫氬憡妯″紡锛宭ink-鏄剧ず鍙崇澶达紝closable-鏄剧ず鍙充晶鍏抽棴鍥炬爣
+	 * @property {String}			color			鏂囧瓧棰滆壊锛屽悇鍥炬爣涔熶細浣跨敤鏂囧瓧棰滆壊 (榛樿 '#f9ae3d' )
+	 * @property {String}			bgColor			鑳屾櫙棰滆壊 (榛樿 ''#fdf6ec' )
+	 * @property {String | Number}	fontSize		瀛椾綋澶у皬锛屽崟浣峱x (榛樿 14 )
+	 * @property {String | Number}	speed			姘村钩婊氬姩鏃剁殑婊氬姩閫熷害锛屽嵆姣忕婊氬姩澶氬皯px(rpx)锛岃繖鏈夊埄浜庢帶鍒舵枃瀛楁棤璁哄灏戞椂锛岄兘鑳芥湁涓�涓亽瀹氱殑閫熷害  (榛樿 80 )
+	 * 
+	 * @event {Function} click 鐐瑰嚮閫氬憡鏂囧瓧瑙﹀彂
+	 * @event {Function} close 鐐瑰嚮鍙充晶鍏抽棴鍥炬爣瑙﹀彂
+	 * @example 
+	 */
+	export default {
+		name: 'u-row-notice',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				animationDuration: '0', // 鍔ㄧ敾鎵ц鏃堕棿
+				animationPlayState: 'paused', // 鍔ㄧ敾鐨勫紑濮嬪拰缁撴潫鎵ц
+				// nvue涓嬶紝鍐呭鍙戠敓鍙樺寲锛屽鑷存粴鍔ㄥ搴︿篃鍙樺寲锛岄渶瑕佹爣蹇椾负鏄惁闇�瑕侀噸鏂拌绠楀搴�
+				// 涓嶈兘鍦ㄥ唴瀹瑰彉鍖栨椂鐩存帴閲嶆柊璁＄畻锛屽洜涓簄vue鐨刟nimation妯″潡涓婁竴娆＄殑婊氬姩涓嶆槸鍒氬ソ缁撴潫锛屼細鏈夊奖鍝�
+				nvueInit: true,
+				show: true
+			};
+		},
+		watch: {
+			text: {
+				immediate: true,
+				handler(newValue, oldValue) {
+					// #ifdef APP-NVUE
+					this.nvueInit = true
+					// #endif
+					// #ifndef APP-NVUE
+					this.vue()
+					// #endif
+					
+					if(!uni.$u.test.string(newValue)) {
+						uni.$u.error('noticebar缁勪欢direction涓簉ow鏃讹紝瑕佹眰text鍙傛暟涓哄瓧绗︿覆褰㈠紡')
+					}
+				}
+			},
+			fontSize() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			},
+			speed() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			}
+		},
+		computed: {
+			// 鏂囧瓧鍐呭鐨勬牱寮�
+			textStyle() {
+				let style = {}
+				style.color = this.color
+				style.fontSize = uni.$u.addUnit(this.fontSize)
+				return style
+			},
+			animationStyle() {
+				let style = {}
+				style.animationDuration = this.animationDuration
+				style.animationPlayState = this.animationPlayState
+				return style
+			},
+			// 鍐呴儴瀵圭敤鎴蜂紶鍏ョ殑鏁版嵁杩涗竴姝ュ垎鍓诧紝鏀惧埌澶氫釜text鏍囩寰幆锛屽惁鍒欏鏋滅敤鎴蜂紶鍏ョ殑瀛楃涓插緢闀匡紙100涓瓧绗︿互涓婏級
+			// 鏀惧湪涓�涓猼ext鏍囩涓繘琛屾粴鍔紝鍦ㄤ綆绔畨鍗撴満涓婏紝鍔ㄧ敾鍙兘浼氬嚭鐜版姈鍔ㄧ幇璞★紝闇�瑕佸垎鍓插埌澶氫釜text涓彲瑙ｅ喅姝ら棶棰�
+			innerText() {
+				let result = [],
+					// 姣忕粍text鏍囩鐨勫瓧绗﹂暱搴�
+					len = 20
+				const textArr = this.text.split('')
+				for (let i = 0; i < textArr.length; i += len) {
+					// 瀵规媶鍒嗙殑鍚庣殑text杩涜slice鍒嗗壊锛屽緱鍒扮殑涓烘暟缁勫啀杩涜join鎷兼帴涓哄瓧绗︿覆
+					result.push(textArr.slice(i, i + len).join(''))
+				}
+				return result
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			// 鍦ˋPP涓�(鍚玭vue)锛岀洃鍚綋鍓峸ebview鏄惁澶勪簬闅愯棌鐘舵��(杩涘叆涓嬩竴椤垫椂鍗充负hide鐘舵��)
+			// 濡傛灉webivew闅愯棌浜嗭紝涓轰簡鑺傜渷鎬ц兘鐨勬崯鑰楋紝搴斿仠姝㈠姩鐢荤殑鎵ц锛屽悓鏃朵篃鏄负浜嗕繚鎸佽繘鍏ヤ笅涓�椤佃繑鍥炲悗锛屾粴鍔ㄤ綅缃繚鎸佷笉鍙�
+			var pages = getCurrentPages()
+			var page = pages[pages.length - 1]
+			var currentWebview = page.$getAppWebview()
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+
+			this.init()
+		},
+		methods: {
+			init() {
+				// #ifdef APP-NVUE
+				this.nvue()
+				// #endif
+
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+				
+				if(!uni.$u.test.string(this.text)) {
+					uni.$u.error('noticebar缁勪欢direction涓簉ow鏃讹紝瑕佹眰text鍙傛暟涓哄瓧绗︿覆褰㈠紡')
+				}
+			},
+			// vue鐗堝鐞�
+			async vue() {
+				// #ifndef APP-NVUE
+				let boxWidth = 0,
+					textWidth = 0
+				// 杩涜涓�瀹氱殑寤舵椂
+				await uni.$u.sleep()
+				// 鏌ヨ鐩掑瓙鍜屾枃瀛楃殑瀹藉害
+				textWidth = (await this.$uGetRect('.u-notice__content__text')).width
+				boxWidth = (await this.$uGetRect('.u-notice__content')).width
+				// 鏍规嵁t=s/v(鏃堕棿=璺▼/閫熷害)锛岃繖閲屼负浣曚笉闇�瑕佸姞涓�#u-notice-box鐨勫搴︼紝鍥犱负涓缃簡.u-notice-content鏍峰紡涓缃簡padding-left: 100%
+				// 鎭板阀璁＄畻鍑烘潵鐨勭粨鏋滀腑宸茬粡鍖呭惈浜�#u-notice-box鐨勫搴�
+				this.animationDuration = `${textWidth / uni.$u.getPx(this.speed)}s`
+				// 杩欓噷蹇呴』杩欐牱寮�濮嬪姩鐢伙紝鍚﹀垯鍦ˋPP涓婂姩鐢婚�熷害涓嶄細鏀瑰彉
+				this.animationPlayState = 'paused'
+				setTimeout(() => {
+					this.animationPlayState = 'running'
+				}, 10)
+				// #endif
+			},
+			// nvue鐗堝鐞�
+			async nvue() {
+				// #ifdef APP-NVUE
+				this.nvueInit = false
+				let boxWidth = 0,
+					textWidth = 0
+				// 杩涜涓�瀹氱殑寤舵椂
+				await uni.$u.sleep()
+				// 鏌ヨ鐩掑瓙鍜屾枃瀛楃殑瀹藉害
+				textWidth = (await this.getNvueRect('u-notice__content__text')).width
+				boxWidth = (await this.getNvueRect('u-notice__content')).width
+				// 灏嗘枃瀛楃Щ鍔ㄥ埌鐩掑瓙鐨勫彸杈规部锛屼箣鎵�浠ラ渶瑕佽繖涔堝仛锛屾槸鍥犱负nvue涓嶆敮鎸�100%鍗曚綅锛屽惁鍒欏彲浠ラ�氳繃css璁剧疆
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						transform: `translateX(${boxWidth}px)`
+					},
+				}, () => {
+					// 濡傛灉闈炵姝㈠姩鐢伙紝鍒欏紑濮嬫粴鍔�
+					!this.stopAnimation && this.loopAnimation(textWidth, boxWidth)
+				});
+				// #endif
+			},
+			loopAnimation(textWidth, boxWidth) {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						// 鐩爣绉诲姩缁堢偣涓�-textWidth锛屼篃鍗冲綋鏂囧瓧鐨勬渶鍙宠竟璐村埌鐩掑瓙鐨勫乏杈规鐨勪綅缃�
+						transform: `translateX(-${textWidth}px)`
+					},
+					// 婊氬姩鏃堕棿鐨勮绠椾负锛屾椂闂� = 璺▼(boxWidth + textWidth) / 閫熷害锛屾渶鍚庤浆涓烘绉�
+					duration: (boxWidth + textWidth) / uni.$u.getPx(this.speed) * 1000,
+					delay: 10
+				}, () => {
+					animation.transition(this.$refs['u-notice__content__text'], {
+						styles: {
+							// 閲嶆柊灏嗘枃瀛楃Щ鍔ㄥ埌鐩掑瓙鐨勫彸杈规部
+							transform: `translateX(${this.stopAnimation ? 0 : boxWidth}px)`
+						},
+					}, () => {
+						// 濡傛灉闈炵姝㈠姩鐢伙紝鍒欑户缁笅涓�杞粴鍔�
+						if (!this.stopAnimation) {
+							// 鍒ゆ柇鏄惁闇�瑕佸垵濮嬪寲璁＄畻灏哄
+							if (this.nvueInit) {
+								this.nvue()
+							} else {
+								this.loopAnimation(textWidth, boxWidth)
+							}
+						}
+					});
+				})
+				// #endif
+			},
+			getNvueRect(el) {
+				// #ifdef APP-NVUE
+				// 杩斿洖涓�涓猵romise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[el], (res) => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// 鐐瑰嚮閫氬憡鏍�
+			clickHandler(index) {
+				this.$emit('click')
+			},
+			// 鐐瑰嚮鍙充晶鎸夐挳锛岄渶瑕佸垽鏂偣鍑荤殑鏄叧闂浘鏍囪繕鏄澶村浘鏍�
+			close() {
+				this.$emit('close')
+			}
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+	};
+</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;
+		}
+
+		&__content {
+			text-align: right;
+			flex: 1;
+			@include flex;
+			flex-wrap: nowrap;
+			overflow: hidden;
+
+			&__text {
+				font-size: 14px;
+				color: $u-warning;
+				/* #ifndef APP-NVUE */
+				// 杩欎竴鍙ュ緢閲嶈锛屼负浜嗚兘璁╂粴鍔ㄥ乏鍙宠繛鎺ヨ捣鏉�
+				padding-left: 100%;
+				word-break: keep-all;
+				white-space: nowrap;
+				animation: u-loop-animation 10s linear infinite both;
+				/* #endif */
+				@include flex(row);
+			}
+		}
+
+	}
+
+	@keyframes u-loop-animation {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>

--
Gitblit v1.9.3