feature:图片上传格式化

server/controllers/goods.js

@@ -77,7 +77,7 @@ exports.postSuccess = async ctx => {
   };
   ctx.body = await req(ctx, opts);
 };
-
+// 检查商品名称是否被占用
 exports.checkGoodsName = async ctx => {
   const opts = {
     url: `${GOODS_URI}/goods/background/check_goods_name`,
@@ -85,9 +85,9 @@ exports.checkGoodsName = async ctx => {
     json: true,
     body: ctx.request.body
   };
-  ctx.body = req(ctx, opts);
+  ctx.body = await req(ctx, opts);
 };
-
+// 审核拒绝
 exports.auditReject = async ctx => {
   const opts = {
     url: `${GOODS_URI}/goods/background/audit_reject`,
@@ -98,3 +98,11 @@ exports.auditReject = async ctx => {
   console.log("审核驳回操作", ctx.request.body);
   ctx.body = await req(ctx, opts);
 };
+exports.getShopsList = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/shop/background/shop_list`,
+    method: "GET",
+    qs: ctx.request.query
+  };
+  ctx.body = await req(ctx, opts);
+};

server/router.js

@@ -45,7 +45,8 @@ router.post(`${API_VERSION}/goods/background/offline`, goods.putOffline);
 router.get(`${API_VERSION}/goods/background/get_goods_info`, goods.getGoodsInfo);
 router.post(`${API_VERSION}/goods/background/audit_pass`, goods.postSuccess);
 router.post(`${API_VERSION}/goods/background/check_goods_name`, goods.checkGoodsName);
-router.post(`${API_VERSION}/goods/background/audit_reject`, goods.auditReject)
+router.post(`${API_VERSION}/goods/background/audit_reject`, goods.auditReject);
+router.get(`${API_VERSION}/shop/background/shop_list`, goods.getShopsList)
 
 
 //生活号

src/pages/Goods/Detail/index.vue

@@ -97,13 +97,14 @@
           <el-upload
             :disabled="$route.params.operation !== 'EDIT'"
             ref="detailUpload"
-            action="#"
+            :action="uploadUrl"
             :on-preview="previewImage"
-            :auto-upload="false"
+            :auto-upload="true"
+            :data="{ scenario: `goods` }"
             :limit="9"
             list-type="picture-card"
             multiple
-            :on-change="handleDetailChange"
+            :on-success="handleDetailChange"
             :on-remove="removeDetailFiles"
             :file-list="descPicUrlList"
           >
@@ -196,13 +197,14 @@
             >
               <template #default="scope">
                 <span>经度：{{ scope.row.longitude }}</span>
-                &nbsp; &nbsp;
+                <br />
                 <span>纬度：{{ scope.row.latitude }}</span>
               </template>
             </el-table-column>
             <el-table-column
               label="操作"
               align="center"
+              fixed="right"
             >
               <template #default="scope">
                 <el-button
@@ -217,16 +219,74 @@
             placement="bottom"
             :width="600"
             trigger="click"
-            v-model:visible="addShopDialog"
           >
             <template #reference>
               <el-button
+                @click="getShops"
                 type="primary"
                 style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
-              >添加门店
+              >门店列表
               </el-button>
             </template>
+            <!-- 门店列表 -->
+            <el-table :data="shopsList.result">
+              <el-table-column
+                type="selection"
+                width="55"
+              > </el-table-column>
+              <el-table-column
+                align="center"
+                prop="shop_name"
+                label="门店名称"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="phone"
+                label="联系电话"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="address"
+                label="地址"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="地理定位"
+              >
+                <template #default="scope">
+                  <span>经度：{{ scope.row.longitude }}</span>
+                  <br />
+                  <span>纬度：{{ scope.row.latitude }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页 -->
+            <el-pagination
+              style="margin-top:20px"
+              background
+              @current-change="changeShopListPage"
+              v-model:currentPage="shopCurrentPage"
+              :page-size="5"
+              layout="total, prev, pager, next"
+              :total="shopsList.count"
+            >
+            </el-pagination>
+
             <!-- 添加门店弹窗 -->
+            <el-popover
+              placement="bottom"
+              :width="600"
+              trigger="click"
+            >
+              <template #reference>
+                <el-button
+                  type="primary"
+                  style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
+                >添加门店
+                </el-button>
+              </template>
+              <!-- 添加门店表单 -->
               <el-form
                 label-position="right"
                 label-width="100px"
@@ -255,9 +315,9 @@
               </el-form>
               <section style="display:flex;justify-content:center;">
                 <el-button type="primary">保存</el-button>
-              <el-button @click="addShopDialog = false">取消</el-button>
               </section>
             </el-popover>
+          </el-popover>
         </section>
         <section class="width50p">
           <h4 style="margin-bottom:20px">价格信息</h4>
@@ -270,10 +330,16 @@
             </el-form-item> -->
 
             <el-form-item label="售价">
-              <el-input v-model="goodsObj.price"></el-input>
+              <el-input
+                v-model="goodsObj.price"
+                @input="salePrice"
+              ></el-input>
             </el-form-item>
             <el-form-item label="原价">
-              <el-input v-model="goodsObj.original_price"></el-input>
+              <el-input
+                v-model="goodsObj.original_price"
+                @input="perPrice"
+              ></el-input>
             </el-form-item>
             <h4 style="margin:20px 0">库存信息</h4>
             <el-form-item label="剩余库存量:">
@@ -326,14 +392,8 @@
         </el-form-item>
         <el-form-item label="使用日期：">
           <el-radio-group v-model="goodsObj.rule_date_type">
-            <el-radio
-              label="周末、节假日通用"
-              :value="1"
-            ></el-radio>
-            <el-radio
-              label="仅工作日可用"
-              :value="2"
-            ></el-radio>
+            <el-radio :label="1">周末、节假日通用</el-radio>
+            <el-radio :label="2">仅工作日可用</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="使用时间：">
@@ -471,9 +531,12 @@ import {
   getGoodsList,
   postSuccess,
   auditReject,
-  checkGoodsName
+  checkGoodsName,
+  getShopsList
 } from "@/service/Goods/goods";
 
+import { GOODS_URI } from "../../../../server/config.js";
+
 export default {
   name: "GoodsDetail",
 
@@ -519,8 +582,10 @@ export default {
   watch: {
     goodsObj (val) {
       this.optionsValue = [val.category_1_id, val.category_2_id];
-      this.useTime = this.formatDate(val.rule_start_time, val.rule_end_time);
-      console.log("初始化时间", this.useTime);
+      this.rulesForm.useTime = this.formatDate(
+        val.rule_start_time,
+        val.rule_end_time
+      );
     }
   },
 
@@ -541,11 +606,16 @@ export default {
       optionList: [], // 商品分类选项
       optionsValue: [], // 商品分类的值
       // 商品回显信息
-      goodsObj: {},
-      descPicUrlList: [], // 商品详情图列表
-      introducePicUrlList: [], // 商品介绍图列表
+      goodsObj: {
+        introduce: ""
+      },
+
+      descPicUrlList: [], // 商品详情图回显列表
+      introducePicUrlList: [], // 商品介绍图回显列表
+
       recordList: [], // 提交记录
-      uploadFileList: [], // 上传图片列表
+
+      detailUploadList: [], // 上传图片列表
       inventoryNumber: 0, // 库存数量
 
       // 使用规则表单
@@ -571,7 +641,10 @@ export default {
         reason: ""
       },
 
-      // 门店表单
+      shopsList: [], // 门店列表
+      shopCurrentPage: 1, // 门店列表当前页
+
+      // 新增门店表单
       shopForm: {
         shop_name: "",
         connect_phone: "",
@@ -579,10 +652,16 @@ export default {
         deep_place: ""
       },
 
+      shopList: [], // 门店列表
       addShopDialog: false, // 添加门店弹框
-      rejectVisible: false, // 驳回原因弹框展示状态
+      showShopDialog: false, // 是否展示门店列表
+
       popoverImage: "", // 放大显示图
-      isShowPopver: false // 是否展示图片框
+
+      rejectVisible: false, // 驳回原因弹框展示状态
+      isShowPopver: false, // 是否展示图片框
+
+      uploadUrl: `${GOODS_URI}/merchant/lifeinner/upload` // 金山云上传地址
     };
   },
 
@@ -610,25 +689,66 @@ export default {
         this.recordLits = record_list;
 
         // 格式化商品详情照片
-        goods_info.desc_pic_url_list.forEach(item => {
-          const obj = new Object();
-          obj.url = item;
-          this.descPicUrlList.push(obj);
-        });
-
+        this.formatPicture(goods_info.desc_pic_url_list, this.descPicUrlList);
         // 格式化商品介绍照片
-        goods_info.introduce_pic_url_list.forEach(item => {
+        this.formatPicture(
+          goods_info.introduce_pic_url_list,
+          this.introducePicUrlList
+        );
+
+        // 格式化文件上传列表
+        this.formatUploadPictureList(
+          goods_info.desc_pic_url_list,
+          this.detailUploadList
+        );
+        // 格式化初始日期
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // 格式化照片列表
+    formatPicture (willFormat, willStorage) {
+      willFormat.forEach(item => {
         const obj = new Object();
         obj.url = item;
-          this.introducePicUrlList.push(obj);
+        willStorage.push(obj);
       });
+    },
 
-        // 格式化初始日期
-      } catch (error) {
-        console.error(error);
+    // 格式化上传照片列表
+    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 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;
+    },
+    // 商品列表换页
+    changeShopListPage (page) {
+      this.shopCurrentPage = page;
+      this.getShops();
+    },
+
     // 格式化日期
     formatDate (startTime, endTime) {
       const nowTime = new Date();
@@ -639,12 +759,20 @@ export default {
       const endTimeArray = endTime.split(":");
       const startHour = parseInt(startTimeArray[0]);
       const startMinute = parseInt(startTimeArray[1]);
+      const startSecond = parseInt(startTimeArray[2]);
       const endHour = parseInt(endTimeArray[0]);
       const endMinute = parseInt(endTimeArray[1]);
-
+      const endSecond = parseInt(endTimeArray[2]);
       return [
-        new Date(nowYear, nowMonth, nowDate, startHour, startMinute),
-        new Date(nowYear, nowMonth, nowDate, endHour, endMinute)
+        new Date(
+          nowYear,
+          nowMonth,
+          nowDate,
+          startHour,
+          startMinute,
+          startSecond
+        ),
+        new Date(nowYear, nowMonth, nowDate, endHour, endMinute, endSecond)
       ];
     },
 
@@ -657,7 +785,7 @@ export default {
     async checkSameName () {
       const res = await checkGoodsName({
         life_account_id: this.goodsObj.life_account_id,
-        name: this.goodsObj.goods_name,
+        goods_name: this.goodsObj.goods_name,
         goods_spu_id: this.goodsObj.goods_spu_id
       });
       console.log(res);
@@ -665,9 +793,14 @@ export default {
       this.$message.success("商品名称未被占用");
     },
 
-    // 商品详情图更改
-    handleDetailChange (file, fileList) {
-      console.log(fileList);
+    // 商品详情图上传成功时
+    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);
     },
 
     // 商品详情图删除完成后的钩子
@@ -695,10 +828,6 @@ export default {
     deleteShops (shopId) {
       console.log(shopId);
     },
-    // 更改已选门店
-    handleSelectionChange (value) {
-      console.log(value);
-    },
 
     // 选择时间
     pickerTime (time) {
@@ -708,6 +837,20 @@ export default {
       console.log("时间节点", dateTime1, dateTime2);
     },
 
+    // 更改售价
+    salePrice (value) {
+      if (value.length === 0) value = 0;
+      this.goodsObj.price = parseFloat(value).toFixed(2);
+      console.log("售价", this.goodsObj.price);
+    },
+
+    // 更改原价
+    perPrice (value) {
+      if (value.length === 0) value = 0;
+      this.goodsObj.original_price = parseFloat(value).toFixed(2);
+      console.log("原价", this.goodsObj.original_price);
+    },
+
     // 审核通过
     async onSuccess () {
       const res = await postSuccess(this.$route.params.spuId);
@@ -718,14 +861,15 @@ export default {
 
     // 审核拒绝
     async onDefault () {
-      if (!this.rejectReason.reason) return this.$message.error("审核驳回时，驳回原因不能为空");
+      if (!this.rejectReason.reason)
+        return this.$message.error("审核驳回时，驳回原因不能为空");
       const query = {
         goods_spu_id: this.goodsObj.goods_spu_id,
-        refuse_reason: this.rejectReason.reason
+        rejected_reason: this.rejectReason.reason
       };
       const res = await auditReject(query);
       if (res.code !== 0) return this.$message.error(res.reason);
-      this.$message.danger("审核驳回成功!");
+      this.$message.warning("审核驳回成功!");
       this.$router.replace({ name: "GoodsList" });
     },
 

src/pages/Goods/List/index.css

-.list {
-  margin-top: 30px;
-}
-.list .goods {
-  margin-top: 30px;
+.goods {
+  width: 100%;
+  height: 100%;
   padding: 0 30px;
 }
-.list .goods .search_condition {
+.goods .search_condition {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
 }
-.list .goods .search_condition .search_button {
+.goods .search_condition .search_button {
   display: flex;
   align-items: center;
   justify-self: flex-end;
 }
-.list .goods .search_condition .search_button .el-form-item__content {
+.goods .search_condition .search_button .el-form-item__content {
   display: flex;
   justify-content: space-around;
 }
-.list .goods .commodity_list {
+.goods .commodity_list {
   margin-top: 30px;
 }
-.list .goods .pagination {
+.goods .pagination {
   margin-top: 30px;
 }

src/pages/Goods/List/index.less

-.list {
-	margin-top: 30px;
-	.goods {
-		margin-top: 30px;
+.goods {
+	width: 100%;
+	height: 100%;
 	padding: 0 30px;
 	.search_condition {
 		display: flex;
@@ -24,5 +23,4 @@
 	.pagination {
 		margin-top: 30px;
 	}
-	}
 }

src/pages/Goods/List/index.vue

 <template>
-  <div class="list">
   <el-card class="goods">
     <!-- 筛选区 -->
     <el-form
@@ -214,7 +213,6 @@
     >
     </el-pagination>
   </el-card>
-  </div>
 </template>
 
 <style lang="less" src="./index.less" scope></style>

src/service/Goods/goods.js

@@ -53,3 +53,8 @@ export async function checkGoodsName (params) {
   );
   return res;
 }
+// 获取门店表单
+export async function getShopsList (params) {
+  const res = await axios.get("api/v1/shop/background/shop_list", { params });
+  return res;
+}