update:查看商品详情，编辑商品详情

server/controllers/activity.js

@@ -33,6 +33,28 @@ exports.pindanGoods = async ctx => {
   ctx.body = await req(ctx, opts);
 };
 
+// 查看商品详情
+exports.markGoodsInfo = async ctx => {
+    const url = `${ACTIVITY_URI}/goods/background/marketing_goods_info`;
+    const opts = {
+      url,
+      method: "GET"
+    };
+    ctx.body = await req(ctx, opts);
+};
+
+// 编辑商品
+exports.editGoods = async ctx => {
+    const url = `${ACTIVITY_URI}/goods/background/edit_goods`;
+    const opts = {
+      url,
+      method: "POST",
+      json: true,
+      body: ctx.request.body
+    };
+    ctx.body = await req(ctx, opts);
+  };
+
 // 获取活动过列表
 exports.getActivityList = async ctx => {
   const url = `${ACTIVITY_URI}/marketing/background/marketing_list`;

server/router.js

@@ -72,5 +72,8 @@ router.post(`${API_VERSION}/marketing/background/marketing_info`, activity.check
 router.get(`${API_VERSION}/goods/background/ota_list`, activity.getBusinessList);
 router.post(`${API_VERSION}/goods/background/add_goods`, activity.addGoods);
 router.get(`${API_VERSION}/goods/background/pindan_goods`, activity.pindanGoods);
+router.get(`${API_VERSION}/goods/background/marketing_goods_info`, activity.markGoodsInfo);
+router.post(`${API_VERSION}/goods/background/edit_goods`, activity.editGoods);
+
 
 module.exports = router;

src/pages/Activity/releaseProduc/components/addProduc.vue

@@ -21,20 +21,21 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="commodity_ID"
+        prop="goods_sku_id"
         label="商品ID"
         width="180"
       ></el-table-column>
       <el-table-column
-        prop="commodity_title"
+        prop="goods_name"
         label="商品标题"
         width="180"
       ></el-table-column>
       <el-table-column prop="price" label="售价"> </el-table-column>
-      <el-table-column prop="business" label="商家"> </el-table-column>
-      <el-table-column prop="stock" label="库存"> </el-table-column>
-      <el-table-column prop="quantity_sold" label="已售数量"> </el-table-column>
-      <el-table-column prop="rema_inventory" label="剩余库存"></el-table-column>
+      <el-table-column prop="ota_name" label="商家"> </el-table-column>
+      <el-table-column prop="inventory_total" label="库存"> </el-table-column>
+      <el-table-column prop="total_amount_sold" label="已售数量">
+      </el-table-column>
+      <el-table-column prop="inventory_rest" label="剩余库存"></el-table-column>
       <el-table-column label="操作">
         <template #default="scope">
           <el-button
@@ -49,7 +50,6 @@
         </template>
       </el-table-column>
     </el-table>
-
     <!-- 添加商品 -->
     <el-dialog
       :title="addCommodityTitle"
@@ -82,26 +82,53 @@
             </template>
           </el-upload>
         </el-form-item>
-        <el-form-item label="商品标题：" prop="title">
-          <el-input v-model="commodityForm.title" maxlength="30"></el-input>
+        <el-form-item
+          label="商品标题："
+          prop="goods_name"
+          :rules="[{ required: true, message: '请输入商品标题' }]"
+        >
+          <el-input
+            v-model="commodityForm.goods_name"
+            maxlength="30"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="售价：">
-          <el-input v-model="commodityForm.price" placeholder=""></el-input>
+        <el-form-item
+          label="售价："
+          prop="price"
+          :rules="[{ required: true, message: '请输入售价' }]"
+        >
+          <el-input-number
+            class="price"
+            v-model="commodityForm.price"
+            :min="0"
+            :controls="false"
+            :precision="2"
+            placeholder=""
+          ></el-input-number>
         </el-form-item>
         <el-form-item label="划线价：">
-          <el-input
-            v-model="commodityForm.scribingPrice"
+          <el-input-number
+            class="price"
+            v-model="commodityForm.original_price"
+            :min="0"
+            :controls="false"
+            :precision="2"
             placeholder=""
-          ></el-input>
+          ></el-input-number>
         </el-form-item>
         <br />
         <el-form-item label="库存：">
-          <el-input v-model="commodityForm.stock" placeholder=""></el-input>
+          <el-input
+            v-model="commodityForm.inventory_total"
+            placeholder=""
+            oninput="this.value = this.value.replace(/[^0-9]/g, '');"
+          ></el-input>
         </el-form-item>
-        <div style="display: inline-block">
-          已售：<span>{{ sold }}</span> 剩余库存：<span>{{
-            RemaInventory
+        <div style="display: inline-block; height: 42px; margin-left: 33px">
+          已售：<span style="margin-right: 10px">{{
+            commodityForm.total_amount_order
           }}</span>
+          剩余库存：<span>{{ inventoryRest }}</span>
         </div>
         <br />
         <el-form-item label="商家">
@@ -117,7 +144,7 @@
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="addCommodityPopup = false">取 消</el-button>
+          <el-button @click="commodityCancel">取 消</el-button>
           <el-button type="primary" @click="commoditySave('infoForm')"
             >保存</el-button
           >
@@ -128,12 +155,17 @@
     <el-dialog width="40%" v-model="isShowPopver">
       <el-image :src="popoverImage" fit="fill" style="width: 100%"></el-image>
     </el-dialog>
-
-    <el-dialog title="选择商品" v-model="selCommodityPopup">
+    <!-- 从商品库添加 -->
+    <el-dialog
+      title="选择商品"
+      v-model="selCommodityPopup"
+      width="60%"
+      top="2%"
+    >
       <div>
         <span>商家：</span>
         <el-select
-          v-model="commodityForm.business2"
+          v-model="business2"
           placeholder="请选择"
           @change="business2Sel"
         >
@@ -145,30 +177,32 @@
           ></el-option>
         </el-select>
       </div>
-      <el-table :data="comLibTableData">
+      <span class="dioFor">已选:{{ multipleSelection.length }}人</span>
+      <el-table
+        :data="comLibTableData"
+        class="comLibTableData"
+        @selection-change="selectGoodsChange"
+      >
         <el-table-column type="selection" width="55"> </el-table-column>
         <el-table-column
-          property="goods_sku_id"
+          prop="goods_sku_id"
           label="商品ID"
           width="150"
         ></el-table-column>
         <el-table-column
-          property="goods_name"
+          prop="goods_name"
           label="名称"
           width="200"
         ></el-table-column>
-        <el-table-column property="price" label="售价"></el-table-column>
-        <el-table-column property="ota_id" label="商家"></el-table-column>
+        <el-table-column prop="price" label="售价"></el-table-column>
+        <el-table-column prop="ota_name" label="商家"></el-table-column>
+        <el-table-column prop="inventory_total" label="库存"></el-table-column>
         <el-table-column
-          property="inventory_rest"
-          label="库存"
-        ></el-table-column>
-        <el-table-column
-          property="total_amount_sold"
+          prop="total_amount_sold"
           label="已售数量"
         ></el-table-column>
         <el-table-column
-          property="rema_inventory"
+          prop="inventory_rest"
           label="剩余库存"
         ></el-table-column>
         <el-table-column fixed="right" label="操作" width="100">
@@ -185,7 +219,7 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="selCommodityPopup = false">取 消</el-button>
-          <el-button type="primary" @click="ac">保存</el-button>
+          <el-button type="primary" @click="comLibrarySave">保存</el-button>
         </span>
       </template>
     </el-dialog>
@@ -194,13 +228,18 @@
 
 <script>
 import { GOODS_URI } from "../../../../../server/config";
+import store from "../../../../store/index";
+import { ElMessage } from "element-plus";
 import {
   addGoods,
   getBusinessList,
   pindanGoods,
+  markGoodsInfo,
+  editGoods,
 } from "../../../../service/Activity/index";
 
 export default {
+  props: ["editInfo"],
   data() {
     return {
       // 商品列表
@@ -209,46 +248,47 @@ export default {
       // 商品库列表
       comLibTableData: [],
 
+      businessOpt: [], // 商家数据
+
       // 添加商品
-      addCommodityPopup: false, // 添加商品弹窗
+      addCommodityPopup: false, // 添加商品弹窗状态
       addCommodityTitle: "", // 标题
       commodityForm: {
-        title: "",
+        picUrlList: [],
+        goods_name: "",
         price: "",
-        scribingPrice: "",
-        stock: "",
+        original_price: "",
+        inventory_total: null,
+        total_amount_order: null,
         business1: "",
       },
 
-      business2: "",
-
-      businessOpt: [],
-
-      sold: "90", // 已售
-      RemaInventory: "21", // 剩余库存
-
       picUploadList: [], // 上传详情图片列表
       isShowPopver: false, // 是否展示图片框
-      picUrlList: [], // 图片回显列表
       uploadUrl: `${GOODS_URI}/ksy/ks3apiunencrypt/ks3api_upload`, // 金山云上传地址
 
-      selCommodityPopup: false, // 选择商品
+      // 商品库添加
+      selCommodityPopup: false, // 商品库添加弹窗状态
+      business2: "", // 商家
+      multipleSelection: [], // 勾选的数据
+
+      goodsSkuID: "",
     };
   },
-  methods: {
-    // 获取商家
-    async getBusinessListMet() {
-      let params = { ota_name: "", offset: "", limit: "" };
-      try {
-        const res = await getBusinessList(params);
-        this.businessOpt = res.data.list;
-        console.log(res);
-      } catch (error) {
-        this.$message.error("发生未知错误,请稍后再试一下吧~~~");
-        console.error(error);
+  computed: {
+    // 计算剩余库存
+    inventoryRest() {
+      if (this.commodityForm.inventory_total == null) {
+        return 0;
+      } else {
+        return Number(
+          this.commodityForm.inventory_total -
+            this.commodityForm.total_amount_order
+        );
       }
     },
-
+  },
+  methods: {
     // 上移
     upMove(index) {
       if (index <= 0) {
@@ -259,6 +299,7 @@ export default {
         this.comTableData.splice(index, 0, upData);
       }
     },
+
     // 下移
     upDown(index) {
       if (index === this.comTableData.length - 1) {
@@ -270,15 +311,6 @@ export default {
       }
     },
 
-    // 初始化上传图片列表
-    // formatUploadPictureList(fileStr) {
-    //   if (!fileStr) {
-    //     return [];
-    //   } else {
-    //     return fileStr.split(",");
-    //   }
-    // },
-
     // 展示商品大图
     previewImage(file) {
       this.popoverImage = file.url;
@@ -287,7 +319,6 @@ export default {
 
     // 图片上传成功时
     handleDetailSuccess(res) {
-      console.log(res);
       this.picUploadList.push(res.result.image_id);
     },
 
@@ -300,60 +331,157 @@ export default {
       }
     },
 
-    // 添加修改商品
-    async commodity(type, val) {
-      this.addCommodityPopup = true;
-      if (type == "add") {
-        this.addCommodityTitle = "商品添加";
+    // 获取商家
+    async getBusinessListMet() {
+      let params = { ota_name: "", offset: "", limit: "" };
+      try {
+        const res = await getBusinessList(params);
+        this.businessOpt = [{ ota_id: "", ota_name: "全部" }, ...res.data.list];
+        console.log(this.businessOpt);
+      } catch (error) {
+        this.$message.error("发生未知错误,请稍后再试一下吧~~~");
+        console.error(error);
+      }
+    },
+
+    // 查看商品详情
+    async markGoodsInfoMet(goodSkuID) {
+      let params = { goods_sku_id: goodSkuID, marketing_type: "4" };
+      const res = await markGoodsInfo(params);
+      this.commodityForm = res.result.goods_info;
+      this.commodityForm.business1 = res.result.goods_info.ota_id;
+      this.commodityForm.picUrlList = res.result.goods_info.desc_pic_url_list;
+      console.log(this.commodityForm.picUrlList);
+    },
+
+    // 编辑商品详情
+    async editGoodsMet(goodsSkuID) {
+      const res = await editGoods({
+        goods_name: this.commodityForm.goods_name,
+        desc_pic_url: this.picUploadList.join(","),
+        desc: "",
+        inventory_add: this.commodityForm.inventory_total,
+        original_price: this.commodityForm.original_price,
+        price: this.commodityForm.price,
+        marketing_name: this.editInfo[0].title,
+        marketing_type: "4",
+        ota_id: this.commodityForm.business1,
+        op_cur_user: store.state.userInfo.email,
+        goods_sku_id:goodsSkuID,
+      });
+      if (res.code == 0) {
+        ElMessage.success({
+          message: "修改成功",
+          type: "success",
+        });
+        this.pindanGoodsMet();
+        console.log(this.multipleSelection);
+        this.addCommodityPopup = false;
       } else {
-        console.log(val);
-        this.addCommodityTitle = "商品编辑";
+        ElMessage.error(res.reason);
       }
+      console.log(res);
     },
 
+    // 获取商品库列表
     async pindanGoodsMet(otaID, goodsName) {
       let params = { ota_id: otaID, goods_name: goodsName };
       const res = await pindanGoods(params);
       this.comLibTableData = res.list;
-      console.log(res);
-    },
-
-    // 从商品库添加
-    async commodLibraryAdd() {
-      this.selCommodityPopup = true;
-      this.pindanGoodsMet();
     },
 
-    // 移除
-    removeCom(val) {
-      for (var i in this.comTableData) {
-        if (this.comTableData[i].commodity_ID == val.commodity_ID) {
-          this.comTableData.splice(i, 1);
-        }
+    // 添加修改商品
+    async commodity(type, val) {
+      this.addCommodityPopup = true;
+      this.commodityForm = {};
+      if (type == "add") {
+        this.commodityForm.total_amount_order = 0;
+        console.log(this.commodityForm.total_amount_order);
+        this.addCommodityTitle = "商品添加";
+      } else {
+        this.addCommodityTitle = "商品编辑";
+        this.goodsSkuID = val.goods_sku_id;
+        this.markGoodsInfoMet(this.goodsSkuID);
       }
     },
 
-    // 商品保存
-    async commoditySave() {
+    // 添加商品
+    async addGoodsMet() {
       const res = await addGoods({
-        marketing_name: "22",
-        goods_name: this.commodityForm.title,
+        marketing_name: this.editInfo[0].title,
+        goods_name: this.commodityForm.goods_name,
         desc_pic_url: this.picUploadList.join(","),
         desc: "",
-        inventory: 10,
-        original_price: this.commodityForm.scribingPrice,
+        inventory: this.commodityForm.inventory_total,
+        original_price: this.commodityForm.original_price,
         marketing_type: "4",
         price: this.commodityForm.price,
         ota_id: this.commodityForm.business1,
-        op_cur_user: "v-yuchenglong@yidian-inc.com",
+        op_cur_user: store.state.userInfo.email,
       });
-      console.log(res);
+      if (res.code == 0) {
+        ElMessage.success({
+          message: "添加商品成功",
+          type: "success",
+        });
+        this.comTableData = [res.result.goods_info, ...this.multipleSelection];
+        this.addCommodityPopup = false;
+      } else {
+        ElMessage.error(res.reason);
+      }
+    },
+
+    // 添加商品取消
+    commodityCancel() {
+      this.addCommodityPopup = false;
+      this.$refs.infoForm.clearValidate();
+    },
+
+    // 添加商品保存
+    commoditySave(infoForm) {
+      this.$refs[infoForm].validate((valid) => {
+        if (valid) {
+          if (this.addCommodityTitle == "商品添加") {
+            this.addGoodsMet();
+          } else {
+            this.editGoodsMet(this.goodsSkuID);
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+
+    // 从商品库添加
+    async commodLibraryAdd() {
+      this.selCommodityPopup = true;
+      this.pindanGoodsMet();
     },
 
     // 商家选择(选择商品)
     business2Sel(val) {
       this.pindanGoodsMet(val, "");
     },
+
+    // 商品库中选择商品
+    selectGoodsChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 商品库选择商品保存
+    comLibrarySave() {
+      this.selCommodityPopup = false;
+      this.comTableData.push(...this.multipleSelection);
+    },
+
+    // 移除
+    removeCom(val) {
+      for (var i in this.comTableData) {
+        if (this.comTableData[i].goods_sku_id == val.goods_sku_id) {
+          this.comTableData.splice(i, 1);
+        }
+      }
+    },
   },
   created() {
     this.getBusinessListMet();
@@ -361,14 +489,35 @@ export default {
 };
 </script>
 <style scoped>
+.addProduc {
+  width: 64%;
+  margin: 0 auto;
+}
+
 .btnGroup {
   margin-bottom: 15px;
 }
+
 .addCommodityBtn {
   margin: 0 20px 0 0;
 }
+
 .infoForm /deep/.el-form-item:nth-child(1),
 .infoForm /deep/.el-form-item:nth-child(2) {
   width: 100%;
 }
+
+.dioFor {
+  display: block;
+  margin: 10px 0;
+}
+
+.comLibTableData /deep/ .el-table__body-wrapper {
+  height: 550px;
+  overflow: scroll;
+}
+
+.price /deep/ .el-input__inner {
+  text-align: left;
+}
 </style>
\ No newline at end of file

src/pages/Activity/releaseProduc/components/infoEditing.vue

@@ -94,5 +94,9 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+  .infoEditing{
+    width: 64%;
+    margin: 0 auto;
+  }
 </style>
\ No newline at end of file

src/pages/Activity/releaseProduc/index.vue

@@ -14,7 +14,7 @@
     </el-steps>
     <div class="content">
       <infoEditing ref="infoEdit" v-if="active === 1" />
-      <addProduc ref="addProduc" v-else-if="active === 2" />
+      <addProduc ref="addProduc" v-else-if="active === 2" :editInfo="infoEditArr" />
       <spellOrderSet v-else />
     </div>
     <div class="stepsBtn">
@@ -22,8 +22,7 @@
         >上一步</el-button
       >
       <el-button @click="next" v-show="active < 3" style="margin-right: 20px"
-        >下一步</el-button
-      >
+        >下一步</el-button>
       <el-button @click="cancel" v-show="active == 1">取消</el-button>
       <el-button @click="confirmRelease" v-show="active == 3" type="primary"
         >确认发布</el-button
@@ -109,12 +108,12 @@ export default {
 .steps /deep/ .el-step.is-horizontal .el-step__line {
   top: 25px;
 }
-.content,
+
 .stepsBtn {
-  width: 64%;
   margin: 20px auto;
 }
 .stepsBtn {
+  width: 64%;
   text-align: center;
   margin-top: 50px;
 }

src/service/Activity/index.js

@@ -21,6 +21,21 @@ export async function pindanGoods(params) {
   });
   return res;
 }
+
+// 查看商品详情
+export async function markGoodsInfo(params) {
+    const res = await axios.get("/api/v1/goods/background/marketing_goods_info", {
+      params
+    });
+    return res;
+}
+
+// 编辑商品详情
+export async function editGoods(params) {
+    const res = await axios.post("/api/v1/goods/background/edit_goods",params);
+    return res;
+}
+
 class ActivityService {
   // 获取活动列表
   static async getActivityList(params) {