@vtj/materials 0.13.16 → 0.13.18

package/src/uni-ui/lib/uni-file-picker/upload-file.vue

@@ -1,325 +0,0 @@
-<template>
-	<view class="uni-file-picker__files">
-		<view v-if="!readonly" class="files-button" @click="choose">
-			<slot></slot>
-		</view>
-		<!-- :class="{'is-text-box':showType === 'list'}" -->
-		<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
-			<!-- ,'is-list-card':showType === 'list-card' -->
-
-			<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
-				'files-border':index !== 0 && styles.dividline}"
-			 :style="index !== 0 && styles.dividline &&borderLineStyle">
-				<view class="uni-file-picker__item">
-					<!-- :class="{'is-text-image':showType === 'list'}" -->
-					<!-- 	<view class="files__image is-text-image">
-						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
-					</view> -->
-					<view class="files__name">{{item.name}}</view>
-					<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
-						<view class="icon-del icon-files"></view>
-						<view class="icon-del rotate"></view>
-					</view>
-				</view>
-				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
-					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
-					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
-				</view>
-				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
-					点击重试
-				</view>
-			</view>
-
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "uploadFile",
-		emits:['uploadFiles','choose','delFile'],
-		props: {
-			filesList: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			delIcon: {
-				type: Boolean,
-				default: true
-			},
-			limit: {
-				type: [Number, String],
-				default: 9
-			},
-			showType: {
-				type: String,
-				default: ''
-			},
-			listStyles: {
-				type: Object,
-				default () {
-					return {
-						// 是否显示边框
-						border: true,
-						// 是否显示分隔线
-						dividline: true,
-						// 线条样式
-						borderStyle: {}
-					}
-				}
-			},
-			readonly:{
-				type:Boolean,
-				default:false
-			}
-		},
-		computed: {
-			list() {
-				let files = []
-				this.filesList.forEach(v => {
-					files.push(v)
-				})
-				return files
-			},
-			styles() {
-				let styles = {
-					border: true,
-					dividline: true,
-					'border-style': {}
-				}
-				return Object.assign(styles, this.listStyles)
-			},
-			borderStyle() {
-				let {
-					borderStyle,
-					border
-				} = this.styles
-				let obj = {}
-				if (!border) {
-					obj.border = 'none'
-				} else {
-					let width = (borderStyle && borderStyle.width) || 1
-					width = this.value2px(width)
-					let radius = (borderStyle && borderStyle.radius) || 5
-					radius = this.value2px(radius)
-					obj = {
-						'border-width': width,
-						'border-style': (borderStyle && borderStyle.style) || 'solid',
-						'border-color': (borderStyle && borderStyle.color) || '#eee',
-						'border-radius': radius
-					}
-				}
-				let classles = ''
-				for (let i in obj) {
-					classles += `${i}:${obj[i]};`
-				}
-				return classles
-			},
-			borderLineStyle() {
-				let obj = {}
-				let {
-					borderStyle
-				} = this.styles
-				if (borderStyle && borderStyle.color) {
-					obj['border-color'] = borderStyle.color
-				}
-				if (borderStyle && borderStyle.width) {
-					let width = borderStyle && borderStyle.width || 1
-					let style = borderStyle && borderStyle.style || 0
-					if (typeof width === 'number') {
-						width += 'px'
-					} else {
-						width = width.indexOf('px') ? width : width + 'px'
-					}
-					obj['border-width'] = width
-
-					if (typeof style === 'number') {
-						style += 'px'
-					} else {
-						style = style.indexOf('px') ? style : style + 'px'
-					}
-					obj['border-top-style'] = style
-				}
-				let classles = ''
-				for (let i in obj) {
-					classles += `${i}:${obj[i]};`
-				}
-				return classles
-			}
-		},
-
-		methods: {
-			uploadFiles(item, index) {
-				this.$emit("uploadFiles", {
-					item,
-					index
-				})
-			},
-			choose() {
-				this.$emit("choose")
-			},
-			delFile(index) {
-				this.$emit('delFile', index)
-			},
-			value2px(value) {
-				if (typeof value === 'number') {
-					value += 'px'
-				} else {
-					value = value.indexOf('px') !== -1 ? value : value + 'px'
-				}
-				return value
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.uni-file-picker__files {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: flex-start;
-	}
-
-	.files-button {
-		// border: 1px red solid;
-	}
-
-	.uni-file-picker__lists {
-		position: relative;
-		margin-top: 5px;
-		overflow: hidden;
-	}
-
-	.file-picker__mask {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		color: #fff;
-		font-size: 14px;
-		background-color: rgba(0, 0, 0, 0.4);
-	}
-
-	.uni-file-picker__lists-box {
-		position: relative;
-	}
-
-	.uni-file-picker__item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		padding: 8px 10px;
-		padding-right: 5px;
-		padding-left: 10px;
-	}
-
-	.files-border {
-		border-top: 1px #eee solid;
-	}
-
-	.files__name {
-		flex: 1;
-		font-size: 14px;
-		color: #666;
-		margin-right: 25px;
-		/* #ifndef APP-NVUE */
-		word-break: break-all;
-		word-wrap: break-word;
-		/* #endif */
-	}
-
-	.icon-files {
-		/* #ifndef APP-NVUE */
-		position: static;
-		background-color: initial;
-		/* #endif */
-	}
-
-	// .icon-files .icon-del {
-	// 	background-color: #333;
-	// 	width: 12px;
-	// 	height: 1px;
-	// }
-
-
-	.is-list-card {
-		border: 1px #eee solid;
-		margin-bottom: 5px;
-		border-radius: 5px;
-		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
-		padding: 5px;
-	}
-
-	.files__image {
-		width: 40px;
-		height: 40px;
-		margin-right: 10px;
-	}
-
-	.header-image {
-		width: 100%;
-		height: 100%;
-	}
-
-	.is-text-box {
-		border: 1px #eee solid;
-		border-radius: 5px;
-	}
-
-	.is-text-image {
-		width: 25px;
-		height: 25px;
-		margin-left: 5px;
-	}
-
-	.rotate {
-		position: absolute;
-		transform: rotate(90deg);
-	}
-
-	.icon-del-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		margin: auto 0;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		top: 0px;
-		bottom: 0;
-		right: 5px;
-		height: 26px;
-		width: 26px;
-		// border-radius: 50%;
-		// background-color: rgba(0, 0, 0, 0.5);
-		z-index: 2;
-		transform: rotate(-45deg);
-	}
-
-	.icon-del {
-		width: 15px;
-		height: 1px;
-		background-color: #333;
-		// border-radius: 1px;
-	}
-
-	/* #ifdef H5 */
-	@media all and (min-width: 768px) {
-		.uni-file-picker__files {
-			max-width: 375px;
-		}
-	}
-
-	/* #endif */
-</style>

