From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息

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

diff --git a/uni_modules/uview-ui/components/u-toast/u-toast.vue b/uni_modules/uview-ui/components/u-toast/u-toast.vue
new file mode 100644
index 0000000..f194830
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-toast/u-toast.vue
@@ -0,0 +1,291 @@
+<template>
+	<view class="u-toast">
+		<u-overlay
+			:show="isShow"
+			:custom-style="overlayStyle"
+		>
+			<view
+				class="u-toast__content"
+				:style="[contentStyle]"
+				:class="['u-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ?  'u-toast__content--loading' : '']"
+			>
+				<u-loading-icon
+					v-if="tmpConfig.type === 'loading'"
+					mode="circle"
+					color="rgb(255, 255, 255)"
+					inactiveColor="rgb(120, 120, 120)"
+					size="25"
+				></u-loading-icon>
+				<u-icon
+					v-else-if="tmpConfig.type !== 'defalut' && iconName"
+					:name="iconName"
+					size="17"
+					:color="tmpConfig.type"
+					:customStyle="iconStyle"
+				></u-icon>
+				<u-gap
+					v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
+					height="12"
+					bgColor="transparent"
+				></u-gap>
+				<text
+					class="u-toast__content__text"
+					:class="['u-toast__content__text--' + tmpConfig.type]"
+					style="max-width: 400rpx;"
+				>{{ tmpConfig.message }}</text>
+			</view>
+		</u-overlay>
+	</view>
+</template>
+
+<script>
+	/**
+	 * toast ������������
+	 * @description ���������������������������uni���uni.showToastAPI������������������������������
+	 * @tutorial https://www.uviewui.com/components/toast.html
+	 * @property {String | Number}	zIndex		toast������������zIndex��� (������ 10090 )
+	 * @property {Boolean}			loading		��������������� ��������� false ���
+	 * @property {String | Number}	message		���������������������
+	 * @property {String}			icon		������������������������������������
+	 * @property {String}			type		������������ ��������� default���
+	 * @property {Boolean}			show		��������������������� ��������� false���
+	 * @property {Boolean}			overlay		��������������������������������������������� ��������� false ���
+	 * @property {String}			position	������ ��������� 'center' ���
+	 * @property {Object}			params		��������������� 
+	 * @property {String | Number}  duration	���������������������ms ��������� 2000 ���
+	 * @property {Boolean}			isTab		������������������tab������ ��������� false ���
+	 * @property {String}			url			toast������������������������������������������������������������back������ 
+	 * @property {Function}			complete	��������������������������� 
+	 * @property {Boolean}			back		������toast��������������������������� ��������� false ���
+	 * @property {Object}			customStyle	������������������������������
+	 * @event {Function} show ������toast���������������������������������toast���������onReady������������������
+	 * @example <u-toast ref="uToast" />
+	 */
+	export default {
+		name: 'u-toast',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin],
+		data() {
+			return {
+				isShow: false,
+				timer: null, // ���������
+				config: {
+					message: '', // ������������
+					type: '', // ���������������primary���success���error���warning���black
+					duration: 2000, // ������������������������
+					icon: true, // ���������������
+					position: 'center', // toast���������������
+					complete: null, // ���������������������������
+					overlay: false, // ������������������������
+					loading: false, // ���������������������
+				},
+				tmpConfig: {}, // ������������������������������������������������������������
+			}
+		},
+		computed: {
+			iconName() {
+				// ������������none���������type���error|warning|succes|info������������������������
+				if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
+					return '';
+				}
+				if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+					return uni.$u.type2icon(this.tmpConfig.type)
+				} else {
+					return ''
+				}
+			},
+			overlayStyle() {
+				const style = {
+					justifyContent: 'center',
+					alignItems: 'center',
+					display: 'flex'
+				}
+				// ������������������100%������������������������������������
+				style.backgroundColor = 'rgba(0, 0, 0, 0)'
+				return style
+			},
+			iconStyle() {
+				const style = {}
+				// ���������������������������������������������������������������������
+				style.marginRight = '4px'
+				// #ifdef APP-NVUE
+				// iOSAPP���������������1px������������������������������������
+				if (uni.$u.os() === 'ios') {
+					style.marginTop = '-1px'
+				}
+				// #endif
+				return style
+			},
+			loadingIconColor() {
+				let color = 'rgb(255, 255, 255)'
+				if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+					// loading-icon������������������color���������������������������������������������������������������������
+					// ���������rgb���������������������������������������
+					color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type])
+				}
+				return color
+			},
+			// ���������������������
+			contentStyle() {
+				const windowHeight = uni.$u.sys().windowHeight, style = {}
+				let value = 0
+				// ������top���bottom������Y���������������������������������������
+				if(this.tmpConfig.position === 'top') {
+					value = - windowHeight * 0.25
+				} else if(this.tmpConfig.position === 'bottom') {
+					value = windowHeight * 0.25
+				}
+				style.transform = `translateY(${value}px)`
+				return style
+			}
+		},
+		created() {
+			// ���������������������������toast���������������������������
+			['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
+				this[item] = message => this.show({
+					type: item,
+					message
+				})
+			})
+		},
+		methods: {
+			// ������toast���������������������������this.$refs.xxx.show(options)������������
+			show(options) {
+				// ���������������������this.config���������������������������u-toast������������������������������
+				this.tmpConfig = uni.$u.deepMerge(this.config, options)
+				// ���������������
+				this.clearTimer()
+				this.isShow = true
+				this.timer = setTimeout(() => {
+					// ������������������������������������������toast������
+					this.clearTimer()
+					// ������������������callback������������������������������
+					typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
+				}, this.tmpConfig.duration)
+			},
+			// ������toast���������������������������this.$refs.xxx.hide()������������
+			hide() {
+				this.clearTimer()
+			},
+			clearTimer() {
+				this.isShow = false
+				// ���������������
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		beforeDestroy() {
+			this.clearTimer()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$u-toast-color:#fff !default;
+	$u-toast-border-radius:4px !default;
+	$u-toast-border-background-color:#585858 !default;
+	$u-toast-border-font-size:14px !default;
+	$u-toast-border-padding:12px 20px !default;
+	$u-toast-loading-border-padding: 20px 20px !default;
+	$u-toast-content-text-color:#fff !default;
+	$u-toast-content-text-font-size:15px !default;
+	$u-toast-u-icon:10rpx !default;
+	$u-toast-u-type-primary-color:$u-primary !default;
+	$u-toast-u-type-primary-background-color:#ecf5ff !default;
+	$u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
+	$u-toast-u-type-primary-border-width:1px !default;
+	$u-toast-u-type-success-color: $u-success !default;
+	$u-toast-u-type-success-background-color: #dbf1e1 !default;
+	$u-toast-u-type-success-border-color: #BEF5C8 !default;
+	$u-toast-u-type-success-border-width: 1px !default;
+	$u-toast-u-type-error-color:$u-error !default;
+	$u-toast-u-type-error-background-color:#fef0f0 !default;
+	$u-toast-u-type-error-border-color:#fde2e2 !default;
+	$u-toast-u-type-error-border-width: 1px !default;
+	$u-toast-u-type-warning-color:$u-warning !default;
+	$u-toast-u-type-warning-background-color:#fdf6ec !default;
+	$u-toast-u-type-warning-border-color:#faecd8 !default;
+	$u-toast-u-type-warning-border-width: 1px !default;
+	$u-toast-u-type-default-color:#fff !default;
+	$u-toast-u-type-default-background-color:#585858 !default;
+
+	.u-toast {
+		&__content {
+			@include flex;
+			padding: $u-toast-border-padding;
+			border-radius: $u-toast-border-radius;
+			background-color: $u-toast-border-background-color;
+			color: $u-toast-color;
+			align-items: center;
+			/* #ifndef APP-NVUE */
+			max-width: 600rpx;
+			/* #endif */
+			position: relative;
+
+			&--loading {
+				flex-direction: column;
+				padding: $u-toast-loading-border-padding;
+			}
+
+			&__text {
+				color: $u-toast-content-text-color;
+				font-size: $u-toast-content-text-font-size;
+				line-height: $u-toast-content-text-font-size;
+
+				&--default {
+					color: $u-toast-content-text-color;
+				}
+
+				&--error {
+					color: $u-error;
+				}
+
+				&--primary {
+					color: $u-primary;
+				}
+
+				&--success {
+					color: $u-success;
+				}
+
+				&--warning {
+					color: $u-warning;
+				}
+			}
+		}
+	}
+
+	.u-type-primary {
+		color: $u-toast-u-type-primary-color;
+		background-color: $u-toast-u-type-primary-background-color;
+		border-color: $u-toast-u-type-primary-border-color;
+		border-width: $u-toast-u-type-primary-border-width;
+	}
+
+	.u-type-success {
+		color: $u-toast-u-type-success-color;
+		background-color: $u-toast-u-type-success-background-color;
+		border-color: $u-toast-u-type-success-border-color;
+		border-width: 1px;
+	}
+
+	.u-type-error {
+		color: $u-toast-u-type-error-color;
+		background-color: $u-toast-u-type-error-background-color;
+		border-color: $u-toast-u-type-error-border-color;
+		border-width: $u-toast-u-type-error-border-width;
+	}
+
+	.u-type-warning {
+		color: $u-toast-u-type-warning-color;
+		background-color: $u-toast-u-type-warning-background-color;
+		border-color: $u-toast-u-type-warning-border-color;
+		border-width: 1px;
+	}
+
+	.u-type-default {
+		color: $u-toast-u-type-default-color;
+		background-color: $u-toast-u-type-default-background-color;
+	}
+</style>

--
Gitblit v1.8.0