<template>
<div>
<!-- A面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>订单管理</el-breadcrumb-item>
<el-breadcrumb-item>订单列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- B卡片视图区域 -->
<el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
v-model="queryInfo.query"
clearable
@clear="getOrderList"
>
<el-button @click="getOrderList" slot="append" icon="el-icon-
search">
</el-button>
</el-input>
</el-col>
</el-row>
<!-- 订单列表数据 -->
<el-table :data="orderlist">
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="订单编号" prop="order_number"></el-table-column>
<el-table-column label="订单价格" prop="order_price"></el-table-column>
<el-table-column label="是否付款" prop="pay_status">
<template slot-scope="scope">
<!-- {
{scope.row}} -->
<el-tag v-if="scope.row.pay_satus==='1'" type="success">已付款</el-tag>
<el-tag v-else type="danger">未付款</el-tag>
</template>
</el-table-column>
<el-table-column label="是否发货" prop="is_send"></el-table-column>
<el-table-column label="下单时间" prop="create_time">
<template slot-scope="scope">
{
{scope.row.create_time|dataFormat}} <!-- 用到自定义的时间过滤器 -->
</template>
</el-table-column>
<el-table-column label="操作" width="130px">
<!-- 操作 编辑 删除按钮-->
<template slot-scope="scope">
<!-- {
{scope.row}} -->
<el-button @click="showBox" size="mini" icon="el-icon-edit"
type="primary">
</el-button>
<el-button @click="showProgressBox" size="mini" icon="el-icon-
location" type="danger">
</el-button>
</template>
</el-table-column>
</el-table>
<!-- C 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total" background>
</el-pagination>
<!-- D 编辑地址的对话框 -->
<el-dialog
title="修改地址"
:visible.sync="addressVisible"
width="50%"
@close="addressDialogClosed">
<el-form :model="addressForm" :rules="addressFormRules"
ref="addressFormRef" label-width="100px" class="demo-ruleForm">
<el-form-item label="省市区/县" prop="address1">
<el-cascader :options="cityData"
v-model="addressForm.address1">
</el-cascader>
</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>
<!-- 展示物流进度的对话框 -->
<el-dialog
title="物流进度"
:visible.sync="progressVisible"
width="50%">
<!-- 时间线 -->
<el-timeline>
<el-timeline-item
v-for="(activity, index) in progressInfo"
:key="index"
:timestamp="activity.time">
{
{activity.context}}
</el-timeline-item>
</el-timeline>
</el-dialog>
</el-card>
</div>
</template>
<script>
import cityData from "./citydata.js"//城市的数据
export default {
name:"Order",
data() {
return {
queryInfo:{
query:"",
pagenum:1,
pagesize:10
},
total:0,
orderlist:[],
// 修改地址对话框的相关数据
addressVisible:false,
addressForm:{},
addressFormRules:{
address1:[{required:true,message:"请选择省市区县",trigger:"blur"}],
address2:[{required:true,message:"请填写详细地址",trigger:"blur"}],
},
cityData:cityData,
progressVisible:false,
progressInfo:[]
}
},
created() {
this.getOrderList()
},
methods: {
async getOrderList(){
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("订单管理的resdata",res);
this.total=res.data.total
this.orderlist=res.data.goods
},
handleSizeChange(newSize){
this.queryInfo.pagesize=newSize
this.getOrderList()
},
handleCurrentChange(newPage){
this.queryInfo.pagenum=newPage
this.getOrderList()
},
//展示编辑地址的对话框
showBox(){
this.addressVisible=true
},
addressDialogClosed(){
this.$refs.addressFormRef.resetFields()
},
async showProgressBox(){
const {data:res}=await this.$http.get("/kuaidi/1106975712662")
if(res.meta.status!==200){
return this.$message.error("获取物流进度失败")
}
this.$message.success("获取物流进度成功")
console.log("这里是res.data",res.data);
this.progressInfo=res.data
this.progressVisible=true
}
},
computed:{
}
}
</script>
<style lang="less" scoped>
.el-cascader{
width: 100%;
}
</style>