From 0e324729a41812dc6dfee2af3e545042d3d3425b Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 06 十月 2023 11:14:12 +0800
Subject: [PATCH] #
---
uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue | 325 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 325 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue
new file mode 100644
index 0000000..625d92e
--- /dev/null
+++ b/uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue
@@ -0,0 +1,325 @@
+<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>
--
Gitblit v1.9.1