From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化

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

diff --git a/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
new file mode 100644
index 0000000..e5a2f4a
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
@@ -0,0 +1,306 @@
+<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"
+		>
+			<text
+				ref="u-notice__content__text"
+				class="u-notice__content__text"
+				:style="[textStyle]"
+			>{{text}}</text>
+		</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.animationDuration = this.animationDuration
+				style.animationPlayState = this.animationPlayState
+				style.fontSize = uni.$u.addUnit(this.fontSize)
+				return style
+			},
+		},
+		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 */
+			}
+		}
+
+	}
+
+	@keyframes u-loop-animation {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>

--
Gitblit v1.9.3