@10yun/cv-mobile-ui 0.5.20 → 0.5.21

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

@@ -1 +1,177 @@
-<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">
          <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>
  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;
    }
  }
+<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>
+@import 'style.css';
+</style>

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

@@ -1 +1,176 @@
-<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>
  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;
    }
  }
+<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>
+@import 'style.css';
+</style>