qmx_page_admin/src/views/create-order/components/order-detail-submodule/OrderActions.vue

<template>
  <div class="order-actions-container">
    <div class="order-actions-list">
      <div
        v-for="(item, index) in actionList" 
        :key="index" 
      >
        <div 
          :class="{ 'order-action-item-active': item.active }" 
          class="order-action-item"
          v-if="item.show"
        >
          <div class="order-action-text" @click="item.action">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <el-dialog
        class="edit-dialog"
        title="编辑订单"
        width="90%"
        :close-on-click-modal="false"
        :visible.sync="editdialogVisible">
      <EditOrder ref="editOrderRef" type="edit" :order-code="orderCode"/>
      <div class="button-group" slot="footer">
        <el-button size="medium" class="submit-button submit" type="primary" :loading="dialogSubmitLoading" @click="doCloseCreateModel('submit')">提交</el-button>
        <el-button size="medium" class="submit-button stash" type="primary" plain :loading="dialogSubmitLoading" @click="doCloseCreateModel('stash')">暂存</el-button>
        <el-button size="medium" class="submit-button cancel" plain @click="doCloseCreateModel('close')">取消</el-button>
      </div>
    </el-dialog>
    <Dialog
      ref="cancelOrderDialog"
      customClass="cancel-order-dialog"
      title="作废订单"
      :visible.sync="cancelOrderVisible"
      center
      width="360px"
      @confirm="cancelOrderConfirm"
      @cancel="cancelOrderCancel"
    >
      <div class="cancel-order-content">
        <span>确认作废订单吗？</span>
      </div>
    </Dialog>
    <Dialog
      ref="downloadProtocolDialog"
      customClass="download-protocol-dialog"
      title="不支持下载电子协议"
      :visible.sync="downloadProtocolVisible"
      :show-cancel-button="false"
      confirm-button-text="我知道了"
      center
      width="360px"
      @confirm="downloadProtocolConfirm"
      @cancel="downloadProtocolCancel"
    >
      <div class="cancel-order-content">
        <span>该订单不支持下载电子协议</span>
      </div>
    </Dialog>
    <!-- 客户扫码自助开票 -->
    <new-set-order-info :show-content="2" :show-dialog="showDialog" :order-info="orderDetail?.orderData" title="客户自助扫码开票"
        @close="closeComDialog">
    </new-set-order-info>
    <!-- 开票二维码 -->
    <new-set-order-info ref="invoiceRef" :show-content="4" :show-dialog="showInvoiceDialog" :order-info="orderDetail"
        title="开票二维码" @close="closeComDialog">
        <div style="display:flex;flex-direction:column;" slot="content">
            <span>订单编号：{{selectInvoice.invoice_order_code}}</span>
            <span>开票金额合计：{{selectInvoice.invoice_money / 100}}元</span>
        </div>
    </new-set-order-info>
    <new-detail-model v-if="showDetailModel" ref="detailModelRef" :orderDetail="orderDetailInfo"></new-detail-model>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import Dialog from '@/components/Dialog'
import EditOrder from '../edit.vue'
import {
  ajaxGetContractPdf,
  ajaxOrderCancellation
} from '@/api/modules/'
import newSetOrderInfo from '../newSetOrderInfo.vue'
import newDetailModel from '../nweDetailModel.vue'

