feat:客户自助扫码开票

Signed-off-by: tangshizhe <2417024719@qq.com>

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "clipboard": "^2.0.11",
+    "clipboard-polyfill": "^4.0.1",
     "element-ui": "^2.15.10",
     "iview": "^3.5.1",
     "jquery": "^3.5.1",
@@ -26,9 +28,9 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.0.3",
     "babel-plugin-import": "^1.13.5",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^6.2.2",
     "html2canvas": "^1.3.2",

src/components/Dialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    class="custom-dialog"
+    :custom-class="customClass"
+    v-bind="$props"
+    :show-close="showClose"
+    :visible="visible"
+    @update:visible="update"
+    @open="$emit('open')"
+    @opened="$emit('opened')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <slot name="default"></slot>
+    <span slot="footer" v-if="showFooter" class="dialog-footer">
+      <slot name="footer">
+        <button class="action-button cancel" @click="onClickCancel">取消</button>
+        <button class="action-button confirm"  :disabled="disabled" @click="onClickConfirm">确定</button>
+      </slot>
+    </span>
+    </el-dialog>
+</template>
+
+<script>
+import { Dialog, Button } from 'element-ui'
+
+export default {
+  name: 'CustomDialog',
+  components: {
+    [Dialog.name]: Dialog,
+    [Button.name]: Button
+  },
+  props: {
+    visible: Boolean,
+    showClose: Boolean,
+    showFooter: {
+      type: Boolean,
+      default () {
+        return true
+      }
+    },
+    top: String,
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '30%'
+    },
+    'show-close': {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    disabled: Boolean
+  },
+  methods: {
+    update (e) {
+      this.$emit('update:visible', e)
+    },
+    onClickCancel () {
+      this.$emit('cancel')
+    },
+    onClickConfirm () {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep {
+  .el-dialog {
+    border-radius: 8px;
+  }
+  .el-dialog__body {
+    color: #686868;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  .dialog-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .action-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 36px;
+    border-radius: 6px;
+    &.cancel {
+      border: 1px solid #e0e0e0;
+      background-color: #fff;
+      color: #686868;
+    }
+    &.confirm {
+      border: 1px solid #2ABED1;
+      background-color: #2ABED1;
+      color: #fff;
+      &:disabled{
+        opacity: 0.5;
+      }
+    }
+    &:not(:last-of-type) {
+      margin-right: 48px;
+    }
+  }
+}
+.text-center {
+  ::v-deep {
+    .el-dialog__body {
+      text-align: center;
+    }
+  }
+}
+</style>

src/plugins/request.js

@@ -41,6 +41,7 @@ export const requestSuccessHandle = function (vue, response, tipSuccess, tipErro
             if (response.status == 'error' && response.info == '未登录系统') {
                 window.location.href = '/'
             }
+            console.log(response)
             vue.$Notice.error({
                 title: '错误提示',
                 desc: response.info,

src/views/order/components/codeModel.vue

@@ -18,6 +18,13 @@
       <span><p>发票抬头：</p><i>{{codeDetail.invoice_type ? codeDetail.invoice_type : '--'}}</i></span>
       <span><p>抬头名称：</p><i>{{codeDetail.company_name ? codeDetail.company_name : '--'}}</i></span>
       <span><p>纳税人识别号：</p><i>{{codeDetail.taxpayer_identnum ? codeDetail.taxpayer_identnum : '--'}}</i></span>
+      <span><p>单位地址：</p><i>{{codeDetail.company_address? codeDetail.company_address : '--'}}</i></span>
+      <span><p>电话号码：</p><i>{{codeDetail.company_phone? codeDetail.company_phone : '--'}}</i></span>
+      <span><p>开户银行：</p><i>{{codeDetail.bank_name? codeDetail.bank_name : '--'}}</i></span>
+      <span><p>银行账号：</p><i>{{codeDetail.bank_account? codeDetail.bank_account : '--'}}</i></span>
+      <span><p>开票备注：</p><i>{{codeDetail.remark? codeDetail.remark : '--'}}</i></span>
+      <span><p>收件人：</p><i>{{codeDetail.recipient? codeDetail.recipient : '--'}}</i></span>
+      <span><p>收件地址：</p><i>{{codeDetail.delivery_address? codeDetail.delivery_address : '--'}}</i></span>
       <span><p>邮箱地址：</p><i>{{codeDetail.mail ? codeDetail.mail : '--'}}</i></span>
       <span><p>联系人电话：</p><i>{{codeDetail.phone ? codeDetail.phone : '--'}}</i></span>
       <span><p>发票附件：</p>
@@ -25,6 +32,9 @@
           <a :href="codeDetail?codeDetail.url:'*'" target="_blank">{{codeDetail.url?"点击查看":'--'}}</a>
         </i>
       </span>
+      <span><p>发票链接：</p><i>{{codeDetail.url ? codeDetail.url : '--'}}</i></span>
+      <span><p>快递公司：</p><i>顺丰快递</i></span>
+      <span><p>快递单号：</p><i>{{codeDetail.logistics_code? codeDetail.logistics_code : '--'}}</i></span>
       <span><p>备注：</p><i>{{codeDetail.remark ? codeDetail.remark : '--'}}</i></span>
       <span><p>创建人：</p><i>{{codeDetail.operator ? codeDetail.operator : '--'}}</i></span>
       <span><p>创建时间：</p><i>{{codeDetail.create_time ? codeDetail.create_time : '--'}}</i></span>

src/views/order/components/details.vue

@@ -544,6 +544,8 @@
                 v-if="returnMyReceivable &&(orDetails.applybill_status == '已开具'||(book.source == 'qmx'&&orDetails.orderStatus == -2)||(!book.source&&orDetails.orderStatus == 0)||orDetails.audit_status!==3)"
             >线下开发票</Button>
             <Button v-else-if="returnMyReceivable"  class="ping-btn" type="success" size="large" @click="pushInvo" >线下开发票</Button>
+            <Button v-if="returnMyReceivable && isShowCustom"  class="ping-btn" type="success" size="large" @click="scanCodeVote" >客户自助扫码开票</Button>
+            <Button v-else disabled class="ping-btn" type="success" size="large">客户自助扫码开票</Button>
             <Button
                 class="ping-btn"
                 type="success"
@@ -577,6 +579,15 @@
             :payMoney="orDetails.pay_money"
             :filterData="book"
         ></d-model>
+        <!-- 客户扫码自助开票 -->
+        <set-order-info
+          :show-content="2"
+          :show-dialog="showDialog"
+          :order-info="orDetails"
+          title="客户自助扫码开票"
+          @close="closeComDialog"
+          >
+        </set-order-info>
         <!-- 发票编号弹框 -->
         <code-model ref="codeRef" :codeDetail="codeDetail"></code-model>
         <!-- 批量回款弹框 -->
@@ -588,43 +599,85 @@
 </template>
 
 <script>
+import setOrderInfo from './setOrderInfo.vue'
 import dModel from './detailModel'
 import bCollect from './batchOrder.vue'
 import codeModel from './codeModel.vue'
-import dateSigle from '@/components/dateSigle'
+// import dateSigle from '@/components/dateSigle'
 import onlineOrderEdit from "./onlineOrderEdit.vue"
 import otherOrderEdit from "./otherOrderEdit.vue"
 import bigOrderEdit from "./bigOrderEdit.vue"
 import reviewRecord from './reviewRecord.vue'
 import { dateFormatter, addDate } from '@/assets/js/date.js'
+import { Input, Button } from 'element-ui'
 export default {
     props:{
         orderType: String
     },
     components: {
+        [Input.name]: Input,
+        [Button.name]: Button,
         dModel,
-        dateSigle,
+        // dateSigle,
+        setOrderInfo,
         bCollect,
         codeModel,
-        bCollect,
         onlineOrderEdit,
         otherOrderEdit,
         bigOrderEdit,
         reviewRecord
     },
+    data () {
+        return {
+            saleReadon: true,
+            phoneReadon: true,
+            isSales: false,
+            addDate8: false,
+            buyProvince: '',
+            bigPhone: '',
+            trueMoney: '',
+            contractData: [],
+            returnInfo: [],
+            returnRes: [],
+            refundRes: [],
+            orders: {},
+            codeDetail: [],
+            beginTime: '',
+            saleTime: '',
+            orDetails: {},
+            book: [],
+            strCourse: [],
+            l_starttime: '',
+            l_endtime: '',
+            vip_starttime: '',
+            vip_endtime: '',
+            serverData: [],
+            supplysData: [],
+            isDisable: false,
+            invoiceed: [],
+            uploadData: {
+                type: 'transferAccounts'
+            },
+            previousPage:'',
+            showDialog: false,
+            isShowCustom: false
+        }
+    },
     computed: {
-        courseDis:function() {
-            if (this.orDetails.course_status == 2) {
-                if (this.orDetails.order_status == '未支付') {
-                    return true
-                } else if (this.orDetails.order_status == 0) {
-                    return true
-                }
-            } else {
-                return false
-            }
+        courseDis () {
+          if (this.orDetails.course_status == 2) {
+              if (this.orDetails.order_status == '未支付') {
+                  return true
+              } else if (this.orDetails.order_status == 0) {
+                  return true
+              } else {
+                  return false
+              }
+          } else {
+              return false
+          }
         },
-        orderComp:function() {
+        orderComp () {
             if (this.orDetails.order_status == '1' || this.orDetails.order_status == '已支付') {
                 if (this.book.source !== 'qmx'&&this.orDetails.refund_status == null) {
                     return true
@@ -705,6 +758,20 @@ export default {
         this.ordered()
     },
     methods: {
+        // 判断客户是否可以自助扫码开票
+        isCanInvoice() {
+          this.$request('/order/orderInfo').data({ orderCode: this.orDetails.order_code }).success((res) => {
+            if (res.status === 'success') {
+              this.isShowCustom = true
+            }
+          }).error(() => {
+            this.isShowCustom = false
+          }).post()
+        },
+        // 关闭弹框
+        closeComDialog() {
+            this.showDialog = false
+        },
         localed(val) {
             return val.toLocaleString('zh', { style:'currency', currency:'CNY' })
         },
@@ -859,6 +926,9 @@ export default {
                     this.vip_endtime = this.orderObjectd(this.orDetails.vip_endtime)?' - ' + dateFormatter(this.orDetails.vip_endtime, 'yyyy.MM.dd'):'-'
                     this.trueMoney = this.localed((this.orDetails.pay_money - (this.orDetails.commission + this.orDetails.procedures_money))/100)
                 }
+                this.$nextTick(() => {
+                  this.isCanInvoice()
+                })
             }).get()
         },
         invoiceCode(item) {
@@ -875,6 +945,11 @@ export default {
         pushInvo() {
             this.$refs.backRef.iShow = true
         },
+        // 客户扫码自助开票
+        scanCodeVote() {
+            this.showDialog = true
+            // this.comDialogParams.price = this.orDetails.pay_money / 100
+        },
         backHandler() {
             this.$refs.backRef.backShow = true
         },
@@ -1096,44 +1171,9 @@ export default {
                 return 'color3'
             }
         }
-    },
-    data () {
-        return {
-            saleReadon: true,
-            phoneReadon: true,
-            isSales: false,
-            addDate8: false,
-            buyProvince: '',
-            bigPhone: '',
-            trueMoney: '',
-            contractData: [],
-            returnInfo: [],
-            returnRes: [],
-            refundRes: [],
-            orders: {},
-            codeDetail: [],
-            beginTime: '',
-            saleTime: '',
-            orDetails: [],
-            book: [],
-            strCourse: [],
-            l_starttime: '',
-            l_endtime: '',
-            vip_starttime: '',
-            vip_endtime: '',
-            serverData: [],
-            supplysData: [],
-            isDisable: false,
-            invoiceed: [],
-            uploadData: {
-                type: 'transferAccounts'
-            },
-            previousPage:''
-        }
     }
 }
 </script>
-
 <style lang="scss" scoped>
 .m-details {
     margin: 50px auto;
@@ -1261,7 +1301,7 @@ export default {
         justify-content: center;
         margin-top: 80px;
         button {
-            width: 110px;
+            // width: 110px;
             height: 40px;
         }
         .ping-btn {

src/views/order/components/setOrderInfo.vue

@@ -0,0 +1,542 @@
+import commonDialog from '@/components/Dialog.vue';
+<template>
+  <div class="set-order-info">
+    <!-- 客户扫码自助开票 -->
+    <common-dialog
+      class="com-dialog-box"
+      :visible="showDialog"
+      :show-footer="false"
+      :show-close="true"
+      @close="$emit('close')">
+      <div class="com-dialog-main">
+        <div class="com-dialog-title">
+          <h2>{{ title }}</h2>
+          <p v-if="showContent !== 3">将二维码发送给客户，引导客户微信扫码开票</p>
+        </div>
+        <div class="com-dialog-content" v-if="showContent === 1">
+          <el-form :rules="rulesOrder" :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="order-dynamic">
+            <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key">
+              <el-form-item
+                :prop="'domains.' + index + '.code'"
+                :label="'订单编号' + (index + 1)"
+              >
+                <el-input placeholder="请输入订单编号" v-model="domain.code"></el-input>
+                <el-button class="delete-btn" v-if="index!== 0" @click.prevent="removeDomain(domain)">删除</el-button>
+              </el-form-item>
+              <el-form-item
+                :label="'开票金额' + (index + 1)"
+                :prop="'domains.' + index + '.price'"
+              >
+                <el-input placeholder="请输入开票金额" v-model.number="domain.price"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button @click="addDomain">+添加订单</el-button>
+            </el-form-item>
+            <div class="price-total">开票金额合计：{{ totalPrice }}元</div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('dynamicValidateForm')">下一步</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="com-dialog-content" v-if="showContent === 2">
+          <div class="com-dialog-content-item">
+            <div class="com-dialog-price">
+              <label>开票金额（元）：</label>
+              <el-input
+                type="number"
+                v-model="comDialogParams.price"
+                placeholder="请输入金额"
+                style="width: 200px;margin-right: 10px"
+              ></el-input>
+            </div>
+            <div class="qr-code-item">
+              <img ref="qrCodeImage" :src="QrCodeImage" alt="">
+            </div>
+            <div class="com-dialog-btn">
+              <el-button v-if="showEditPrice" @click="editPrice">修改开票金额</el-button>
+              <el-button @click="copyQrCode">复制二维码</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="com-dialog-content" v-if="showContent === 3">
+          <el-form :model="rulesLogisticsForm" :rules="rulesLogistics" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="订单编号：" prop="codes">
+              <el-input v-model="rulesLogisticsForm.codes"></el-input>
+            </el-form-item>
+            <div class="more-order-tip">如为多个订单合并开票，多个订单编号逗号隔开</div>
+            <el-form-item label="发票链接：" prop="invoice" v-if="showItem === 1">
+              <el-input placeholder="电子发票，请输入发票链接" v-model="rulesLogisticsForm.invoice"></el-input>
+            </el-form-item>
+            <el-form-item label="快递单号：" prop="track" v-if="showItem === 2">
+              <el-input placeholder="纸质发票，请输入快递单号" v-model="rulesLogisticsForm.track"></el-input>
+            </el-form-item>
+            <el-form-item class="form-group">
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+              <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </common-dialog>
+  </div>
+</template>
+
+<script>
+import commonDialog from '@/components/Dialog.vue';
+import { Form } from 'element-ui';
+import 'clipboard-polyfill';
+export default {
+  name: 'set-order-info',
+  components: {
+    commonDialog,
+    [Form.name]: Form
+  },
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '客户自助扫码开票'
+    },
+    showContent: {
+      type: Number,
+      default: 1
+    },
+    orderInfo: {
+      type: Object,
+      default () {
+        return {
+          order_code: '', // 订单编号
+          pay_money: 0 // 实付金额
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      dynamicValidateForm: {
+        domains: [{
+          code: '',
+          price: '',
+          amount: ''
+        }]
+      },
+      rulesOrder: {
+        domains: [{
+          code: [
+            { required: true, validator: this.validCode, trigger: 'blur' }
+          ],
+          price: [
+            { required: true, validator: this.validPrice, trigger: 'blur' }
+          ]
+        }]
+      },
+      comDialogParams: {
+        show: false,
+        showFooter: false,
+        showClose: true,
+        price: ''
+      },
+      showEditPrice: false,
+      rulesLogisticsForm: {
+        codes: '',
+        invoice: '',
+        track: ''
+      },
+      rulesLogistics: {
+        codes: [
+          { required: true, validator: this.validLogistics, trigger: 'blur' },
+        ],
+        invoice: [
+          { required: true, message: '发票链接必填', trigger: 'blur' },
+        ],
+        track: [
+          { required: true, message: '快递单号必填', trigger: 'blur' },
+        ],
+      },
+      QrCodeImage: '',
+      showItem: 0
+    }
+  },
+  watch: {
+    showDialog (val) {
+      if (val) {
+        if (this.showContent === 2) {
+          this.comDialogParams.price = parseFloat(this.orderInfo.pay_money) / 100
+          this.getQRCode()
+        }
+      }
+    },
+    'comDialogParams.price': {
+      handler (val) {
+        if(!this.orderInfo.pay_money) return
+        const pay = parseFloat(this.orderInfo.pay_money) / 100
+        val = parseFloat(val)
+        if (val < 0) {
+          this.comDialogParams.price = 0
+        } else if (val > pay) {
+          this.comDialogParams.price = pay
+          this.$message({
+            message: `0＜开票金额≤${pay}`,
+            type: 'error',
+            duration: 1500
+          })
+        } else {
+          this.getQRCode()
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 计算开票总价
+    totalPrice() {
+      let total = 0
+      this.dynamicValidateForm.domains.forEach(item => {
+        if (item.price) {
+          total += parseFloat(item.price)
+        }
+      })
+      return total
+    }
+  },
+  methods: {
+    // content === 3
+    // 校验订单编号
+    validLogistics (rule, value, callback) {
+      if (value === '') {
+        callback(new Error('请输入订单编号'))
+      } else {
+        this.checkInvoiceQuery(value).then((res) => {
+          if (res.status === 'success') {
+            if(res.data.invoice_variety.indexOf('电子') > -1) {
+              this.showItem = 1
+            } else if(res.data.invoice_variety.indexOf('纸质') > -1) {
+              this.showItem = 2
+            } else {
+              this.showItem = 0
+            }
+            callback()
+          } else {
+            callback(new Error(res.info))
+          }
+        })
+      }
+    },
+    checkInvoiceQuery (codes) {
+      return new Promise((resolve) => {
+        this.$request('/order/invoiceQuery').data({ orderCodes: codes }).success((res) => {
+          resolve(res)
+        }).error((err) => {
+          resolve(err)
+        }).post()
+      })
+    },
+    // 录入物流信息
+    submitFormExpress(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetFormExpress(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // content === 2
+    // 修改开票金额
+    editPrice () {
+      this.showContent = 1
+    },
+    getQRCode (data) {
+      let params = { ['invoiceMoney' + '[' + this.orderInfo.order_code + ']']: this.orderInfo.pay_money }
+      if(data) {
+        // 多个订单开票
+        data = data.join(',')
+        params = {
+          ['invoiceMoney' + '['+ data +']']: this.comDialogParams.price
+        }
+      }
+      this.$request('/order/createQRCode').data(params).success((res) => {
+          if (res.status === 'success') {
+            this.QrCodeImage = res.data.url
+          }
+      }).post()
+    },
+    // 复制二维码
+    copyQrCode () {
+      const imageElement = this.$refs.qrCodeImage;
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const image = new Image();
+
+      image.crossOrigin = 'Anonymous';
+      image.src = imageElement.src;
+
+      image.onload = () => {
+        canvas.width = image.width;
+        canvas.height = image.height;
+        context.drawImage(image, 0, 0);
+
+        canvas.toBlob((blob) => {
+          navigator.clipboard.write([
+            new ClipboardItem({ 'image/png': blob })
+          ])
+          .then(() => {
+            this.$message({
+              message: '二维码复制成功',
+              type:'success',
+              duration: 1500
+            })
+            this.$emit('close')
+          })
+          .catch((error) => {
+            console.error('二维码复制失败', error);
+            this.$message({
+              message: '二维码复制失败',
+              type: 'error',
+              duration: 1500
+            })
+          });
+        }, 'image/png');
+      };
+    },
+    // 保存发票信息
+    saveInvoiceInfo () {
+      const params = {
+        orderCodes: this.rulesLogisticsForm.codes
+      }
+      if (this.showItem === 1) {
+        params.url = this.rulesLogisticsForm.invoice
+      } else if (this.showItem === 2) {
+        params.logisticsCode = this.rulesLogisticsForm.track
+      }
+      this.$request('/order/savaInvoice').data(params).success(() => {
+        this.resetForm('ruleForm')
+      }).post()
+    },
+    // content === 1
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (formName === 'ruleForm') {
+            this.saveInvoiceInfo()
+          } else if (formName === 'dynamicValidateForm') {
+            this.showContent = 2
+            this.showEditPrice = true
+            this.comDialogParams.price = this.totalPrice
+            // 多个订单开票生成二维码
+            const codeArr = []
+            this.dynamicValidateForm.domains.forEach(item => {
+              codeArr.push(item.code)
+            })
+            this.getQRCode(codeArr)
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.showItem = 0
+      this.$emit('close')
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    validCode (rule, value, callback) {
+      const ruleArr = rule.field.split('.')
+      if (value === '') {
+        return callback(new Error('请输入订单编号'))
+      } else {
+        this.checkOrderCode(value).then(res => {
+          console.log(res)
+          if(res.status === 'success') {
+            this.dynamicValidateForm.domains[ruleArr[1]].price = parseFloat(res.data.money) / 100
+            this.dynamicValidateForm.domains[ruleArr[1]].amount = parseFloat(res.data.money) / 100
+            callback()
+          } else {
+            callback(new Error(res.info))
+          }
+        })
+      }
+    },
+    validPrice (rule, value, callback) {
+      const ruleArr = rule.field.split('.')
+      const code = this.dynamicValidateForm.domains[ruleArr[1]].code
+      const amount = this.dynamicValidateForm.domains[ruleArr[1]].amount
+      if (!code) {
+        return callback(new Error('请先输入订单编号'))
+      } else if (value === '') {
+        return callback(new Error('请输入开票金额'))
+      } else if (value < 0 || value > amount) {
+        this.dynamicValidateForm.domains[ruleArr[1]].price = amount
+        return callback(new Error('0＜开票金额≤' + amount))
+      } else {
+        callback()
+      }
+    },
+    checkOrderCode (code) {
+      return new Promise((resolve) => {
+        this.$request('/order/orderInfo').data({ orderCode: code }).success((res) => {
+          resolve(res)
+        }).error((err) => {
+          resolve(err)
+        }).post()
+      })
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        code: '',
+        price: '',
+        amount: ''
+      });
+      this.rulesOrder.domains.push({
+        code: [
+          { required: true, validator: this.validCode, trigger: 'blur' }
+        ],
+        price: [
+          { required: true, validator: this.validPrice, trigger: ['blur', 'change'] }
+        ]
+      })
+    },
+  }
+}
+</script>
+<style>
+/* 隐藏Element UI的el-input中数字输入框的上下按钮 */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep {
+  .el-dialog{
+    width: 24%!important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+::v-deep {
+  .el-dialog{
+    width: 28%!important;
+  }
+}
+
+.com-dialog-box{
+  .com-dialog-main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: -20px;
+  }
+  .com-dialog-content{
+    width: 100%;
+    margin-top: 20px;
+    max-height: 500px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    .order-dynamic{
+      margin-left: 68px;
+      width: 350px;
+    }
+    /* WebKit浏览器 */
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+    .com-dialog-content-item{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      ::v-deep{
+        .el-input__inner{
+          height: 32px;
+        }
+      }
+    }
+    .more-order-tip{
+      padding-left: 100px;
+      margin: -5px 0 10px;
+    }
+    .form-group{
+      margin-top: 20px;
+      ::v-deep{
+        .el-form-item__content{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 0!important;
+        }
+      }
+      .el-button{
+        width: 120px;
+        height: 40px;
+      }
+      .el-button+.el-button{
+        margin-left: 20px;
+      }
+    }
+  }
+  .com-dialog-title{
+    text-align: center;
+    h2 {
+      font-size: 22px;
+      color: #1D1D1D;
+      text-align: center;
+    }
+    p{
+      margin-top: 10px;
+      font-size: 14px;
+      color: #333;
+    }
+  }
+
+  .qr-code-item{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    width: 100%;
+    height: 120px;
+    img{
+      width: 120px;
+      height: 100%;
+    }
+  }
+  .com-dialog-btn{
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    width: 100%;
+    button {
+      width: 120px;
+      height: 40px;
+    }
+  }
+  .delete-btn{
+    position: absolute;
+    right: -84px;
+  }
+  .price-total{
+    margin-bottom: 22px;
+    padding-left: 25px;
+  }
+}
+</style>

src/views/order/orderList.vue

@@ -21,6 +21,8 @@
                     <Icon :class="{'arrowTransform': !flag, 'arrowTransformReturn': flag}" type="ios-arrow-down"/>
                 </span>
           <div class="right-msg">
+            <Button type="primary" @click="scanCodeVote(1)" class="create-order">客户自助扫码合并开票</Button>
+            <Button type="primary" @click="scanCodeVote(3)" class="create-order">录入线下发票链接/物流信息</Button>
             <Button type="primary" @click="importInvoiced" class="create-order">导入发票</Button>
             <Button type="primary" @click="batchCollected" class="create-order">批量回款</Button>
             <Button type="primary" @click="otherCreated" class="create-order">创建其他订单</Button>
@@ -31,6 +33,7 @@
         </div>
         <Divider style="margin:15px 0"/>
       </template>
+      <set-order-info :title="setDialogStatus.setTitle" :show-content="setDialogStatus.showContent" @close="closeComDialog" :show-dialog="setDialogStatus.showDialog"></set-order-info>
       <template slot="filterContent" v-if="flag">
         <Select placeholder="产品类型" clearable v-model="filter.productType" @on-change="proChge"
                 style="width:100px;margin:0 10px 10px 0">
@@ -188,6 +191,7 @@ import cModel from './components/bigOrder.vue'
 import iInvoice from './components/uploadInvoice.vue'
 import vDate from '@/components/dateSection'
 import vCascader from '@/components/cascader'
+import setOrderInfo from './components/setOrderInfo.vue'
 
 export default {
   components: {
@@ -196,235 +200,8 @@ export default {
     cModel,
     iInvoice,
     vDate,
-    vCascader
-  },
-  watch: {
-    'filter.productType': {
-      handler(newVal) {
-        if (newVal == '0' || newVal == '18') {
-          this.select1 = true
-          this.select2 = false
-          this.select3 = false
-          this.select4 = false
-          this.select5 = false
-          this.filter.dataType = ''
-          this.filter.invoiceType = ''
-          this.filter.level = ''
-        } else if (newVal == '2') {
-          this.select2 = true
-          this.select1 = false
-          this.select3 = false
-          this.select4 = false
-          this.select5 = false
-          this.filter.payType = ''
-          this.filter.invoiceType = ''
-          this.filter.level = ''
-        } else if (newVal == '4') {
-          this.select3 = true
-          this.select1 = false
-          this.select2 = false
-          this.select4 = false
-          this.select5 = false
-          this.filter.dataType = ''
-          this.filter.payType = ''
-          this.filter.level = ''
-        } else if (newVal == '6') {
-          this.select4 = true
-          this.select1 = false
-          this.select2 = false
-          this.select3 = false
-          this.select5 = false
-          this.filter.dataType = ''
-          this.filter.payType = ''
-        } else if (newVal == '12') {
-          this.select5 = true
-          this.select4 = false
-          this.select1 = false
-          this.select2 = false
-          this.select3 = false
-          this.filter.dataType = ''
-          this.filter.payType = ''
-        } else {
-          this.select1 = false
-          this.select2 = false
-          this.select3 = false
-          this.select4 = false
-          this.select5 = false
-          this.filter.payType = ''
-          this.filter.dataType = ''
-          this.filter.invoiceType = ''
-          this.filter.level = ''
-        }
-      },
-      deep: true
-    }
-  },
-  methods: {
-    localed(val) {
-      return val.toLocaleString('zh', {style: 'currency', currency: 'CNY'})
-    },
-    orderCreated() {
-      this.$refs.secModel.bShow = true
-    },
-    otherCreated() {
-      this.$refs.otherModel.oShow = true
-    },
-    screened() {
-      this.flag = !this.flag
-      if (this.flag) {
-        this.filterType = 1
-        this.filterReset = 1
-      } else {
-        this.filterType = 0
-        this.filterReset = 0
-      }
-    },
-    load(val) {
-      this.loading = val
-    },
-    emptyFilter(val) {
-      if (val) {
-        this.$refs.dateRef.initialized()
-        this.select1 = false
-        this.select2 = false
-        this.select3 = false
-        this.select4 = false
-        this.select5 = false
-        this.selectName = []
-        Object.keys(this.filter).forEach(key => {
-          this.filter[key] = ''
-        })
-        this.$refs.casRef.values = []
-      }
-    },
-    proChge(val) {
-      if (val == '0') {
-        this.payCont = this.payCont1
-      } else if (val == '18') {
-        this.payCont = this.payCont2
-      }
-    },
-    rowClick(row) {
-      const sources = JSON.parse(row.filter).source ? JSON.parse(row.filter).source : ''
-      const news = this.$router.resolve({
-        path: '/order/orderList/orderDetail',
-        query: {id: row.id, proType: row.product_type, type: sources}
-      })
-      window.open(news.href, '_blank')
-    },
-    selChange(val) {
-      const arr1 = [], arr2 = []
-      val.forEach(v => {
-        if (v.company_name || v.id) {
-          arr1.push(v.company_name)
-          arr2.push(v)
-        }
-      })
-      this.selectName = arr1
-      this.selectData = arr2
-    },
-    pageChange() {
-      this.selectName = []
-    },
-    isAllEqual(array) {
-      if (array.length > 0) {
-        return !array.some(function (value, index) {
-          return value !== array[0]
-        });
-      } else {
-        return true
-      }
-    },
-    importInvoiced() {
-      this.$refs.importModel.importShow = true
-    },
-    batchCollected() {
-      if (this.selectName.length == 0) {
-        this.$Notice.warning({
-          title: '警告提示',
-          desc: "至少选择一项！",
-          duration: 5
-        })
-      } else {
-        let bool = this.isAllEqual(this.selectName)
-        if (bool) {
-          this.$refs.batchModel.asdShow = true
-        } else {
-          this.$Notice.warning({
-            title: '警告提示',
-            desc: "只能批量回款一个公司下的多笔订单，建议筛选公司名称后再批量回款！",
-            duration: 5
-          })
-        }
-      }
-    },
-    onChange() {
-      this.selectName = []
-      this.reload()
-    },
-    levelChange(val) {
-      this.filter.orderType = val[0]
-      this.filter.salesSecondLevel = val[1]
-    },
-    startsData(val) {
-      this.filter.orderTimeStart = val
-    },
-    endsData(val) {
-      this.filter.orderTimeEnd = val
-    },
-    orderExport() {
-      if (this.list.lists.length == 0) {
-        this.$Notice.warning({
-          title: '警告提示',
-          desc: "暂无相应数据",
-          duration: 5
-        })
-        return
-      }
-      let obj = {
-        productType: this.filter.productType,
-        orderStatus: this.filter.orderStatus,
-        invoiceStatus: this.filter.invoiceStatus,
-        course_status: this.filter.course_status,
-        payWay: this.filter.payWay,
-        orderTimeStart: this.filter.orderTimeStart,
-        orderTimeEnd: this.filter.orderTimeEnd,
-        payMoneyMin: this.filter.payMoneyMin,
-        payMoneyMax: this.filter.payMoneyMax,
-        orderType: this.filter.orderType,
-        salesSecondLevel: this.filter.salesSecondLevel,
-        level: this.filter.level,
-        adSource: this.filter.adSource,
-        payType: this.filter.payType,
-        dataType: this.filter.dataType,
-        invoiceType: this.filter.invoiceType,
-        returnStatus: this.filter.returnStatus,
-        refundStatus: this.filter.refundStatus,
-        contractStatus: this.filter.contractStatus,
-        phone: this.filter.phone,
-        companyName: this.filter.companyName
-      }
-      this.$Modal.confirm({
-        title: "确定导出所有数据吗？",
-        onOk: () => {
-          this.$request('/order/orderList/exportOrder').data(obj).success((res) => {
-            if (res.data.path) {
-              window.location.href = res.data.path
-              this.reload()
-            } else {
-              this.$Notice.warning({
-                title: '警告提示',
-                desc: "暂无相应数据",
-                duration: 5
-              })
-            }
-          }).get()
-        }
-      })
-    },
-    reload() {
-      this.$refs.tableLists.reload(true)
-    }
+    vCascader,
+    setOrderInfo
   },
   data() {
     return {
@@ -976,9 +753,256 @@ export default {
           }
         }
       ],
-      list: []
+      list: [],
+      setDialogStatus: {
+        showDialog: false,
+        setTitle: '客户自助扫码开票',
+        showContent: 1
+      }
     }
   },
+  watch: {
+    'filter.productType': {
+      handler(newVal) {
+        if (newVal == '0' || newVal == '18') {
+          this.select1 = true
+          this.select2 = false
+          this.select3 = false
+          this.select4 = false
+          this.select5 = false
+          this.filter.dataType = ''
+          this.filter.invoiceType = ''
+          this.filter.level = ''
+        } else if (newVal == '2') {
+          this.select2 = true
+          this.select1 = false
+          this.select3 = false
+          this.select4 = false
+          this.select5 = false
+          this.filter.payType = ''
+          this.filter.invoiceType = ''
+          this.filter.level = ''
+        } else if (newVal == '4') {
+          this.select3 = true
+          this.select1 = false
+          this.select2 = false
+          this.select4 = false
+          this.select5 = false
+          this.filter.dataType = ''
+          this.filter.payType = ''
+          this.filter.level = ''
+        } else if (newVal == '6') {
+          this.select4 = true
+          this.select1 = false
+          this.select2 = false
+          this.select3 = false
+          this.select5 = false
+          this.filter.dataType = ''
+          this.filter.payType = ''
+        } else if (newVal == '12') {
+          this.select5 = true
+          this.select4 = false
+          this.select1 = false
+          this.select2 = false
+          this.select3 = false
+          this.filter.dataType = ''
+          this.filter.payType = ''
+        } else {
+          this.select1 = false
+          this.select2 = false
+          this.select3 = false
+          this.select4 = false
+          this.select5 = false
+          this.filter.payType = ''
+          this.filter.dataType = ''
+          this.filter.invoiceType = ''
+          this.filter.level = ''
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 关闭弹框
+    closeComDialog() {
+      this.setDialogStatus.showDialog = false
+    },
+    // 客户扫码自助开票
+    scanCodeVote(data) {
+      if(data === 1) {
+        this.setDialogStatus.setTitle = '客户自助扫码开票'
+      } else if(data === 3) {
+        this.setDialogStatus.setTitle = '录入线下发票链接/物流信息'
+      }
+      this.setDialogStatus.showContent = data
+      this.setDialogStatus.showDialog = true
+    },
+    localed(val) {
+      return val.toLocaleString('zh', {style: 'currency', currency: 'CNY'})
+    },
+    orderCreated() {
+      this.$refs.secModel.bShow = true
+    },
+    otherCreated() {
+      this.$refs.otherModel.oShow = true
+    },
+    screened() {
+      this.flag = !this.flag
+      if (this.flag) {
+        this.filterType = 1
+        this.filterReset = 1
+      } else {
+        this.filterType = 0
+        this.filterReset = 0
+      }
+    },
+    load(val) {
+      this.loading = val
+    },
+    emptyFilter(val) {
+      if (val) {
+        this.$refs.dateRef.initialized()
+        this.select1 = false
+        this.select2 = false
+        this.select3 = false
+        this.select4 = false
+        this.select5 = false
+        this.selectName = []
+        Object.keys(this.filter).forEach(key => {
+          this.filter[key] = ''
+        })
+        this.$refs.casRef.values = []
+      }
+    },
+    proChge(val) {
+      if (val == '0') {
+        this.payCont = this.payCont1
+      } else if (val == '18') {
+        this.payCont = this.payCont2
+      }
+    },
+    rowClick(row) {
+      const sources = JSON.parse(row.filter).source ? JSON.parse(row.filter).source : ''
+      const news = this.$router.resolve({
+        path: '/order/orderList/orderDetail',
+        query: {id: row.id, proType: row.product_type, type: sources}
+      })
+      window.open(news.href, '_blank')
+    },
+    selChange(val) {
+      const arr1 = [], arr2 = []
+      val.forEach(v => {
+        if (v.company_name || v.id) {
+          arr1.push(v.company_name)
+          arr2.push(v)
+        }
+      })
+      this.selectName = arr1
+      this.selectData = arr2
+    },
+    pageChange() {
+      this.selectName = []
+    },
+    isAllEqual(array) {
+      if (array.length > 0) {
+        return !array.some(function (value, index) {
+          return value !== array[0]
+        });
+      } else {
+        return true
+      }
+    },
+    importInvoiced() {
+      this.$refs.importModel.importShow = true
+    },
+    batchCollected() {
+      if (this.selectName.length == 0) {
+        this.$Notice.warning({
+          title: '警告提示',
+          desc: "至少选择一项！",
+          duration: 5
+        })
+      } else {
+        let bool = this.isAllEqual(this.selectName)
+        if (bool) {
+          this.$refs.batchModel.asdShow = true
+        } else {
+          this.$Notice.warning({
+            title: '警告提示',
+            desc: "只能批量回款一个公司下的多笔订单，建议筛选公司名称后再批量回款！",
+            duration: 5
+          })
+        }
+      }
+    },
+    onChange() {
+      this.selectName = []
+      this.reload()
+    },
+    levelChange(val) {
+      this.filter.orderType = val[0]
+      this.filter.salesSecondLevel = val[1]
+    },
+    startsData(val) {
+      this.filter.orderTimeStart = val
+    },
+    endsData(val) {
+      this.filter.orderTimeEnd = val
+    },
+    orderExport() {
+      if (this.list.lists.length == 0) {
+        this.$Notice.warning({
+          title: '警告提示',
+          desc: "暂无相应数据",
+          duration: 5
+        })
+        return
+      }
+      let obj = {
+        productType: this.filter.productType,
+        orderStatus: this.filter.orderStatus,
+        invoiceStatus: this.filter.invoiceStatus,
+        course_status: this.filter.course_status,
+        payWay: this.filter.payWay,
+        orderTimeStart: this.filter.orderTimeStart,
+        orderTimeEnd: this.filter.orderTimeEnd,
+        payMoneyMin: this.filter.payMoneyMin,
+        payMoneyMax: this.filter.payMoneyMax,
+        orderType: this.filter.orderType,
+        salesSecondLevel: this.filter.salesSecondLevel,
+        level: this.filter.level,
+        adSource: this.filter.adSource,
+        payType: this.filter.payType,
+        dataType: this.filter.dataType,
+        invoiceType: this.filter.invoiceType,
+        returnStatus: this.filter.returnStatus,
+        refundStatus: this.filter.refundStatus,
+        contractStatus: this.filter.contractStatus,
+        phone: this.filter.phone,
+        companyName: this.filter.companyName
+      }
+      this.$Modal.confirm({
+        title: "确定导出所有数据吗？",
+        onOk: () => {
+          this.$request('/order/orderList/exportOrder').data(obj).success((res) => {
+            if (res.data.path) {
+              window.location.href = res.data.path
+              this.reload()
+            } else {
+              this.$Notice.warning({
+                title: '警告提示',
+                desc: "暂无相应数据",
+                duration: 5
+              })
+            }
+          }).get()
+        }
+      })
+    },
+    reload() {
+      this.$refs.tableLists.reload(true)
+    }
+  }
 }
 </script>
 

vue.config.js

@@ -26,7 +26,7 @@ module.exports = {
     // allowedHosts: 'all',
     proxy: {
       '^/dev-api': {
-        target: 'https://web2-qmx_admin.jydev.jianyu360.com/api/admin/',
+        target: 'http://192.168.3.206:88//api/admin/',
         changeOrigin: true,
         ws: false,
         logLevel: 'debug',