初始化万家商超用户端仓库

components/benben-images-upload/benben-images-upload.vue

@@ -0,0 +1,125 @@
+<template>
+  <view>
+    <slot name="content" v-bind:imgList="imgList" v-bind:num="num" v-bind:maxlength="maxlength" v-bind:isShow="isShow" />
+  </view>
+</template>
+<script>
+import { UploadImage } from '@/common/utils/index'
+import { SERVER_TYPE } from '@/common/config.js'
+export default {
+  name: 'benben-images-upload',
+  props: {
+    maxlength: {
+      type: [String, Number],
+      default: '9',
+    },
+    imgList: {
+      type: Array,
+      default: () => [],
+    },
+    isShowTips: {
+      type: Boolean,
+      default: false,
+    },
+    imgIds: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    uploading: false,
+    imgIdArr: [],
+  }),
+  computed: {
+    isShow() {
+      return this.imgList.length < this.maxlength
+    },
+    num() {
+      return this.imgList.length || 0
+    },
+  },
+  //监听imgIds
+  watch: {
+    imgIds: {
+      handler(val) {
+        if (SERVER_TYPE !== 0) {
+          this.imgIdArr = val ? (val + '').split(',') : []
+        }
+      },
+      immediate: true,
+    },
+    imgList: {
+      handler(val) {
+        if (SERVER_TYPE === 0) {
+          this.$emit('update:img-ids', JSON.stringify(val))
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    //点击删除
+    delImage(index) {
+      let imgList = JSON.parse(JSON.stringify(this.imgList))
+      imgList.splice(index, 1)
+      this.$emit('update:img-list', imgList)
+      if (SERVER_TYPE !== 0) {
+        let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
+        imgIdArr.splice(index, 1)
+        this.$emit('update:img-ids', imgIdArr.join(','))
+      }
+    },
+    //点击预览
+    previewImage(index) {
+      uni.previewImage({
+        current: this.imgList[index],
+        urls: this.imgList,
+      })
+    },
+    //点击上传
+    manyChooseImage() {
+      let self = this
+      let imgIdArr = JSON.parse(JSON.stringify(this.imgIdArr))
+      let imgList = JSON.parse(JSON.stringify(this.imgList))
+      if (self.uploading) return
+      if (self.maxlength - self.imgList.length < 1) return
+      // 从相册中选择图片
+      uni.chooseImage({
+        count: self.maxlength - self.imgList.length, // 默认3
+        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+        success: function (res) {
+          self.uploading = true
+          // 开始上传
+          new UploadImage(res.tempFiles, {
+            complete: function (res) {
+              self.uploading = false
+              res.map((item) => {
+                imgIdArr.push(item.id)
+                imgList.push(item.path)
+              })
+              if (SERVER_TYPE !== 0) {
+                self.$emit('update:img-ids', imgIdArr.join(','))
+              }
+              self.$emit('update:img-list', imgList)
+            },
+          })
+        },
+      })
+    },
+  },
+  // 组件周期函数--监听组件挂载完毕
+  mounted() {},
+  // 组件周期函数--监听组件数据更新之前
+  beforeUpdate() {},
+  // 组件周期函数--监听组件数据更新之后
+  updated() {},
+  // 组件周期函数--监听组件激活(显示)
+  activated() {},
+  // 组件周期函数--监听组件停用(隐藏)
+  deactivated() {},
+  // 组件周期函数--监听组件销毁之前
+  beforeDestroy() {},
+}
+</script>
+<style></style>