From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 10 Jan 2024 16:08:18 +0800
Subject: [PATCH] fix:地图

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

diff --git a/uni_modules/uview-ui/components/u-image/u-image.vue b/uni_modules/uview-ui/components/u-image/u-image.vue
new file mode 100644
index 0000000..473e35b
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-image/u-image.vue
@@ -0,0 +1,232 @@
+<template>
+	<u-transition
+		mode="fade"
+		:show="show"
+		:duration="fade ? 1000 : 0"
+	>
+		<view
+			class="u-image"
+			@tap="onClick"
+			:style="[wrapStyle, backgroundStyle]"
+		>
+			<image
+				v-if="!isError"
+				:src="src"
+				:mode="mode"
+				@error="onErrorHandler"
+				@load="onLoadHandler"
+				:show-menu-by-longpress="showMenuByLongpress"
+				:lazy-load="lazyLoad"
+				class="u-image__image"
+				:style="{
+					borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius),
+					width: $u.addUnit(width),
+					height: $u.addUnit(height)
+				}"
+			></image>
+			<view
+				v-if="showLoading && loading"
+				class="u-image__loading"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: $u.addUnit(width),
+					height: $u.addUnit(height)
+				}"
+			>
+				<slot name="loading">
+					<u-icon
+						:name="loadingIcon"
+						:width="width"
+						:height="height"
+					></u-icon>
+				</slot>
+			</view>
+			<view
+				v-if="showError && isError && !loading"
+				class="u-image__error"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
+					width: $u.addUnit(width),
+					height: $u.addUnit(height)
+				}"
+			>
+				<slot name="error">
+					<u-icon
+						:name="errorIcon"
+						:width="width"
+						:height="height"
+					></u-icon>
+				</slot>
+			</view>
+		</view>
+	</u-transition>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * Image ������
+	 * @description ������������uni-app���image������������������������������������������������������������������������������������������������������������������������������������
+	 * @tutorial https://uviewui.com/components/image.html
+	 * @property {String}			src 				������������
+	 * @property {String}			mode 				������������������������������ ��������� 'aspectFill' ���
+	 * @property {String | Number}	width 				������������������������������������������������px������ ��������� '300' ���
+	 * @property {String | Number}	height 				������������������������������������������������px������ ��������� '225' ���
+	 * @property {String}			shape 				���������������circle-���������square-������ ��������� 'square' ���
+	 * @property {String | Number}	radius		 		���������������������������������������������������px������ ��������� 0 ���
+	 * @property {Boolean}			lazyLoad			���������������������������������������App������������������������������������������������ ��������� true ���
+	 * @property {Boolean}			showMenuByLongpress	��������������������������������������������������������������������������������� ��������� true ���
+	 * @property {String}			loadingIcon 		������������������������������������ ��������� 'photo' ���
+	 * @property {String}			errorIcon 			��������������������������������������� ��������� 'error-circle' ���
+	 * @property {Boolean}			showLoading 		������������������������������������������������slot ��������� true ���
+	 * @property {Boolean}			showError 			���������������������������������������������������slot ��������� true ���
+	 * @property {Boolean}			fade 				������������������������ ��������� true ���
+	 * @property {Boolean}			webp 				��������������������������������������������������� ��������� false ���
+	 * @property {String | Number}	duration 			������fade������������������������������ms ��������� 500 ���
+	 * @property {String}			bgColor 			���������������������������������������������������������������������������  (������ '#f3f4f6' )
+	 * @property {Object}			customStyle  		���������������������������������
+	 * @event {Function}	click	���������������������
+	 * @event {Function}	error	���������������������������
+	 * @event {Function} load ���������������������������
+	 * @example <u-image width="100%" height="300px" :src="src"></u-image>
+	 */
+	export default {
+		name: 'u-image',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				// ���������������������������������������������������������������
+				isError: false,
+				// ���������������������������������������������
+				loading: true,
+				// ������������������������������������������������
+				opacity: 1,
+				// ���������������������props���������������������������������������������
+				durationTime: this.duration,
+				// ������������������������������������������������������������png������������������������������������
+				backgroundStyle: {},
+				// ������fade���������������������������������
+				show: false
+			};
+		},
+		watch: {
+			src: {
+				immediate: true,
+				handler(n) {
+					if (!n) {
+						// ������������null������''���������false���������undefined������������������������
+						this.isError = true
+						
+					} else {
+						this.isError = false;
+						this.loading = true;
+					}
+				}
+			}
+		},
+		computed: {
+			wrapStyle() {
+				let style = {};
+				// ������������addUnit()������������������������������������������px���������������������������������������������������������������rpx������
+				style.width = this.$u.addUnit(this.width);
+				style.height = this.$u.addUnit(this.height);
+				// ������������������������������������������������������������
+				style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$u.addUnit(this.radius)
+				// ���������������������������������hidden���������������������������
+				style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
+				// if (this.fade) {
+				// 	style.opacity = this.opacity
+				// 	// nvue���������������������������������������
+				// 	style.transitionDuration = `${this.durationTime}ms`
+				// 	style.transitionTimingFunction = 'ease-in-out'
+				// 	style.transitionProperty = 'opacity'
+				// }
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+
+			}
+		},
+		mounted() {
+			this.show = true
+		},
+		methods: {
+			// ������������
+			onClick() {
+				this.$emit('click')
+			},
+			// ������������������
+			onErrorHandler(err) {
+				this.loading = false
+				this.isError = true
+				this.$emit('error', err)
+			},
+			// ���������������������������loading������
+			onLoadHandler(event) {
+				this.loading = false
+				this.isError = false
+				this.$emit('load', event)
+				this.removeBgColor()
+				// ���������������������������������������������������������������������������������������������
+				// ������������fade������������png���������������������������������������
+				// if (!this.fade) return this.removeBgColor();
+				// // ������opacity���1(������������������������������������)���������0(���������������������������������������������������������������������)������������1������������������������������
+				// this.opacity = 0;
+				// // ���������������0���������������������������������������������������������������0������������������������������������������duration������������������������������(������)
+				// // ������������������������������������������
+				// this.durationTime = 0;
+				// // ������50ms���������������������H5���������������������
+				// setTimeout(() => {
+				// 	this.durationTime = this.duration;
+				// 	this.opacity = 1;
+				// 	setTimeout(() => {
+				// 		this.removeBgColor();
+				// 	}, this.durationTime);
+				// }, 50);
+			},
+			// ������������������������
+			removeBgColor() {
+				// ������������������������������������������������������������������png������������������������������
+				this.backgroundStyle = {
+					backgroundColor: 'transparent'
+				};
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	$u-image-error-top:0px !default;
+	$u-image-error-left:0px !default;
+	$u-image-error-width:100% !default;
+	$u-image-error-hight:100% !default;
+	$u-image-error-background-color:$u-bg-color !default;
+	$u-image-error-color:$u-tips-color !default;
+	$u-image-error-font-size: 46rpx !default;
+
+	.u-image {
+		position: relative;
+		transition: opacity 0.5s ease-in-out;
+
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
+
+		&__loading,
+		&__error {
+			position: absolute;
+			top: $u-image-error-top;
+			left: $u-image-error-left;
+			width: $u-image-error-width;
+			height: $u-image-error-hight;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $u-image-error-background-color;
+			color: $u-image-error-color;
+			font-size: $u-image-error-font-size;
+		}
+	}
+</style>

--
Gitblit v1.8.0