package/src/uni-ui/lib/uni-file-picker/upload-image.vue

@@ -1,292 +0,0 @@
-<template>
-	<view class="uni-file-picker__container">
-		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
-			<view class="file-picker__box-content" :style="borderStyle">
-				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
-				<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
-					<view class="icon-del"></view>
-					<view class="icon-del rotate"></view>
-				</view>
-				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
-					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
-					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
-				</view>
-				<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
-					点击重试
-				</view>
-			</view>
-		</view>
-		<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
-			<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
-				<slot>
-					<view class="icon-add"></view>
-					<view class="icon-add rotate"></view>
-				</slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "uploadImage",
-		emits:['uploadFiles','choose','delFile'],
-		props: {
-			filesList: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			disabled:{
-				type: Boolean,
-				default: false
-			},
-			disablePreview: {
-				type: Boolean,
-				default: false
-			},
-			limit: {
-				type: [Number, String],
-				default: 9
-			},
-			imageStyles: {
-				type: Object,
-				default () {
-					return {
-						width: 'auto',
-						height: 'auto',
-						border: {}
-					}
-				}
-			},
-			delIcon: {
-				type: Boolean,
-				default: true
-			},
-			readonly:{
-				type:Boolean,
-				default:false
-			}
-		},
-		computed: {
-			styles() {
-				let styles = {
-					width: 'auto',
-					height: 'auto',
-					border: {}
-				}
-				return Object.assign(styles, this.imageStyles)
-			},
-			boxStyle() {
-				const {
-					width = 'auto',
-						height = 'auto'
-				} = this.styles
-				let obj = {}
-				if (height === 'auto') {
-					if (width !== 'auto') {
-						obj.height = this.value2px(width)
-						obj['padding-top'] = 0
-					} else {
-						obj.height = 0
-					}
-				} else {
-					obj.height = this.value2px(height)
-					obj['padding-top'] = 0
-				}
-
-				if (width === 'auto') {
-					if (height !== 'auto') {
-						obj.width = this.value2px(height)
-					} else {
-						obj.width = '33.3%'
-					}
-				} else {
-					obj.width = this.value2px(width)
-				}
-
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
-				}
-				return classles
-			},
-			borderStyle() {
-				let {
-					border
-				} = this.styles
-				let obj = {}
-				const widthDefaultValue = 1
-				const radiusDefaultValue = 3
-				if (typeof border === 'boolean') {
-					obj.border = border ? '1px #eee solid' : 'none'
-				} else {
-					let width = (border && border.width) || widthDefaultValue
-					width = this.value2px(width)
-					let radius = (border && border.radius) || radiusDefaultValue
-					radius = this.value2px(radius)
-					obj = {
-						'border-width': width,
-						'border-style': (border && border.style) || 'solid',
-						'border-color': (border && border.color) || '#eee',
-						'border-radius': radius
-					}
-				}
-				let classles = ''
-				for(let i in obj){
-					classles+= `${i}:${obj[i]};`
-				}
-				return classles
-			}
-		},
-		methods: {
-			uploadFiles(item, index) {
-				this.$emit("uploadFiles", item)
-			},
-			choose() {
-				this.$emit("choose")
-			},
-			delFile(index) {
-				this.$emit('delFile', index)
-			},
-			prviewImage(img, index) {
-				let urls = []
-				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
-					this.$emit("choose")
-				}
-				if(this.disablePreview) return
-				this.filesList.forEach(i => {
-					urls.push(i.url)
-				})
-
-				uni.previewImage({
-					urls: urls,
-					current: index
-				});
-			},
-			value2px(value) {
-				if (typeof value === 'number') {
-					value += 'px'
-				} else {
-					if (value.indexOf('%') === -1) {
-						value = value.indexOf('px') !== -1 ? value : value + 'px'
-					}
-				}
-				return value
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.uni-file-picker__container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-wrap: wrap;
-		margin: -5px;
-	}
-
-	.file-picker__box {
-		position: relative;
-		// flex: 0 0 33.3%;
-		width: 33.3%;
-		height: 0;
-		padding-top: 33.33%;
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-	.file-picker__box-content {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		margin: 5px;
-		border: 1px #eee solid;
-		border-radius: 5px;
-		overflow: hidden;
-	}
-
-	.file-picker__progress {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		/* border: 1px red solid; */
-		z-index: 2;
-	}
-
-	.file-picker__progress-item {
-		width: 100%;
-	}
-
-	.file-picker__mask {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		color: #fff;
-		font-size: 12px;
-		background-color: rgba(0, 0, 0, 0.4);
-	}
-
-	.file-image {
-		width: 100%;
-		height: 100%;
-	}
-
-	.is-add {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-	}
-
-	.icon-add {
-		width: 50px;
-		height: 5px;
-		background-color: #f1f1f1;
-		border-radius: 2px;
-	}
-
-	.rotate {
-		position: absolute;
-		transform: rotate(90deg);
-	}
-
-	.icon-del-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		top: 3px;
-		right: 3px;
-		height: 26px;
-		width: 26px;
-		border-radius: 50%;
-		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 2;
-		transform: rotate(-45deg);
-	}
-
-	.icon-del {
-		width: 15px;
-		height: 2px;
-		background-color: #fff;
-		border-radius: 2px;
-	}
-</style>

