feat:提交加小费

src/api/order.js

@@ -69,3 +69,8 @@ export const trackOrder = ( params ) => {
 export const detailOrder = ( params ) => {
   return get('app/order/detailNew', params);
 }
+
+// 加小费
+export const tips = ( params ) => {
+  return post('app/order/tips', params);
+}

src/components/orderComponents/orderList.vue

@@ -356,8 +356,57 @@
       </div>
     </el-dialog>
     <!-- 加小费弹出层 -->
-    <el-dialog width="580px" center title="取消原因" destroy-on-close :visible.sync="addTipStatus">
-
+    <el-dialog width="580px" center title="加小费" destroy-on-close :visible.sync="addTipStatus">
+      <div>
+        <div class="tip-title">小费金额</div>
+        <div class="tip-list">
+          <div class="tip-item" @click.stop="tipActive = index" :class="tipActive == index ? 'tip-active' : ''" v-for="(item, index) in tipList" :key="index">{{ item }}元</div>
+          <div class="tip-item" @click.stop="tipActive = -1" :class="tipActive == -1 ? 'tip-active' : ''">
+            <el-input placeholder="其他金额" v-model="tipAmount"/>
+          </div>
+        </div>
+        <!-- 支付方式 -->
+        <div class="choose-self" style="border: none;">
+          <div class="self-top">
+            <span>支付方式</span>
+          </div>
+          <div class="pay-list">
+            <div class="pay-item" @click.stop="payId = item.id" :class="payId == item.id ? 'pay-active' : '' " v-for="(item, index) in payList"
+              :key="index">
+              <img :src="item.icon" class="pay-icon" />
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="text-align: center;margin-top: 20px;">
+        <el-button @click.stop="addTipStatus = false">取消</el-button>
+        <el-button type="primary" class="submit-btn" @click.stop="richMoney(orderId)">确定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 支付二维码弹出层 -->
+    <el-dialog width="1000px" class="pay-dialog" :show-close="false" destroy-on-close :visible.sync="payModal">
+      <div class="pay-modal">
+        <div class="pay-top">{{ payId == 1 ? '支付宝' : '微信' }}支付</div>
+      </div>
+      <div class="code-content">
+        <div class="code-top">
+          <div class="code-left">
+            <div class="l-title">支付金额</div>
+            <!-- <div class="l-price">预估￥8.80，优惠券抵扣￥2.00</div> -->
+          </div>
+          <div class="code-right">￥{{ payAmount }}</div>
+        </div>
+        <div class="code-bottom">
+          <!-- <img src="../../../static/image/alipay.png" class="code-img" /> -->
+          <div id="qrcode" class="code-img"></div>
+          <div class="des">请使用手机打开{{ payId == 1 ? '支付宝' : '微信' }}扫描二维码完成支付</div>
+          <div class="guo-qi" v-if="false">
+            <span>点击刷新</span>
+            重新获取二维码
+          </div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -365,6 +414,7 @@
 <script>
 import moment from 'moment';
 import bus from '../../common/bus.js';
+import QRCode from "qrcodejs2"
 import orderMap from './orderAMap.vue';
 import OrderDetail from './orderDetail.vue';
 import orderTrack from './orderTrack.vue';
@@ -379,13 +429,37 @@ import {
   setDeliveryTime,
   cancelTimingPublish,
   cancelOrder,
+  tips,
+  getPayResult
 } from '../../api/order.js';
 export default {
   name: 'OrderList',
   data() {
     return {
+      payAmount: 0,
+      payModal: false, // 二维码弹出层
+      payId: 1,
+      payList: [{
+          id: 1,
+          name: '支付宝支付',
+          icon: '../../../static/image/alipay.png'
+        },
+        {
+          id: 2,
+          name: '微信支付',
+          icon: '../../../static/image/we-chat.png'
+        },
+        {
+          id: 4,
+          name: '余额支付',
+          icon: '../../../static/image/yu-e.png'
+        },
+      ],
+      tipActive: 0,
+      tipList: [1, 2, 5, 10, 15, 20, 30, 50],
+      tipAmount: '', // 小费金额
       addTipTimer: null, // 加小费刷新支付计时器
-      addTipStatus: true, // 加小费弹出层
+      addTipStatus: false, // 加小费弹出层
       reasonIndex: null, // 取消原因索引
       chooseReason: '', // 选择取消原因
       cancelReason: '', // 输入取消原因
@@ -435,6 +509,16 @@ export default {
         this.orderInfo = newVal[0];
       }
     },
+    addTipStatus(val) {
+      if ( !val ) {
+        clearTimeout( this.addTipTimer );
+        this.addTipTimer = null;
+      }
+    }
+  },
+  destroyed() {
+    clearTimeout( this.addTipTimer );
+    this.addTipTimer = null;
   },
   components: {
     sendOrderPopup,
@@ -446,8 +530,93 @@ export default {
     ...mapState(['userInfo']),
   },
   methods: {
+    getPayInfo( orderSn ) {
+      const _ = this;
+      let params = {
+        orderSn,
+        payType: this.payId
+      }
+      _.addTipTimer = setTimeout(() => {
+        getPayResult( params ).then( res => {
+          console.log(res, '查询支付结果');
+          if ( res.data === 'success' ) {
+            clearTimeout( _.addTipTimer );
+            _.payModal = false;
+            _.addTipStatus = false;
+            bus.$emit('refreshData')
+          }else {
+            _.getPayInfo( orderSn );
+          }
+        } )
+      }, 3000)
+    },
+    //  生成二维码
+    qrcode(link) {
+      let that = this;
+      let qrcode = new QRCode('qrcode', {
+        width: 260,
+        height: 260, // 高度
+        text: link, // 二维码内容
+        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+        // background: '#f0f',   // 背景色
+        // foreground: '#ff0'    // 前景色
+      })
+    },
+    richMoney() {
+    	let reg = /(^[1-9]\d*$)/g;
+    	if ( this.tipActive == -1 ) {
+    		if ( !reg.test(this.tipAmount * 1) ) {
+    			return this.$message({
+    				message: '请选择或输入正确的整数金额',
+    				type: 'error'
+    			})
+    		}
+    	}
+      var idObject = document.getElementById('qrcode');
+       if (idObject != null) {
+        idObject.innerHTML = '';
+       }
+      let params = {
+        orderId: this.orderId,
+        tipAmount: this.tipActive == -1 ? this.tipAmount : this.tipList[this.tipActive],
+        paymentType: this.payId,
+        createType: 1
+      }
+      tips( params ).then( res => {
+        if ( res.code == 200 ) {
+          if ( this.payId == 4 ) {
+            // 余额支付
+            this.$message({
+              message: '小费添加成功',
+              type: 'success'
+            })
+            bus.$emit('refreshData');
+            this.addTipStatus = false;
+            this.tipAmount = '';
+            this.payModal = false;
+            clearTimeout( this.addTipTimer );
+            this.addTipTimer = null;
+          }else if ( this.payId == 1 || this.payId == 2 ) {
+            // 支付宝、微信支付
+            this.payAmount = res.data.amount || 0;
+            this.orderSn = res.data.orderSn;
+            this.payModal = true;
+            this.$nextTick(() => {
+              this.qrcode(res.data.data);
+            })
+            this.getPayInfo(res.data.orderSn)
+          }
+        }else {
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        }
+      } )
+    },
     addTip(orderId) {
-
+      this.orderId = orderId;
+      this.addTipStatus = true;
     },
     changeReason(item) {
       this.reasonIndex = item.id;
@@ -730,6 +899,202 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
+  .pay-dialog {
+    /deep/ .el-dialog__header {
+      padding: 0;
+    }
+
+    /deep/ .el-dialog__body {
+      padding: 0px !important;
+    }
+  }
+  .pay-modal {
+    // border-radius: 16px;
+    overflow: hidden;
+
+    .pay-top {
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FFFFFF;
+      background: url(../../../static/image/pay-bg.png) no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+  .code-content {
+    width: 640px;
+    margin: 40px auto 0;
+    padding-bottom: 100px;
+    box-sizing: border-box;
+
+    .code-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 20px;
+
+      .code-left {
+        .l-title {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #0D1E40;
+        }
+
+        .l-price {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #9EA7B7;
+        }
+      }
+
+      .code-right {
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #F74141;
+      }
+    }
+
+    .code-bottom {
+      text-align: center;
+      padding-top: 30px;
+
+      .code-img {
+        width: 260px;
+        height: 260px;
+        margin: 0 auto;
+      }
+
+      .des {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #0D1E40;
+        margin: 10px 0 20px 0;
+      }
+
+      .guo-qi {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #9EA7B7;
+
+        span {
+          color: #175199;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .choose-self {
+    padding-top: 25px;
+    border-bottom: 1px solid #eee;
+
+    .self-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 11px;
+
+      .choose-self-icon {
+        width: 4px;
+        height: 15px;
+        margin-right: 10px;
+      }
+
+      span {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #92959B;
+      }
+    }
+    .pay-list {
+      display: flex;
+      align-items: center;
+      padding-top: 10px;
+
+      .pay-item {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+        height: 51px;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        cursor: pointer;
+
+        &.pay-active {
+          border-color: #FC7200;
+        }
+
+        &:nth-child(2) {
+          margin: 0 13px;
+        }
+
+        span {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #222222;
+        }
+
+        .pay-icon {
+          margin-right: 6px;
+        }
+
+        .pay-icon:nth-child(1) {
+          width: 25px;
+          height: 24px;
+        }
+      }
+    }
+  }
+  .tip-title {
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #92959B;
+    padding-bottom: 13px;
+  }
+  .tip-list {
+    display: flex;
+    flex-wrap: wrap;
+    .tip-item {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      width: 93px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 13px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #222222;
+      box-sizing: border-box;
+      background: #F4F4F4;
+      cursor: pointer;
+      border-radius: 2px;
+      border: 1px solid transparent;
+      /deep/ .el-input__inner {
+        border: none;
+        height: 32px !important;
+        background-color: #f4f4f4;
+        font-size: 13px;
+        padding: 0 15px !important;
+      }
+    }
+    .tip-active {
+      border-color: #FC7200;
+      color: #FC7200;
+    }
+  }
 .text-area {
   /deep/ .el-textarea__inner {
     background-color: #f2f2f2;

src/components/orderComponents/sendOrderPopup.vue

@@ -308,7 +308,12 @@
         const _ = this;
         let params = {
           orderSn: data.orderSn,
-          payType: 0
+          payType: this.payId
+        }
+        if ( params.payType == 4 ) {
+          clearTimeout( this.payTimer );
+          this.payTimer = null;
+          return
         }
         _.payTimer = setTimeout(() => {
           getPayResult( params ).then( res => {