feature:商品介绍图格式重构完成

src/pages/Goods/Detail/index.vue

@@ -95,18 +95,18 @@
         <section class="width50p">
           <h4 style="margin-bottom:20px">商品详情图</h4>
           <el-upload
-            :disabled="$route.params.operation !== 'EDIT'"
-            ref="detailUpload"
+            :data="{ scenario: `goods` }"
             :action="uploadUrl"
             :on-preview="previewImage"
-            :auto-upload="true"
-            :data="{ scenario: `goods` }"
+            :on-success="handleDetailSuccess"
+            :on-remove="removeDetailFiles"
+            :file-list="descPicUrlList"
+            auto-upload
+            :disabled="$route.params.operation !== 'EDIT'"
+            ref="detailUpload"
             :limit="9"
             list-type="picture-card"
             multiple
-            :on-success="handleDetailChange"
-            :on-remove="removeDetailFiles"
-            :file-list="descPicUrlList"
           >
             <template #default>
               <i class="el-icon-plus"></i>
@@ -143,15 +143,16 @@
         <section class="width50p">
           <h4 style="margin-bottom:20px">商品介绍图</h4>
           <el-upload
+            :data="{ scenario: `goods` }"
             :disabled="$route.params.operation !== 'EDIT'"
-            action="#"
-            :auto-upload="false"
+            :action="uploadUrl"
+            auto-upload
             :limit="9"
             :on-preview="previewImage"
             list-type="picture-card"
             multiple
             ref="intrUpload"
-            :on-change="intrChange"
+            :on-success="introduceSuccess"
             :on-remove="intrRemove"
             :file-list="introducePicUrlList"
           >
@@ -209,7 +210,7 @@
               <template #default="scope">
                 <el-button
                   type="text"
-                  @click="deleteShops(scope.row.shop_id)"
+                  @click="deleteShops(scope.row.sub_shop_id)"
                 >删除
                 </el-button>
               </template>
@@ -229,11 +230,15 @@
               </el-button>
             </template>
             <!-- 门店列表 -->
-            <el-table :data="shopsList.result">
+            <el-table
+              :data="shopsList"
+              @selection-change="handleShopsChange"
+            >
               <el-table-column
                 type="selection"
                 width="55"
-              > </el-table-column>
+              >
+              </el-table-column>
               <el-table-column
                 align="center"
                 prop="shop_name"
@@ -269,7 +274,7 @@
               v-model:currentPage="shopCurrentPage"
               :page-size="5"
               layout="total, prev, pager, next"
-              :total="shopsList.count"
+              :total="shopsCount"
             >
             </el-pagination>
 
@@ -331,14 +336,16 @@
 
             <el-form-item label="售价">
               <el-input
+                type="number"
                 v-model="goodsObj.price"
-                @input="salePrice"
+                @blur="salePrice"
               ></el-input>
             </el-form-item>
             <el-form-item label="原价">
               <el-input
+                type="number"
                 v-model="goodsObj.original_price"
-                @input="perPrice"
+                @blur="perPrice"
               ></el-input>
             </el-form-item>
             <h4 style="margin:20px 0">库存信息</h4>
@@ -458,7 +465,6 @@
         ></el-table-column>
       </el-table>
     </el-card>
-
     <!-- 审核保存返回 -->
     <section class="operationButton">
       <el-button
@@ -509,7 +515,6 @@
       >返回 </el-button>
     </section>
   </el-card>
-
   <!-- 展示缩略图 -->
   <el-dialog
     width="40%"
