hemall.terabimsoft.com.cn/plugins/shop_server/components/default/payBox.vue

<template>
  <div>
    <el-dialog title="选择支付方式" :visible.sync="dialogPay" width="878px" class="dialog_pay" @closed="goBack">
      <div>
        <el-form label-width="106px" style="padding-left:140px;">
          <el-form-item label="支付金额">
            <span class="col_red">¥ {{money}}</span>
          </el-form-item>
          <el-form-item label="打赏课程" v-if="from === 'course'">
            <span class="col_red">{{pay_sn}}</span>
          </el-form-item>
          <el-form-item label="赞赏用户" v-if="from === 'micro'">
            <span class="col_red">{{pay_sn}}</span>
          </el-form-item>
          <el-form-item label="付费文章" v-if="from === 'notice'">
            <span class="col_red">{{pay_sn}}</span>
          </el-form-item>
          <el-form-item label="支付流水号" v-if="from === 'pay'">
            <span>{{pay_sn}}</span>
          </el-form-item>
          <el-form-item label="支付方式" class="spe" style="min-height:60px;">
            <div class="flex pay_way" style="flex-wrap:wrap;">
              <div style="margin-bottom:10px;" class="flex flex-a-c flex-j-c way" @click="changeIndex(item)"
                   :class="[item.value==pay_select?'border_spe':'']" v-for="(item,index) in pay_way" :key="index">
                <div class="radio_button" :class="[item.value==pay_select?'radio':'']"></div>
                <img src="~/assets/images/icon/coin.png" style="margin-right:5px;width:28px;height:28px;"
                     v-if="item.value==3">
                <img src="~/assets/images/icon/wechat_pay.png" style="margin-right:5px;"
                     v-if="item.value==28||item.value==57 || item.value==50">
                <img src="~/assets/images/icon/ali_pay.png" style="margin-right:5px;"
                     v-if="item.value==2||item.value==29||item.value ==85">
                {{item.name}}
              </div>
            </div>
          </el-form-item>
        </el-form>

        <div class="btn_wrap flex">
          <el-button class="flex flex-a-c flex-j-c" @click="dialogPay=false">关闭</el-button>
          <el-button type="primary" class="flex flex-a-c flex-j-c" style="margin-left:56px;" v-if="from === 'notice'"
                     @click="payNoticeMoney">立即支付
          </el-button>
          <el-button type="primary" class="flex flex-a-c flex-j-c" style="margin-left:56px;" v-if="!from || from === 'pay'"
                     @click="payMoney">立即支付
          </el-button>
          <el-button type="primary" class="flex flex-a-c flex-j-c" style="margin-left:56px;" v-if="from === 'course'"
                     @click="payPost">立即打赏
          </el-button>
          <el-button type="primary" class="flex flex-a-c flex-j-c" style="margin-left:56px;" v-if="from === 'micro'"
                     @click="payMicroPost">立即赞赏
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="show_qrcode" width="450px" class="dialog_qr" :close-on-click-modal="false" @closed="goBack">
      <div class="qr_content" v-show="!show_pay_status">
        <div style="margin-bottom: 25px;">请在2小时内完成支付</div>
        <div class="qr_code m-auto">
          <canvas id="qrccode-canvas2"></canvas>
        </div>
        <div style="margin-bottom: 34px;">{{pay_select == 85?'支付宝扫码支付':'微信扫码支付' }}</div>
      </div>
      <div class="pay-status-box" v-show="show_pay_status && pay_success">
        <div><i class="el-icon-success"></i></div>
        <p class="pay-tips">支付成功</p>
        <el-button type="primary" plain @click="toUrl('order')">查看订单列表</el-button>
      </div>
      <div class="pay-status-box" v-show="show_pay_status && !pay_success">
        <div><i class="el-icon-error"></i></div>
        <p class="pay-tips">支付失败</p>
        <el-button type="danger" plain @click="toUrl('order')">查看订单列表</el-button>
      </div>
    </el-dialog>
    <el-dialog title="请输入余额支付密码" :visible.sync="popupSpecs" width="878px" class="dialog_pay" @closed="goBack">
      <el-form>
        <el-form-item label="余额支付密码" class="flex flex-j-c">
          <el-input v-model="balancePwd" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top:50px;" class="flex flex-j-c">
        <el-button class="flex flex-a-c flex-j-c" @click="popupSpecs=false">关闭</el-button>
        <el-button type="primary" class="flex flex-a-c flex-j-c" style="margin-left:56px;" @click="getVerifyPassword">
          立即支付
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import QRCode from "qrcode";

  var canvas = "";
  export default {
    name: "payBox",
    props: {
      orderPayId: Number,
      money: String,
      pay_sn: String,
      order_pay_id: Number,
      pay_way: Array,
      from: String,
      noJump: {
        type: Boolean,
        default: false
      },
      rewardTypes: Number,
      trick_id: Number
    },
    data() {
      return {
        interval: null,
        balancePwd: "",
        popupSpecs: false,
        show_qrcode: false,
        pay_select: 1,
        pay_name: "",
        dialogPay: false,

        show_pay_status: false,
        pay_success: false,
      };
    },
    methods: {
      showPay() {
        if (this.interval) {
          clearInterval(this.interval);
        }
        this.dialogPay = true;
      },
      toUrl(url, params) {
        if(!this.from) {
          this.goBack();
          return
        }
        this.$router.push(this.fun.getUrl(url, params));
      },
      createQrc(_url) {
        // this.init()
        this.$nextTick(function () {
          // DOM操作
          canvas = document.getElementById("qrccode-canvas2");
          QRCode.toCanvas(canvas, _url, error => {
            if (error) {
              console.log(error);
            }
          });
        });
      },
      goBack() {
        this.show_qrcode = false;
        this.popupSpecs = false;
        this.balancePwd = "";
        if (this.interval) {
          clearInterval(this.interval);
        }
        if (this.from === "pay" && !this.noJump) {
          this.$router.push(this.fun.getUrl("order"));
        } else {
          this.dialogPay = false;
          this.$emit("paySuccess", true);
        }
        // this.$router.go(-1)
      },
      // 微社区打赏支付
      payMicroPost() {
        if (this.pay_select != 3 && this.pay_select != 2 && this.pay_select != 6) {
          this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
          return
        }
        let url = "plugin.micro-communities.api.reward-log.index";
        let json = {
          pay_method: this.pay_select,
          amount: this.money,
          pay_name: this.pay_name,
        };
        if (this.rewardTypes == 0) {
          // 帖子打赏
          json.trick_id = this.trick_id;
        } else {
          // 评论打赏
          url = "plugin.micro-communities.api.reward-log.commentPay";
          json.comment_id = this.trick_id;
        }
        this.fun
          .$get(url, json, "..")
          .then(response => {
            if (response.result == 1) {
              if (this.pay_select == 3) {
                if (this.need_password) {
                  this.popupSpecs = true;
                  this.balancePwd = "";
                } else {
                  this.dialogPay = false;
                  this.$message.success(response.msg);
                  this.$emit("paySuccess", true);
                }
              } else if (this.pay_select == 2) {
                // 支付宝
                window.location.href = response.data;
                // window.open(response.data, "_blank");
              } else if (this.pay_select == 6) {
                // 微信
                window.location.href = response.data;
              } else {
                this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
              }
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      // 课程打赏支付
      payPost() {
        if (this.pay_select != 3 && this.pay_select != 2 && this.pay_select != 6) {
          this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
          return
        }
        let json = {
          pay_method: this.pay_select,
          amount: this.money,
          pay_name: this.pay_name,
          goods_id: this.order_pay_id  // 商品id
        };

        this.fun
          .$get("plugin.video-demand.api.lecturer-reward.run-reward-pay", json, "..")
          .then(response => {
            if (response.result == 1) {
              if (this.pay_select == 3) {
                if (this.need_password) {
                  this.popupSpecs = true;
                  this.balancePwd = "";
                } else {
                  this.dialogPay = false;
                  this.$message.success(response.msg);
                  this.$emit("paySuccess", true);
                }
              } else if (this.pay_select == 2) {
                // 支付宝
                window.location.href = response.data;
                // window.open(response.data, "_blank");
              } else if (this.pay_select == 6) {
                // 微信
                window.location.href = response.data;
              } else {
                this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
              }
            } else {
              this.$message.error(response.msg);
            }
          });
      },

      // 付费文章
      payNoticeMoney() {
        if (this.pay_select != 3 && this.pay_select != 2 && this.pay_select != 6) {
          this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
          return
        }
        let json = {
          pay_id: this.pay_select,
          money: this.money,
          pay_name: this.pay_name,
          id: this.order_pay_id, // 文章id
          art: 'pay'
        };

        this.fun
          .$get("plugin.article-pay.api.index.orderPay", json, "..")
          .then(response => {
            if (response.result == 1) {
              if (this.pay_select == 3) {
                if (this.need_password) {
                  this.popupSpecs = true;
                  this.balancePwd = "";
                } else {
                  this.dialogPay = false;
                  this.$message.success(response.msg);
                  this.$emit("paySuccess", true);
                }
              } else if (this.pay_select == 2) {
                // 支付宝
                window.location.href = response.data;
                // window.open(response.data, "_blank");
              } else if (this.pay_select == 6) {
                // 微信
                window.location.href = response.data;
              } else {
                this.$message.error("PC端目前不支持该付款方式，请在移动端支付");
              }
            } else {
              this.$message.error(response.msg);
            }
          });

      },

      // 商城订单付费
      payMoney() {
        if (this.pay_select == 3) {
          if (this.need_password) {
            this.popupSpecs = true;
            this.balancePwd = "";
          } else {
            this.balancePay();
          }
        } else if (this.pay_select == 2) {
          this.aliPayOrder();
        } else if (this.pay_select == 17) {
          this.payNoMoney();
        } else if (this.pay_select == 29) {
          this.getwechatPayAili();
        } else if (this.pay_select == 28) {
          this.getwechatPay();
        } else if (this.pay_select == 57) {
          this.pcweixin();
        } else if (this.pay_select == 85){
          this.Otherleshua_Alipay();
        } else {
          this.$message.error('PC端暂不支持该支付方式！')
        }
      },
      changeIndex(item) {
        if (item.need_password) {
          this.need_password = item.need_password;
        }
        this.pay_select = item.value;
        this.pay_name = item.name;
      },
      balancePay(password) {
        let json = {
          order_pay_id: this.order_pay_id
        };
        if (!this.fun.isTextEmpty(password)) {
          json = {
            order_pay_id: this.order_pay_id,
            payment_password: password
          };
        }
        this.fun
          .$get("order.credit-merge-pay.credit2", json, "")
          .then(response => {
            if (response.result == 1) {
              this.$message.success(response.msg);
              this.dialogPay = false;
              this.$emit("paySuccess", true);
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      aliPayOrder() {
        let payUrl = "order.merge-pay.alipay";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "支付中"
          )
          .then(response => {
            if (response.result == 1) {
              window.location.href = response.data;
              this.$message.success(response.msg);
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      payNoMoney() {
        let payUrl = "order.mergePay.COD";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "支付中"
          )
          .then(response => {
            if (response.result == 1) {
              this.$message.success(response.msg);
              this.show_pay_status = true;
              this.pay_success = true;
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      // 乐刷支付宝
      Otherleshua_Alipay(){
        let payUrl = "order.merge-pay.leshua-alipay";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "支付中"
          )
          .then(response => {
            if (response.result == 1) {
              console.log(response.data.pay_msg.link,'ddddd')
              this.createQrc(response.data.pay_msg.link);
              this.show_qrcode = true;
              if (this.orderPayId) {
                this.interval = setInterval(() => {
                  this.getOrderStatus();
                }, 3000);
              }
              // window.location.href = response.data.data.rc_Result;
              // this.$message.success(response.msg);
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      //汇聚阿里支付
      getwechatPayAili() {
        let payUrl = "order.merge-pay.alipay-pay-hj";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "支付中"
          )
          .then(response => {
            if (response.result == 1) {
              window.location.href = response.data.data.rc_Result;
              this.$message.success(response.msg);
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      getOrderStatus() {
        this.fun
          .$get(
            'payment.pc-scan.index',
            {
              order_ids: this.orderPayId
            },
          )
          .then(response => {
            if (response.result == 1) {
              if (response.data.pay_status) {
                // if (response.data.redirect) {
                //   setTimeout(() => {
                //     window.location.href = response.data.redirect
                //   }, 3000);
                // }
                clearInterval(this.interval);
                this.show_pay_status = true;
                this.pay_success = true;
              }
            } else {
              clearInterval(this.interval);
              this.show_pay_status = true;
              this.pay_success = false;
              this.$message.error(response.msg);
            }
          });
      },
      pcweixin() {
        let payUrl = "order.merge-pay.wechat-native";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "加载中"
          )
          .then(response => {
            if (response.result == 1) {
              this.createQrc(response.data.code_url);
              this.show_qrcode = true;
              if (this.orderPayId) {
                this.interval = setInterval(() => {
                  this.getOrderStatus();
                }, 3000);
              }
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      // 第三方支付 微信支付-汇聚
      getwechatPay() {
        let payUrl = "order.merge-pay.wechat-pay-hj";
        this.fun
          .$get(
            payUrl,
            {
              order_pay_id: this.order_pay_id
            },
            "加载中"
          )
          .then(response => {
            if (response.result == 1) {
              this.createQrc(response.data.data.rc_Result);
              this.show_qrcode = true;
            } else {
              this.$message.error(response.msg);
            }
          });
      },
      getVerifyPassword() {
        this.fun
          .$get("payment.password.check", {password: this.balancePwd}, "")
          .then(response => {
            if (response.result == 1) {
              this.balancePay(this.balancePwd);
              this.popupSpecs = false;
            } else {
              this.$message.error(response.msg);
              this.popupSpecs = false;
              this.dialogPay = false;
            }
          });
      }
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .dialog_pay {
    :deep(.el-input) {
      width: 336px;
      height: 42px;
    }
    :deep(.el-dialog__body) {
      padding: 40px 0 30px 0;
    }
    :deep(.el-dialog__header) {
      border-bottom: solid 1px #f2f2f2;
    }
    :deep(.el-form-item__label) {
      text-align: left !important;
    }
    :deep(.el-form-item__label) {
      text-align: left !important;
      font-size: 16px;
    }
  }

  .pay_way {
    flex-wrap: wrap;
    .way {
      cursor: pointer;
      min-width: 120px;
      min-height: 60px;
      border-radius: 5px;
      border: solid 1px #cacaca;
      margin: 10px;
      padding: 0 10px;
      .radio_button {
        margin-right: 10px;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: #e1e1e1;
      }
    }
  }

  .border_spe {
    border: solid 1px var(--color) !important;
  }

  .radio {
    background-color: var(--color) !important;
  }

  .btn_wrap {
    margin-top: 50px;
    padding-left: 270px;
    .el-button {
      width: 134px;
      height: 43px;
      border-radius: 4px;
      font-size: 16px;
    }
  }

  .dialog_qr {
    :deep(.el-dialog__header) {
      padding: 0;
      height: 56px;
      background-color: #f5f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    :deep(.el-dialog__body) {
      padding: 0;
    }
  }

  .qr_content {
    padding-top: 33px;
    padding-bottom: 27px;
    text-align: center;
    .qr_code {
      width: 220px;
      height: 220px;
      margin-bottom: 20px;
      #qrccode-canvas2 {
        width: 220px !important;
        height: 220px !important;
      }
    }
  }

  .pay-status-box {
    text-align: center;
    padding-bottom: 20px;
    i {
      font-size: 80px;
      color: var(--color);
      margin: 10px auto;
    }
    .el-icon-error {
      color: $red;
    }
    .pay-tips {
      font-size: 16px;
      font-weight: bold;
      margin: 10px auto 20px auto;
    }
  }
</style>