feature goods_list already

server/controllers/goods.js

 const GOODS_URI = require("../config.js").GOODS_URI;
 const req = require("../utils/request").httpReq;
 
-/** 
+/**
  * 示例
  *  exports.方法名 = async ctx => {
  *    const url = `${设置好的域名}/向服务端发送的请求地址`;
@@ -18,9 +18,19 @@ const req = require("../utils/request").httpReq;
 
 exports.getCategoryList = async ctx => {
   const url = `${GOODS_URI}/goods/background/get_goods_category_list`;
+  const opts = {
+    url,
+    method: "GET"
+  };
+  ctx.body = await req(ctx, opts);
+};
+
+exports.getList = async ctx => {
+  const url = `${GOODS_URI}/goods/background/get_goods_list`;
   const opts = {
     url,
     method: "GET",
+    qs: ctx.request.query
   };
   ctx.body = await req(ctx, opts);
 };

server/router.js

@@ -38,7 +38,8 @@ router.post(`${API_VERSION}/op_commit`, enterprise.opCommit);
 router.post(`${API_VERSION}/op_business_update`, enterprise.opBusinessUpdate);
 
 /* 商品管理 */
-router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList)
+router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList);
+router.get(`${API_VERSION}/getGoodsList`, goods.getList);
 
 //生活号
 router.post(`${API_VERSION}/merchant/lifeinner/life_info`, life.get_life_info)

src/pages/Goods/List/index.css

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

