feat:添加moment.js依赖，定时发单

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.21.4",
     "element-ui": "^2.15.5",
+    "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "qrcodejs2": "0.0.2",
     "qs": "^6.10.1",

src/api/order.js

@@ -45,3 +45,18 @@ export const ignoreOrder = ( params ) => {
 export const rollOrder = ( params ) => {
   return post('app/order/rollOrder', params);
 }
+
+// 定时发单
+export const setDeliveryTime = ( params ) => {
+  return get('app/order/setDeliveryTime', params);
+}
+
+// 取消定时发单
+export const cancelTimingPublish = ( params ) => {
+  return post('app/order/cancelTimingPublish', params);
+}
+
+// 取消订单
+export const cancelOrder = ( params ) => {
+  return post('app/order/cancel', params);
+}

src/components/Home.vue

@@ -15,7 +15,7 @@
         <div class="header_serch">
           <div class="search_inp">
             <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
-            <div class="btn"><i class="el-icon-search"></i></div>
+            <div class="btn" @click.stop="search"><i class="el-icon-search"></i></div>
           </div>
           <!-- 1.0.0版本暂不开发该功能 -->
           <!-- <div class="Manual">手动发单</div> -->
@@ -130,6 +130,11 @@
       console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00", 2.5))
     },
     methods: {
+      search() {
+        this.params.pageNum = 1;
+        this.orderList = [];
+        this.getOrder();
+      },
       handleSizeChange(val) {
         this.params.pageNum = 1;
         this.params.pageSize = val;

src/components/orderComponents/orderList.vue

@@ -60,6 +60,7 @@
                 </div>
                 <div class="order_item_header_r">
                   <!-- <span class="header_r">已发单1分钟</span> -->
+                  <el-button size='small' class="btn" @click.stop="settingTime(item)">定时发单</el-button>
                   <el-button size='small' class="btn" @click.stop="deleteItem(item)">发起配送</el-button>
                   <el-button size='small' class="btn" @click.stop="itemAddRemark(item.id, item)">添加备注</el-button>
                   <el-button size='small' class="btn" @click.stop="iGnoreOrder(item.id)">忽略订单</el-button>
@@ -101,7 +102,9 @@
                 </div>
                 <div class="order_item_header_r">
                   <span class="header_r">已发单{{item.takeTimeTxt}}</span>
-                  <el-button size='small' class="btn" @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
+                  <el-button size='small' @click.stop="cancelOrder(item.id)">取消订单</el-button>
+                  <el-button size='small' @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
+                  <el-button size='small' class="btn" @click.stop="addTip(item.id)">加&nbsp;小&nbsp;费</el-button>
                 </div>
 
               </div>
@@ -139,7 +142,8 @@
                   <div class="sign_d" v-if="item.exceptTime">预约 {{item.timeTxt}}送达</div>
                 </div>
                 <div class="order_item_header_r">
-                  <span class="header_r">预计{{item.takeTimeTxt}}取件</span>
+                  <span class="header_r">预计{{item.takeTimeTxt}}取件</span>
+                  <el-button size='small' @click.stop="cancelOrder(item.id)">取消订单</el-button>
                   <el-button size='small' class="btn" @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
                 </div>
 
@@ -249,7 +253,7 @@
               </div>
             </div>
           </div>
-          <!-- 异常单 -->
+          <!-- 取消单 -->
           <div v-if="tabNum==6">
             <div class="order_item" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
@@ -347,11 +351,40 @@
         <el-button @click.stop="ignoreStatus = false">取消</el-button>
         <el-button type="primary" class="submit-btn" @click.stop="commitIGnore(orderId)">确定</el-button>
       </div>
+    </el-dialog>
+    <!-- 设置预约发单时间弹出层 -->
+    <el-dialog width="580px" center title="设置预约时间" destroy-on-close :visible.sync="settingTimeStatus">
+      <div>
+        <span>提前发起配送时间：</span>
+        <el-select size="small" style="width: 80px;;" v-model="timeValue" placeholder="请选择">
+          <el-option v-for="(item, index) in timeList" :key="index" :label="item" :value="item"></el-option>
+        </el-select>
+        <span>小时</span>
+      </div>
+      <p style="color: #F74141;">提示：设置后系统将根据您设置的提前时间自动发单。</p>
+      <div style="text-align: center;margin-top: 20px;">
+        <el-button @click.stop="settingTimeStatus = false">取消</el-button>
+        <el-button type="primary" class="submit-btn" @click.stop="commitTimeValue(orderId)">确定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 取消订单弹出层 -->
+    <el-dialog width="680px" center title="取消原因" destroy-on-close :visible.sync="cancelStatus">
+      <div class="cancel-list">
+        <div class="item" @click.stop="changeReason(item)" :class="[(index + 1 ) % 3 == 0 ? 'no-margin': '', item.id == reasonIndex ? 'active' : '']" v-for="(item, index) in cancelList" :key="index">{{ item.name }}</div>
+      </div>
+      <div class="text-area">
+        <el-input show-word-limit :rows="4" type="textarea" resize="none" :maxlength="50" placeholder="请输入其他原因" v-model="cancelReason"></el-input>
+      </div>
+      <div style="text-align: center;margin-top: 20px;">
+        <el-button @click.stop="cancelStatus = false">取消</el-button>
+        <el-button type="primary" class="submit-btn" @click.stop="commitCancelReason(orderId)">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+  import moment from 'moment';
   import bus from '../../common/bus.js';
   import orderMap from './orderAMap.vue';
   import OrderDetail from './orderDetail.vue';
@@ -365,12 +398,32 @@
     waimaiprinter,
     addRemark,
     ignoreOrder,
-    rollOrder
+    rollOrder,
+    setDeliveryTime,
+    cancelTimingPublish,
+    cancelOrder
   } from '../../api/order.js';
   export default {
     name: 'OrderList',
     data() {
       return {
+        reasonIndex: null,
+        chooseReason: '',
+        cancelReason: '',
+        cancelList: [
+          { id: 1, name: '无骑手接单' },
+          { id: 2, name: '骑手接单后不取货' },
+          { id: 3, name: '骑手电车装不下' },
+          { id: 4, name: '计划有变，无需配送' },
+          { id: 5, name: '骑手服务态度恶劣' },
+          { id: 6, name: '骑手要求取消订单' },
+          { id: 7, name: '信息填写错误' },
+          { id: 8, name: '其他原因' }
+        ],
+        timeList: [ 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
+        timeValue: 1,
+        cancelStatus: false,
+        settingTimeStatus: false,
         needTrack: true,
         orderDetailStutus: 0,
         isLoading: false,
@@ -397,6 +450,102 @@
     },
     mounted() {},
     methods: {
+      changeReason(item) {
+        this.reasonIndex = item.id;
+        this.chooseReason = item.name;
+      },
+      // 取消订单
+      commitCancelReason() {
+        if ( !this.reasonIndex ) {
+          return this.$message({
+            message: '请选择取消原因',
+            type: 'error'
+          })
+        }
+        if ( this.reasonIndex == 8 && !this.cancelReason.trim() ) {
+          return this.$message({
+            message: '请填写其他取消原因',
+            type: 'error'
+          })
+        }
+        cancelOrder({ orderId: this.orderId, cancelReason: this.reasonIndex != 8 ? this.chooseReason : this.cancelReason }).then( res => {
+          this.cancelStatus = false;
+          if ( res.code == 200 ) {
+            this.$message({
+              message: '取消订单成功',
+              type: 'success'
+            })
+            this.orderId = '';
+            this.cancelReason = '';
+            this.chooseReason = '';
+            this.reasonIndex = null;
+            bus.$emit('refreshData')
+          }else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        } )
+      },
+      cancalSettingTime() {
+        cancelTimingPublish({ orderId: this.item.orderId }).then( res => {
+          this.settingTimeStatus = false;
+          if ( res.code == 200 ) {
+            this.$message({
+              message: '取消定时发单成功',
+              type: 'success'
+            })
+            this.item = {}
+            bus.$emit('refreshData')
+          }else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        } )
+      },
+      commitTimeValue() {
+        let timestamp = (new Date()).valueOf();
+        let exT = moment(this.item.exceptTime).valueOf();
+        let nowTime = moment( exT ).subtract(this.timeValue, "hours").format("YYYY-MM-DD HH:mm:ss"); //当前时间的前1小时时间
+        let t1 = moment(nowTime).valueOf();// 时间戳
+        console.log(nowTime, this.item,'-------------')
+        if ( t1- timestamp < 0 ) {
+        	return this.$message({
+        		message: `设置发单时间超出当前时间`,
+        		type: 'error'
+        	})
+        }
+        setDeliveryTime({ orderId: this.item.id, delayTime: this.timeValue }).then( res => {
+          this.settingTimeStatus = false;
+          if ( res.code == 200 ) {
+            this.$message({
+              message: '设置定时发单成功',
+              type: 'success'
+            })
+            this.item = {}
+            bus.$emit('refreshData')
+          }else {
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            })
+          }
+        } )
+      },
+      // 定时发单
+      settingTime(item) {
+        this.item = item;
+        this.settingTimeStatus = true;
+        this.timeValue = item.delayTime ? item.delayTime : 1;
+      },
+      // 取消订单
+      cancelOrder(orderId) {
+        this.orderId = orderId;
+        this.cancelStatus = true;
+      },
       changeRadio(i) {
         this.radio = i;
       },
@@ -569,6 +718,40 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
+  .text-area {
+    /deep/ .el-textarea__inner {
+      background-color: #F2F2F2;
+      border: none;
+    }
+  }
+  .cancel-list {
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      color: #222;
+      width: 193px;
+      height: 50px;
+      line-height: 50px;
+      box-sizing: border-box;
+      text-align: center;
+      font-size: 16px;
+      border: 2px solid #D7D7D7;
+      border-radius: 6px;
+      margin-right: 20px;
+      margin-bottom: 20px;
+      cursor: pointer;
+      &:last-child {
+        color: #D7D7D7;
+      }
+      &.active {
+        color: #FC7101;
+        border-color: #FC7101;
+      }
+    }
+    .no-margin {
+      margin-right: 0 !important;
+    }
+  }
   .ignore-modal {
     .title {
       font-size: 14px;