management/src/views/tool/Instead/components/scan-pay.vue

<template>
  <el-dialog width="400px" :title="title" :visible.sync="show" @close="reset">
    <div class="u-p-15">
      <div v-if="openSwitch">
        <el-button
          size="medium"
          @click="changeKey('paysSel', index)"
          v-for="(item, index) in pays"
          :key="index"
          :type="paysSel == index ? 'primary' : ''"
          >{{ item.text }}</el-button
        >
      </div>
      <div class="u-m-t-20">
        <el-alert
          :closable="false"
          v-if="tips"
          :title="tips"
          type="warning"
          show-icon
        >
        </el-alert>
      </div>
      <div class="u-m-t-20">
        <template v-if="paysSel == 0">
          <el-form label-width="90px" label-position="left">
            <el-form-item label="应付金额">
              <el-input :value="form.money" disabled></el-input>
            </el-form-item>
            <el-form-item label="付款码">
              <el-input
                v-model="form.code"
                @change="codeInputChange"
                placeholder="请扫码或者输入付款码"
                ref="refInputCode"
              ></el-input>
            </el-form-item>
            <div class="u-flex u-row-center u-m-t-50">
              <el-button size="medium" @click="close">取消</el-button>
              <el-button size="medium" type="primary" @click="confirm"
                >确定</el-button
              >
            </div>
          </el-form>
        </template>
        <template v-else>
          <div class="u-text-center">
            <div class="u-flex u-row-center">
              <div class="codeImg">
                <canvas ref="canvas" id="QRCode_header"></canvas>
              </div>

              <!-- <img :src="codeImg" class="codeImg" alt="" /> -->
            </div>
            <div class="color-333 u-font-20 u-m-t-20">32.00元</div>
            <div class="color-aaa u-font-12 u-m-t-10">
              <i class="el-icon-loading"></i>
              <span>等待用户支付</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </el-dialog>
</template>
  <script>
import QRCode from "qrcode";
import { $getOrderPayUrl } from "@/api/table";
import { tbOrderInfoDetail } from "@/api/order";

export default {
  props: {
    openSwitch: {
      type: Boolean,
      default: true,
    },
    order: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: "支付",
    },
    price: {
      type: [String, Number],
      default: 0,
    },
    defaultTips: {
      type: String,
      default: "请使用扫码枪扫描付款码",
    },
  },
  data() {
    return {
      tips: "",
      paymentQrcode: "",
      paysSel: 0,
      form: {
        money: "",
        code: "",
      },
      codeImg:
        "https://zhyx.eingdong.com/qrcode/api.php?url=https%3A%2F%2Fzhyx.eingdong.com%2Fcopyright%2F%23%2Fpay%3Fid%3D139451580",
      pays: [
        {
          text: "主扫",
        },
        {
          text: "被扫",
        },
      ],
      number: "0",
      show: false,
      timer: null,
    };
  },
  watch: {
    defaultTips(val) {
      this.tips = val;
    },
    price(val) {
      console.log(val);
      this.form.money = Number(val).toFixed(2);
    },
    paysSel(newval) {
      if (newval == 0) {
        this.clear();
        this.tips = "请使用扫码枪扫微信/支付宝收款码";
        this.$nextTick(() => {
          this.$refs.refInputCode.focus();
        });
      } else {
        this.tips = "请用户使用微信/支付宝扫描付款码";
        this.startGetOrderInfo();
        this.$nextTick(() => {
          QRCode.toCanvas(
            this.$refs.canvas,
            this.paymentQrcode,
            function (error) {
              console.log(error);
            }
          );
        });
      }
    },
    number(newval) {
      this.$emit("input", newval);
    },
  },
  methods: {
    clear() {
      clearInterval(this.timer);
    },
    async getOrderDetail() {
      const res = await tbOrderInfoDetail(this.order.id);
      if (res.status == "closed") {
        this.$emit("paySuccess");
      }
    },
    startGetOrderInfo() {
      clearInterval(this.timer);
      this.getOrderDetail();
      this.timer = setInterval(() => {
        this.getOrderDetail();
      }, 1000);
    },
    codeInputChange(e) {
      console.log(e);
      // this.$emit("confirm", this.form.code);
    },
    reset() {
      // this.form.money=''
      this.form.code = "";
      this.paysSel = 0;
      this.clear();
    },
    changeKey(key, val) {
      this[key] = val;
    },

    confirm() {
      if (!this.form.code) {
        return this.$message.error("请输入或扫付款码");
      }
      this.close();
      this.$emit("confirm", this.form.code);
    },
    open() {
      this.show = true;
      this.form.money = Number(this.price).toFixed(2);
      if (this.openSwitch) {
        $getOrderPayUrl({ orderId: this.order.id }).then((res) => {
          console.log(res);
          this.paymentQrcode = res;
        });
      }
      this.$nextTick(() => {
        this.$refs.refInputCode.focus();
      });
    },
    close() {
      this.show = false;
    },
    numberInput(val) {
      console.log(val);
      this.number = `${Number(val)}`;
    },
    keyboradConfirm() {
      this.$emit("confirm", this.number);
    },
  },
  mounted() {
    this.number = `${this.value}`;
    this.tips = this.defaultTips;
  },
};
</script>
  
<style  lang="scss" scoped>
.codeImg {
  width: 164px;
  border: 1px solid rgb(220, 223, 230);
  height: 164px;
  overflow: hidden;
}
</style>