Merge branch 'dev' of https://e.coding.net/g-cphe0354/yinshoukeguanliduan/management into wwz

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">
@@ -552,15 +552,15 @@ export default {
   },
   methods: {
     successEvent(d) {
+      // 删除重复数据
+      // let index = this.files.findIndex(ele => ele.name == file.name)
+      // this.files.splice(index, 1);
       d.forEach(item => {
         item.uid = item.id
-        item.url = item.src
-        this.form.images.push(item.src);
+        item.url = item.url
+        this.form.images.push(item.url);
       })
       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) {
       const messageheight = 48;

src/views/product/components/addImages.vue

@@ -1,55 +1,149 @@
 <template>
-    <div>
+    <div v-if="dialogVisible">
         <el-dialog title="请选择" :visible.sync="dialogVisible" width="">
-            <el-select v-model="value" placeholder="请选择" @change="selectchange">
+            <el-select v-model="value" placeholder="请选择" @change="changeEvent">
                 <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                    <span style="float: left">{{ item.name }}</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
+                            @click="deleteType(item.id)"></i></span>
                 </el-option>
             </el-select>
-            <br />
-            <br />
-            <!-- <vue-select-image :dataImages="dataImages" h="100px" w="100px" :is-multiple="true"
-                @onselectmultipleimage="onSelectImage">
-            </vue-select-image> -->
+            <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
+            <el-button type="primary" @click="showUpload = true">新增图片</el-button>
+            <imageComponent @onSelectImage="onSelectImage" @getList="getList" @getlists="getlists" :list='dataImages'>
+            </imageComponent>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="sumbit">确 定</el-button>
             </span>
         </el-dialog>
+        <!-- 新增类型 -->
+        <el-dialog title="新增类型" :visible.sync="dialogTableVisibles">
+            <el-input v-model="typedata" placeholder="请输入类型" autocomplete="off"></el-input>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogTableVisibles = false">取 消</el-button>
+                <el-button type="primary" @click="addtype">确 定</el-button>
+            </span>
+        </el-dialog>
+        <!-- 新增图片 -->
+        <template v-if="showUpload">
+            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
+                @close="showUpload = false">
+                <el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
+                    :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
+                    <i class="el-icon-plus"></i>
+                </el-upload>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="doSubmit">确认</el-button>
+                </div>
+            </el-dialog>
+        </template>
     </div>
-
 </template>
 
 <script>
-import { getcommonCategor, getcommonpicture } from "@/api/imagesPhp";
+import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
+import { mapGetters } from "vuex";
+import { getToken } from "@/utils/auth";
+import imageComponent from './imageComponent.vue'
 export default {
+    computed: {
+        ...mapGetters(["qiNiuUploadApi"])
+    },
     components: {
+        imageComponent
     },
     data() {
         return {
             dialogVisible: false,
+            dialogTableVisibles: 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',
-                //     disabled: true
-                // }
-            ],
+            headers: {
+                Authorization: getToken()
+            },
+            files: [],
+            dataImages: [],
             options: [],
-            value: ''
+            fileList: [],
+            value: '',
+            typedata: '',
+            showUpload: false,
+            page: 1,
         }
     },
     mounted() {
         this.getType()
     },
     methods: {
-        selectchange() {
+        changeEvent() {
+            this.page = 1
+            this.getList()
+        },
+        // 删除类型
+        deleteType(id) {
+            this.$confirm('删除该类型, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                let res = await delcate({
+                    id,
+                    store_id: localStorage.getItem("shopId"),
+                })
+                this.getType()
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+            }).catch(() => {
+
+            });
+        },
+        // 刷新列表数据
+        async doSubmit() {
+            this.showUpload = false;
+            let arr = []
+            if (this.files.length) {
+                this.files.forEach(ele => {
+                    arr.push({
+                        url: ele.response.data[0],
+                        name: ele.name
+                    })
+                })
+                const res = await addImg({
+                    category: this.value,
+                    store_id: localStorage.getItem("shopId"),
+                    url: arr
+                })
+                if (res.code == 1) {
+                    this.getType(this.value)
+                } else {
+                    this.$message.error(res.msg);
+                }
+                this.files = [];
+            }
+        },
+        handleBeforeRemove(file, fileList) {
+            let index = this.files.findIndex(ele => ele.name == file.name)
+            this.files.splice(index, 1);
+        },
+        handleSuccess(response, file, fileList) {
+            this.files.push(file)
+        },
+        async addtype() {
+            if (this.typedata) {
+                const res = await storeAddcategory({
+                    store_id: localStorage.getItem("shopId"),
+                    name: this.typedata
+                });
+                if (res.msg == '成功') {
+                    this.dialogTableVisibles = false
+                    this.getType()
+                }
+            }
+        },
+        getlists() {
+            this.page++
             this.getList()
         },
         sumbit() {
@@ -62,23 +156,29 @@ export default {
         async getList() {
             let obj = {
                 category: this.value,
-                page: 1,
-                size: 10,
+                page: this.page,
+                size: 20,
                 store_id: localStorage.getItem("shopId"),
 
             }
-            const res = await getcommonpicture('https://kysh.sxczgkj.cn', obj);
-            this.dataImages = res.data
+            const res = await getcommonpicture(obj);
+            if (this.page == 1) {
+                this.dataImages = res.data
+            } else {
+                this.dataImages.push(...res.data)
+            }
         },
-        async getType() {
-            const res = await getcommonCategor('https://kysh.sxczgkj.cn',{
+        async getType(valueIndex) {
+            const res = await getcommonCategor({
                 store_id: localStorage.getItem("shopId"),
             });
             this.options = res.data
-            this.value = res.data[0].id
+            this.value = valueIndex ? valueIndex : res.data[0].id
             this.getList()
         },
-        onSelectImage(d) { this.selectImage = d }
+        onSelectImage(d) {
+            this.selectImage = [d]
+        }
     }
 }
 </script>

src/views/product/components/imageComponent.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <ul class="ulStyle" v-infinite-scroll="load">
+            <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
+                @click="clickEvent(item)">
+                <img :src="item.url" style="width: 100px;height: 100px;" alt="">
+                <el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
+                    <i class="el-icon-error buttonstyle" slot="reference"></i>
+                </el-popconfirm>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+import { delimg } from "@/api/imagesPhp";
+
+export default {
+    props: ['list'],
+    data() {
+        return {
+            selectList: [],
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+        load() {
+            this.$emit('getlists')
+        },
+        clickEvent(d) {
+            this.selectList = d
+            this.$emit('onSelectImage', d)
+        },
+        async deleteEvent(id) {
+            let res = await delimg({
+                id,
+                store_id: localStorage.getItem("shopId"),
+            })
+            this.$message({
+                type: 'success',
+                message: '删除成功!'
+            });
+            this.$emit('getList')
+        },
+    }
+}
+</script>
+<style>
+ul,
+li {
+    list-style: none;
+}
+.show {
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    display: none;
+}
+
+.listyle:hover>.show {
+    display: block;
+}
+
+.buttonstyle {
+    border-radius: 50%;
+    color: #db1616;
+    background-color: #fff;
+    font-size: 20px;
+}
+.ulStyle {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    height: 400px;
+}
+
+.listyle {
+    margin-right: 10px;
+    margin-top: 10px;
+    border: 5px solid #fff;
+    position: relative;
+}
+
+
+
+
+
+
+.actives {
+    border: 5px solid #1890ff;
+}
+</style>