绘制页面
BreadCrumb面包屑导航区域Card卡片区域- 输入框和搜索
- 订单列表
- 修改订单地址
- 删除
Pagination分页
输入框和搜索
// 同一行 -->
// gutter 栅格间隔 -->
<el-row :gutter="20">
// 第一列 -->
// 3. 输入框和搜索 -->
// span 栅格占据的列数 -->
<el-col :span="8">
<el-input
placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getOrdersList"
>
<el-button
slot="append"
icon="el-icon-search"
@click="getOrdersList"
></el-button>
</el-input>
</el-col>
</el-row>
订单列表
- 首先要获取订单列表数据，获取成功后将数据保存到
ordersList数组中，Table组件中 需要绑定数据源:data = ordersList
// 4. 订单列表区域 -->
<el-table :data="ordersList" style="width: 100%" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column prop="order_number" label="订单编号">
</el-table-column>
<el-table-column prop="order_price" label="订单价格" width="90">
</el-table-column>
<el-table-column prop="pay_status" label="是否付款"></el-table-column>
<el-table-column prop="is_send" label="是否发货" width="90"></el-table-column>
<el-table-column prop="create_time" label="下单时间"></el-table-column>
<el-table-column label="操作" width="210">
<template slot-scope="scope">
// 5.修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="medium"
>修改</el-button>
// 6.删除按钮 -->
<el-button
type="success"
icon="el-icon-location"
size="medium"
@click="removeById(scope.row.goods_id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
data() {
return {
queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
// 当前每页显示多少条数据
pagesize: 5
},
// 4.2 订单总数
total: 0,
// 4.3 订单列表
ordersList: []
}
},
created() {
this.getOrdersList()
},
methods: {
// 4.1 获取订单数据列表
async getOrdersList() {
const { data: res } = await this.$http.get('orders', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('获取订单数据失败')
}
this.$message.success('获取订单数据成功')
// console.log(res.data)
this.ordersList = res.data.goods
this.total = res.data.total
},
}
- 将下单时间借助作用域插槽和全局过滤器
dataFormat转化为时间
<el-table-column prop="create_time" label="下单时间">
<template v-slot="scope">
{{ scope.row.create_time | dateFormat }}
</template>
</el-table-column>
-
0 ：未付款
1 ：已付款
使用作用域插槽，其中放入两个
el-tag即可，根据值（0/1）通过v-if将其渲染到页面上
<el-table-column prop="pay_status" label="是否付款">
<template v-slot="scope">
<el-tag type="success" v-if="scope.row.pay_status === '1'">
已付款
</el-tag>
<el-tag type="danger" v-else>未付款</el-tag>
</template>
</el-table-column>
分页
代码：
// 5. Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 15, 25, 40]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
>
</el-pagination>
data() {
return {
queryInfo:{
query:'',
pagenum: 1,
pageSize: 5
},
// 订单总数，在res.data中
total: 0
}
}
methods: {
// 5.1 获取最新的页面大小
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getOrdersList()
},
// 5.2 获取当前的页码值
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getOrdersList()
}
}
修改订单地址
思路：点击修改按钮弹出修改订单地址的功能对话框，然后直接选择订单地址并输入详细地址，点击确定按钮即修改完成
省市区/县地址：需要引入 cityData 库，并且使用级联选择器供用户之间选择
// 6.2 修改订单地址的功能对话框 -->
<el-dialog title="修改订单地址" :visible.sync="addressVisible" width="50%">
// 6.3 表单区域 -->
<el-form
:model="addressForm"
:rules="addressFormRules"
ref="addressForm"
label-width="100px"
>
<el-form-item label="省市区/县" prop="address1">
<el-input v-model="addressForm.address1"></el-input>
</el-form-item>
<el-form-item label="详细地址" prop="address2">
<el-input v-model="addressForm.address2"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addressVisible = false">取 消</el-button>
<el-button type="primary" @click="addressVisible = false"
>确 定
</el-button>
</span>
</el-dialog>
data() {
return {
...
// 修改订单地址的功能对话框默认是隐藏的
addressVisible: false,
addressForm: {
address1: [],
address2: ''
},
addressFormRules: {
address1: [
{ required: true, message: '请选择您的收货地址', trigger: 'blur' }
],
address2: [
{ required: true, message: '请输入您的详细地址', trigger: 'blur' }
]
},
}
}
methods: {
showBox() {
this.addressVisible = true
}
}
替换成级联选择器
<el-form-item label="省市区/县" prop="address1">
// <el-input v-model="addressForm.address1"></el-input> -->
// 替换成级联选择器 -->
<el-cascader
v-model="addressForm.address1"
:options="cityData"
:props="{ expandTrigger: 'hover' }"
></el-cascader>
</el-form-item>
// 导入省市区/县文件库
import cityData from './citydata'
export default {
data() {
...
cityData
}
}
关闭对话框后自动重置功能对话框内容：监听 el-dialog 的 close关闭事件
<el-dialog
title="修改订单地址"
:visible.sync="addressVisible"
width="50%"
@close="addressDialogClosed"
>
...
<el-dailog>
methods: {
addressDialogClosed() {
this.$refs.addressFormRef.resetFields()
}
}
物流进度的查询
接口文档 1.10.5
- 请求路径：/kuaidi/:id
- 请求方法：get
- 供测试的物流单号：1106975712662
换了评论区的一个接口地址，老师的接口好像不太行
https://lianghj.top:8888/api/private/v1/
// 7.2 物流信息功能对话框 -->
<el-dialog title="物流信息" :visible.sync="processVisible" width="50%">
<span>这是一段信息</span>
</el-dialog>
data() {
return {
...
// 7.3 对话框默认是隐藏的
processVisible: false,
// 7.5 存储获取到的物流信息
processInfo: []
}
}
methods: {
// 7.1 点击按钮显示物流信息
async showProcess() {
// 7.4 发送请求获取物流信息
const { data: res } = await this.$http.get('/kuaidi/1106975712662')
if (res.meta.status !== 200) {
return this.$message.error('获取物流信息失败')
}
this.$message.success('获取物流信息成功')
this.processInfo = res.data
this.processVisible = true
console.log(this.processInfo)
}
}
- 接下来将物流信息以时间轴的形式展示出来，需要使用到
Timeline时间线组件
// 7.6 TimeLine时间线组件 -->
<el-timeline>
<el-timeline-item
v-for="(activity, index) in processInfo"
:key="index"
:timestamp="activity.time"
>
{{ activity.context }}
</el-timeline-item>
</el-timeline>
提交代码
- 暂存更改
- 提交
git push将本地的 order 分支推送到云端- 将 order 中所有的代码都合并到 master 主分支
- 切换到主分支 master
git merge order完成合并
git push将本地的 master 分支推送到云端，实现更新