src/pages/Goods/List/index.less

 .list {
 	margin-top: 30px;
-	.commodity {
+	.goods {
 		margin-top: 30px;
 		padding: 0 30px;
 		.search_condition {
 			display: flex;
-			justify-content: flex-start;
+			justify-content: space-between;
 			flex-wrap: wrap;
 			align-items: center;
 			.search_button {
 				display: flex;
 				align-items: center;
+				justify-self: flex-end;
 				.el-form-item__content {
 					display: flex;
 					justify-content: space-around;

src/pages/Goods/List/index.vue

@@ -8,11 +8,11 @@
       >
         <!-- 商品id -->
         <el-form-item label="商品id">
-          <el-input></el-input>
+          <el-input v-model="searchProps.goods_spu_id"></el-input>
         </el-form-item>
         <!-- 商品名称 -->
         <el-form-item label="商品名称">
-          <el-input></el-input>
+          <el-input v-model="searchProps.name"></el-input>
         </el-form-item>
         <!-- 所属分类 -->
         <el-form-item label="所属分类">
@@ -26,21 +26,37 @@
         </el-form-item>
         <!-- 生活号ID -->
         <el-form-item label="生活号id">
-          <el-input></el-input>
+          <el-input v-model="searchProps.life_account_id"></el-input>
         </el-form-item>
         <!-- 生活号名称 -->
         <el-form-item label="生活号名称">
-          <el-input></el-input>
+          <el-input v-model="searchProps.life_account_name"></el-input>
         </el-form-item>
         <!-- 商品状态 -->
         <el-form-item label="商品状态">
           <el-select
-            v-model="stateValue"
+            v-model="status"
             multiple
             collapse-tags
+            @change="handleStatusChange"
           >
             <el-option
-              v-for="item in option"
+              v-for="item in stateOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上架状态">
+          <el-select
+            v-model="onlineStatus"
+            multiple
+            collapse-tags
+            @change="handleOnlineStatusChange"
+          >
+            <el-option
+              v-for="item in onlineStateOptions"
               :key="item.value"
               :label="item.label"
               :value="item.value"
@@ -48,7 +64,7 @@
           </el-select>
         </el-form-item>
         <!-- 按钮操作 -->
-        <el-form-item class="search_button">
+        <el-form-item style="justify-self: flex-end;">
           <el-button type="primary">搜索</el-button>
           <el-button>重置</el-button>
         </el-form-item>
@@ -174,8 +190,8 @@
         @current-change="handleCurrentChange"
         v-model:currentPage="currentPage"
         :page-size="100"
-        layout="prev, pager, next, jumper"
-        :total="1000"
+        layout="total,prev, pager, next, jumper"
+        :total="totalCount"
       >
       </el-pagination>
     </el-card>
@@ -185,95 +201,60 @@
 <style lang="less" src="./index.less" scope></style>
 
 <script>
-import { getGoodsList } from "@/service/Goods/goods";
+import { getGoodsList, getList } from "@/service/Goods/goods";
 export default {
   name: "GoodsList",
 
   created () {
     // 获取级联选择
     this.getOptionList();
+    // 获取商品列表
+    this.getCommodityList();
   },
 
   data () {
     return {
+      // 级联选择器参数
       cascaderProps: {
-        multiple: true,
-        value: "category_id",
-        label: "name",
-        children: "sub_list"
+        multiple: true, // 是否支持多选
+        value: "category_id", // 每一项选择的值
+        label: "name", // 每一项的名称
+        children: "sub_list" // 每一项子集的对应节点
       },
+
       // 查询参数
       searchProps: {
+        page: 1, // 页码
+        page_size: 20, // 页数大小
+        goods_spu_id: "", // 后台商品id
+        name: "", // 商品名称
         category_1_id: "", // 一级分类id
-        category_2_id: "" // 二级分类id
+        category_2_id: "", // 二级分类id
+        life_account_id: 0,
+        life_account_name: "",
+        status: "", // 商品状态
+        online_status: "" // 上架状态
       },
+
       // 级联选择器
-      labelOptions: [
-        {
-          value: 1,
-          label: "东南",
-          children: [
-            {
-              value: 2,
-              label: "上海",
-              children: [
-                { value: 3, label: "普陀" },
-                { value: 4, label: "黄埔" },
-                { value: 5, label: "徐汇" }
-              ]
-            },
-            {
-              value: 7,
-              label: "江苏",
-              children: [
-                { value: 8, label: "南京" },
-                { value: 9, label: "苏州" },
-                { value: 10, label: "无锡" }
-              ]
-            },
-            {
-              value: 12,
-              label: "浙江",
-              children: [
-                { value: 13, label: "杭州" },
-                { value: 14, label: "宁波" },
-                { value: 15, label: "嘉兴" }
-              ]
-            }
-          ]
-        },
-        {
-          value: 17,
-          label: "西北",
-          children: [
-            {
-              value: 18,
-              label: "陕西",
-              children: [
-                { value: 19, label: "西安" },
-                { value: 20, label: "延安" }
-              ]
-            },
-            {
-              value: 21,
-              label: "新疆维吾尔族自治区",
-              children: [
-                { value: 22, label: "乌鲁木齐" },
-                { value: 23, label: "克拉玛依" }
-              ]
-            }
-          ]
-        }
+      labelOptions: [],
+
+      // 商品状态
+      stateOption: [
+        { value: 0, label: "待审核" },
+        { value: 1, label: "审核通过" },
+        { value: 2, label: "审核驳回" }
       ],
-      option: [
-        { value: 1, label: "待审核" },
-        { value: 2, label: "审核通过" },
-        { value: 3, label: "审核驳回" },
-        { value: 4, label: "已上架" },
-        { value: 5, label: "已下架" }
+      // 上下架状态
+      onlineStateOptions: [
+        { value: 0, label: "未上架" },
+        { value: 1, label: "已上架" },
+        { value: 2, label: "已下架" }
       ],
-      // 商品状态
-      stateValue: [],
+
+      status: [],
+      onlineStatus: [],
+
       // 商品列表
       goodsList: [
         {
@@ -294,38 +275,64 @@ export default {
           goods_create_time: "2021-06-17"
         }
       ],
-      currentPage: 1 // 当前页码
+
+      currentPage: 1, // 当前页码
+      totalCount: 0 // 总条数 
     };
   },
 
   methods: {
-    handleChange (val) {
-      const every1Val = val.map(item => {
-        return item[0];
-      });
-      const every2Val = val.map(item => {
-        return item[1];
-      });
-      this.searchProps.category_1_id = every1Val.join();
-      this.searchProps.category_2_id = every2Val.join();
-    },
     // 获取级联选择
     async getOptionList () {
       try {
         const res = await getGoodsList();
-        if (res.code !== 0) {
-          return this.$message.error(res.reason);
-        } else {
-          this.labelOptions = res.result;
-        }
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.labelOptions = res.result;
+
         console.log(res);
       } catch (error) {
         console.error(error);
       }
     },
-    // 获取列表信息
-    getList () {
-      console.log("我是准备获取信息的!!!");
+
+    // 获取列表
+    async getCommodityList () {
+      try {
+        const res = await getList(this.searchProps);
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.goodsList = res.result.list;
+        this.totalCount = res.result.count
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    getVal (value, index = 0) {
+      const valueArray = value.map(item => {
+        return item[index];
+      });
+      return valueArray.join();
+    },
+    getValue (value) {
+      const values = value.map(item => {
+        return item;
+      });
+      return values.join();
+    },
+    // 所属分类赋值
+    handleChange (val) {
+      this.searchProps.category_1_id = this.getVal(val, 0);
+      this.searchProps.category_2_id = this.getVal(val, 1);
+    },
+
+    // 商品状态赋值
+    handleStatusChange (val) {
+      this.searchProps.status = this.getValue(val);
+    },
+
+    // 上架状态赋值
+    handleOnlineStatusChange (val) {
+      this.searchProps.online_status = this.getValue(val);
     },
 
     // 上架/下架操作
@@ -337,7 +344,7 @@ export default {
     handleCurrentChange (e) {
       this.currentPage = e;
       // 获取信息
-      this.getList();
+      this.getCommodityList();
     },
 
     // 去往详情页

src/service/Goods/goods.js

 import axios from "@/utils/request";
 
-// 获取商品分类列表
+// 获取商品分类项
 export async function getGoodsList () {
   const res = await axios.get("/api/v1/get_goods_category_list");
   return res;
 }
+
+// 获取商品列表
+export async function getList (params) {
+  const res = await axios.get("/api/v1/getGoodsList", params);
+  return res;
+}