@@ -605,17 +610,22 @@ export default {
 
       optionList: [], // 商品分类选项
       optionsValue: [], // 商品分类的值
+      editOptionValue: "", // 商品分类的上传值
       // 商品回显信息
       goodsObj: {
         introduce: ""
       },
 
+      isGoodsNameRepeat: false, // 商品名称是否重复
+
       descPicUrlList: [], // 商品详情图回显列表
       introducePicUrlList: [], // 商品介绍图回显列表
 
       recordList: [], // 提交记录
 
-      detailUploadList: [], // 上传图片列表
+      detailUploadList: [], // 上传详情图片列表
+      introduceUploadList: [], // 上传详情图片列表
+
       inventoryNumber: 0, // 库存数量
 
       // 使用规则表单
@@ -642,6 +652,7 @@ export default {
       },
 
       shopsList: [], // 门店列表
+      shopsCount: 0,
       shopCurrentPage: 1, // 门店列表当前页
 
       // 新增门店表单
@@ -661,6 +672,9 @@ export default {
       rejectVisible: false, // 驳回原因弹框展示状态
       isShowPopver: false, // 是否展示图片框
 
+      activeStartTime: "", // 活动开始时间
+      activeEndTime: "", // 活动结束时间
+
       uploadUrl: `${GOODS_URI}/merchant/lifeinner/upload` // 金山云上传地址
     };
   },
@@ -695,13 +709,18 @@ export default {
           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
+        );
+        console.log(this.introduceUploadList);
       } catch (error) {
         console.error(error);
       }
@@ -715,40 +734,43 @@ export default {
         willStorage.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]);
-        console.log(objectUrl);
-        const bucketName = objectUrl.hostname;
+        const bucketName = objectUrl.hostname.replace(/.com$/i, "");
         const objectId = objectUrl.pathname;
         willStorage.push(`${bucketName}${objectId}`);
       }
     },
-
-    // 获取门店列表
-    async getShops () {
-      const query = {
-        // this.goodsObj.life_account_id
-        life_account_id: "9233473057619969",
-        page: this.shopCurrentPage,
-        page_size: 5
-      };
-      const res = await getShopsList(query);
-      if (res.code !== 0) return this.$message.error(res.reason);
-      this.shopsList = res;
+    // 格式化自主上传后的图片列表
+    formatListUpload (response, fileList) {
+      const newFile = `${response.result.bucket}/${response.result.object_id}`;
+      fileList.push(newFile);
+      console.log("上传成功了的一个小小的无所谓的bucket+objectid", fileList);
     },
-    // 商品列表换页
-    changeShopListPage (page) {
-      this.shopCurrentPage = page;
-      this.getShops();
+    // 格式化删除图片后上传的数组
+    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);
+      }
     },
-
     // 格式化日期
     formatDate (startTime, endTime) {
       const nowTime = new Date();
@@ -776,9 +798,45 @@ export default {
       ];
     },
 
+    // 获取门店列表
+    async getShops () {
+      const query = {
+        // this.goodsObj.life_account_id
+        life_account_id: "9233473057619969",
+        page: this.shopCurrentPage,
+        page_size: 5
+      };
+      const res = await getShopsList(query);
+      console.log(res);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      this.shopsList = res.result;
+      this.shopsCount = res.count;
+    },
+
+    // 门店列表更改时
+    handleShopsChange (value) {
+      this.goodsObj.sub_shop = value;
+      console.log(value);
+    },
+
+    // 删除已选择门店
+    deleteShops (subShopId) {
+      this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
+        return item.sub_shop_id !== subShopId;
+      });
+    },
+
+    // 商品列表换页
+    changeShopListPage (page) {
+      this.shopCurrentPage = page;
+      this.getShops();
+    },
+
     // 商品分类列表变化
     optionsChange (value) {
-      console.log(value);
+      console.log("商品分类id", value);
+      this.editOptionValue = value.join(",");
+      console.log(this.editOptionValue);
     },
 
     // 检查商品名称是否重复
@@ -790,32 +848,33 @@ export default {
       });
       console.log(res);
       if (res.code !== 0) return this.$message.error(res.reason);
-      this.$message.success("商品名称未被占用");
+      if (res.result.can_use) {
+        this.isGoodsNameRepeat = true;
+        this.$message.success("名称未被占用,请继续填写表单");
+      } else {
+        this.isGoodsNameRepeat = false;
+        return this.$message.error("名称被占用,换个名称试试吧~~~");
+      }
     },
 
     // 商品详情图上传成功时
