@ecolovo/uniapp-components 1.0.0

package/components/uploader/uploader copy.vue

@@ -0,0 +1,547 @@
+<template>
+	<view :class="[componentClassNames, isCardView ? $style['Uploader--card'] : $style['Uploader--list']]">
+		<template v-if="isCardView">
+			<!-- 附件列表 -->
+			<view
+				v-for="(item, index) in currentValue"
+				:key="index"
+				:class="$style['Uploader--file']"
+				@click="previewFile(item)"
+			>
+				<view
+					v-if="!computedReadonly && item.uploadStatus !== 'uploading'"
+					:class="$style['Uploader--icon-close']"
+					@click.stop="deleteFile(item)"
+				>
+				</view>
+				<image
+					v-if="item.fileType === FILE_TYPE_IMAGE"
+					:class="$style['Uploader--image']"
+					mode="aspectFill"
+					:src="item.fileUrl"
+				/>
+				<video
+					v-if="item.fileType === FILE_TYPE_VIDEO"
+					:id="'video_' + item.fileId"
+					:muted="true"
+					:src="item.fileUrl"
+					:controls="false"
+					:show-progress="false"
+					:show-fullscreen-btn="false"
+					:show-play-btn="false"
+					:show-center-play-btn="false"
+					:show-loading="false"
+					:enable-progress-gesture="false"
+					object-fit="fill"
+					:class="[$style['Uploader--image'], $style['Uploader--video']]"
+					@click.stop.prevent="previewVideo(item)"
+					@fullscreenchange="stopPreviewVideo"
+				></video>
+				<view v-if="item.uploadStatus === 'error'" :class="$style['Uploader--error']">
+					<view>上传</view>
+					<view>失败</view>
+				</view>
+				<view v-else-if="item.uploadStatus === 'uploading'" :class="$style['Uploader--uploading']">
+					<icon-cpn icon="loading" :class="$style['Uploader--icon-loading']" />
+					上传中
+				</view>
+			</view>
+			<view
+				v-if="!computedReadonly && (max <= 0 || currentValue.length < max)"
+				:class="$style['Uploader--file']"
+				@click="beforeChoose"
+			>
+				<icon-cpn icon="add-photo" :class="$style['Uploader--uploader-icon']" />
+				<view :class="$style['Uploader--uploader-text']">
+					<slot>添加图片</slot>
+				</view>
+			</view>
+		</template>
+		<template v-else>
+			<button-cpn
+				v-if="!computedReadonly && (max <= 0 || currentValue.length < max)"
+				plain
+				:class="$style['Uploader--uploader']"
+				@click="beforeChoose"
+			>
+				<icon-cpn icon="plus-circle" />
+				上传附件
+			</button-cpn>
+			<!-- 附件列表 -->
+			<view v-for="(item, index) in currentValue" :key="index">
+				<view :class="$style['Uploader--file']" @click="previewFile(item)">
+					<icon-cpn icon="attachment" :class="$style['Uploader--icon-attachment']" />
+					<view :class="$style['Uploader--file-name']">{{ item.fileName || item.name }}</view>
+					<icon-cpn
+						v-if="!computedReadonly && item.uploadStatus !== 'uploading'"
+						icon="close-circle-filled"
+						expand-tap-area
+						:class="$style['Uploader--icon-close']"
+						@click.native.stop="deleteFile(item)"
+					/>
+					<view v-else-if="item.uploadStatus === 'uploading'" :class="$style['Uploader--uploading']">
+						<icon-cpn icon="loading" />
+					</view>
+				</view>
+				<view v-if="item.uploadStatus === 'error'" :class="$style['Uploader--error']">上传失败</view>
+			</view>
+		</template>
+
+		<popup-cpn v-if="isSelectTypeVisible" ref="popup" v-model="isSelectTypeVisible" :confirm="false">
+			<button-cpn :class="$style['Uploader--button']" @click="choose('file')">从聊天记录选择文件</button-cpn>
+			<button-cpn :class="$style['Uploader--button']" @click="choose()">
+				拍摄或从相册选择{{ mediaTypeName }}
+			</button-cpn>
+		</popup-cpn>
+
+		<dialog-cpn v-if="isShowVideoPreview" v-model="isShowVideoPreview">
+			<template #custom>
+				<view :class="$style['Uploader--preview-video-wrapper']">
+					<video
+						:src="previewVideoUrl"
+						:autoplay="true"
+						:muted="true"
+						show-mute-btn
+						:class="$style['Uploader--preview-video']"
+					></video>
+					<icon-cpn
+						icon="clear"
+						:class="$style['Uploader--preview-video-close']"
+						@click="isShowVideoPreview = false"
+					></icon-cpn>
+				</view>
+			</template>
+		</dialog-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import ButtonCpn from '../button/button.vue';
+import DialogCpn from '../dialog/dialog.vue';
+import IconCpn from '../icon/icon.vue';
+import PopupCpn from '../popup/popup.vue';
+import {
+	FILE_TYPE_IMAGE,
+	FILE_TYPE_VIDEO,
+	FILE_TYPE_FILE,
+	typeStringValidator,
+	typeStringToArr,
+	chooseFile,
+	isImage,
+	isVideo,
+} from './files';
+import { openDocument } from './uni';
+
+export default {
+	name: 'Uploader',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { ButtonCpn, DialogCpn, IconCpn, PopupCpn },
+	mixins: [componentName],
+	inject: {
+		injectReadonly: {
+			from: 'readonly',
+			default: false,
+		},
+	},
+	props: {
+		/** 绑定值 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+		/** 最大上传数量 */
+		max: {
+			type: Number,
+			default: 9,
+		},
+		/** 是否使用卡片样式，不设置的话，如果 type 不包含文件类型，也会使用卡片样式 */
+		card: {
+			type: Boolean,
+			default: null,
+		},
+		/** 上传文件类型 */
+		type: {
+			type: String,
+			validator: typeStringValidator,
+			default: 'all',
+		},
+		/** 选择文件时限制文件类型，仅 type 为 file 或 all 时有效 */
+		selectExtension: {
+			type: String,
+			default: '',
+		},
+		/** 选中文件后文件类型限制 */
+		allowedExtension: {
+			type: String,
+			default: '',
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			FILE_TYPE_IMAGE,
+			FILE_TYPE_VIDEO,
+			/** 是否显示选择文件类型弹窗 */
+			isSelectTypeVisible: false,
+			isShowVideoPreview: false,
+			previewVideoUrl: '',
+		};
+	},
+	computed: {
+		currentValue: {
+			get: function () {
+				return this.value === null ? this.innerValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerValue = value;
+				this.$emit('change', value);
+			},
+		},
+		computedReadonly() {
+			return this.readonly || this.injectReadonly;
+		},
+		/** 上传文件类型数组 */
+		typeList() {
+			return typeStringToArr(this.type);
+		},
+		/** 是否可以选择图片类型 */
+		isImageType() {
+			return this.typeList.includes(FILE_TYPE_IMAGE);
+		},
+		/** 是否可以选择视频类型 */
+		isVideoType() {
+			return this.typeList.includes(FILE_TYPE_VIDEO);
+		},
+		/** 是否可以选择文件类型 */
+		isFileType() {
+			return this.typeList.includes(FILE_TYPE_FILE);
+		},
+		/** 是否使用卡片样式 */
+		isCardView() {
+			return typeof this.card === 'boolean' ? this.card : this.isFileType ? false : true;
+		},
+		/** 媒体文件类型 */
+		mediaType() {
+			return [...(this.isImageType ? [FILE_TYPE_IMAGE] : []), ...(this.isVideoType ? [FILE_TYPE_VIDEO] : [])];
+		},
+		/** 媒体文件类型中文文本 */
+		mediaTypeName() {
+			return [...(this.isImageType ? ['图片'] : []), ...(this.isVideoType ? ['视频'] : [])].join('、');
+		},
+		/** 选择文件时过滤的文件后缀数组 */
+		selectExtensionList() {
+			return this.selectExtension ? this.selectExtension.split(',') : undefined;
+		},
+		/** 选择文件后过滤的文件后缀数组 */
+		allowedExtensionList() {
+			return this.allowedExtension ? this.allowedExtension.split(',') : undefined;
+		},
+		/** 图片预览列表 */
+		previewImageList() {
+			return this.currentValue
+				.filter((item) => item.fileType === FILE_TYPE_IMAGE)
+				.map((item) => item.path || item.fileUrl);
+		},
+	},
+	created() {
+		// 处理初始值
+		this.currentValue = (this.value || []).map((item) => {
+			item = { ...item, filePreviewUrl: item.filePreviewUrl || item.fileUrl };
+			if (!item.fileType) {
+				item.fileType = isImage(item.fileExt || item.fileName || item.fileUrl.split('?').shift())
+					? FILE_TYPE_IMAGE
+					: isVideo(item.fileExt || item.fileName || item.fileUrl.split('?').shift())
+					? FILE_TYPE_VIDEO
+					: FILE_TYPE_FILE;
+			}
+			return item;
+		});
+	},
+	methods: {
+		/** 选择前判断文件类型 */
+		async beforeChoose() {
+			// 包含选择文件，且包含图片或视频，需要提示用户选择
+			if (this.isFileType && this.mediaType.length > 0) {
+				this.isSelectTypeVisible = true;
+				return;
+			}
+
+			this.choose(this.isFileType ? 'file' : 'media');
+		},
+		/** 选择文件 */
+		async choose(type = 'media') {
+			this.$refs.popup?.close();
+
+			if (type === 'file') {
+				type = ['file'];
+			} else {
+				type = this.mediaType;
+			}
+
+			const { files, invalidFiles } = await chooseFile({
+				max: this.max <= 0 ? 9 : this.max - this.currentValue.length,
+				type: type,
+				selectExtension: this.selectExtensionList,
+				allowedExtension: this.allowedExtensionList,
+			});
+			if (invalidFiles.length > 0) {
+				this.$toast('已剔除不符合格式的文件');
+			}
+			this.currentValue = this.currentValue.concat(files.map((item) => ({ ...item, uploadStatus: 'uploading' })));
+			if (this.max > 0 && this.currentValue.length >= this.max) {
+				this.$toast(`最多只能上传${this.max}个文件`);
+				this.currentValue = this.currentValue.slice(0, this.max);
+			}
+			this.upload(files);
+		},
+		/** 上传文件 */
+		upload(files) {
+			files.map(async (file) => {
+				try {
+					const res = null;
+					// const res = await httpUpload({ url: apis.common.uploadFile.url, file });
+					const index = this.currentValue.findIndex((item) => item.path === file.path);
+					if (index < 0) {
+						return;
+					}
+					const currentValue = [...this.currentValue];
+					currentValue.splice(index, 1, {
+						fileId: res.fileId,
+						fileName: res.fileName,
+						filePreviewUrl: res.filePreviewUrl,
+						fileUrl: res.fileUrl,
+						fileType: file.type,
+					});
+					this.currentValue = currentValue;
+					return this.currentValue[index];
+				} catch {
+					const index = this.currentValue.findIndex((item) => item.path === file.path);
+					if (index < 0) {
+						return;
+					}
+					const currentValue = [...this.currentValue];
+					currentValue.splice(index, 1, { ...file, uploadStatus: 'error' });
+					this.currentValue = currentValue;
+				}
+			});
+		},
+		/** 删除文件 */
+		deleteFile(file) {
+			const index = this.currentValue.findIndex((item) => file === item);
+			if (index >= 0) {
+				const currentValue = [...this.currentValue];
+				currentValue.splice(index, 1);
+				this.currentValue = currentValue;
+			}
+		},
+		/**
+		 * @param {UploadFile} file 文件
+		 */
+		previewFile(file) {
+			if (file.fileType === FILE_TYPE_IMAGE) {
+				this.previewImage(this.previewImageList.findIndex((item) => item === file.fileUrl));
+			}
+			if (file.fileType === FILE_TYPE_FILE) {
+				openDocument(file.fileUrl, file.fileName).catch((err) => {
+					this.$toast(err);
+				});
+			}
+		},
+		/** 预览图片 */
+		previewImage(index) {
+			uni.previewImage({
+				current: index,
+				urls: this.previewImageList,
+			});
+		},
+		/** 预览视频 */
+		previewVideo(file) {
+			this.isShowVideoPreview = true;
+			this.previewVideoUrl = file.fileUrl;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+:host {
+	display: block;
+}
+:host(.display-inline) {
+	display: inline;
+}
+
+.Uploader {
+	width: 100%;
+	position: relative;
+}
+
+.Uploader--card {
+	display: flex;
+	flex-wrap: wrap;
+	text-align: center;
+	margin: 0 calc(-1 * #{get-value('size-l')}) calc(-1 * #{get-value('size-l')}) 0;
+
+	.Uploader--file {
+		position: relative;
+		width: 160rpx;
+		height: 160rpx;
+		margin: 0 get-value('size-l') get-value('size-l') 0;
+		background: get-value('color-background');
+		border-radius: get-value('size-radius-xxs');
+		color: get-value('color-info');
+		font-size: get-value('size-font-s');
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		z-index: 0;
+	}
+	.Uploader--image {
+		width: 100%;
+		height: 100%;
+		border-radius: get-value('size-radius-xxs');
+	}
+	// .Uploader--icon-close {
+	//   position: absolute;
+	//   top: 0;
+	//   right: 0;
+	//   transform: translate(30%, -30%);
+	//   color: get-value('color-danger');
+	//   font-size: get-value('size-font-l');
+	//   z-index: 1;
+	// }
+	.Uploader--icon-close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 1;
+		transform: translate(25%, -25%);
+		width: get-value('size-xxxl');
+		height: get-value('size-xxxl');
+		background: red;
+		border-radius: 50%;
+		&:before,
+		&:after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			height: 70%;
+			width: 10%;
+			background: #fff;
+		}
+		&:before {
+			transform: translate(-50%, -50%) rotate(45deg);
+		}
+		&:after {
+			transform: translate(-50%, -50%) rotate(-45deg);
+		}
+	}
+	.Uploader--uploader-icon {
+		font-size: 48rpx;
+		color: get-value('color-info-6');
+	}
+	.Uploader--uploading {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.Uploader--icon-loading {
+		font-size: get-value('size-font-l');
+	}
+	.Uploader--error {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 70%;
+		height: 70%;
+		transform: translate(-50%, -50%);
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.75);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+.Uploader--list {
+	.Uploader--uploader {
+		#{UTILS__VAR_NAME(height, button)}: 88rpx;
+		#{UTILS__VAR_NAME(border-style, button)}: dashed;
+	}
+	.Uploader--file {
+		position: relative;
+		margin-top: get-value('size-s');
+		width: 100%;
+		height: 88rpx;
+		padding: 0 get-value('size-s');
+		display: flex;
+		justify-content: start;
+		align-items: center;
+		background: get-value('color-background');
+		border-radius: get-value('size-radius-xxs');
+	}
+	.Uploader--file-name {
+		flex: 1;
+		@include UTILS__ELLIPSIS();
+	}
+	.Uploader--icon-attachment {
+		font-size: get-value('size-font-l');
+		color: get-value('color-primary');
+		margin-right: get-value('size-xxs');
+	}
+	.Uploader--uploading,
+	.Uploader--icon-close {
+		position: relative;
+		font-size: get-value('size-font-l');
+		color: get-value('color-info');
+		#{UTILS__VAR_NAME(tap-size, icon)}: 200rpx;
+	}
+	.Uploader--error {
+		color: get-value('color-danger');
+		font-size: get-value('size-font-s');
+		margin: get-value('size-xxs') 0 get-value('size-s') get-value('size-s');
+	}
+	.Uploader--button {
+		margin-bottom: get-value('size-m');
+	}
+}
+
+.Uploader--preview-video-wrapper {
+	width: 80vw;
+	height: 75vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.Uploader--preview-video {
+	width: 100%;
+	height: 100%;
+}
+.Uploader--preview-video-close {
+	position: absolute;
+	color: get-value('color-white');
+	bottom: -20rpx;
+	left: 50%;
+	transform: translate(-50%, 100%);
+	font-size: 80rpx;
+}
+</style>

package/components/uploader/uploader.vue

@@ -0,0 +1,117 @@
+<template>
+	<view :class="componentClassNames">
+		<view v-if="card" :class="$style['Uploader--card-list']" :style="{ '--columns': columns }">
+			<!-- 已上传文件列表 -->
+			<aspect-cpn v-for="img in value" :key="img" :class="$style['Uploader--card-item']" :style="styleWidth">
+				<image-cpn
+					:src="img"
+					:preview-list="value"
+					:class="$style['Uploader--card-image']"
+					:style="styleSize"
+					mode="aspectFill"
+				>
+				</image-cpn>
+			</aspect-cpn>
+			<!-- 上传按钮 -->
+			<aspect-cpn :class="$style['Uploader--card-item']" :style="styleWidth">
+				<button-cpn plain :class="$style['Uploader--card-uploader']">
+					<view style="line-height: 1.3em">
+						<view>上传</view>
+						<view>图片</view>
+					</view>
+				</button-cpn>
+			</aspect-cpn>
+		</view>
+		<view v-else :class="$style['Uploader--list-view']">
+			<view>
+				<button-cpn>上传</button-cpn>
+			</view>
+			<view>
+				<view v-for="file in value" :key="file" :class="$style['Uploader--file-item']">{{ file }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import AspectCpn from '../aspect/aspect.vue';
+import ButtonCpn from '../button/button.vue';
+import ImageCpn from '../image/image.vue';
+
+export default {
+	name: 'AppUploader',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { AspectCpn, ButtonCpn, ImageCpn },
+	mixins: [componentName],
+	props: {
+		/** 文件列表 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+		/** 是否使用卡片样式，不设置的话，如果 type 不包含文件类型，也会使用卡片样式 */
+		card: {
+			type: Boolean,
+			default: false,
+		},
+		/** 显示宽度 */
+		columns: {
+			type: [String, Number],
+			default: 4,
+		},
+		/** 显示宽度 */
+		width: {
+			type: [String, Number],
+			default: '',
+		},
+	},
+	computed: {
+		styleWidth() {
+			if (!this.width) return '';
+			const width = typeof this.width === 'number' ? `${this.width}rpx` : this.width;
+			return `width: ${width};`;
+		},
+	},
+	methods: {},
+};
+</script>
+
+<style lang="scss" module>
+.Uploader {
+	width: 100%;
+}
+
+.Uploader--card-uploader {
+	height: 100%;
+	border-color: #ccc;
+	border-radius: 16rpx;
+}
+.Uploader--card-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12rpx;
+}
+.Uploader--card-item {
+	width: calc(100% / var(--columns) - 12rpx * (var(--columns) - 1) / var(--columns));
+}
+.Uploader--card-image {
+	border-radius: 16rpx;
+}
+.Uploader--list-view {
+	width: 100%;
+}
+.Uploader--file-item {
+	&:first-child {
+		margin-top: 20rpx;
+	}
+	padding: 15rpx 0;
+	font-size: 28rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>

package/configs/index.js

@@ -0,0 +1,41 @@
+/** 组件前缀 */
+let componentPrefix = 'app';
+
+/** 设置组件前缀 */
+function setComponentPrefix(prefix) {
+	componentPrefix = prefix;
+}
+
+/** iconfont 图标 map */
+const iconMap = new Map();
+
+/** 添加单个图标 */
+function addIconToMap(fontFamily, prefix, name) {
+	if (iconMap.has(name)) {
+		console.error(
+			`图标库 "${fontFamily}" 中的图标 "${name}" 在图标库 "${
+				iconMap.get(name).fontFamily
+			}" 中已存在，这个图标将被忽略`
+		);
+		return;
+	}
+	iconMap.set(name, {
+		fontFamily,
+		prefix,
+		name,
+	});
+}
+
+/** 添加一组图标，传入 iconfont.json 文件内容 */
+function addIcons(iconJson) {
+	const fontFamily = iconJson.font_family;
+	const prefix = iconJson.css_prefix_text;
+	const glyphs = iconJson.glyphs;
+	glyphs.forEach((glyph) => {
+		addIconToMap(fontFamily, prefix, glyph.font_class);
+	});
+}
+
+addIcons(require('../resources/iconfont/uniapp_ui_icon/iconfont.json'));
+
+export { componentPrefix, setComponentPrefix, iconMap, addIcons };