完成产品模块
parent
485da0047f
commit
d1ff7bacc5
|
|
@ -7,3 +7,13 @@ export function selectList(data){
|
|||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function selectTypeList(data){
|
||||
return request({
|
||||
url:"/market/product/typeList",
|
||||
method: "POST",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue