图库选择50%

src/views/product/add_shop.vue

@@ -47,7 +47,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-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">
@@ -394,7 +394,7 @@ export default {
     uploadImg,
     shopList,
     groupTypeList,
-    Editor,addImg
+    Editor, addImg
   },
   data() {
     const validatordateUsed = (rule, value, callback) => {
@@ -551,19 +551,24 @@ export default {
     }
   },
   methods: {
-    successEvent(d){
+    successEvent(d) {
-      console.log(d,'拿到数据')
+      d.forEach(item => {
-      // this.$refs.uploadImg.fileList.push(d)
+        item.uid = item.id
-      console.log(this.$refs.uploadImg.fileList,'调试111111')
+        item.url = item.src
-      console.log(this.$refs.uploadImg.files,'调试111111')
+        this.form.images.push(item.src);
+      })
+      this.$refs.uploadImg.fileList.push(...d)
+      // this.form.images.push(res[0]);
+      // console.log(this.$refs.uploadImg.fileList, '调试111111')
+      // console.log(this.$refs.uploadImg.files, '调试222')
     },
-    priceFormat(item,key){
+    priceFormat(item, key) {
-      const messageheight=48;
+      const messageheight = 48;
-      const offset=window.innerHeight/2-(messageheight/2) -100
+      const offset = window.innerHeight / 2 - (messageheight / 2) - 100
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
-        const min=0;
+        const min = 0;
-        const max=100000000;
+        const max = 100000000;
-        const newval=formatPrice(item[key],min,max,true)
+        const newval = formatPrice(item[key], min, max, true)
         console.log(newval)
         if (typeof newval !== 'number') {
           item[key] = newval.value

src/views/product/components/addImages.vue

@@ -1,7 +1,14 @@
 <template>
     <div>
         <el-dialog title="请选择" :visible.sync="dialogVisible" width="">
-            <vue-select-image :dataImages="dataImages" :is-multiple="true" @onselectmultipleimage="onSelectImage">
+            <el-select v-model="value" placeholder="请选择" @change="selectchange">
+                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+            </el-select>
+            <br />
+            <br />
+            <vue-select-image :dataImages="dataImages" h="100px" w="100px" :is-multiple="true"
+                @onselectmultipleimage="onSelectImage">
             </vue-select-image>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
@@ -13,7 +20,7 @@
 </template>
 
 <script>
-import { getcommonCategor } from "@/api/shop";
+import { getcommonCategor, getcommonpicture } from "@/api/imagesPhp";
 export default {
     components: {
     },
@@ -21,36 +28,30 @@ export default {
         return {
             dialogVisible: false,
             selectImage: [],
-            dataImages: [{
+            dataImages: [
-                id: '1',
+                //     {
-                src: 'https://unsplash.it/200?random',
+                //     id: '1',
-                alt: 'Alt Image 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
                 // }
-            ]
+            ],
+            options: [],
+            value: ''
         }
     },
     mounted() {
-        this.getList()
+        this.getType()
     },
     methods: {
+        selectchange() {
+            this.getList()
+        },
         sumbit() {
             this.dialogVisible = false
             this.$emit('successEvent', this.selectImage)
@@ -59,9 +60,23 @@ export default {
             this.dialogVisible = true
         },
         async getList() {
-            const res = await getcommonCategor();
+            let obj = {
-            console.log(res, '调试1')
+                category: this.value,
+                page: 1,
+                size: 10,
+                store_id: localStorage.getItem("shopId"),
 
+            }
+            const res = await getcommonpicture('https://kysh.sxczgkj.cn', obj);
+            this.dataImages = res.data
+        },
+        async getType() {
+            const res = await getcommonCategor('https://kysh.sxczgkj.cn',{
+                store_id: localStorage.getItem("shopId"),
+            });
+            this.options = res.data
+            this.value = res.data[0].id
+            this.getList()
         },
         onSelectImage(d) { this.selectImage = d }
     }