使用 uview 重构实际登陆

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

@@ -0,0 +1,34 @@
+export default {
+    props: {
+        // 是否展示工具条
+        show: {
+            type: Boolean,
+            default: uni.$u.props.toolbar.show
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: uni.$u.props.toolbar.cancelText
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: uni.$u.props.toolbar.confirmText
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: uni.$u.props.toolbar.cancelColor
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: uni.$u.props.toolbar.confirmColor
+        },
+        // 标题文字
+        title: {
+            type: String,
+            default: uni.$u.props.toolbar.title
+        }
+    }
+}

yudao-vue-ui/uni_modules/uview-ui/components/u-toolbar/u-toolbar.vue

@@ -0,0 +1,102 @@
+<template>
+	<view
+		class="u-toolbar"
+		@touchmove.stop.prevent="noop"
+		v-if="show"
+	>
+		<view
+			class="u-toolbar__cancel__wrapper"
+			hover-class="u-hover-class"
+		>
+			<text
+				class="u-toolbar__wrapper__cancel"
+				@tap="cancel"
+				:style="{
+					color: cancelColor
+				}"
+			>{{ cancelText }}</text>
+		</view>
+		<text
+			class="u-toolbar__title u-line-1"
+			v-if="title"
+		>{{ title }}</text>
+		<view
+			class="u-toolbar__confirm__wrapper"
+			hover-class="u-hover-class"
+		>
+			<text
+				class="u-toolbar__wrapper__confirm"
+				@tap="confirm"
+				:style="{
+				color: confirmColor
+			}"
+			>{{ confirmText }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * Toolbar 工具条
+	 * @description 
+	 * @tutorial https://www.uviewui.com/components/toolbar.html
+	 * @property {Boolean}	show			是否展示工具条（默认 true ）
+	 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
+	 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
+	 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
+	 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
+	 * @property {String}	title			标题文字
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'u-toolbar',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		methods: {
+			// 点击取消按钮
+			cancel() {
+				this.$emit('cancel')
+			},
+			// 点击确定按钮
+			confirm() {
+				this.$emit('confirm')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-toolbar {
+		height: 42px;
+		@include flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&__wrapper {
+			&__cancel {
+				color: $u-tips-color;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+
+		&__title {
+			color: $u-main-color;
+			padding: 0 60rpx;
+			font-size: 16px;
+			flex: 1;
+			text-align: center;
+		}
+
+		&__wrapper {
+			&__confirm {
+				color: $u-primary;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+	}
+</style>