素材库添加-未完成

package.json

@@ -60,6 +60,7 @@
     "vue-image-crop-upload": "^3.0.3",
     "vue-material": "^1.0.0-beta-15",
     "vue-router": "3.0.2",
+    "vue-select-image": "^1.9.0",
     "vue-splitpane": "1.0.4",
     "vue2-editor": "^2.10.3",
     "vuedraggable": "2.20.0",

src/api/shop.js

@@ -70,7 +70,14 @@ export function tbShopUnitPost(data) {
     data
   });
 }
-
+// 查询图库
+export function getcommonCategor(data) {
+  return request({
+    url: `/channel/file/getcommon-category`,
+    method: "post",
+    data
+  });
+}
 /**
  * 更改单位
  * @returns

src/main.js

@@ -6,6 +6,11 @@ import "normalize.css/normalize.css";
 
 import Element from "element-ui";
 
+// 图片选择器
+import VueSelectImage from 'vue-select-image'
+import "vue-select-image/dist/vue-select-image.css";
+Vue.use(VueSelectImage)
+
 // 数据字典
 import dict from "./components/Dict";
 import Editor from "@/components/Editor";

src/views/product/add_shop.vue

@@ -44,6 +44,7 @@
       <el-form-item label="商品图片">
         <uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" />
         <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
+        <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addImg.show()">从图库中选取</el-button>
       </el-form-item>
       <el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
         <el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
@@ -334,6 +335,8 @@
     </el-dialog>
     <!-- 选择团购券分类 -->
     <groupTypeList ref="groupTypeList" @success="res => (form.groupCategoryId = res)" />
+    <!-- 选择图片 -->
+    <addImg ref='addImg' @successEvent="successEvent"></addImg>
   </div>
 </template>
 
@@ -348,6 +351,7 @@ import {
   tbProductPut
 } from "@/api/shop";
 import addUnit from "./components/addUnit";
+import addImg from './components/addImages.vue'
 import addClassify from "./components/addClassify";
 import shopList from "@/components/shopList";
 import groupTypeList from "@/components/groupTypeList";
@@ -364,7 +368,7 @@ export default {
     uploadImg,
     shopList,
     groupTypeList,
-    Editor
+    Editor,addImg
   },
   data() {
     const validatordateUsed = (rule, value, callback) => {
@@ -517,7 +521,12 @@ export default {
     }
   },
   methods: {
-
+    successEvent(d){
+      console.log(d,'拿到数据')
+      // this.$refs.uploadImg.fileList.push(d)
+      console.log(this.$refs.uploadImg.fileList,'调试111111')
+      console.log(this.$refs.uploadImg.files,'调试111111')
+    },
     priceFormat(item,key){
       const messageheight=48;
       const offset=window.innerHeight/2-(messageheight/2) -100

src/views/product/components/addImages.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <el-dialog title="请选择" :visible.sync="dialogVisible" width="">
+            <vue-select-image :dataImages="dataImages" :is-multiple="true" @onselectmultipleimage="onSelectImage">
+            </vue-select-image>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="sumbit">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+
+</template>
+
+<script>
+import { getcommonCategor } from "@/api/shop";
+export default {
+    components: {
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            selectImage: [],
+            dataImages: [{
+                id: '1',
+                src: 'https://unsplash.it/200?random',
+                alt: 'Alt Image 1'
+            }, {
+                id: '2',
+                src: 'https://unsplash.it/200?random',
+                alt: 'Alt Image 2'
+            }, {
+                id: '3',
+                src: 'https://unsplash.it/200?random',
+                alt: 'Alt Image 2'
+            }, {
+                id: '4',
+                src: 'https://unsplash.it/200?random',
+                alt: 'Alt Image 2'
+            },
+                //  {
+                //     id: '2',
+                //     src: 'https://unsplash.it/200?random',
+                //     alt: 'Alt Image 2',
+                //     disabled: true
+                // }
+            ]
+        }
+    },
+    mounted() {
+        this.getList()
+    },
+    methods: {
+        sumbit() {
+            this.dialogVisible = false
+            this.$emit('successEvent', this.selectImage)
+        },
+        show() {
+            this.dialogVisible = true
+        },
+        async getList() {
+            const res = await getcommonCategor();
+            console.log(res, '调试1')
+
+        },
+        onSelectImage(d) { this.selectImage = d }
+    }
+}
+</script>