-    handleDetailChange (res, file, fileList) {
-      console.log("返回结果", res);
-      console.log("文件", file);
-      console.log("文件列表", fileList);
-      const newFile = `${res.result.bucket}/${res.result.object_id}`;
-      this.detailUploadList.push(newFile);
-      console.log("上传成功了的一个小小的无所谓的bucket+objectid", this.detailUploadList);
+    handleDetailSuccess (res) {
+      this.formatListUpload(res, this.detailUploadList);
     },
 
     // 商品详情图删除完成后的钩子
-    removeDetailFiles (file, fileList) {
-      console.log(fileList);
+    removeDetailFiles (file) {
+      this.formatDeletePhotoList(file, this.detailUploadList);
     },
 
-    // 商品介绍图更改钩子
-    intrChange (file, fileList) {
-      console.log(fileList);
+    // 商品介绍图上传成功钩子
+    introduceSuccess (res) {
+      this.formatListUpload(res, this.introduceUploadList);
     },
 
     // 商品介绍图删除后的钩子
-    intrRemove (file, fileList) {
-      console.log(fileList);
+    intrRemove (file) {
+      this.formatDeletePhotoList(file, this.introduceUploadList);
     },
 
     // 展示商品大图
@@ -824,31 +883,51 @@ export default {
       this.isShowPopver = true;
     },
 
-    // 删除已选择门店
-    deleteShops (shopId) {
-      console.log(shopId);
-    },
-
     // 选择时间
     pickerTime (time) {
-      this.goodsObj.rule_start_time;
-      const dateTime1 = time[0].getHours();
-      const dateTime2 = time[1].getHours();
-      console.log("时间节点", dateTime1, dateTime2);
+      let startHours = time[0].getHours() + "";
+      let startMinutes = time[0].getMinutes() + "";
+      let startSeconds = time[0].getSeconds() + "";
+      let endHours = time[1].getHours() + "";
+      let endMinutes = time[1].getMinutes() + "";
+      let endSeconds = time[1].getSeconds() + "";
+      if (startHours < 10) {
+        startHours = "0" + startHours;
+      }
+      if (startMinutes < 10) {
+        startMinutes = "0" + startMinutes;
+      }
+      if (startSeconds < 10) {
+        startSeconds = "0" + startSeconds;
+      }
+      if (endHours < 10) {
+        endHours = "0" + endHours;
+      }
+      if (endMinutes < 10) {
+        endMinutes = "0" + endMinutes;
+      }
+      if (endSeconds < 10) {
+        endSeconds = "0" + endSeconds;
+      }
+      this.activeStartTime = `${startHours}:${startMinutes}:${startSeconds}`;
+      this.activeEndTime = `${endHours}:${endMinutes}:${endSeconds}`;
+
+      console.log("时间节点", this.activeStartTime, this.activeEndTime);
     },
 
     // 更改售价
-    salePrice (value) {
-      if (value.length === 0) value = 0;
-      this.goodsObj.price = parseFloat(value).toFixed(2);
-      console.log("售价", this.goodsObj.price);
+    salePrice () {
+      if (this.goodsObj.price.length === 0) return (this.goodsObj.price = 0);
+      this.goodsObj.price = parseFloat(this.goodsObj.price).toFixed(2);
     },
 
     // 更改原价
-    perPrice (value) {
-      if (value.length === 0) value = 0;
-      this.goodsObj.original_price = parseFloat(value).toFixed(2);
-      console.log("原价", this.goodsObj.original_price);
+    perPrice () {
+      if (this.goodsObj.original_price === 0)
+        return (this.goodsObj.original_price = 0);
+      this.goodsObj.original_price = parseFloat(
+        this.goodsObj.original_price
+      ).toFixed(2);
     },
 
     // 审核通过

src/pages/Goods/List/index.vue

@@ -368,6 +368,7 @@ export default {
         if (res.code !== 0) return this.$message.error(res.reason);
         this.$message.success("商品下架成功");
       }
+      this.getCommodityList();
     },
 
     // 页码变化