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

2024-08-08 09:38:35 +08:00 · 2024-08-08 09:38:35 +08:00 · 87d2f8a7bb
parent 81f5c68fa7 9a55093516
commit 87d2f8a7bb
5 changed files with 263 additions and 67 deletions
--- a/src/components/uploadImg/index.vue
+++ b/src/components/uploadImg/index.vue
@ -36,7 +36,7 @@ export default {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
-            files: [],
+            // files: [],
            headers: {
                'Authorization': getToken()
            }
@ -45,7 +45,13 @@ export default {
    methods: {
        handleSuccess(response, file, fileList) {
            // console.log('上传成功', response)
-            this.files = response.data
+            setTimeout(() => {
+                this.fileList.push({
+                    url: response.data[0],
+                    id: response.data.id
+                })
+            }, 100);
+            // this.files = response.data
            this.$emit('success', response.data)
        },
        // 监听上传失败
@ -69,6 +75,9 @@ export default {
        },
        handleRemove(file, fileList) {
            let arr = fileList.map(item => item.url)
+            // 删除数据
+            let index = this.fileList.findIndex(ele => ele.url == file.url)
+            this.fileList.splice(index, 1);
            this.$emit('remove', arr)
        },
        clearFiles() {
@ -77,3 +86,10 @@ export default {
    }
 }
 </script>
+<style>
+.el-upload-list__item {
+
+    transition: none;
+
+}
+</style>
--- a/src/views/product/add_shop.vue
+++ b/src/views/product/add_shop.vue
@ -2,7 +2,8 @@
  <div class="app-container">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="left">
      <el-form-item label="商品类型" prop="typeEnum">
-        <div class="shop_type_box" :class="{ disabled: form.id }">
+        <div class="shop_type_box" :class="{  }">
+          <!-- <div class="shop_type_box" :class="{ disabled: form.id }"> -->
          <div class="item" v-for="(item, index) in shopTypes" :key="index"
            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
            <div class="s_title">{{ item.label }}</div>
@ -45,9 +46,19 @@
        <addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
      </el-form-item>
      <el-form-item label="商品图片">
-        <uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" />
+        <div style="display: flex;flex-wrap: wrap; ">
+          <div v-for="item in imgList" style="position: relative;" class="showStyle">
+            <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
+            <img style="width: 148px;height: 148px;margin-right: 6px;" class="imgStyle" :key="item.id" :src="item.url"
+              alt="">
+          </div>
+          <div class="upImgStyle" @click="$refs.addImg.show()">
+            +
+          </div>
+        </div>
+        <!-- <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">
@ -142,9 +153,9 @@
            </template>
          </el-table-column>
        </el-table>
-        <div class="tips" v-if="form.isShowMall">
+        <!-- <div class="tips" v-if="form.isShowMall">
          注：小程序商城必须设置库存数量大于0
-        </div>
+        </div> -->
      </el-form-item>
      <template v-if="form.typeEnum == 'group'">
        <el-form-item label="使用日期说明" prop="notices.dateUsed">
@ -297,9 +308,9 @@
            </template>
          </el-table-column> -->
        </el-table>
-        <div class="tips" v-if="form.isShowMall">
+        <!-- <div class="tips" v-if="form.isShowMall">
          注：小程序商城必须设置库存数量大于0
-        </div>
+        </div> -->
      </el-form-item>
      <template v-if="form.typeEnum != 'group'">
        <el-form-item label="上架区域">
@ -470,6 +481,7 @@ export default {
          usageRules: ""
        }
      },
+      imgList: [],
      rules: {
        typeEnum: [
          {
@ -552,15 +564,22 @@ 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.url
-        this.form.images.push(item.url);
-      })
-      this.$refs.uploadImg.fileList.push(...d)
+      this.form.images.push(d[0].url);
+      this.imgList.push(d[0])
+      // if (this.$refs.uploadImg.fileList.length < 9) {
+      //   d.forEach(item => {
+      //     item.uid = item.id
+      //     item.url = item.url
+      //     this.form.images.push(item.url);
+      //   })
+      //   this.$refs.uploadImg.fileList.push(...d)
+      //   console.log(this.$refs.uploadImg.fileList, '调试1')
+      // } else {
+      //   this.$notify.error({
+      //     title: '错误',
+      //     message: '最多选择9张图片'
+      //   });
+      // }
    },
    priceFormat(item, key) {
      const messageheight = 48;
@ -582,6 +601,10 @@ export default {
        }
      })
    },
