1.2.3 后台操作按钮调整及其新增开启拼团功能

src/components/pic-upload-two/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-upload
+      class="pic-uploader-component"
+      :action="qiNiuUploadApi"
+      :headers="headers"
+      :show-file-list="false"
+      :on-success="handleUploadSuccess"
+      :before-upload="beforeAvatarUpload">
+      <img v-if="value" :src="resourcesUrl + value" class="pic">
+      <i v-else class="el-icon-plus pic-uploader-icon"></i>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import { mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      resourcesUrl: '',
+      headers: {
+        'Authorization': 'Bearer ' + getToken()
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'qiNiuUploadApi'
+    ])
+  },
+  props: {
+    value: {
+      default: '',
+      type: String
+    }
+  },
+  methods: {
+    // 图片上传
+    handleUploadSuccess(response, file, fileList) {
+      console.log(file)
+      this.$emit('input', file.response.data[0])
+    },
+    // 限制图片上传大小
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isLt2M
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .pic-uploader-component .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    .pic-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 100%;
+      height: 40px;
+      //line-height: 178px;
+      text-align: center;
+    }
+    .pic {
+      width: 100%;
+      height: 40px;
+      display: block;
+    }
+  }
+  .pic-uploader-component .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+</style>