day06 - 图片上传 + 富文本 + ECharts数据可视化

goods_price: 0,

goods_weight: 0,

goods_number: 0,

goods_cat: [],

//上传图片数组

pics: []

},

//上传图片的url地址

uploadURL: ‘http://127.0.0.1:8888/api/private/v1/upload’,

//图片上传组件的headers请求头对象

headerObj: { Authorization: window.sessionStorage.getItem(‘token’) },

//保存预览图片的url地址

previewPath: ‘’,

//控制预览图片对话框的显示和隐藏

previewVisible:false

}

},

//在methods中添加事件处理函数

methods:{

…

handlePreview(file) {

//当用户点击图片进行预览时执行，处理图片预览

//形参file就是用户预览的那个文件

this.previewPath = file.response.data.url

//显示预览图片对话框

this.previewVisible = true

},

handleRemove(file) {

//当用户点击X号删除时执行

//形参file就是用户点击删除的文件

//获取用户点击删除的那个图片的临时路径

const filePath = file.response.data.tmp_path

//使用findIndex来查找符合条件的索引

const index = this.addForm.pics.findIndex(item => item.pic === filePath)

//移除索引对应的图片

this.addForm.pics.splice(index, 1)

},

handleSuccess(response) {

//当上传成功时触发执行

//形参response就是上传成功之后服务器返回的结果

//将服务器返回的临时路径保存到addForm表单的pics数组中

this.addForm.pics.push({ pic: response.data.tmp_path })

}

}

B.使用富文本插件

想要使用富文本插件vue-quill-editor，就必须先从依赖安装该插件

引入并注册vue-quill-editor，打开main.js，编写如下代码

//导入vue-quill-editor（富文本编辑器）

import VueQuillEditor from ‘vue-quill-editor’

//导入vue-quill-editor的样式

import ‘quill/dist/quill.core.css’

import ‘quill/dist/quill.snow.css’

import ‘quill/dist/quill.bubble.css’

…

//全局注册组件

Vue.component(‘tree-table’, TreeTable)

//全局注册富文本组件

Vue.use(VueQuillEditor)

使用富文本插件vue-quill-editor

添加商品

//在数据中添加goods_introduce

//添加商品的表单数据对象

addForm: {

goods_name: ‘’,

goods_price: 0,

goods_weight: 0,

goods_number: 0,

goods_cat: [],

//上传图片数组

pics: [],

//商品的详情介绍

goods_introduce:‘’

}

//在global.css样式中添加富文本编辑器的最小高度

.ql-editor{

min-height: 300px;

}

//给添加商品按钮添加间距

.btnAdd{

margin-top:15px;

}

C.添加商品

完成添加商品的操作

在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器报错

我们需要打开vue控制条，点击依赖，安装lodash，把addForm进行深拷贝

//打开Add.vue，导入lodash

D.推送代码

推送goods_list分支到码云

将代码添加到暂存区： git add .

将代码提交到本地仓库： git commit -m “完成商品功能开发”

将代码推送到码云： git push

切换到master主分支： git checkout master

将goods_list分支代码合并到master: git merge goods_list

将master推送到码云： git push

2.订单列表

A.创建分支

创建order子分支并推送到码云

创建order子分支: git checkout -b order

将order分支推送到码云： git push -u origin order

B.创建路由

创建订单列表路由组件并添加路由规则

//在components中新建order文件夹，新建Order.vue组件，组件中添加代码如下

订单列表

首页

订单管理

订单列表

//打开router.js导入Order.vue并添加规则

import Order from ‘./components/order/Order.vue’

path: ‘/home’, component: Home, redirect: ‘/welcome’, children: [

{ path: “/welcome”, component: Welcome },

{ path: “/users”, component: Users },

{ path: “/rights”, component: Rights },

{ path: “/roles”, component: Roles },

{ path: “/categories”, component: Cate },

{ path: “/params”, component: Params },

{ path: “/goods”, component: GoodList },

{ path: “/goods/add”, component: GoodAdd },

{ path: “/orders”, component: Order }

]

C.实现数据展示及分页

已付款

未付款

{{scope.row.create_time | dateFormat}}

<el-pagination @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“queryInfo.pagenum” :page-sizes=“[3, 5, 10, 15]” :page-size=“queryInfo.pagesize” layout=“total, sizes, prev, pager, next, jumper” :total=“total”>

D.制作省市区县联动

打开今天的资料，找到素材文件夹，复制citydata.js文件到components/order文件夹中

然后导入citydata.js文件

具体代码如下：

//给修改地址按钮添加点击事件

<el-button size=“mini” type=“primary” icon=“el-icon-edit” @click=“showEditAddress”>

//添加修改地址对话框,在卡片视图下方添加

<el-dialog title=“修改收货地址” :visible.sync=“addressVisible” width=“50%” @close=“addressDialogClosed”>

<el-button @click=“addressVisible = false”>取 消

<el-button type=“primary” @click=“addressVisible = false”>确 定

//js部分的代码

E.制作物流进度对话框

因为我们使用的是element-ui中提供的Timeline组件，所以需要导入并注册组件

打开element.js,编写代码会进行导入和注册

import {

Timeline,TimelineItem

} from ‘element-ui’

Vue.use(Timeline)

Vue.use(TimelineItem)

打开Order.vue文件，添加代码实现物流进度对话框

<el-timeline-item v-for=“(activity, index) in progressInfo”

:key=“index” :timestamp=“activity.time”>

{{activity.context}}