订单列表 省市区三级联动

This commit is contained in:
xing 2020-06-30 11:43:14 +08:00
parent c8b4193b18
commit d4f5d65386
4 changed files with 13757 additions and 2 deletions

View File

@ -35,7 +35,6 @@ export default {
this.$message.error(res.meta.msg) this.$message.error(res.meta.msg)
} }
this.data = res.data this.data = res.data
console.log(res.data)
} }
}, },
mounted () { mounted () {

13586
src/components/order/citydata.js Executable file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,168 @@
<template>
<div class="order">
<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>
<el-card class="box-card">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="params.query" placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search" ></el-button>
</el-input>
</el-col>
</el-row>
<el-table
:data="data" border stripe
style="width: 100%">
<el-table-column
type="index"
label="#"
>
</el-table-column>
<el-table-column
prop="order_number"
label="订单号"
width="250">
</el-table-column>
<el-table-column
prop="order_price"
label="订单价格"
width="100">
</el-table-column>
<el-table-column
prop="pay_status"
label="是否付款">
<template slot-scope="scope">
<el-tag :type="['danger','success'][scope.row.pay_status]">{{['未付款','已付款'][scope.row.pay_status]}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="is_send"
label="是否发货">
</el-table-column>
<el-table-column
prop="create_time"
label="下单时间">
<template slot-scope="scope">
{{scope.row.create_time*1000 | dataFormat}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
<el-button size="mini" type="success" icon="el-icon-location" @click="edit(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="params.pagenum"
:page-sizes="[10, 20, 30, 40]"
:page-size="params.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<el-dialog @close="close" title="修改收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form" ref="form" :rules="rules" label-width="100">
<el-form-item label="活动区域" prop="region">
<el-cascader
:options="options"
v-model="selectKey" :props="props"
@change="handleChange"></el-cascader>
</el-form-item>
<el-form-item label="活动名称" prop="address">
<el-input v-model="form.address" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="dialogFormVisible = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import citydata from './citydata'
export default {
data () {
return {
params: {
query: '',
pagesize: 10,
pagenum: 1
},
data: [],
form: {
address: '',
region: ''
},
props: {
label: 'label',
value: 'value',
children: 'children',
expandTrigger: 'hover'
},
options: citydata,
selectKey: [],
total: 0,
dialogFormVisible: false,
rules: {
address: [
{ required: true, message: '请填写详细地址', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择区域' }
]
}
}
},
methods: {
close () {
this.$refs.form.resetFields()
this.selectKey = []
},
handleChange (value) {
this.form.region = value.join(',')
},
edit (row) {
this.dialogFormVisible = true
},
handleSizeChange (val) {
this.params.pagesize = val
this.list()
},
handleCurrentChange (val) {
this.params.pagenum = val
this.list()
},
async list () {
const { data: res } = await this.$http.get('orders', {
params: this.params
})
this.total = res.data.total
this.data = res.data.goods
}
},
mounted () {
this.list()
}
}
</script>
<style lang="less" scoped>
.el-cascader{
width: 100%;
}
</style>

View File

@ -10,6 +10,7 @@ import categories from '../components/goods/categories'
import params from '../components/goods/params' import params from '../components/goods/params'
import goods from '../components/goods/goods' import goods from '../components/goods/goods'
import goodsEdit from '../components/goods/edit' import goodsEdit from '../components/goods/edit'
import order from '../components/order/order'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -28,7 +29,8 @@ const routes = [
{ path: '/categories', component: categories }, { path: '/categories', component: categories },
{ path: '/params', component: params }, { path: '/params', component: params },
{ path: '/goods', component: goods }, { path: '/goods', component: goods },
{ path: '/goods/add', component: goodsEdit } { path: '/goods/add', component: goodsEdit },
{ path: '/orders', component: order }
] ]
} }
] ]