From d1ff7bacc5dfaae256e36c9b8843bc16410bfd95 Mon Sep 17 00:00:00 2001
From: WeiRan <2392355487@qq.com>
Date: Mon, 26 Aug 2024 14:01:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=A7=E5=93=81=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/market/product.js          |  10 ++
 src/views/market/product/index.vue | 142 +++++++++++++++++++++--------
 2 files changed, 114 insertions(+), 38 deletions(-)

diff --git a/src/api/market/product.js b/src/api/market/product.js
index d19c399..303f2bc 100644
--- a/src/api/market/product.js
+++ b/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
+  })
+}
+
diff --git a/src/views/market/product/index.vue b/src/views/market/product/index.vue
index ebd0dc4..9103ae9 100644
--- a/src/views/market/product/index.vue
+++ b/src/views/market/product/index.vue
@@ -1,41 +1,66 @@
 <template>
   <div>
     <span>产品名称</span>
-      <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-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
-        </el-form-item>
-      </el-form>
+    <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-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-header>
+
+        <el-main>
+          <el-row :gutter="18" class="mb8">
+            <el-col :span="8" v-for="(product,index) in productList" :key="index" >
+              <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="产品名称:">
+                      <el-textarea v-model="product.productName">{{product.productName}}</el-textarea>
+                    </el-form-item>
+                    <el-form-item label="产品价格:">
+                      <el-textarea v-model="product.productPrice">￥{{product.productPrice}}</el-textarea>
+                    </el-form-item>
+                    <el-form-item label="产品介绍:">
+                      <el-textarea v-model="product.productContent">{{product.productContent}}</el-textarea>
+                    </el-form-item>
+                    <el-row>
+                      <el-col :span="9"><div class="grid-content bg-purple">
+                        <el-button type="primary" @click="test(product)">立即申请</el-button>
+                      </div></el-col>
+                    </el-row>
+                  </el-form>
+                </div>
+              </el-card>
+            </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>
 
 
 
 
-    <el-row :gutter="12" class="mb8">
-      <el-col :span="8" v-for="(product,index) in productList" :key="index" >
-        <el-card class="box-card" >
-          <div slot="header" class="clearfix">
-            <el-form  ref="form" :model="product" label-width="120px" :rules="rules">
-              <el-form-item label="产品名称:">
-                <el-textarea v-model="product.productName">{{product.productName}}</el-textarea>
-              </el-form-item>
-              <el-form-item label="产品价格:">
-                <el-textarea v-model="product.productPrice">￥{{product.productPrice}}</el-textarea>
-              </el-form-item>
-              <el-form-item label="产品介绍:">
-                <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-button type="info" @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>
-        </el-card>
-      </el-col>
-    </el-row>
 
   </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) {*/
-/*  margin-bottom: 20px; !* 你可以根据需要调整这个值 *!*/
-/*}*/
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
 </style>