商品模块：
首先是页面
页面分为三部分：
1、商品列表页
2、商品详情页
3、增加商品页
商品列表页
- 通过element-ui官网找到需要的页面布局，复制粘贴到，自己的项目中
- 通过获取到的接口，在api/order.js中定义获取商品列表页的api（/api/yp/product）
- 然后在页面中导入定义的api，并使用api定义方法，获取到商品列表的数据
- 通过方法获取到的数据，在页面上进行渲染
- 微调一下页面展示效果
- 定义搜索的关键字，通过v-model绑定对应的数据，输入关键字进行搜索
- 查询element-ui官网的重置方法，cv过来
- 导出选中的数据，前期安装过了导出excel的插件，直接引入使用
- 通过定义router-link实现跳转页面
<template>
<div class="shopbox">
<el-row>
<router-link :to="'/admin/addshop'">
<el-button type="primary">发布商品</el-button>
</router-link>
<span>商品模板下载</span>
<el-button>批量导入商品</el-button>
</el-row>
<div class="num">
<p>
已上线<span style="color: red">({{ pagnation.total }})</span>
</p>
<p>未上线<span style="color: red">(0)</span></p>
</div>
<el-form ref="searchForm" :model="searchObj" label-width="80px">
<el-form-item label="商品名称:" prop="productName">
<el-input
v-model="searchObj.productName"
placeholder="商品名称"
label-width="152px"
></el-input>
</el-form-item>
<el-form-item label="商品编码:" prop="produceId">
<el-input
v-model="searchObj.produceId"
placeholder="商品编码"
></el-input>
</el-form-item>
<el-form-item label="门店:" prop="shopName">
<el-input v-model="searchObj.shopName" placeholder="门店"></el-input>
</el-form-item>
<el-button
type="primary"
@click="getGoodsList()"
style="height: 40px; margin-top: 10px"
>搜索</el-button
>
<el-button
type="warning"
style="height: 40px; margin-top: 10px; margin-left: 20px"
@click="
$refs.searchForm.resetFields();
getGoodsList();
"
>重置</el-button
>
<el-form-item label="商品价格:">
<el-select v-model="searchObj.price" placeholder="等于">
<el-option label="等于" value="等于"></el-option>
<el-option label="大于等于" value="大于等于"></el-option>
<el-option label="小于等于" value="小于等于"></el-option>
<el-option label="大于" value="大于"></el-option>
<el-option label="小于" value="小于"></el-option>
</el-select>
<el-input placeholder="2"></el-input>
</el-form-item>
<el-form-item label="分类:">
<el-select v-model="searchObj.productName" placeholder="全部">
<el-option label="全部" value=""></el-option>
<el-option label="寿光黄瓜" value="寿光黄瓜"></el-option>
<el-option label="寿光大西红柿" value="寿光大西红柿"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="btn">
<el-button>批量启用</el-button>
<el-button>批量禁用</el-button>
<el-button>批量删除</el-button>
<el-button>统一设置门店库存</el-button>
<el-button>批量设置商品标签</el-button>
<download-excel
class="export-excel-wrapper"
:data="DetailsForm"
:fields="json_fields"
:header="'商品信息'"
name="商品信息.xls"
>
<el-button type="success">导出选中数据</el-button>
</download-excel>
</div>
<el-table
border
style="width: 100%"
:data="goodsList"
@selection-change="handleSelectionChange"
ref="tab"
>
<el-table-column type="selection" width="45"> </el-table-column>
<el-table-column prop="id" label="商品序号" width="150"></el-table-column>
<el-table-column prop="gallery" label="商品图片" width="150">
<template slot-scope="scope">
<img :src="scope.row.gallery" style="width: 100px; height: 100px" />
</template>
</el-table-column>
<el-table-column prop="productName" label="商品名称" width="120">
</el-table-column>
<el-table-column prop="price" label="价格" width="90"> </el-table-column>
<el-table-column prop="origin" label="分类" width="120">
</el-table-column>
<el-table-column prop="produceId" label="商品编码" width="200">
</el-table-column>
<el-table-column prop="shopName" label="门店" width="100">
</el-table-column>
<el-table-column fixed="right" label="操作" width="140">
<template>
<router-link :to="'/admin/shopdetail'">
<el-button type="primary">查看</el-button>
</router-link>
<!-- <router-link :to="'/admin/shopdetail/' + scope.row.id"
>查看</router-link
> -->
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
:page-sizes="[10, 20, 30, 40]"
:page-size="pagnation.size"
layout="total, sizes, prev, pager, next, jumper"
:total="pagnation.total"
@current-change="pageChange"
>
</el-pagination>
</div>
<div class="notion">
<p>说明：</p>
<p>
1、价格修改：需校验价格要大于进行中（预告中）的团购活动和特价活动的促销价，否则不允许保存。
</p>
<p>提示信息：价格必须大于促销价。（团购活动x.xx元/特价活动x.xx元）</p>
<p>2、编辑：修改正常价：逻辑同上。</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.shopbox {
padding: 0 50px;
.el-row {
height: 50px;
line-height: 50px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
span {
flex: 1;
text-align: right;
margin-right: 10px;
font-size: 10px;
color: #3300fe;
text-decoration: underline;
}
}
.num {
display: flex;
p {
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #e4e4e4;
}
}
.el-form {
display: flex;
flex-wrap: wrap;
padding: 0 20px;
.el-input {
width: 152px;
}
.el-form-item {
margin: 10px 10px;
}
}
.btn {
padding-left: 50px;
margin: 10px 0;
display: flex;
.export-excel-wrapper {
margin-left: 10px;
}
}
.block {
text-align: right;
margin: 20px 50px;
}
.notion {
height: 124px;
background-color: #ffcccc;
padding: 10px 30px;
line-height: 1.5;
}
}
</style>
<script>
import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
import { GetGoodsList } from "@/api/order";
export default {
data() {
return {
searchObj: {
current: "1",
produceId: "",
productName: "",
gallery: "",
shopName: "",
price: "",
origin: "",
id: "",
},
goodsList: [],
pagnation: {},
//导出表格数据
DetailsForm: [],
//导出表头信息
json_fields: {
商品序号: "id",
商品图片: "gallery",
商品名称: "productName",
价格: "price",
分类: "origin",
商品编码: "produceId",
门店: "shopName",
},
};
},
methods: {
onSubmit() {
console.log("submit!");
},
getGoodsList() {
GetGoodsList(this.searchObj)
.then((res) => {
console.log("商品列表信息", res.data);
this.goodsList = res.data.data;
this.pagnation = res.data.pagnation;
})
.catch((err) => {
console.log("获取商品信息失败", err);
});
},
pageChange(e) {
console.log(e);
//更新搜索条件的当前页面
this.searchObj.current = e;
//获取当前的订单
this.getGoodsList();
},
handleSelectionChange(val) {
console.log("选择", val);
//导出更新的数据
this.DetailsForm = val;
},
},
mounted() {
this.getGoodsList();
},
watch: {
searchObj: {
//监听searchObj变化，进行搜索
handler() {
this.getGoodsList();
},
deep: true,
},
},
};
</script>
效果图如下：
商品详情页
- 通过之前的方法再次调用，只渲染出商品详情
- 这里需要弹框，去element-ui官网找到需要的弹框模板，引用过来
- 定义弹框里的内容，将操作（编辑和删除）放在弹框中
- 定义编辑的方法，通过传入的id定位到需要编辑的那一行，修改对应的数据即可，也需要弹框，再次找自己需要的模板，引用弹框
- 删除也一样，先定义删除的api、再定义删除的方法，通过传入的id定位到需要删除的那一行
- 编辑和删除之后需要重新获取页面
<template>
<div v-if="goodsList.length">
<p>
<span>当前商品状态：{{ goodsList[0].status }}</span>
<!-- <el-button plain>添加备注</el-button> -->
<el-button type="primary" @click="dialogTableVisible = true"
>商品详情</el-button
>
</p>
<h3 style="margin: 15px 15px">商品基本信息</h3>
<el-table :data="goodsList" style="width: 100%">
<el-table-column prop="id" label="商品序号" width="180">
</el-table-column>
<el-table-column prop="gallery" label="商品图片" width="180">
<template slot-scope="scope">
<img :src="scope.row.gallery" style="width: 100px; height: 100px" />
</template>
</el-table-column>
<el-table-column prop="productName" label="商品名称"> </el-table-column>
<el-table-column prop="price" label="价格"> </el-table-column>
<el-table-column prop="produceId" label="商品编码"> </el-table-column>
<el-table-column prop="shopName" label="门店"> </el-table-column>
</el-table>
<el-dialog title="商品详情" :visible.sync="dialogTableVisible" width="90%">
<el-table :data="goodsList">
<el-table-column label="序号" width="150">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column prop="gallery" label="商品图片" width="180">
<template slot-scope="scope">
<img :src="scope.row.gallery" style="width: 50px; height: 50px" />
</template>
</el-table-column>
<el-table-column prop="price" label="价格"> </el-table-column>
<el-table-column prop="productName" label="商品名称"> </el-table-column>
<el-table-column prop="shopName" label="门店"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="toEdit(scope)">编辑</el-button>
<el-button type="danger" @click="delShop(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog title="编辑商品信息" :visible.sync="noteVisible" width="30%">
<div style="display: flex">
<el-input
placeholder="商品名称:"
style="width: 80px; margin-bottom: 10px"
></el-input>
<el-input v-model="tempName"></el-input>
</div>
<div style="display: flex">
<el-input
placeholder="价格:"
style="width: 80px; margin-bottom: 10px"
></el-input>
<el-input v-model="tempNode"></el-input>
</div>
<div style="display: flex">
<el-input
placeholder="门店:"
style="width: 80px; margin-bottom: 10px"
></el-input>
<el-input v-model="tempShop"></el-input>
</div>
<br />
<div
style="display: flex; justify-content: space-between; padding: 0 50px"
>
<el-button type="danger" @click="noteVisible = false">取消</el-button>
<el-button type="primary" @click="sureEdit">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { GetGoodsList, UpdateGoodsList, DelShop } from "@/api/order";
export default {
data() {
return {
searchObj: {
current: "1",
produceId: "",
productName: "",
gallery: "",
shopName: "",
price: "",
origin: "",
id: "",
},
//商品列表
goodsList: [],
pagnation: {},
// 是否显示备注
dialogTableVisible: false,
// 编辑弹框
noteVisible: false,
// 临时编辑信息
tempNode: "",
tempName: "",
tempShop: "",
// 正则被编辑的行
editRow: {},
// 正在编辑行的下标
editIndex: null,
};
},
created() {
GetGoodsList(this.searchObj)
.then((res) => {
console.log("商品列表信息", res.data.data);
this.goodsList = res.data.data;
this.pagnation = res.data.pagnation;
})
.catch((err) => {
console.log("获取商品信息失败", err);
});
},
methods: {
toEdit(scope) {
// 确定编辑的行
this.editRow = {
...scope.row,
};
// 显示编辑框
this.noteVisible = true;
// 当前临时被编辑的文本
this.tempNode = scope.row.price;
this.tempName = scope.row.productName;
this.tempShop = scope.row.shopName;
// 编辑的行
this.editIndex = scope.$index;
},
sureEdit() {
// 修改编辑行的note
this.editRow.price = this.tempNode;
this.editRow.productName = this.tempName;
this.editRow.shopName = this.tempShop;
// 发送编辑请求给后台
UpdateGoodsList(this.editRow).then((res) => {
console.log(res.data);
if (res.data.code == 1) {
this.$message({
message: "修改成功",
type: "success",
});
// 隐藏编辑框
this.noteVisible = false;
// 更新本地数据
this.goodsList[this.editIndex].price = this.tempNode;
this.goodsList[this.editIndex].productName = this.tempName;
this.goodsList[this.editIndex].shopName = this.tempShop;
} else {
this.$message({
message: "修改失败",
type: "warning",
});
}
});
},
//重新获取商品列表方法
getGoodsList() {
GetGoodsList(this.searchObj)
.then((res) => {
console.log("商品列表信息", res.data.data);
this.goodsList = res.data.data;
this.pagnation = res.data.pagnation;
})
.catch((err) => {
console.log("获取商品信息失败", err);
});
},
//删除方法
delShop(row) {
DelShop(row.id)
.then((res) => {
// console.log(res);
if (res.data.code == 0) {
alert("删除成功");
this.getGoodsList();
} else {
alert(res.data.msg);
}
})
.catch((err) => {
console.log("删除商品信息失败", err);
});
},
},
};
</script>
页面效果图如下：
添加商品页
- 通过element-ui官网找到需要的页面布局，复制粘贴到，自己的项目中
- 定义添加商品的api（/api/yp/product）
- 页面中引用，定义添加商品的方法（addshop）
- 在data内部定义好需要输入的内容
- 通过v-model绑定需要输入内容的参数
- 在输入框输入对应的内容，把输入的内容传入到后端，存入数据
<template>
<div>
<h1>添加商品</h1>
<el-form ref="searchForm" :model="shop" label-width="80px">
<el-form-item label="商品图片:" prop="id">
<el-input v-model="shop.gallery" placeholder="商品图片"></el-input>
</el-form-item>
<el-form-item label="商品名称:" prop="productName">
<el-input v-model="shop.productName" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item label="商品价格:" prop="price">
<el-input v-model="shop.price" placeholder="商品价格"></el-input>
</el-form-item>
<el-form-item label="商品分类:" prop="origin">
<el-input v-model="shop.origin" placeholder="商品分类"></el-input>
</el-form-item>
<el-form-item label="商品编码:" prop="produceId">
<el-input v-model="shop.produceId" placeholder="商品编码"></el-input>
</el-form-item>
<el-form-item label="门店:" prop="shopName">
<el-input v-model="shop.shopName" placeholder="门店"></el-input>
</el-form-item>
<el-button type="primary" @click="addShop">添加</el-button>
<el-button type="danger" @click="$refs.searchForm.resetFields()"
>重置</el-button
>
</el-form>
</div>
</template>
<script>
import { AddShop } from "@/api/order";
export default {
data() {
return {
shop: {
// produceId: "",
// productName: "",
// gallery: "",
// shopName: "",
// price: "",
// origin: "",
// id: "",
sku: "",
isShow: "",
cateName: "",
categoryId: "",
shopId: "",
shopName: "",
productName: "",
gallery:"",
produceId: "",
online: "",
onlineUnified: "",
stock: "",
originalPrice: "",
price: "",
fee: "",
StorageConditions: "",
brand: "",
origin: "",
keyword: "",
descript: "",
body: "",
},
};
},
methods: {
addShop() {
AddShop(this.shop).then((res) => {
console.log(res);
if (res.data.code == 0) {
alert("商品添加成功");
} else {
alert("添加失败");
}
});
},
},
};
</script>
页面效果如图：
页面之间的联动
- 页面之间的联动，通过router-link绑定to方法实现页面之间的跳转
以上就是我对项目中自己完成的模块的总结，蟹蟹。
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
