前端学习之vue+element-ui电商项目（八）商品信息添加
2024-06-04 01:46:27
文章目录
- 0. 准备工作
- 1.界面样式
- 1.1 界面布局
- 1.2 导航区视图
- 2.卡片视图区域
- 2.1 警示条
- 2.1.1 步骤条
- 3. 卡片视图的表单
- 3.1 tab 栏框架
- 3.1.2 tab 栏框架数据添加
- 3.1.3 tab 栏框架方法实现
- 3.2 基本信息
- 3.2.1界面样式
- 3.2.2数据添加
- 3.2.3方法实现
- 3.3 商品参数
- 3.3.1界面样式
- 3.3.2数据添加
- 3.3.3方法实现
- 3.4 商品属性
- 3.4.1界面样式
- 3.4.2数据添加
- 3.5 商品图片
- 3.5.1界面样式
- 3.5.2数据添加
- 3.5.3方法实现
- 3.6 商品内容
- 3.6.1界面样式
- 3.6.2数据添加
- 3.6.3方法实现
- 4.图片预览
- 4.1 界面样式
- 4.2 数据添加
- 5.功能展示
0. 准备工作
component下新建文件夹goods下新建文件Add.vue，并在路由中引入文件.
1 ) 下载lodash并引入 （import _ from ‘lodash’）
2 ）下载富本编辑器并引入
// 导入富本编辑器import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css' // import stylesimport 'quill/dist/quill.snow.css' // for snow themeimport 'quill/dist/quill.bubble.css' // for bubble themeVue.use(VueQuillEditor)3 ）使用过滤器
// 全局过滤器
Vue.filter('dateFormat', function (originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0') // 如果不是前两位用0填充const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d}-${hh}-${mm}-${ss}`
})
1.界面样式
1.1 界面布局
<style>
.el-checkbox{margin: 0 10px 0 0 !important;
}
.ql-editor {min-height: 300px;
}
.btnAdd {margin-top: 15px;
}</style>
1.2 导航区视图
<el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>添加商品</el-breadcrumb-item></el-breadcrumb>
2.卡片视图区域
2.1 警示条
<el-alerttitle="添加商品信息"type="info"centershow-icon:closable="false"></el-alert>
2.1.1 步骤条
<el-steps:space="200":active="activeIndex - 0"finish-status="success"align-center><el-step title="基本信息"></el-step><el-step title="商品参数"></el-step><el-step title="商品属性"></el-step><el-step title="商品图片"></el-step><el-step title="商品内容"></el-step><el-step title="完成"></el-step></el-steps>
3. 卡片视图的表单
3.1 tab 栏框架
3.1.2 tab 栏框架数据添加
activeIndex: '0',
3.1.3 tab 栏框架方法实现
// 出发级联选择器handleChange () {if (this.addForm.goods_cat.length !== 3) {this.addForm.goods_cat = []}},beforeTabLeave (activeName, oldActiveName) {if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {this.$message.error('请先选择商品分类！')return false}},async tabClicked () {if (this.activeIndex === '1') {const { data: result } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: 'many' }})if (result.meta.status !== 200) {return this.$message.error('获取状态参数列表失败！')}result.data.forEach(item => {item.attr_vals =item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')})this.manyTableData = result.data} else if (this.activeIndex === '2') {const { data: result } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: 'only' }})if (result.meta.status !== 200) {return this.$message.error('获取状态参数列表失败！')}console.log(result.data)result.data.forEach(item => {item.attr_vals =item.attr_vals.length === 0 ? [] : item.attr_vals})this.onlyTableData = result.data}},
3.2 基本信息
3.2.1界面样式
<el-tab-pane label="基本信息" name="0">基本信息<el-form-item label="商品名称" prop="goods_name"><el-input v-model="addForm.goods_name"></el-input></el-form-item><el-form-item label="商品价格" prop="goods_price"><el-input v-model="addForm.goods_price" type="number"></el-input></el-form-item><el-form-item label="商品重量" prop="goods_weight"><el-input v-model="addForm.goods_weight" type="number"></el-input></el-form-item><el-form-item label="商品数量" prop="goods_number"><el-input v-model="addForm.goods_number" type="number"></el-input></el-form-item><el-form-item label="商品分类" prop="goods_cat"><el-cascaderv-model="addForm.goods_cat":options="cateList":props="cateProps"@change="handleChange"></el-cascader></el-form-item></el-tab-pane>
3.2.2数据添加
addForm: {goods_name: '',goods_price: 0,goods_weight: 0,goods_number: 0,// 商品所属的分类数组goods_cat: [],// 图片数组pics: []},addFormRules: {goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],goods_number: [{ required: true, message: '请输入商品数量', trigger: 'blur' }],goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]},// 商品分类列表cateList: [],cateProps: {expandTrigger: 'hover',label: 'cat_name', // 看到的属性value: 'cat_id', // 选中的是什么值children: 'children' // 指定属性实现父子节点嵌套},
3.2.3方法实现
created () {this.getCateList()},
// 出发级联选择器handleChange () {if (this.addForm.goods_cat.length !== 3) {this.addForm.goods_cat = []}},
3.3 商品参数
3.3.1界面样式
<el-tab-pane label="商品参数" name="1"><!-- 渲染表单item项 --><el-form-item:label="item.attr_name"v-for="item in manyTableData":key="item.attr_id"></el-form-item></el-tab-pane>
3.3.2数据添加
// 动态参数获取manyTableData: [],
3.3.3方法实现
async getCateList () {const { data: result } = await this.$http.get('categories')if (result.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}this.cateList = result.data},
3.4 商品属性
3.4.1界面样式
<el-tab-pane label="商品属性" name="2"><!-- 渲染表单item项 --><el-form-item:label="item.attr_name"v-for="item in onlyTableData":key="item.attr_id"><!-- input 框组 --><el-input v-model="item.attr_vals"></el-input></el-form-item></el-tab-pane>
3.4.2数据添加
// 静态属性列表数据onlyTableData: [],
3.5 商品图片
3.5.1界面样式
<el-tab-pane label="商品图片" name="3"><!-- 图片上传模块 action表示上传的API地址 --><el-upload:action="uploadURL":on-preview="handlePreview":on-remove="handleRemove"list-type="picture":headers="headerObj":on-success="handleSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-tab-pane>
3.5.2数据添加
// 上传图片的URL地址uploadURL: 'http://127.0.0.1:8888/api/private/v1/',// 图片上传组件的额请求头对象headerObj: {Authorization: window.sessionStorage.getItem('token')},
3.5.3方法实现
// 处理图片预览效果handlePreview (file) {this.previewPath = file.response.data.urlthis.handlePreview = true},// 处理移除图片的操作handleRemove (file) {// 获取要删除的图片的临时路径const filePath = file.response.data.tmp_path// 从图片数组中找到这个图片对应的索引值const i = this.addForm.pics.findIndex(x => x.pic === filePath)// 调用数组splice方法，把图片信息对象从图片数组中移除this.addForm.pics.splice(i, 1)},handleSuccess (response) {// 拼接得到一个图片信息对象const pictInfo = { pic: response.data.temp_path }// 将图片信息对象，放入图片数组中this.addForm.pic.push(pictInfo)},
3.6 商品内容
3.6.1界面样式
<el-tab-pane label="商品内容" name="4"><!-- 富文本编辑组件 --><quill-editor v-model="addForm.goods_introduce"></quill-editor><!-- 添加商品按钮 --><el-buttonclass="btnAdd"type="primary"@click="add">添加商品</el-button></el-tab-pane>
3.6.2数据添加
goods_introduce: ''
3.6.3方法实现
add () {this.$refs.addFormRef.validate(async valid => {if (!valid) {return this.$message.error('填写必要的表单项')}// 执行添加的业务逻辑const form = _.cloneDeep(this.addForm)form.goods_cat = form.goods_cat.join(',')// 处理动态参数this.manyTableData.forEach(item => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals.join(' ')}this.addForm.attrs.push(newInfo)})// 处理静态属性this.onlyTableData.forEach(item => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals}this.addForm.attrs.push(newInfo)})form.attrs = this.addform.attrs// 发起请求添加商品// 商品名称必须唯一const { data: result } = await this.$http.post('goods', form)if (result.meta.status !== 201) {return this.$message.error('添加商品失败')}this.$message.success('添加商品成功')this.$router.push('/goods')})}
4.图片预览
4.1 界面样式
<el-dialogtitle="图片预览":visible.sync="previewVisible"width="50%"></el-dialog>
4.2 数据添加
previewVisible: false,previewPath: '',
5.功能展示
前端学习之vue+element-ui电商项目（八）商品信息添加相关推荐
- [Vue.js]实战 -- 电商项目(八)
数据统计 数据统计概述 用于统计电商平台运营过程的中的各种统计数据 通过直观的可视化方式展示出来,方便相关运营和管理人员查看 用户来源数据统计报表 Echarts 第三方可视化库的基本使用 安装ech ...
- [Vue.js]实战 -- 电商项目(六)
商品管理 商品管理概述 用于维护电商平台的商品信息 包括商品的类型.参数.图片.详情等信息.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能 商品列表 实现商品列表布局效果 调用后台接口获取 ...
- [Vue.js]实战 -- 电商项目(一)
项目目录 项目概述 项目初始化 登录/退出功能 主页布局 用户管理模块 权限管理模块 分类管理模块 参数管理模块 商品管理模块 订单管理模块 数据统计模块 项目概述 电商项目基本业务概述 电商后台管理 ...
- java spu sku_SpringBoot电商项目实战 — 商品的SPU/SKU实现
最近事情有点多,所以系列文章已停止好多天了.今天我们继续Springboot电商项目实战系列文章.到目前为止,整个项目的架构和基础服务已经全部实现,分布式锁也已经讲过了.那么,现在应该到数据库设计及代 ...
- java电商项目搭建-------商品详情页模块
努力好了,时间会给你答案.--------magic_guo 在一个电商项目中,访问频率最高的是商品详情页页面,而且商品详情页的变化评率不会太高(除非是搞活动的时候):那么访问频率高,然后再使用数据库 ...
- html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
- element ui 电商后台商品属性管理页面
电商后台商品属性管理 最近在做电商后台,电商商品中有个SKU值,类似于 服装的 "尺码""颜色""款式"等. 界面如下: 所用到的知识点如下 ...
- vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言 接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
- [Vue.js]实战 -- 电商项目(二)
主页布局 整体布局 主页布局开始 引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
- [Vue.js]实战 -- 电商项目(四)
分类管理 商品分类概述 商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到 商品分类列表 基本布局与数据获取 基本布局 面包屑导航区域 <!-- 面包屑导航区域 --& ...
最新文章
- android studio 库项目管理,在Android Studio中将现有项目转换为库项目
- 学习3dmax（四）
- 深度学习的相似度计算 向量之间的相似程度计算 Q K V的注意力权重
- 配置Yarn-Resourcemanager HA
- python 将字节字符串转换成十六进制字符串
- 关于myBatis的问题There is no getter for property named 'USER_NAME' in 'class com.bky.model.实例类'...
- 静态工厂方法之服务提供者框架
- Android框架式编程之BufferKnife
- 《Reids 设计与实现》第八章 AOF持久化
- 29 上传下载 socketserve
- 31. Minimize compilation dependencies between files
- 内存的工作原理及时序介绍
- Linux深度学习框架安装
- 使用python代码调用三汇语音卡硬件拨打电话
- 团队管理---管理经典理论
- 测试象棋水平用哪个软件好,最新象棋软件作弊名单公布，软件测试员都被封，哪些网络象棋主播...
- Java实现 for循环输出空心的菱形 在main方法中调用printHollowRhombus()方法完成10行的空心菱形输出，其中 printHollo
- 计算机英语怎么念视频,计算机的英语怎么念
- WPF 实现label换行
- 业务系统技术架构的方法论