#

whycq

2023-10-13 368591db5ce828a835c63f327dce6ccfbd159dc4

 uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue

New file
@@ -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>