.

src/main.js

@@ -24,6 +24,30 @@ window.onresize = () => {
     store.commit('setSmallScreen', window.innerWidth <= 640);
 };
 
+// 对Date的扩展，将 Date 转化为指定格式的String
+// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
+// 例子：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+Date.prototype.format = function(fmt) {
+    //author: meizz
+    var o = {
+        'M+': this.getMonth() + 1, //月份
+        'd+': this.getDate(), //日
+        'h+': this.getHours(), //小时
+        'm+': this.getMinutes(), //分
+        's+': this.getSeconds(), //秒
+        'q+': Math.floor((this.getMonth() + 3) / 3), //季度
+        S: this.getMilliseconds(), //毫秒
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
+    for (var k in o)
+        if (new RegExp('(' + k + ')').test(fmt))
+            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+    return fmt;
+};
+
 new Vue({
     router,
     store,

src/views/Orders.vue

@@ -6,7 +6,11 @@
             <el-table-column prop="userId" label="用户ID" width="100">
             </el-table-column>
             <el-table-column prop="product.name" label="商品名称"></el-table-column>
-            <el-table-column width="150" align="center">
+            <el-table-column prop="createdAt" label="下单时间" width="200">
+            </el-table-column>
+            <el-table-column prop="payTime" label="付款时间" width="200">
+            </el-table-column>
+            <el-table-column width="150" label="操作" align="left">
                 <template slot-scope="{ row }">
                     <el-button type="primary" size="mini" @click="edit(row)">编辑
                     </el-button>
@@ -19,6 +23,23 @@
         <pagination :page-size="pageSize" :current-page="page"
             :total="totalElements" @size-change="onSizeChange"
             @current-change="onCurrentChange"></pagination>
+        <el-dialog :visible.sync="showShipDialog" title="发货">
+            <el-form :model="shipInfo" label-width="80px" label-position="right"
+                size="small" ref="shipForm" :rules="shipRules">
+                <el-form-item prop="expressCompany" label="物流公司">
+                    <el-input v-model="shipInfo.expressCompany"></el-input>
+                </el-form-item>
+                <el-form-item prop="trackingNo" label="物流单号">
+                    <el-input v-model="shipInfo.trackingNo"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer">
+                <el-button @click="showShipDialog=false" size="small">取消
+                </el-button>
+                <el-button @click="confirmShip" size="small" type="primary">确定
+                </el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -27,7 +48,18 @@ import paginationMixin from '@/mixins/pagination';
 export default {
     mixins: [paginationMixin],
     data() {
-        return {};
+        return {
+            showShipDialog: false,
+            shipInfo: {
+                expressCompany: '',
+                trackingNo: '',
+            },
+            selectedOrder: {},
+            shipRules: {
+                expressCompany: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
+                trackingNo: [{ required: true, message: '请输入物流单号', trigger: 'blur' }],
+            },
+        };
     },
     methods: {
         getData() {
@@ -56,32 +88,37 @@ export default {
             });
         },
         ship(row) {
-            this.$prompt('请输入物流单号', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                inputValidator(val) {
-                    if (val) {
-                        return true;
-                    }
-                    return '请输入物流单号';
-                },
-            })
-                .then(({ value }) => {
-                    row.trackingNo = value;
-                    row.status = 'DELIVERING';
-                    return this.$axios.post('/order/save', row);
-                })
-                .then(res => {
-                    if (res.data.success) {
-                        this.$message.success('成功');
-                        this.getData();
-                    } else {
-                        this.$message.error(res.data.error);
-                    }
-                })
-                .catch(e => {
-                    console.log(e);
-                });
+            this.selectedOrder = row;
+            this.shipInfo = {
+                expressCompany: '',
+                trackingNo: '',
+            };
+            this.showShipDialog = true;
+        },
+        confirmShip() {
+            this.$refs.shipForm.validate(valid => {
+                if (valid) {
+                    this.showShipDialog = false;
+                    let order = { ...this.selectedOrder };
+                    order.trackingNo = this.shipInfo.trackingNo;
+                    order.expressCompany = this.shipInfo.expressCompany;
+                    order.status = 'DELIVERING';
+                    order.shipTime = new Date().format('yyyy-MM-dd HH:mm:ss');
+                    this.$axios
+                        .post('/order/save', order)
+                        .then(res => {
+                            if (res.data.success) {
+                                this.$message.success('成功');
+                                this.getData();
+                            } else {
+                                this.$message.error(res.data.error);
+                            }
+                        })
+                        .catch(e => {
+                            console.log(e);
+                        });
+                }
+            });
         },
     },
 };