商品列表-商品图片-选择图片增删改

.env.development

@@ -14,5 +14,4 @@ VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 VUE_APP_WS_API = 'ws://192.168.2.128:8000'
 
 VUE_APP_PHP_API = 'https://kysh.sxczgkj.cn'
-
 # 是否启用 babel-plugin-dynamic-import-node插

src/api/imagesPhp.js

@@ -1,17 +1,57 @@
 import request from "@/utils/requestPhp";
 
-// 查询图库
+// 获取图片分类
-export function getcommonCategor(data,params) {
+export function getcommonCategor(data) {
-    return request({
+  return request({
-      url: data + `/channel/file/getcommon-category`,
+    url: `/sourcematerial/getcommon-category`,
-      method: "get",params
+    method: 'post',
-    });
+    data: data
-  }
+  })
-  export function getcommonpicture(data,params) {
+}
-    return request({
+// 获取图片
-      url: data + "/channel/file/getcommon-picture",
+export function getcommonpicture(data) {
-      method: "get",
+  return request({
-      params
+    url: "/sourcematerial/getcommon-picture",
-    });
+    method: 'post',
-  }
+    data: data
+  });
+}
 
+export function storeAddcategory(data) {
+  return request({
+    url: '/sourcematerial/store-addcategory',
+    method: 'post',
+    data: {
+      ...data
+    },
+  })
+}
+export function addImg(data) {
+  return request({
+    url: '/sourcematerial/add-img',
+    method: 'post',
+    data: {
+      ...data
+    },
+  })
+}
+// 删除图片
+export function delimg(data) {
+  return request({
+    url: '/sourcematerial/delimg',
+    method: 'post',
+    data: {
+      ...data
+    },
+  })
+}
+// 删除类型
+export function delcate(data) {
+  return request({
+    url: '/sourcematerial/delcate',
+    method: 'post',
+    data: {
+      ...data
+    },
+  })
+}

src/main.js

@@ -10,7 +10,6 @@ import Element from "element-ui";
 // import VueSelectImage from 'vue-select-image'
 // import "vue-select-image/dist/vue-select-image.css";
 // Vue.use(VueSelectImage) 
-// "vue-select-image": "^1.9.0",
 
 // 数据字典
 import dict from "./components/Dict";

src/utils/requestPhp.js

@@ -8,7 +8,7 @@ import Cookies from 'js-cookie'
 
 // 创建axios实例
 const service = axios.create({
-  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API : '/php',
+  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API : '/source',
   // baseURL: process.env.VUE_APP_PHP_API, // api 的 base_url
   timeout: Config.timeout // 请求超时时间
 })
@@ -19,7 +19,7 @@ service.interceptors.request.use(
     // if (getToken()) {
     //   config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
     // }
-    // config.headers['Content-Type'] = 'application/json'
+    config.headers['Content-Type'] = 'text/html; charset=UTF-8'
     // config.headers['loginName'] = 'admin'
     // config.headers['token'] = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyVHlwZSI6Ik1HIiwiZXhwIjoxNjkwMTgwNzE2LCJ1c2VySWQiOiIyNDQiLCJpYXQiOjE2ODg3MDk0ODcsImxvZ2luTmFtZSI6ImFkbWluIn0.lqxxvv2-FcecQngMBorz4MpkB3mIJQDG-IUULQyV-KQ'
     // config.headers["userId"] = '244'

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
+        item.url = item.url
-        this.form.images.push(item.src);
+        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,56 +1,141 @@
 <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="getList">
                 <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 />
+            <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
-            <br />
+            <el-button type="primary" @click="showUpload = true">新增图片</el-button>
-            <!-- <vue-select-image :dataImages="dataImages" h="100px" w="100px" :is-multiple="true"
+            <imageComponent @onSelectImage="onSelectImage" @getList="getList" :list='dataImages'></imageComponent>
-                @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>
+        <!-- 新增类型 -->
+        <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: [
+            headers: {
-                //     {
+                Authorization: getToken()
-                //     id: '1',
+            },
-                //     src: 'https://unsplash.it/200?random',
+            files: [],
-                //     alt: 'Alt Image 1'
+            dataImages: [],
-                // }, 
-                //  {
-                //     id: '2',
-                //     src: 'https://unsplash.it/200?random',
-                //     alt: 'Alt Image 2',
-                //     disabled: true
-                // }
-            ],
             options: [],
-            value: ''
+            fileList: [],
+            value: '',
+            typedata: '',
+            showUpload: false,
+
         }
     },
     mounted() {
         this.getType()
     },
     methods: {
-        selectchange() {
+        // 删除类型
-            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()
+                }
+            }
         },
         sumbit() {
             this.dialogVisible = false
@@ -67,18 +152,20 @@ export default {
                 store_id: localStorage.getItem("shopId"),
 
             }
-            const res = await getcommonpicture('https://kysh.sxczgkj.cn', obj);
+            const res = await getcommonpicture(obj);
             this.dataImages = res.data
         },
-        async getType() {
+        async getType(valueIndex) {
-            const res = await getcommonCategor('https://kysh.sxczgkj.cn',{
+            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,81 @@
+<template>
+    <div>
+        <ul class="ulStyle">
+            <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'active' : '']"
+                @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: [],
+        }
+    }, methods: {
+        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;
+}
+
+.ulStyle {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.listyle {
+    margin-right: 10px;
+    margin-top: 10px;
+    border: 5px solid #fff;
+    position: relative;
+}
+
+.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;
+}
+
+.active {
+    border: 5px solid #1890ff;
+}
+</style>

vue.config.js

@@ -41,11 +41,11 @@ module.exports = {
           '^/auth': 'auth'
         }
       },
-      '/php': {
+      '/source': {
         target: process.env.VUE_APP_PHP_API,
         changeOrigin: true,
         pathRewrite: {
-          '^/auth': 'auth'
+          '^/source': 'source'
         }
       }
     }