im-ui-mobile 0.0.98 → 0.1.0

package/components/im-image-upload/im-image-upload.vue

@@ -1,95 +1,95 @@
-<template>
-	<view @click="selectAndUpload()">
-		<slot></slot>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-interface Props {
-	maxCount?: number;
-	maxSize?: number;
-	sourceType?: string;
-	isPermanent?: boolean;
-	thumbSize?: number;
-	onBefore?: (file: any) => boolean;
-	onSuccess?: (file: any, data: any) => void;
-	onError?: (file: any, error: any) => void;
-	action: string;
-	token?: string;
-}
-
-interface UploadResponse {
-	code: number;
-	message: string;
-	data?: any;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	maxCount: 1,
-	maxSize: 5 * 1024 * 1024,
-	sourceType: 'album',
-	isPermanent: false,
-	thumbSize: 50
-});
-
-const selectAndUpload = () => {
-	uni.chooseImage({
-		count: props.maxCount,
-		sourceType: [props.sourceType],
-		sizeType: ['original'],
-		success: (res: any) => {
-			res.tempFiles.forEach((file: any) => {
-				if (!props.onBefore || props.onBefore(file)) {
-					// 调用上传图片的接口
-					uploadImage(file);
-				}
-			});
-		}
-	});
-};
-
-const uploadImage = (file: any) => {
-	let uploadUrl = props.action
-
-	if (uploadUrl.indexOf('?') === -1) {
-		uploadUrl += '?'
-	}
-
-	uploadUrl += `&isPermanent=${props.isPermanent}&thumbSize=${props.thumbSize}`
-
-	uni.uploadFile({
-		url: uploadUrl,
-		header: {
-			accessToken: props.token,
-			authorization: `Bearer ${props.token}`
-		},
-		filePath: file.path,
-		name: 'file',
-		success: (res) => {
-			const data: UploadResponse = JSON.parse(res.data);
-			if (data.code !== 200) {
-				uni.showToast({
-					icon: "none",
-					title: data.message,
-				});
-				props.onError?.(file, data);
-			} else {
-				props.onSuccess?.(file, data);
-			}
-		},
-		fail: (err) => {
-			console.log(err);
-			props.onError?.(file, err);
-		}
-	});
-};
-
-// 暴露方法给父组件
-// defineExpose({
-// 	selectAndUpload
-// });
-</script>
-
+<template>
+	<view @click="selectAndUpload()">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+	maxCount?: number;
+	maxSize?: number;
+	sourceType?: string;
+	isPermanent?: boolean;
+	thumbSize?: number;
+	onBefore?: (file: any) => boolean;
+	onSuccess?: (file: any, data: any) => void;
+	onError?: (file: any, error: any) => void;
+	action: string;
+	token?: string;
+}
+
+interface UploadResponse {
+	code: number;
+	message: string;
+	data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	maxCount: 1,
+	maxSize: 5 * 1024 * 1024,
+	sourceType: 'album',
+	isPermanent: false,
+	thumbSize: 50
+});
+
+const selectAndUpload = () => {
+	uni.chooseImage({
+		count: props.maxCount,
+		sourceType: [props.sourceType],
+		sizeType: ['original'],
+		success: (res: any) => {
+			res.tempFiles.forEach((file: any) => {
+				if (!props.onBefore || props.onBefore(file)) {
+					// 调用上传图片的接口
+					uploadImage(file);
+				}
+			});
+		}
+	});
+};
+
+const uploadImage = (file: any) => {
+	let uploadUrl = props.action
+
+	if (uploadUrl.indexOf('?') === -1) {
+		uploadUrl += '?'
+	}
+
+	uploadUrl += `&isPermanent=${props.isPermanent}&thumbSize=${props.thumbSize}`
+
+	uni.uploadFile({
+		url: uploadUrl,
+		header: {
+			accessToken: props.token,
+			authorization: `Bearer ${props.token}`
+		},
+		filePath: file.path,
+		name: 'file',
+		success: (res) => {
+			const data: UploadResponse = JSON.parse(res.data);
+			if (data.code !== 200) {
+				uni.showToast({
+					icon: "none",
+					title: data.message,
+				});
+				props.onError?.(file, data);
+			} else {
+				props.onSuccess?.(file, data);
+			}
+		},
+		fail: (err) => {
+			console.log(err);
+			props.onError?.(file, err);
+		}
+	});
+};
+
+// 暴露方法给父组件
+// defineExpose({
+// 	selectAndUpload
+// });
+</script>
+
 <style></style>

package/components/im-loading/im-loading.vue

@@ -1,65 +1,65 @@
-<template>
-	<view class="loading" :style="loadingStyle">
-		<view class="rotate iconfont icon-loading" :style="icontStyle"></view>
-		<slot></slot>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-	size?: number;
-	iconColor?: string;
-	mask?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 100,
-	iconColor: '',
-	mask: true
-});
-
-const icontStyle = computed(() => {
-	let style = `font-size:${props.size}rpx;`;
-	if (props.iconColor) {
-		style += `color: ${props.iconColor};`;
-	} else if (props.mask) {
-		style += 'color: #eee;';
-	}
-	return style;
-});
-
-const loadingStyle = computed(() => {
-	return props.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
-});
-</script>
-
-<style lang="scss" scoped>
-.loading {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 10000;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.rotate {
-	animation: rotate 2s ease-in-out infinite;
-
-}
-
-@keyframes rotate {
-	from {
-		transform: rotate(0deg)
-	}
-
-	to {
-		transform: rotate(360deg)
-	}
-}
+<template>
+	<view class="loading" :style="loadingStyle">
+		<view class="rotate iconfont icon-loading" :style="icontStyle"></view>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+	size?: number;
+	iconColor?: string;
+	mask?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 100,
+	iconColor: '',
+	mask: true
+});
+
+const icontStyle = computed(() => {
+	let style = `font-size:${props.size}rpx;`;
+	if (props.iconColor) {
+		style += `color: ${props.iconColor};`;
+	} else if (props.mask) {
+		style += 'color: #eee;';
+	}
+	return style;
+});
+
+const loadingStyle = computed(() => {
+	return props.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
+});
+</script>
+
+<style lang="scss" scoped>
+.loading {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.rotate {
+	animation: rotate 2s ease-in-out infinite;
+
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg)
+	}
+
+	to {
+		transform: rotate(360deg)
+	}
+}
 </style>