+    deleteEvent(d) {
+      let index = this.imgList.findIndex(ele => ele.url == d.url)
+      this.imgList.splice(index, 1);
+    },
    // 删除分组商品
    delGoods(goods, index, $index) {
      goods.splice(index, 1);
@ -630,14 +653,18 @@ export default {
        );
        this.specTableHeaders = JSON.parse(res.specTableHeaders);
        this.selectSpec = JSON.parse(res.selectSpec);
-
+        console.log(res, '调试11111')
        // 初始化上传图片
-        this.$refs.uploadImg.fileList = res.images.map(item => {
+        // this.$refs.uploadImg.fileList = res.images.map(item => {
+        //   return {
+        //     url: item
+        //   };
+        // });
+        this.imgList = res.images.map(item => {
          return {
            url: item
          };
        });
-
        this.form = res;
        if (res.typeEnum == "sku") {
          let skuList = [...res.skuList];
@ -719,7 +746,7 @@ export default {
    },
    // 切换类型
    changeTypeEnum(index) {
-      if (this.form.id) return;
+      // if (this.form.id) return;
      this.shopTypesActive = index;
      const typeEnum = this.shopTypes[index].typeEnum;
      this.form.typeEnum = typeEnum;
@ -740,6 +767,7 @@ export default {
    },
    // 删除突破按
    uploadRemove(arr) {
+
      this.form.images = arr;
    },
    // 选择规格属性
@ -933,6 +961,18 @@ export default {
 </script>

 <style scoped lang="scss">
+.upImgStyle {
+  cursor: pointer;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+  border: 1px dashed #ccc;
+  border-radius: 1%;
+  font-size: 30px;
+  color: #ccc;
+}
+
 .shop_list {
  .item {
    display: flex;
@ -988,4 +1028,20 @@ export default {
    cursor: pointer;
  }
 }
+
+.buttonstyle {
+  border-radius: 50%;
+  color: #db1616;
+  background-color: #fff;
+  font-size: 20px;
+  display: none;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  z-index: 10;
+}
+
+.showStyle:hover>.buttonstyle {
+  display: block;
+}
 </style>
--- a/src/views/product/components/addImages.vue
+++ b/src/views/product/components/addImages.vue
@ -1,33 +1,58 @@
 <template>
    <div v-if="dialogVisible">
-        <el-dialog title="请选择" :visible.sync="dialogVisible" width="">
-            <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>
-            <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'>
+        <el-dialog title="请选择" :visible.sync="dialogVisible" width="1000px">
+            <el-container>
+                <el-aside style="background-color: #fff;" width="150px">
+                    <ul style="padding-left: 0;">
+                        <li style="cursor: pointer;" v-for="item in options" :key="item.id"
+                            :class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">{{
+                                item.name }}</li>
+                    </ul>
+                    <div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">本地上传
+                    </div>
+                </el-aside>
+                <el-main>
+                    <imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata"
+                        :list='dataImages'>
                    </imageComponent>
+                    <el-pagination layout="prev, pager, next" :total="total" :page-size="20"
+                        @current-change="handleCurrentChange">
+                    </el-pagination>
+                </el-main>
+            </el-container>
            <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-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>
+                    <template v-if="item.id != '681'">
+                        <template v-if="item.id != '682'">
+                            <template v-if="item.id != '699'">
+                                <span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
+                                        @click="deleteType(item.id)"></i></span>
+                            </template>
+</template>
+</template>
+</el-option>
+</el-select> -->
+        <!-- <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button> -->
+        <!-- <el-button type="primary" @click="showUpload = true">新增图片</el-button> -->
+
        <!-- 新增类型 -->
-        <el-dialog title="新增类型" :visible.sync="dialogTableVisibles">
+        <!-- <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>
+        </el-dialog> -->
        <!-- 新增图片 -->
-        <template v-if="showUpload">
-            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
+        <!-- <template v-if="showUpload">
+            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
                @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>
@ -37,7 +62,7 @@
                    <el-button type="primary" @click="doSubmit">确认</el-button>
                </div>
            </el-dialog>
-        </template>
+        </template> -->
    </div>
 </template>

@ -69,14 +94,28 @@ export default {
            typedata: '',
            showUpload: false,
            page: 1,
+            total: 0,
+            activedata: '681'
        }
    },
    mounted() {
        this.getType()
    },
    methods: {
-        changeEvent() {
+        uplocation() {
+            this.activedata = -1
            this.page = 1
+            this.dataImages = []
+            this.total = 0
+            this.getList()
+        },
+        changeEvent(id) {
+            this.page = 1
+            this.activedata = id
+            this.getList()
+        },
+        handleCurrentChange(i) {
+            this.page = i
            this.getList()
        },
        // 删除类型
@ -93,10 +132,10 @@ export default {
                this.getType()
                this.$message({
                    type: 'success',
-                    message: '删除成功!'
+                    message: res.msg
                });
            }).catch(() => {
-
+                this.$message.error(res.msg);
            });
        },
        // 刷新列表数据
@ -137,15 +176,13 @@ export default {
                    name: this.typedata
                });
                if (res.msg == '成功') {
+                    this.typedata = ''
                    this.dialogTableVisibles = false
                    this.getType()
                }
            }
        },
-        getlists() {
-            this.page++
-            this.getList()
-        },
+
        sumbit() {
            this.dialogVisible = false
            this.$emit('successEvent', this.selectImage)
@ -155,18 +192,14 @@ export default {
        },
        async getList() {
            let obj = {
-                category: this.value,
+                category: this.activedata == -1 ? '' : this.activedata,
                page: this.page,
-                size: 20,
+                size: this.activedata == -1 ? 17:18,
                store_id: localStorage.getItem("shopId"),
-
            }
            const res = await getcommonpicture(obj);
-            if (this.page == 1) {
            this.dataImages = res.data
-            } else {
-                this.dataImages.push(...res.data)
-            }
+            this.total = res.count
        },
        async getType(valueIndex) {
            const res = await getcommonCategor({
@ -182,3 +215,14 @@ export default {
    }
 }
 </script>
+<style scoped>
+.activedata {
+    color: #1890ff;
+}
+
+.uplocation {
+    cursor: pointer;
+    position: absolute;
+    bottom: 20px;
+}
+</style>
--- a/src/views/product/components/imageComponent.vue
+++ b/src/views/product/components/imageComponent.vue
@ -1,32 +1,95 @@
 <template>
    <div>
-        <ul class="ulStyle" v-infinite-scroll="load">
+        <ul class="ulStyle">
+            <li class="upImgStyles" @click="showUpload = true" v-if="activedata == -1">
+                +
+            </li>
            <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)">
+                <!-- <el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
+                    <template v-if="item.pid != '681'">
+                        <template v-if="item.pid != '682'">
+                            <template v-if="item.pid != '699'">
                                <i class="el-icon-error buttonstyle" slot="reference"></i>
-                </el-popconfirm>
+                            </template>
+</template>
+</template>
+</el-popconfirm> -->
            </li>
        </ul>
+        <template v-if="showUpload">
+            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
+                @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 { delimg } from "@/api/imagesPhp";
+import { getToken } from "@/utils/auth";
+import { mapGetters } from "vuex";
+import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";

 export default {
-    props: ['list'],
+    computed: {
+        ...mapGetters(["qiNiuUploadApi"])
+    },
+    props: ['list', 'activedata'],
    data() {
        return {
+            showUpload: false,
            selectList: [],
+            files: [],
+            fileList: [],
+            headers: {
+                Authorization: getToken()
+            },
        }
    },
    mounted() {

    },
    methods: {
-        load() {
-            this.$emit('getlists')
+        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: '',
+                    store_id: localStorage.getItem("shopId"),
+                    url: arr
+                })
+                if (res.code == 1) {
+                    // this.getType(this.value)
+                    this.$emit('getList')
+                    this.$message.success(res.msg);
+
+                } else {
+                    this.$message.error(res.msg);
+                }
+                this.files = [];
+            }
+        },
+        handleSuccess(response, file, fileList) {
+            this.files.push(file)
+        },
+        handleBeforeRemove(file, fileList) {
+            let index = this.files.findIndex(ele => ele.name == file.name)
+            this.files.splice(index, 1);
        },
        clickEvent(d) {
            this.selectList = d
@ -51,6 +114,7 @@ ul,
 li {
    list-style: none;
 }
+
 .show {
    position: absolute;
    right: -10px;
@ -68,6 +132,7 @@ li {
    background-color: #fff;
    font-size: 20px;
 }
+
 .ulStyle {
    display: flex;
    flex-wrap: wrap;
@ -76,15 +141,27 @@ li {
 }

 .listyle {
+    width: 110px;
+    height: 110px;
    margin-right: 10px;
    margin-top: 10px;
    border: 5px solid #fff;
    position: relative;
 }

-
-
-
+.upImgStyles {
+    cursor: pointer;
+    width: 110px;
+    height: 110px;
+    line-height: 110px;
+    text-align: center;
+    border: 1px dashed #ccc;
+    border-radius: 1%;
+    font-size: 30px;
+    color: #ccc;
+    margin-right: 10px;
+    margin-top: 10px;
+}


 .actives {
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@ -53,6 +53,9 @@
          <template v-slot="scope">
            <span>￥{{ scope.row.lowPrice }}</span>
          </template>
+        </el-table-column>
+        <el-table-column label="商品规格" prop="typeEnum">
+        
        </el-table-column>
        <el-table-column label="销量/库存">
          <template v-slot="scope">