完成产品模块

src/api/market/product.js

@@ -7,3 +7,13 @@ export function selectList(data){
     data: data
   })
 }
+
+
+export function selectTypeList(data){
+  return request({
+    url:"/market/product/typeList",
+    method: "POST",
+    data: data
+  })
+}
+

src/views/market/product/index.vue

@@ -1,19 +1,28 @@
 <template>
   <div>
     <span>产品名称</span>
+    <el-container style="height: 1200px; border: 1px solid #eee">
+      <el-aside width="150px" style="background-color: rgb(238, 241, 246)">
+        <span @click="choseall()">全部</span>
+        <div v-for="(type,index1) in typeList" :key="index1">
+          <span @click="chosetype(index1)">{{type}}</span>
+        </div>
+      </el-aside>
+
+      <el-container>
+        <el-header style="text-align: right; font-size: 12px">
           <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
             <el-form-item prop="productName">
-          <el-input type="text" v-model="ruleForm.productName" style="width: 200px" autocomplete="off" placeholder="关键词搜索"></el-input>
+              <el-input type="text" v-model="ruleForm.productName" style="width: 200px;" autocomplete="off" placeholder="关键词搜索"></el-input>
               <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
             </el-form-item>
           </el-form>
+        </el-header>
 
-
+        <el-main>
-
+          <el-row :gutter="18" class="mb8">
-
-    <el-row :gutter="12" class="mb8">
             <el-col :span="8" v-for="(product,index) in productList" :key="index" >
-        <el-card class="box-card" >
+              <el-card class="box-card" style="height: 300px">
                 <div slot="header" class="clearfix">
                   <el-form  ref="form" :model="product" label-width="120px" :rules="rules">
                     <el-form-item label="产品名称:">
@@ -26,10 +35,9 @@
                       <el-textarea v-model="product.productContent">{{product.productContent}}</el-textarea>
                     </el-form-item>
                     <el-row>
-                <el-col :span="6"><div class="grid-content bg-purple">
+                      <el-col :span="9"><div class="grid-content bg-purple">
-                  <el-button type="info" @click="test(product)">测试</el-button>
+                        <el-button type="primary" @click="test(product)">立即申请</el-button>
                       </div></el-col>
-                <el-col :span="6"><div class="grid-content bg-purple-light"><el-button type="primary">立即申请</el-button></div></el-col>
                     </el-row>
                   </el-form>
                 </div>
@@ -37,6 +45,23 @@
             </el-col>
           </el-row>
 
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="ruleForm.pageNum"
+            :page-sizes="[5, 7, 9, 11]"
+            :page-size="ruleForm.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+        </el-main>
+      </el-container>
+    </el-container>
+
+
+
+
+
   </div>
 </template>
 
@@ -45,7 +70,7 @@
 //例如：import 《组件名称》 from '《组件路径》,
 
 
-import {selectList} from "@/api/market/product";
+import {selectList, selectTypeList} from "@/api/market/product";
 
 export default {
     name: 'Product',
@@ -55,12 +80,17 @@ export default {
 
     data() {
       //这里存放数据"
-
       return {
         //产品列表
         productList:[],
         product:{},
-        ruleForm:{},
+        ruleForm:{
+          pageNum:1,
+          pageSize:9,
+          productType:''
+        },
+        total:0,
+        typeList:[]
       };
     },
     //计算属性 类似于data概念",
@@ -72,13 +102,25 @@ export default {
       //产品列表
       getList(){
         selectList(this.ruleForm).then(response=>{
-          this.productList=response.data
+          console.log(response)
+          this.productList=response.data.productListResps
+          this.total=response.data.total
         })
       },
       //查询
       submitForm(){
         this.getList()
       },
+      //选择类型
+      chosetype(index1){
+        this.ruleForm.productType=this.typeList[index1]
+        this.getList()
+      },
+      //选择全部
+      choseall(){
+        this.ruleForm.productType=''
+        this.getList()
+      },
       //接口测试页面
       // test(product){
       //   // let url = `http://21.12.0.10/prod-api/doc.html#/cloud-market/客户控制层/findListByuserPhone?userId=${this.userId}`;
@@ -95,11 +137,28 @@ export default {
           console.error('无效的 address 或 product 未定义');
           // 或者您可以根据需要处理错误情况
         }
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        this.ruleForm.pageSize=val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+        this.ruleForm.pageNum=val
+        this.getList()
+      },
+      //产品类型
+      gettypeList(){
+        selectTypeList().then(response=>{
+          this.typeList=response.data
+        })
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
       this.getList()
+      this.gettypeList()
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {
@@ -124,7 +183,14 @@ export default {
 .box-card{
   margin: 10px 0;
 }
-/*.box-card:not(:last-child) {*/
+.el-header {
-/*  margin-bottom: 20px; !* 你可以根据需要调整这个值 *!*/
+  background-color: #B3C0D1;
-/*}*/
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
 </style>