@ecolovo/uniapp-components 1.0.0

package/components/textarea/textarea.vue

@@ -0,0 +1,192 @@
+<template>
+	<view :class="componentClassNames">
+		<template v-if="!isReadonly">
+			<textarea
+				:value="value"
+				:maxlength="maxlength"
+				:auto-height="autoHeight"
+				:class="$style['Textarea--input']"
+				@input="$emit('input', $event.detail.value)"
+				@blur="$_trim"
+			>
+			</textarea>
+			<view v-if="!value" :class="$style['Textarea--placeholder']">
+				<slot name="placeholder">
+					<icon-cpn icon="textarea-edit" :class="$style['Textarea--icon']" />
+					<text> {{ placeholder }} </text>
+				</slot>
+			</view>
+			<view :class="$style['Textarea--counter']"> 已输入 {{ count }}/{{ maxlength }} </view>
+		</template>
+		<!-- 只读文本展示 -->
+		<view v-else-if="value" :class="$style['Textarea--readonly']">
+			<view :class="{ [$style['Textarea--fold']]: fold && isFolded }"> {{ value }} </view>
+			<view v-if="fold && hasFoldButton" :class="$style['Textarea--fold-button']" @click="isFolded = !isFolded">
+				<text v-if="isFolded"> <icon-cpn icon="arrow-down" /> 展开 </text>
+				<text v-else> <icon-cpn icon="arrow-up" /> 收起 </text>
+			</view>
+			<!-- 隐藏文字，用于计算是否显示收起展开按钮 -->
+			<view v-if="fold" :class="[$style['Textarea--hidden-text'], $style['Textarea--fold']]"> {{ value }} </view>
+			<view v-if="fold" :class="$style['Textarea--hidden-text']"> {{ value }} </view>
+		</view>
+		<!-- 空文本展示 -->
+		<view v-else :class="[$style['Textarea--readonly'], $style['Textarea--empty']]"> 未填写 </view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppTextarea',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: String,
+			default: '',
+		},
+		/** 最大输入文本长度 */
+		maxlength: {
+			type: Number,
+			default: 300,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请输入',
+		},
+		/** 是否自动调整高度 */
+		autoHeight: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 当只读时，如果文字过多，是否折叠 */
+		fold: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			/** 是否有收起展开按钮 */
+			hasFoldButton: false,
+			/** 当前是否处于收起状态 */
+			isFolded: true,
+		};
+	},
+	computed: {
+		/** 是否只读 */
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		/** 已输入字符长度 */
+		count() {
+			return this.value.length;
+		},
+	},
+	watch: {
+		isReadonly: {
+			handler(newVal) {
+				if (newVal && this.fold) {
+					this.$nextTick(() => {
+						this.shouldShowFold();
+					});
+				}
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		/** 去除头尾空白字符 */
+		$_trim(event) {
+			this.$emit('input', event.detail.value.trim());
+		},
+		/** 计算是否需要显示收起展开按钮 */
+		shouldShowFold() {
+			uni.createSelectorQuery()
+				.in(this)
+				.selectAll('.' + this.$style['Textarea--hidden-text'])
+				.boundingClientRect((rects) => {
+					this.hasFoldButton = rects.length === 2 && rects[1].height > rects[0].height;
+				})
+				.exec();
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+:host {
+	display: block;
+}
+:host(.display-inline) {
+	display: inline;
+}
+
+.Textarea {
+	flex: 1;
+	position: relative;
+	padding: 20rpx;
+	background: UTILS__GLOBAL_VAR(color, background);
+	border-radius: 20rpx;
+	line-height: 1.5;
+}
+.Textarea--input {
+	width: 100%;
+	height: 150rpx;
+	min-height: 150rpx;
+	max-height: 300rpx;
+	padding: 0;
+}
+.Textarea--placeholder {
+	position: absolute;
+	top: 20rpx;
+	left: 20rpx;
+	padding: 0;
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.Textarea--icon {
+	margin-right: 6rpx;
+}
+.Textarea--counter {
+	text-align: right;
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.Textarea--readonly {
+	position: relative;
+	white-space: pre-wrap;
+	overflow: hidden;
+}
+.Textarea--fold {
+	@include UTILS__ELLIPSIS(5);
+}
+.Textarea--fold-button {
+	text-align: right;
+	color: #999;
+}
+.Textarea--hidden-text {
+	visibility: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+}
+.Textarea--empty {
+	color: #ccc;
+}
+</style>

package/components/time-picker/time-picker-view.vue

@@ -0,0 +1,127 @@
+<template>
+	<picker-view
+		immediate-change
+		:value="pickerValue"
+		:class="componentClassNames"
+		@change="handlePickerChange"
+		@pickend="onPickEnd"
+	>
+		<picker-view-column>
+			<view v-for="item in hourOptions" :key="item" :class="$style['TimePickerView--option']">
+				{{ item }} 时
+			</view>
+		</picker-view-column>
+		<picker-view-column>
+			<view v-for="item in minuteOptions" :key="item" :class="$style['TimePickerView--option']">
+				{{ item }} 分
+			</view>
+		</picker-view-column>
+	</picker-view>
+</template>
+
+<script>
+import range from 'lodash-es/range';
+import componentName from '../../mixins/componentName';
+import { formatDate } from '../../utils/date';
+
+const hourOptions = range(0, 24).map((item) => ('' + item).padStart(2, '0'));
+
+export default {
+	name: 'AppTimePickerView',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null],
+			default: null,
+		},
+		/** 分钟步长 */
+		step: {
+			type: Number,
+			default: 5,
+		},
+	},
+	data() {
+		return {
+			innerValue: '',
+			/** 小时选项列表 */
+			hourOptions,
+			/** 分钟选项列表 */
+			minuteOptions: [],
+			/** picker-view 绑定值 */
+			pickerValue: [0, 0],
+		};
+	},
+	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);
+			},
+		},
+	},
+	created() {
+		this.minuteOptions = range(0, 60, this.step);
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.syncPickerValue(this.currentValue || new Date());
+		});
+	},
+	methods: {
+		/** 同步 picker-view 选中索引 */
+		syncPickerValue(time) {
+			const [h, m] = time.split(':');
+			const i1 = this.hourOptions.indexOf(h);
+			const i2 = Math.max(this.minuteOptions.indexOf(Math.round(Number(m) / this.step) * this.step), 0);
+			this.$nextTick(() => {
+				this.pickerValue =
+					typeof this.pickerValue[0] === 'number' ? [i1, i2].map((item) => item.toString()) : [i1, i2];
+			});
+		},
+		/** picker-view 选项值变化处理 */
+		handlePickerChange(e) {
+			const newPickerValue = e.detail.value;
+			const hour = this.hourOptions[newPickerValue[0]];
+			const minute = this.step >= 0 ? this.minuteOptions[newPickerValue[1]] : '00';
+			this.pickerValue = newPickerValue;
+			const dateValue = new Date(0, 0, 1, hour, minute, 0, 0);
+			let dateStr = formatDate(dateValue, formatDate.TIME_MINUTE);
+			this.currentValue = dateStr;
+		},
+		/** 滑动结束处理，保持选择器显示值与输入框值一致 */
+		onPickEnd() {
+			this.$nextTick(() => {
+				this.syncPickerValue(this.currentValue);
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+:host {
+	display: flex;
+}
+
+.TimePickerView {
+	margin-top: 24rpx;
+	height: 300rpx;
+}
+.TimePickerView--option {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+}
+</style>

package/components/time-picker/time-picker.vue

@@ -0,0 +1,140 @@
+<template>
+	<view :class="componentClassNames">
+		<selector-cpn
+			:value="showText"
+			:readonly="isReadonly"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			@click="showPicker"
+		/>
+
+		<!-- 选择器弹框 -->
+		<popup-cpn
+			v-if="isShowPopup"
+			ref="popup"
+			v-model="isShowPopup"
+			:cancel="false"
+			title="选择时间"
+			@click.native.stop.prevent="doNothing"
+			@confirm="onConfirm"
+		>
+			<view class="TimePicker--picker-area">
+				<time-picker-view-cpn v-model="startStr" :step="step" />
+				<template v-if="range">
+					<view>至</view>
+					<time-picker-view-cpn v-model="endStr" :step="step" />
+				</template>
+			</view>
+		</popup-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import PopupCpn from '../popup/popup.vue';
+import SelectorCpn from '../selector/selector.vue';
+import TimePickerViewCpn from './time-picker-view.vue';
+
+export default {
+	name: 'AppTimePicker',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PopupCpn, SelectorCpn, TimePickerViewCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, null, Array],
+			default: null,
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请选择',
+		},
+		/** 是否时间范围选择器 */
+		range: {
+			type: Boolean,
+			default: false,
+		},
+		/** 分钟步长 */
+		step: {
+			type: Number,
+			default: 5,
+		},
+	},
+	data() {
+		return {
+			/** 选择框是否可见 */
+			isShowPopup: false,
+			/** 开始日期 */
+			startStr: '',
+			/** 结束日期 */
+			endStr: '',
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		startTime() {
+			return this.range && Array.isArray(this.value) ? this.value[0] : this.value;
+		},
+		endTime() {
+			return this.range && Array.isArray(this.value) ? this.value[1] : '';
+		},
+		showText() {
+			return this.range && this.startTime && this.endTime
+				? `${this.startTime} 至 ${this.endTime}`
+				: this.startTime;
+		},
+	},
+	methods: {
+		doNothing() {},
+		/** 显示选择器弹出框 */
+		showPicker() {
+			if (this.disabled || this.isReadonly) {
+				return;
+			}
+
+			this.startStr = this.startTime;
+			this.endStr = this.endTime;
+
+			this.isShowPopup = true;
+			this.$emit('show');
+		},
+		onConfirm() {
+			this.$refs.popup.close();
+			this.$emit('input', this.range ? [this.startStr, this.endStr] : this.startStr);
+			this.$emit('change', this.range ? [this.startStr, this.endStr] : this.startStr);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.TimePicker {
+	width: 100%;
+	height: 100%;
+}
+
+.TimePicker--picker-area {
+	display: flex;
+	align-items: center;
+}
+</style>

package/components/uploader/download.js

@@ -0,0 +1,81 @@
+const STORAGE_KEY = 'cached_files';
+
+function hasFile(url) {
+	const files = uni.getStorageSync(STORAGE_KEY);
+	if (!files || !files[url]) {
+		return false;
+	}
+	try {
+		uni.getFileSystemManager().accessSync(files[url]);
+		return files[url];
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * 缓存文件
+ * @param {string} url 文件下载路径
+ * @param {string} name 带后缀的文件名
+ * @returns 缓存后的路口
+ */
+function cacheFile(url, name) {
+	const filePath = hasFile(url);
+	if (filePath) {
+		return Promise.resolve(filePath);
+	}
+	return download(url).then((res) => {
+		let filePath = uni.getFileSystemManager().saveFileSync(
+			res.filePath,
+			/* #ifdef MP-WEIXIN */
+			`${wx.env.USER_DATA_PATH}/${name}`,
+			/* #endif */
+			/* #ifdef MP-ALIPAY */
+			`${my.env.USER_DATA_PATH}/${name}`
+			/* #endif */
+		);
+		const files = uni.getStorageSync(STORAGE_KEY) || {};
+		/* #ifdef MP-ALIPAY */
+		filePath = filePath.savedFilePath;
+		/* #endif */
+		files[url] = filePath;
+		uni.setStorageSync(STORAGE_KEY, files);
+
+		return filePath;
+	});
+}
+
+/**
+ * 下载文件
+ * @param {string} url 文件下载路径
+ * @param {string} name 文件下载后名称
+ * @returns 下载后的临时路径
+ */
+function download(url, name) {
+	return new Promise((resolve, reject) => {
+		uni.downloadFile({
+			url,
+			filePath: name ? `${wx.env.USER_DATA_PATH}/${name}` : undefined,
+			success: function (res) {
+				const filePath = res.filePath || res.tempFilePath;
+				let fileName = name || '';
+				// 从响应头获取文件名
+				if (!fileName && res.header) {
+					const match = /(filename=(.*))|(filename\*=[^']*'[^']*'(.*))/.exec(
+						res.header['Content-Disposition']
+					);
+					if (match) {
+						fileName = decodeURI(match[2] || match[4]);
+						fileName = fileName.replace(/^["']*|["']*$/g, '');
+					}
+				}
+				resolve({ res, filePath, fileName });
+			},
+			fail: function (error) {
+				reject(error);
+			},
+		});
+	});
+}
+
+export { download, cacheFile };

package/components/uploader/file-uploader.vue

@@ -0,0 +1,52 @@
+<template>
+	<view :class="componentClassNames">
+		<view>
+			<button-cpn>上传</button-cpn>
+		</view>
+		<view>
+			<view v-for="(file, idx) in currentValue" :key="idx" :class="$style['Uploader--file-item']">
+				{{ file.name || file.path }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import ButtonCpn from '../button/button.vue';
+import UploadMixin from './mixin';
+
+export default {
+	name: 'AppUploader',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { ButtonCpn },
+	mixins: [componentName, UploadMixin],
+	props: {
+		/** 文件列表 */
+		value: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	methods: {},
+};
+</script>
+
+<style lang="scss" module>
+.Uploader {
+	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>