package/src/uni-ui/lib/uni-file-picker/utils.js

@@ -1,110 +0,0 @@
-/**
- * 获取文件名和后缀
- * @param {String} name
- */
-export const get_file_ext = (name) => {
-	const last_len = name.lastIndexOf('.')
-	const len = name.length
-	return {
-		name: name.substring(0, last_len),
-		ext: name.substring(last_len + 1, len)
-	}
-}
-
-/**
- * 获取扩展名
- * @param {Array} fileExtname
- */
-export const get_extname = (fileExtname) => {
-	if (!Array.isArray(fileExtname)) {
-		let extname = fileExtname.replace(/(\[|\])/g, '')
-		return extname.split(',')
-	} else {
-		return fileExtname
-	}
-	return []
-}
-
-/**
- * 获取文件和检测是否可选
- */
-export const get_files_and_is_max = (res, _extname) => {
-	let filePaths = []
-	let files = []
-	if(!_extname || _extname.length === 0){
-		return {
-			filePaths,
-			files
-		}
-	}
-	res.tempFiles.forEach(v => {
-		let fileFullName = get_file_ext(v.name)
-		const extname = fileFullName.ext.toLowerCase()
-		if (_extname.indexOf(extname) !== -1) {
-			files.push(v)
-			filePaths.push(v.path)
-		}
-	})
-	if (files.length !== res.tempFiles.length) {
-		uni.showToast({
-			title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
-			icon: 'none',
-			duration: 5000
-		})
-	}
-
-	return {
-		filePaths,
-		files
-	}
-}
-
-
-/**
- * 获取图片信息
- * @param {Object} filepath
- */
-export const get_file_info = (filepath) => {
-	return new Promise((resolve, reject) => {
-		uni.getImageInfo({
-			src: filepath,
-			success(res) {
-				resolve(res)
-			},
-			fail(err) {
-				reject(err)
-			}
-		})
-	})
-}
-/**
- * 获取封装数据
- */
-export const get_file_data = async (files, type = 'image') => {
-	// 最终需要上传数据库的数据
-	let fileFullName = get_file_ext(files.name)
-	const extname = fileFullName.ext.toLowerCase()
-	let filedata = {
-		name: files.name,
-		uuid: files.uuid,
-		extname: extname || '',
-		cloudPath: files.cloudPath,
-		fileType: files.fileType,
-		thumbTempFilePath: files.thumbTempFilePath,
-		url: files.path || files.path,
-		size: files.size, //单位是字节
-		image: {},
-		path: files.path,
-		video: {}
-	}
-	if (type === 'image') {
-		const imageinfo = await get_file_info(files.path)
-		delete filedata.video
-		filedata.image.width = imageinfo.width
-		filedata.image.height = imageinfo.height
-		filedata.image.location = imageinfo.path
-	} else {
-		delete filedata.image
-	}
-	return filedata
-}