123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <!--
- * @Description:
- * @Version: 1.0
- * @Autor: zhuyijun
- * @Date: 2021-12-04 16:09:03
- * @LastEditTime: 2022-02-20 18:56:47
- -->
- <template>
- <div>
- <!-- 面包屑导航区 -->
- <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>
- <!-- 卡片视图 -->
- <el-card>
- <!-- 搜索框 -->
- <el-row :gutter="20">
- <el-col :span="8">
- <el-input placeholder="请输入内容"
- v-model="queryInfo.query"
- clearable>
- <el-button slot="append"
- icon="el-icon-search"></el-button>
- </el-input>
- </el-col>
- </el-row>
- <!-- 列表 -->
- <el-table :data="orderList">
- <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">
- <el-tag v-if="scope.row.order_price === '1'"
- type="success">已付款</el-tag>
- <el-tag v-else
- type="danger">未付款</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="是否发货">
- <template slot-scope="scope">
- <el-tag v-if="scope.row.is_send === '是'"
- type="success">已发货</el-tag>
- <el-tag v-else
- type="danger">未发货</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="下单时间">
- <template slot-scope="scope">
- {{scope.row.create_time | dateFormat}}
- </template>
- </el-table-column>
- <el-table-column label="操作"
- width="130px">
- <template slot-scope="scope">
- <el-button type="primary"
- size="mini"
- icon="el-icon-edit"
- @click="showBox(scope.row)"></el-button>
- <el-button type="success"
- size="mini"
- icon="el-icon-location"
- @click="showProgressBox"></el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <el-pagination @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="queryInfo.pagenum"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="queryInfo.pagesize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total">
- </el-pagination>
- </el-card>
- <!-- 修改地址的对话框里 -->
- <el-dialog title="修改地址"
- :visible.sync="addressVisible"
- width="50%"
- @close="addressDialogClosed">
- <el-form :model="addressForm"
- :rules="addressFormRules"
- ref="addressFormRef"
- label-width="100px">
- <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%"
- @close="progressDialogClosed">
- <el-form :model="progressForm"
- :rules="progressFormRules"
- ref="progressFormRef"
- label-width="100px">
- <!-- 时间线 -->
- <el-timeline>
- <el-timeline-item v-for="(activity, index) in progressInfo"
- :key="index"
- :timestamp="activity.time">
- {{activity.context}}
- </el-timeline-item>
- </el-timeline>
- </el-form>
- <span slot="footer"
- class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary"
- @click="dialogVisible = false">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import cityData from './citydata.js'
- export default {
- data () {
- return {
- queryInfo: {
- query: '',
- pagenum: 1,
- pagesize: 10
- },
- orderList: [],
- total: 0,
- addressVisible: false,
- addressForm: {
- address1: [],
- address2: ''
- },
- addressFormRules: {
- address1: [
- { required: true, message: '请选择省市区/县', trigger: 'blur' }
- ],
- address2: [
- { required: true, message: '请填写详细地址', trigger: 'blur' }
- ]
- },
- cityData,
- progressVisible: false,
- progressInfo: [],
- progressForm: {
- },
- progressFormRules: {
- }
- }
- },
- 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(res.meta.msg)
- }
- this.orderList = res.data.goods
- this.total = res.data.total
- },
- handleSizeChange (newSize) {
- this.queryInfo.pagesize = newSize
- this.getOrderList()
- },
- handleCurrentChange (newPage) {
- this.queryInfo.pagenum = newPage
- this.getOrderList()
- },
- //展示修改地址的对话框
- showBox (row) {
- this.addressVisible = true
- },
- addressDialogClosed () {
- this.$refs.addressFormRef.resetFields()
- },
- //物流进度对话框展示
- async showProgressBox () {
- const { data: res } = await this.$http.get('/kuaidi/JD0062748025909')
- if (res.meta.status !== 200) {
- return this.$message.error('获取物流进度失败')
- }
- this.progressInfo = res.data
- this.progressVisible = true
- },
- //物流进度对话框关闭
- progressDialogClosed () {
- this.$refs.progressFormRef.resetFields()
- }
- },
- computed: {
- }
- }
- </script>
- <style lang="less" scoped>
- @import '../../plugins/timeline/timeline.css';
- @import '../../plugins/timeline-item/timeline-item.css';
- .el-cascader {
- width: 100%;
- }
- </style>
|