feature: 商品详情基本信息回显完成

server/controllers/goods.js

@@ -55,4 +55,14 @@ exports.putOffline = async ctx => {
     body: ctx.request.body
   };
   ctx.body = await req(ctx, opts);
-};
+};
\ No newline at end of file
+// 获取商品详情列表
+exports.getGoodsInfo = async ctx => {
+  const url = `${GOODS_URI}/goods/background/get_goods_info`;
+  const opts = {
+    url,
+    method: "GET",
+    qs: ctx.request.query
+  };
+  ctx.body = await req(ctx, opts);
+};

server/router.js

@@ -39,9 +39,10 @@ router.post(`${API_VERSION}/op_business_update`, enterprise.opBusinessUpdate);
 
 /* 商品管理 */
 router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList);
-router.get(`${API_VERSION}/getGoodsList`, goods.getList);
+router.get(`${API_VERSION}/goods/background/get_goods_list`, goods.getList);
 router.post(`${API_VERSION}/goods/background/online`, goods.putOnline);
 router.post(`${API_VERSION}/goods/background/offline`, goods.putOffline);
+router.get(`${API_VERSION}/goods/background/get_goods_info`, goods.getGoodsInfo);
 
 //生活号
 router.post(`${API_VERSION}/merchant/lifeinner/life_info`, life.get_life_info)

src/pages/Goods/Detail/index.css

 .detail {
-  margin-top: 30px;
+  height: 100%;
 }
 .detail .state {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
+}
+.detail .state .some_state {
+  display: inline;
 }
 .detail .state .update_time {
   margin: 0 20px;
 }
 .detail .message {
   display: flex;
+  justify-content: flex-start;
 }
 .detail .message .message_form {
   width: 50%;
 }
+.detail .message .message_form .el-input__inner {
+  width: 80%;
+}
+.detail .message .message_form .el-textarea {
+  width: 80%;
+}
+.detail .message .message_form .options {
+  width: 80%;
+}
+.detail .message .message_form .options .el-input__inner {
+  width: 100%;
+}
 .detail .message .message_image {
   width: 50%;
 }
 .message_border {
-  border: 1px solid #000000;
-  border-radius: 10px;
-  padding: 30px;
   margin: 10px 0;
 }

