使用 uview 重构实际登陆

yudao-vue-ui/uni_modules/uview-ui/components/u-notice-bar/props.js

@@ -0,0 +1,70 @@
+export default {
+    props: {
+        // 显示的内容，数组
+        text: {
+            type: [Array, String],
+            default: uni.$u.props.noticeBar.text
+        },
+        // 通告滚动模式，row-横向滚动，column-竖向滚动
+        direction: {
+            type: String,
+            default: uni.$u.props.noticeBar.direction
+        },
+        // direction = row时，是否使用步进形式滚动
+        step: {
+            type: Boolean,
+            default: uni.$u.props.noticeBar.step
+        },
+        // 是否显示左侧的音量图标
+        icon: {
+            type: String,
+            default: uni.$u.props.noticeBar.icon
+        },
+        // 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+        mode: {
+            type: String,
+            default: uni.$u.props.noticeBar.mode
+        },
+        // 文字颜色，各图标也会使用文字颜色
+        color: {
+            type: String,
+            default: uni.$u.props.noticeBar.color
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: uni.$u.props.noticeBar.bgColor
+        },
+        // 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度
+        speed: {
+            type: [String, Number],
+            default: uni.$u.props.noticeBar.speed
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: uni.$u.props.noticeBar.fontSize
+        },
+        // 滚动一个周期的时间长，单位ms
+        duration: {
+            type: [String, Number],
+            default: uni.$u.props.noticeBar.duration
+        },
+        // 是否禁止用手滑动切换
+        // 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+        disableTouch: {
+            type: Boolean,
+            default: uni.$u.props.noticeBar.disableTouch
+        },
+        // 跳转的页面路径
+        url: {
+            type: String,
+            default: uni.$u.props.noticeBar.url
+        },
+        // 页面跳转的类型
+        linkType: {
+            type: String,
+            default: uni.$u.props.noticeBar.linkType
+        }
+    }
+}

yudao-vue-ui/uni_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue

@@ -0,0 +1,101 @@
+<template>
+	<view
+		class="u-notice-bar"
+		v-if="show"
+		:style="[{
+			backgroundColor: bgColor
+		}, $u.addStyle(customStyle)]"
+	>
+		<template v-if="direction === 'column' || (direction === 'row' && step)">
+			<u-column-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:step="step"
+				:icon="icon"
+				:disable-touch="disableTouch"
+				:fontSize="fontSize"
+				:duration="duration"
+				@close="close"
+				@click="click"
+			></u-column-notice>
+		</template>
+		<template v-else>
+			<u-row-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:url="url"
+				:linkType="linkType"
+				:icon="icon"
+				@close="close"
+				@click="click"
+			></u-row-notice>
+		</template>
+	</view>
+</template>
+<script>
+	import props from './props.js';
+
+	/**
+	 * noticeBar 滚动通知
+	 * @description 该组件用于滚动通告场景，有多种模式可供选择
+	 * @tutorial https://www.uviewui.com/components/noticeBar.html
+	 * @property {Array | String}	text			显示的内容，数组
+	 * @property {String}			direction		通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
+	 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动  ( 默认 false )
+	 * @property {String}			icon			是否显示左侧的音量图标 ( 默认 'volume' )
+	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
+	 * @property {String}			bgColor			背景颜色 ( 默认 '#fdf6ec' )
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
+	 * @property {String | Number}	fontSize		字体大小 ( 默认 14 )
+	 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms ( 默认 2000 )
+	 * @property {Boolean}			disableTouch	是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
+	 * @property {String}			url				跳转的页面路径
+	 * @property {String}			linkType		页面跳转的类型 ( 默认 navigateTo )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击通告文字触发
+	 * @event {Function}			close			点击右侧关闭图标触发
+	 * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
+	 */
+	export default {
+		name: "u-notice-bar",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				show: true
+			}
+		},
+		methods: {
+			// 点击通告栏
+			click(index) {
+				this.$emit('click', index)
+				if (this.url && this.linkType) {
+					// 此方法写在mixin中，另外跳转的url和linkType参数也在mixin的props中
+					this.openPage()
+				}
+			},
+			// 点击关闭按钮
+			close() {
+				this.show = false
+				this.$emit('close')
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-notice-bar {
+		overflow: hidden;
+		padding: 9px 12px;
+		flex: 1;
+	}
+</style>