微信小程序实现微信支付

妄想症_患者

已于 2022-11-30 11:45:48 修改

阅读量312

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app 微信 vue.js

于 2022-08-26 12:16:37 首次发布

本文链接：https://blog.youkuaiyun.com/Socialcoarseness/article/details/126541008

    <view class="pushBtn">
      <u-button
        @click="submitPay"
        shape="circle"
        :custom-style="customStyle"
        :ripple="true"
        ripple-bg-color="#909399"
        >确定缴费</u-button
      >
    </view>

    submitPay() {
      if (this.checked == false) {
        this.$u.toast("请选择支付方式");
        return;
      }
      let that = this;
      that.form.tradeType = "JSAPI";
      that.form.body = "物业缴费";
      that.form.outTradeNo = that.paymentDetailsList.outTradeNo; // 微信交易编号
      that.form.totalFee = that.paymentDetailsList.waitPayAmount * 100; // 金额
      that.$u.api.updateCreateOrder(that.form).then((res) => {
        uni.requestPayment({
          provider: "wxpay", // 服务提供商
          appid: res.data.appid,
          timeStamp: res.data.timeStamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          package: res.data.packageValue, // 返回prepay_id 参数值
          signType: res.data.signType, // 签名算法
          paySign: res.data.paySign, // 签名
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
            uni.showToast({
              title: "支付成功",
              icon: "none",
              mask: true,
              duration: 1000,
            });
            that.goBack();
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
            uni.showToast({
              title: "支付失败",
              icon: "none",
              mask: true,
              duration: 1000,
            });
            return;
          },
        });
      });

    },