src/pages/Goods/Detail/index.less

 .detail {
-	margin-top: 30px;
+	height: 100%;
 	.state {
 		display: flex;
 		align-items: center;
+		justify-content: flex-start;
+		.some_state {
+			display: inline;
+		}
 		.update_time {
 			margin: 0 20px;
 		}
 	}
 	.message {
 		display: flex;
+		justify-content: flex-start;
 		.message_form {
 			width: 50%;
+			.el-input__inner {
+				width: 80%;
+			}
+			.el-textarea {
+				width: 80%;
+			}
+			.options {
+				width: 80%;
+				.el-input__inner {
+					width: 100%;
+				}
+			}
 		}
 		.message_image {
 			width: 50%;
@@ -19,8 +36,5 @@
 }
 
 .message_border {
-	border: 1px solid #000000;
-	border-radius: 10px;
-	padding: 30px;
 	margin: 10px 0;
 }

src/pages/Goods/Detail/index.vue

 <template>
   <el-card class="detail">
     <!-- 状态区域 -->
-    <section class="state">
-      <h2>待审核</h2>
-      <span class="update_time">上次更新时间：2021-06-18</span>
-      <span>创建时间：2021-06-18</span>
-    </section>
+    <el-card class="state">
+      <h2 class="some_state">{{ status }}</h2>
+      <h2
+        class="some_state"
+        style="margin-left:20px"
+      >{{ onlineStatus }}</h2>
+      <span class="update_time">上次更新时间：{{ goodsObj.update_time }}</span>
+      <span>创建时间：{{ goodsObj.create_time }}</span>
+    </el-card>
     <!-- 基本信息 -->
-    <section class="message_border">
+    <el-card class="message_border">
       <h3>基本信息</h3>
       <section class="message">
         <!-- 商品列表修改区 -->
         <el-form
           class="message_form"
-          inline
+          label-position="left"
+          label-width="100px"
         >
           <el-form-item label="生活号名称：">
-            <el-input></el-input>
+            <el-input
+              disabled
+              :readonly="true"
+              v-model="goodsObj.life_account_name"
+            ></el-input>
           </el-form-item>
           <el-form-item label="生活号认证：">
             <el-input></el-input>
           </el-form-item>
           <el-form-item label="商品id：">
-            <el-input></el-input>
+            <el-input v-model="goodsObj.goods_spu_id"></el-input>
           </el-form-item>
           <el-form-item label="商品名称：">
-            <el-input></el-input>
+            <el-input v-model="goodsObj.name"></el-input>
           </el-form-item>
-          <el-form-item label="一级分类：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="二级分类：">
-            <el-input></el-input>
+          <el-form-item label="分类：">
+            <el-cascader
+              v-model="optionsValue"
+              class="options"
+              :options="optionList"
+              :props="optionsProps"
+              @change="optionsChange"
+              clearable
+            ></el-cascader>
           </el-form-item>
           <el-form-item label="描述：">
-            <textarea
-              name=""
-              id=""
-              cols="100"
-              rows="4"
-            ></textarea>
+            <el-input
+              type="textarea"
+              maxlength="50"
+              show-word-limit
+              :autosize="{ minRows: 4 }"
+              v-model="goodsObj.desc"
+            ></el-input>
           </el-form-item>
         </el-form>
         <!-- 商品详情图 -->
         <article class="message_image">
-          <h3>商品</h3>
+          <el-upload
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+          >
+            <template #default>
+              <i class="el-icon-plus"></i>
+            </template>
+            <template #file="{file}">
+              <div>
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="file.url"
+                  alt=""
+                />
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </el-upload>
         </article>
       </section>
-    </section>
+    </el-card>
     <!-- 商品详情 -->
-    <section class="message_border"></section>
+    <el-card class="message_border"></el-card>
     <!-- 可用门店 -->
-    <section class="message_border"></section>
+    <el-card class="message_border"></el-card>
     <!-- 使用规则 -->
-    <section class="message_border"></section>
+    <el-card class="message_border"></el-card>
     <!-- 操作记录 -->
-    <section class="message_border"></section>
+    <el-card class="message_border"></el-card>
   </el-card>
 </template>
 
-<style lang="less" src="./index.less" scope></style>
+<style lang="less" src="./index.less" scope></style>
\ No newline at end of file
+
+<script>
+import { getGoodsInfo, getGoodsList } from "@/service/Goods/goods";
+
+export default {
+  name: "GoodsDetail",
+  // beforeRouteEnter (to, from, next) {
+  //   if (!to.params.operation) {
+  //     next({ name: "GoodsList" });
+  //   }
+  //   else if (!to.params.spuId) {
+  //     next({ name: "GoodsList" });
+  //   }
+  //   else {
+  //     next();
+  //   };
+  // },
+  created () {
+    this.getOptions();
+    this.getGoodsDetailList({ goods_spu_id: "2106231609050140001" });
+  },
+
+  computed: {
+    // 审核状态
+    status () {
+      if (this.goodsObj.status === 0) {
+        return "待审核";
+      } else if (this.goodsObj.status === 1) {
+        return "审核通过";
+      } else {
+        return "审核驳回";
+      }
+    },
+    // 上下架状态
+    onlineStatus () {
+      if (this.goodsObj.online_status === 0) {
+        return "未上架";
+      } else if (this.goodsObj.online_status === 1) {
+        return "已上架";
+      } else {
+        return "已下架";
+      }
+    }
+  },
+
+  watch: {
+    goodsObj (val) {
+      this.optionsValue = [val.category_1_id, val.category_2_id];
+    }
+  },
+
+  data () {
+    return {
+      // 商品分类选项
+      optionsProps: {
+        value: "category_id",
+        label: "name",
+        children: "sub_list"
+      },
+      optionsValue: [], // 商品分类的值
+      spuId: "", // 商品id
+      goodsObj: {}, // 商品回显信息
+      recordList: [], // 提交记录
+      optionList: [] // 商品分类选项
+    };
+  },
+
+  methods: {
+    // 获取级联选择商品列表
+    async getOptions () {
+      try {
+        const res = await getGoodsList();
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.optionList = res.result;
+        console.log(res);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    // 获取详情列表
+    async getGoodsDetailList (params) {
+      try {
+        const res = await getGoodsInfo(params);
+        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.recordList = record_list;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    // 商品分类列表变化
+    optionsChange (value) {
+      console.log(value);
+    },
+    // 删除照片
+    handleRemove (file) {
+      console.log(file);
+      this.removePhoto(file)
+    }
+  }
+};
+</script>

src/pages/Goods/List/index.vue

@@ -112,7 +112,7 @@
         ></el-table-column>
         <el-table-column
           label="发布者"
-          prop="user_id"
+          prop="publish_user_id"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -167,13 +167,13 @@
           <template #default="scope">
             <el-button
               type="text"
-              @click="goDetail(`EDIT`)"
+              @click="goDetail(`EDIT`,scope.row.goods_spu_id)"
             >编辑</el-button>
 
             <el-button
               v-if="scope.row.status == 0"
               type="text"
-              @click="goDetail(`AUDIT`)"
+              @click="goDetail(`AUDIT`,scope.row.goods_spu_id)"
             >审核</el-button>
 
             <!-- v-if="scope.row.status == 1 && scope.row.online_status == 2 || scope.row.status == 1 && scope.row.online_status == 0" -->
@@ -364,6 +364,7 @@ export default {
 
     // 去往详情页
     goDetail (operation, spuId) {
+      console.log(spuId);
       this.$router.push({ name: "GoodsDetail", params: { operation, spuId } });
     }
   }

src/service/Goods/goods.js

@@ -7,16 +7,25 @@ export async function getGoodsList () {
 }
 // 获取商品列表
 export async function getList (params) {
-  const res = await axios.get("/api/v1/getGoodsList", { params });
+  const res = await axios.get("/api/v1/goods/background/get_goods_list", { params });
   return res;
 }
 // 商品上架
 export async function putOnline (query) {
-  const res = await axios.post("/api/v1/goods/background/online", { goods_spu_id: query });
+  const res = await axios.post("/api/v1/goods/background/online", {
+    goods_spu_id: query
+  });
   return res;
 }
 // 商品下架
 export async function putOffline (query) {
-  const res = await axios.post("/api/v1/goods/background/offline", { goods_spu_id: query });
+  const res = await axios.post("/api/v1/goods/background/offline", {
+    goods_spu_id: query
+  });
+  return res;
+}
+// 获取商品详情列表
+export async function getGoodsInfo (params) {
+  const res = await axios.get("/api/v1/goods/background/get_goods_info", { params });
   return res;
 }