DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/upload.vue

<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="grid col-4 grid-square flex-sub">
      <view
        v-for="(path, index) in value"
        @tap="viewImg"
        :key="index"
        class="bg-img"
      >
        <image :src="path" mode="aspectFill"></image>
        <view
          v-if="!readonly"
          @tap.stop="delImg(index)"
          class="cu-tag bg-red"
          style="height: 24px; width: 24px"
        >
          <l-icon
            type="close"
            style="width: 18px; height: 24px; font-size: 24px"
          />
        </view>
      </view>

      <view
        v-if="!readonly && value.length < Number(number)"
        @tap="chooseImg"
        class="solids"
      >
        <l-icon type="cameraadd" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "l-upload",

  props: {
    number: { default: 1 },
    readonly: {},
    value: { default: () => [] },
  },

  methods: {
    delImg(index) {
      const newList = JSON.parse(JSON.stringify(this.value));
      newList.splice(index, 1);
      this.$emit("input", newList);
      this.$emit("change");
      this.$emit("del");
    },

    chooseImg() {
      uni.chooseImage({
        count: Number(this.number),
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: ({ tempFilePaths }) => {
          const newList = JSON.parse(JSON.stringify(this.value || [])).concat(
            tempFilePaths
          );
          this.$emit("input", newList);
          this.$emit("change");
          this.$emit("add");
        },
      });
    },

    viewImg(index) {
      uni.previewImage({
        urls: this.value,
        current: this.value[index],
      });
    },
  },
};
</script>