feature:商品图片上传格式修改

src/pages/Goods/Detail/index.vue

@@ -99,7 +99,7 @@
             :action="uploadUrl"
             :on-preview="previewImage"
             :on-success="handleDetailSuccess"
-            :on-remove="removeDetailFiles"
+            :before-remove="removeDetailFiles"
             :file-list="descPicUrlList"
             auto-upload
             :disabled="$route.params.operation !== 'EDIT'"
@@ -153,7 +153,7 @@
             multiple
             ref="intrUpload"
             :on-success="introduceSuccess"
-            :on-remove="intrRemove"
+            :before-remove="intrRemove"
             :file-list="introducePicUrlList"
           >
             <template #default>
@@ -455,6 +455,7 @@
         </el-form-item>
         <el-form-item label="过期时间">
           <el-date-picker
+            v-if="$route.params.operation === 'EDIT'"
             :disabledDate="disableExpirDate"
             v-model="expirationTime"
             type="datetime"
@@ -462,6 +463,7 @@
             placeholder="选择日期时间"
           >
           </el-date-picker>
+          <span v-else>{{ expirationTime }}</span>
         </el-form-item>
         <el-form-item label="使用规则：">
           <el-input
@@ -682,7 +684,6 @@ export default {
 
       // 使用规则表单
       rulesForm: {
-        rule_limit: "", // 单人可买上限
         // 退款选项
         rulesOptions: [
           { value: 1, label: "到期自动退款" },
@@ -751,87 +752,68 @@ export default {
     async getGoodsDetailList (params) {
       try {
         const res = await getGoodsInfo({ goods_spu_id: params });
+        if (res.code !== 0) {
+          return this.$message.error(res.reason);
+        }
         console.log("商品详情列表", res);
-        if (res.code !== 0) return this.$message.error(res.reason);
         const { goods_info, record_list } = res.result;
         this.goodsObj = goods_info;
         this.recordLits = record_list;
-
-        // 格式化商品详情照片
-        this.formatPicture(goods_info.desc_pic_url_list, this.descPicUrlList);
-        // 格式化商品介绍照片
-        this.formatPicture(
-          goods_info.introduce_pic_url_list,
-          this.introducePicUrlList
-        );
-        console.log(this.introducePicUrlList);
-        // 格式化详情图片上传列表
-        this.formatUploadPictureList(
-          goods_info.desc_pic_url_list,
-          this.detailUploadList
-        );
-        // 格式化介绍图片上传列表
-        this.formatUploadPictureList(
-          goods_info.introduce_pic_url_list,
-          this.introduceUploadList
-        );
         // 渲染过期时间
         this.expirationTime = goods_info.expiration_time;
         // 初始化门店id
         const shopId = goods_info.sub_shop.map(item => {
-          return item.sub_shop_id
+          return item.sub_shop_id;
         });
         this.shopIds = shopId.join(",");
+        // 初始化规则开始时间
+        this.activeStartTime = goods_info.rule_start_time;
+        // 初始化规则结束时间
+        this.activeEndTime = goods_info.rule_end_time;
+
+        // 回显图片
+        this.formatInitPicture(
+          goods_info.desc_pic_url_list,
+          this.descPicUrlList
+        );
+        this.formatInitPicture(
+          goods_info.introduce_pic_url_list,
+          this.introducePicUrlList
+        );
+        this.detailUploadList = goods_info.desc_pic_url.split(",");
+        this.introduceUploadList = goods_info.introduce_pic_url.split(",");
       } catch (error) {
         console.error(error);
       }
     },
 
-    // 格式化照片列表
-    formatPicture (willFormat, willStorage) {
-      willFormat.forEach(item => {
-        const obj = new Object();
-        obj.url = item;
-        willStorage.push(obj);
+    // 初始化照片
+    formatInitPicture (pictureList, storeList) {
+      pictureList.forEach(element => {
+        let obj = new Object();
+        obj.url = element;
+        storeList.push(obj);
       });
     },
-    // 格式化上传照片列表
-    formatUploadPictureList (willFormat, willStorage) {
-      for (let i = 0; i < willFormat.length; i++) {
-        if (willFormat.length === 0) {
-          return (this.detailUploadList = []);
-        }
-        const objectUrl = new URL(willFormat[i]);
-        const bucketName = objectUrl.hostname.replace(/.com$/i, "");
-        const objectId = objectUrl.pathname;
-        willStorage.push(`${bucketName}${objectId}`);
-      }
-    },
-    // 格式化自主上传后的图片列表
-    formatListUpload (response, fileList) {
-      const newFile = `${response.result.bucket}/${response.result.object_id}`;
-      fileList.push(newFile);
-      console.log("上传成功了的一个小小的无所谓的bucket+objectid", fileList);
+
+    // 上传图片的公共方法
+    uploadPicture (response, storageList) {
+      const responseURL = `${response.result.bucket}/${response.result.object_id}`;
+      storageList.push(responseURL);
+      console.log("已上传的列表", storageList);
     },
-    // 格式化删除图片后上传的数组
-    formatDeletePhotoList (file, fileList) {
-      if (!file.response) {
-        const oldChangeNewUrl = new URL(file.url);
-        const oldPictureUrl =
-          oldChangeNewUrl.hostname.replace(/.com$/i, "") +
-          oldChangeNewUrl.pathname;
-        const oldIndex = fileList.indexOf(oldPictureUrl);
-        fileList.splice(oldIndex, 1);
-        console.log("detailUploadList", fileList);
-      } else {
-        const { bucket, object_id } = file.response.result;
-        const newUrl = `${bucket}/${object_id}`;
-        console.log(newUrl);
-        const newIndex = fileList.indexOf(newUrl);
-        fileList.splice(newIndex, 1);
-        console.log("detailUploadList", fileList);
-      }
+    // 删除图片的公共方法
+    deletePicture (file, fileList, storageList) {
+      for (let i = 0; i < fileList.length; i++) {
+        if (fileList[i].uid == file.uid) {
+          storageList.splice(i, 1);
+        };
+      };
+      console.log(storageList);
     },
+
+
+
     // 格式化日期
     formatDate (startTime, endTime) {
       const nowTime = new Date();
@@ -879,6 +861,7 @@ export default {
       const shopList = value.map(item => {
         return item.sub_shop_id;
       });
+      this.shopIds = "";
       this.shopIds = shopList.join(",");
       console.log(this.shopIds);
     },
@@ -908,6 +891,11 @@ export default {
       this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
         return item.sub_shop_id !== subShopId;
       });
+      const shopIdsList = this.goodsObj.sub_shop.map(item => {
+        return item.sub_shop_id;
+      });
+      this.shopIds = shopIdsList.join(",");
+      console.log(this.shopIds);
     },
 
     // 商品列表换页
@@ -942,22 +930,20 @@ export default {
 
     // 商品详情图上传成功时
     handleDetailSuccess (res) {
-      this.formatListUpload(res, this.detailUploadList);
+      this.uploadPicture(res, this.detailUploadList);
     },
-
     // 商品详情图删除完成后的钩子
-    removeDetailFiles (file) {
-      this.formatDeletePhotoList(file, this.detailUploadList);
+    removeDetailFiles (file, fileList) {
+      this.deletePicture(file, fileList, this.detailUploadList);
     },
-
     // 商品介绍图上传成功钩子
     introduceSuccess (res) {
-      this.formatListUpload(res, this.introduceUploadList);
+      this.uploadPicture(res, this.introduceUploadList);
     },
 
     // 商品介绍图删除后的钩子
-    intrRemove (file) {
-      this.formatDeletePhotoList(file, this.introduceUploadList);
+    intrRemove (file, fileList) {
+      this.deletePicture(file, fileList, this.introduceUploadList);
     },
 
     // 展示商品大图
@@ -1080,26 +1066,18 @@ export default {
 
     // 保存修改信息
     async saveDetailMessage () {
-      console.log(this.optionsValue);
-      console.log(this.shopIds);
-      if (!this.goodsObj.goods_name)
-        return this.$message.error("请填写商品名称");
-      if (!this.isGoodsNameRepeat)
-        return this.$message.error("商品名称被占用,请重新更换商品名称");
-      if (!this.optionsValue) return this.$message.error("请选择商品分类");
-      if (!this.expirationTime)
-        return this.$message.error("过期时间未填写,请填写后再提交");
       const query = {
+        goods_spu_id: this.goodsObj.goods_spu_id, // 商品id
         category_1_id: this.optionsValue[0], // 商品一级分类id
         category_2_id: this.optionsValue[1], // 商品二级分类id
         goods_name: this.goodsObj.goods_name, // 商品名称
-        desc_pic_url: this.detailUploadList, // 商品详情图片
+        desc_pic_url: this.detailUploadList.join(","), // 商品详情图片
         desc: this.goodsObj.desc, // 商品详情描述
         introduce: this.goodsObj.introduce, // 商品介绍
-        introduce_pic_url: this.introduceUploadList, // 商品介绍图片
+        introduce_pic_url: this.introduceUploadList.join(","), // 商品介绍图片
         expiration_time: this.expirationTime, // 过期时间
-        rule_limit: this.rulesForm.rule_limit, // 单人可购买上限
-        rule_desc: this.rulesForm.rule_desc, // 规则描述
+        rule_limit: this.goodsObj.rule_limit, // 单人可购买上限
+        rule_desc: this.goodsObj.rule_desc, // 规则描述
         rule_refund: this.goodsObj.rule_refund, // 退款规则
         rule_start_time: this.activeStartTime, // 规则开始时间
         rule_end_time: this.activeEndTime, // 规则结束时间
@@ -1108,8 +1086,52 @@ export default {
         price: this.goodsObj.price, // 现价
         sub_shop_ids: this.shopIds // 门店id
       };
+
+      console.log(query);
+      // 必填校验
+      if (!this.goodsObj.goods_spu_id) {
+        return this.$message.error("未传入商品id");
+      }
+      if (!query.category_1_id || !query.category_2_id) {
+        return this.$message.error("请选择商品分类");
+      }
+      if (!query.goods_name) {
+        return this.$message.error("请填写商品名称");
+      }
+      if (!this.isGoodsNameRepeat) {
+        return this.$message.error("商品名称被占用,请重新更换商品名称");
+      }
+      if (!query.expiration_time) {
+        return this.$message.error("过期时间未填写,请填写后再提交");
+      }
+      if (!query.rule_limit) {
+        return this.$message.error("请填写单人可购买上限");
+      }
+      if (!query.rule_desc) {
+        return this.$message.error("请填写使用规则描述");
+      }
+      if (!query.rule_refund) {
+        return this.$message.error("请填写退款规则");
+      }
+      if (!query.inventory_add) {
+        return this.$message.error("请填写库存剩余量");
+      }
+      if (!query.original_price) {
+        return this.$message.error("请填写原价(保留两位小数)");
+      }
+      if (!query.price) {
+        return this.$message.error("请填写现价(保留两位小数)");
+      }
+      if (!query.sub_shop_ids) {
+        return this.$message.error("请填写门店id");
+      }
+
       const res = await editGoods(query);
-      if (res.code !== 0) return this.$message.error(res.reason);
+      if (res.code !== 0) {
+        return this.$message.error(res.reason);
+      }
+      this.$message.success("商品编辑成功!");
+      this.$router.replace({ name: "GoodsList" });
     }
   }
 };

src/pages/Goods/List/index.vue

@@ -166,18 +166,19 @@
         >
           <template #default="scope">
             <el-button
+              v-if="scope.row.audit_status == 2 || scope.row.online_status == 1 || scope.row.online_status == 2"
               type="text"
-              @click="goDetail(`EDIT`,scope.row.goods_spu_id)"
+              @click="goDetail(`EDIT`, scope.row.goods_spu_id)"
             >编辑</el-button>
 
             <el-button
               v-if="scope.row.audit_status == 0"
               type="text"
-              @click="goDetail(`AUDIT`,scope.row.goods_spu_id)"
+              @click="goDetail(`AUDIT`, scope.row.goods_spu_id)"
             >审核</el-button>
 
-            <!-- v-if="scope.row.audit_status == 1 && scope.row.online_status == 2 || scope.row.audit_status == 1 && scope.row.online_status == 0" -->
             <el-popconfirm
+              v-if="scope.row.online_status == 2 || scope.row.audit_status != 0 && scope.row.online_status == 0"
               title="您确定要上架该商品吗？"
               cancelButtonType="default"
               @confirm="changeGoodsState('GROUNDING', scope.row.goods_spu_id)"
@@ -187,8 +188,8 @@
               </template>
             </el-popconfirm>
 
-            <!-- v-if="scope.row.online_status == 1" -->
             <el-popconfirm
+              v-if="scope.row.online_status == 1"
               title="您确定要下架该商品吗？"
               cancelButtonType="default"
               @confirm="
@@ -215,7 +216,6 @@
       </el-pagination>
     </el-card>
   </layout>
-
 </template>
 
 <style lang="less" src="./index.less" scope></style>
@@ -227,7 +227,7 @@ import {
   putOnline,
   putOffline
 } from "@/service/Goods/goods";
-import Layout from '../layout/index.vue'
+import Layout from "../layout/index.vue";
 export default {
   name: "GoodsList",
 
@@ -348,7 +348,7 @@ export default {
     },
     // 重置表单
     resetList () {
-      this.searchProps = {
+      (this.searchProps = {
         page: 1, // 页码
         page_size: 20, // 页数大小
         goods_spu_id: "", // 后台商品id
@@ -359,7 +359,7 @@ export default {
         life_account_name: "",
         audit_status: "", // 商品状态
         online_status: "" // 上架状态
-      },
+      }),
         this.getCommodityList();
     },
     // 上架/下架操作

src/pages/Goods/components/PageHeader/config.js

@@ -15,10 +15,10 @@ const headerConfig = [
         name: "分销",
         path: "/goods/retail"
       },
-      {
-        name: "秒杀",
-        path: "/death"
-      }
+      // {
+      //   name: "秒杀",
+      //   path: "/death"
+      // }
     ]
   }
 ];

src/pages/Goods/components/PageHeader/index.vue

@@ -9,6 +9,7 @@
       text-color="#fff"
       :default-active="activeMenu"
       active-text-color="#ffd04b"
+      unique-opened
     >
       <el-submenu
         v-for="item in headerConfig"
@@ -19,7 +20,7 @@
         <el-menu-item
           v-for="meItem in item.menuItem"
           :index="meItem.path"
-          :key="meItem.name"
+          :key="meItem.path"
         >
           {{ meItem.name }}
         </el-menu-item>
@@ -45,29 +46,19 @@ export default {
     User
   },
   data () {
-    return { headerConfig };
+    return {
+      headerConfig
+    };
   },
   computed: {
     activeMenu () {
       return this.$route.path;
     }
   },
-  beforeMount () {
-    console.log(headerConfig);
-    console.log("当前激活", this.activeMenu);
-  },
+  beforeMount () { },
   methods: {}
 };
 </script>
 
 <style lang="less">
-.menu-router {
-  display: inline-block;
-  line-height: 60px;
-  width: 100%;
-}
-.header-menu .user-menu {
-  float: right !important;
-  margin-right: 20px;
-}
 </style>