export default {
  name: 'OrderActions',
  components: {
    Dialog,
    EditOrder,
    newSetOrderInfo,
    newDetailModel
  },
  props: { 
    orderDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      cancelOrderVisible: false,
      downloadProtocolVisible: false,
      editdialogVisible: false,
      dialogSubmitLoading: false,
      orderCode: '',
      showDialog: false,
      showInvoiceDialog: false,
      orderDetailInfo: {},
      selectInvoice: {}

    }
  },
  created () {
    const { id } = this.$route.params
    this.orderCode = id
  },
  watch: {
    orderDetail: {
      handler(newVal) {
        if (newVal && newVal.orderData) {
          this.orderDetailInfo = newVal.orderData
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    showDetailModel() {
      return Object.keys(this.orderDetailInfo).length > 0
    },
    actionList () {
      return [
        {
          text: '编辑订单',
          active: true,
          action: () => {
            this.editOrder()
          },
          show: true
        },
        {
          text: '作废订单',
          active: false,
          action: () => {
            this.cancelOrder()
          },
          show: this.showCancelButton()
        },
        {
          text: '下载电子协议',
          active: false,
          action: () => {
            this.downloadProtocol() 
          },
          show: true
        },
        {
          text: '微信/支付宝付款码',
          active: false,
          action: () => {
            this.wxAliPay() 
          },
          show: this.isShowPayBtn()
        },
        {
          text: '客户自助扫码开票',
          active: false,
          action: () => {
            this.scanCodeInvoice()
          },
          show: true
        },
        // {
        //   text: '协议归档',
        //   active: false,
        //   action: () => {
        //     this.archiveProtocol() 
        //   } 
        // }
      ]
    }
  },
  methods: {
    ...mapActions('order', ['resetPageInfo']),
    // 编辑订单相关逻辑开始

    editOrder() {
      this.editdialogVisible = true;
    },
    doCloseCreateModel(type = 'close') {
      switch (type) {
        case 'close':
          this.editdialogVisible = false;
          this.resetPageInfo()
          break;
        case 'submit':
        case 'stash':
          this.dialogSubmitLoading = true;
          const method = type === 'submit' ? 'submit' : 'stash';
          this.$refs.editOrderRef[method]()
              .then(() => {
                this.editdialogVisible = false;
              })
              .catch(e => {
                console.warn(e);
                // 这里可以根据需要处理错误，例如显示错误信息
              })
              .finally(() => {
                this.dialogSubmitLoading = false;
              });
          break;
      }
    },
    // 编辑订单相关逻辑结束

    // 作废订单相关逻辑开始
    showCancelButton () {
      const status = !this.orderDetailInfo.order_status || this.orderDetailInfo.order_status === 0
      const order_channel = this.orderDetailInfo.order_channel === 'xdqd04'
      const is_backstage_order = this.orderDetailInfo.is_backstage_order === 1
      // 订单状态为未完成且订单渠道为xdqd04或者is_backstage_order为1时显示
      const Bool = !status && (order_channel || is_backstage_order)
      console.log('showCancelButton', Bool)
      return status && (order_channel || is_backstage_order)
    },
    cancelOrder() {
      console.log('cancelOrder')
      this.cancelOrderVisible = true
    },

    async cancelOrderConfirm() {
      this.cancelOrderVisible = false
      const { error_code: code, error_msg: msg } = await ajaxOrderCancellation({ orderCode: this.orderCode })
      if (code === 0) {
        this.$message.success('作废订单成功')
        this.$emit('refresh')
      } else {
        this.$message.error(msg) 
      }
    },
    cancelOrderCancel() {
      this.cancelOrderVisible = false
    },
    // 作废订单相关逻辑结束

    // 下载电子协议相关逻辑开始
    async downloadProtocol() {
      const { error_code: code, data} = await ajaxGetContractPdf({ orderCode: this.orderCode })
      if (code === 0) {
        console.log('downloadProtocol', data)
      } else {
        this.downloadProtocolVisible = true 
      }
    },
    downloadProtocolConfirm() {
      this.downloadProtocolVisible = false 
    },
    downloadProtocolCancel() {
      this.downloadProtocolVisible = false 
    },
    // 下载电子协议相关逻辑结束
    // 微信/支付宝付款码相关逻辑开始
    wxAliPay() {
      this.$refs.detailModelRef.paymentCodeShow = true;
    },
    // 是否展示微信/支付宝按钮
    isShowPayBtn() {
      // 后台创建的订单
      const backendOrder = this.orderDetailInfo.is_backstage_order === 1
      // 汇款状态为不是全部回款的
      const returnStatus = this.orderDetailInfo.return_status !== 1
      // 订单审核状态为已通过
      const auditStatus = this.orderDetailInfo.audit_status === 3
      // 订单状态为“未完成”或“已完成”
      const orderStatus = this.orderDetailInfo.order_status === 0 || this.orderDetailInfo.order_status === 1
      // 有操作订单权限
      // const authSttatus = this.orDetails
      return backendOrder && returnStatus && auditStatus && orderStatus
    },

    // 微信/支付宝付款码相关逻辑结束
    // 客户扫码自助开票相关逻辑开始
    /**
     * 扫描发票二维码的方法
     */
    // 关闭弹框
    closeComDialog() {
      this.showDialog = false
      this.showInvoiceDialog = false
    },
    scanCodeInvoice() {
      console.log('scanCodeInvoice')
      this.showDialog = true;
    },
    // archiveProtocol() {
    //   console.log('archiveProtocol') 
    // }
  }
}
</script>

<style lang="scss" scoped>
.order-actions-container {
 .order-actions-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .order-action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 15px;
    margin-right: 12px;
    min-width: 90px;
    font-size: 14px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
    &-active {
      border: 1px solid #2ABED1;
      color: #2ABED1;
    }
  }
 }
 .cancel-order-dialog {
  .cancel-order-content {
    text-align: center;
    font-size: 14px;
    color: #686868; 
  }
 }
 .button-group {
    text-align: center;
  }

::v-deep {
  .download-protocol-dialog.el-dialog {
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
    .action-button.confirm {
      flex: none;
      width: 120px;
    }
  }
}
 
}
</style>