小程序支付流程组件封装及使用

最新推荐文章于 2025-05-25 10:31:21 发布

小曲曲

最新推荐文章于 2025-05-25 10:31:21 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/99647087

小程序专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了支付组件的设计与实现过程，包括支付方式选择、密码输入界面的布局和交互，以及与后端服务的接口调用流程。展示了如何通过组件化的方式实现支付功能，涵盖了转账、余额和微信支付等多种支付手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

html

<view class="pay">
    <!-- 支付方式选择 -->
    <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
        <view class="pay_type">
            <view class="title">付款详情</view>
            <view class="money">{{money}}<text>元</text></view>
            <view wx:if="{{pay_num!=1}}" class="item flex_l {{payType==1?'active':''}}" data-type='1'
                bindtap="getPayType">
                <image src="{{imgurl}}q_zhuan.png"></image>
                <view class="flex">转账汇款<text>(推荐使用)</text></view>
            </view>
            <view wx:if="{{pay_num==3}}" class="item flex_l {{payType==2?'active':''}}" data-type='2'
                bindtap="getPayType">
                <image src="{{imgurl}}q_yue.png"></image>
                <view>余额支付</view>
            </view>
            <view class="item flex_l {{payType==3?'active':''}}" data-type='3' bindtap="getPayType">
                <image src="{{imgurl}}q_weixin.png"></image>
                <view>微信支付</view>
            </view>
            <view class="button" bindtap="goPay">确认支付</view>
        </view>
    </van-popup>
    <!-- 输入密码 -->
    <van-popup show="{{showPsd}}" position="bottom" bind:close="onClosePsd">
        <view class='box'>
            <view class='title jqflex flex-align-cen'>
                <image src="{{imgurl}}fanhui@2x.png" bindtap="onClosePsd"></image>
                <view>请输入交易密码</view>
            </view>
            <view class='input_main'>
                <view class='input_row' catchtap='getFocus'>
                    <view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'>
                        <text wx:if='{{codeVal.length>i}}'></text>
                    </view>
                </view>
                <input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd'
                    maxlength='6' />
            </view>
            <view class='tip' bindtap="toSetPwd">忘记密码？找回并完成支付</view>
        </view>
    </van-popup>
</view>

less

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; */
}

.flex_l {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.pay {
    font-size: 30rpx;
    color: #333;

    // 支付方式
    .pay_type {
        // height: 700rpx;
        width: 100%;

        .title {
            font-size: 36rpx;
            color: rgba(12, 11, 11, 1);
            height: 110rpx;
            line-height: 110rpx;
            text-align: center;
            border-bottom: 1rpx solid #E5E5E5;
        }

        .money {
            font-size: 56rpx;
            color: rgba(12, 11, 11, 1);
            margin: 45rpx 0;
            text-align: center;

            text {
                font-size: 30rpx;
            }
        }

        .item {
            padding-left: 250rpx;
            height: 100rpx;

            &.active {
                background-color: #FEDFE0;
            }

            image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 30rpx;
            }

            text {
                font-size: 20rpx;
                color: #FC5E62;
                margin-left: 20rpx;
            }
        }

        .button {
            margin: 40rpx 24rpx;
            height: 88rpx;
            line-height: 88rpx;
            background: rgba(252, 94, 98, 1);
            border-radius: 44rpx;
            text-align: center;
            font-size: 36rpx;
            color: rgba(255, 255, 255, 1);
        }
    }

    // 密码
    .box {
        height: 959rpx;

        .title {
            height: 106rpx;
            width: 100%;
            border-bottom: 1rpx solid #e5e5e5;
            font-size: 36rpx;
            text-align: center;
            position: relative;
            line-height: 104rpx;

            >image {
                position: absolute;
                width: 22rpx;
                height: 39rpx;
                top: 37rpx;
                left: 24rpx;
            }
        }

        .tip {
            color: #5EB4FC;
            font-size: 30rpx;
            text-align: center;
        }
    }

    .input_row {
        width: 690rpx;
        margin: 0 auto;
        height: 98rpx;
        position: relative;
        display: flex;
        align-items: center;
        border: 1rpx solid #e2e2e2;
        border-radius: 20rpx;
        margin-top: 50rpx;
    }

    .input_row .pwd_item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-right: 1rpx solid #e2e2e2;
        position: relative;
    }

    .pwd_item:nth-last-of-type(1) {
        border-right: 0;
    }

    .pwd_item text {
        width: 30rpx;
        height: 30rpx;
        border-radius: 30rpx;
        background-color: #555;
    }


    .forget_pwd {
        float: right;
        margin: 30rpx;
        width: 100rpx;
        text-align: right;
        font-size: 24rpx;
        color: #ff7800;
    }

    /* 文本输入框位置: 设置到左边隐藏 */
    .input_control {
        position: relative;
        left: -300rpx;
        bottom: 0;
        width: 100rpx;
        height: 37rpx;
    }
}

js


// components/pay/payType.js
const app = getApp()
const request = require('../../utils/request.js')
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    money: String,  //金额
    pay_num: {
      type: String,  //支付方式数量  1 微信  2 转账 微信  3 转账 微信 余额
      observer: function (newVal, oldVal) {
        // 属性值变化时执行 可省略
        if (newVal == 1) {
          this.setData({
            payType: 3
          })
        } else if (newVal == 2) {
          this.setData({
            payType: 1
          })
        }
      }
    },
    order_id: String, //订单id
    source: String, //支付来源  1-订单 2-充值 3-打赏 4-交保证金
    deposit_id: String, //保证金id
    goods_id: String, //商品id，用于交完保证金跳转
    userId: String, //被打赏的用户id
    circle_id: String, //被打赏的圈子id
  },

  /**
   * 组件的初始数据
   */
  data: {
    imgurl: app.globalData.imgurl, //全局img路径
    payType: 1,  // 支付方式  1转账  2余额  3微信
    show: true,  //支付方式
    showPsd: false,  //密码
    codeVal: '', //六位密码
    payFocus: true,  //密码框聚焦
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击三种支付方式  1转账  2余额  3微信
    getPayType(e) {
      let type = e.currentTarget.dataset.type
      this.setData({
        payType: type
      })
    },
    // 点击确认支付
    goPay() {
      if (this.data.payType == 1) {
        wx.navigateTo({
          url: `/pages/transfer/transfer?type=${this.data.pay_num}&money=${this.data.money}&order_id=${this.data.order_id}&source=${this.data.source}`
        })
      } else if (this.data.payType == 2) {
        // 首先判断是否设置支付密码
        request('user/getPaypassword', {}, 1).then(data => {
          if (!data.have_paypassword) {
            wx.showModal({
              title: '去设置密码',
              content: '设置密码后才能完成余额支付',
              confirmColor: "#FC5E62",
              success(res) {
                if (res.confirm) {
                  wx.navigateTo({
                    url: '/pages/set/resetPsd/resetPsd'
                  })
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            })
          } else {
            this.setData({
              show: false,  //支付方式
              showPsd: true,  //密码
            })
          }
        })
      } else {
        // 微信支付
        request('WxPay/wechatPay', {
          order_id: this.data.order_id,   //订单id——订单支付
          type: this.data.source,     //1-订单 2-充值 3-打赏 4-交保证金
          total_money: this.data.money,
          deposit_id: this.data.deposit_id, // 保证金id
          user_id: this.data.userId  //被打赏人id
        }, 1).then(data => {
          console.log(data);
          let _this = this
          // 调取微信支付
          wx.requestPayment({
            timeStamp: data.data.timeStamp,
            nonceStr: data.data.nonceStr,
            package: data.data.package,
            signType: data.data.signType,
            paySign: data.data.paySign,
            success: function (res) {
              console.log(res);
              _this.onClose()
              if (_this.data.source == 1) {  //1-订单
                console.log(11111111111111111111);
                wx.navigateBack({
                  delta: 1, // 回退前 delta(默认为1) 页面
                })
              } else if (_this.data.source == 2) { // 2-充值
                wx.navigateBack({
                  delta: 1, // 回退前 delta(默认为1) 页面
                })
              } else if (_this.data.source == 3) {  //3-打赏
                // 生成打赏记录
                request('circle/addAward', {
                  circleId: _this.data.circle_id,
                  awardUserId: _this.data.userId,
                  money: _this.data.money
                }).then(data => {
                  console.log(data)   // 成功回调
                  wx.showToast({
                    title: '打赏成功',
                    icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
                    duration: 2000
                  })
                })
              } else if (_this.data.source == 4) {  //4-交保证金
                wx.redirectTo({
                  url: "/pages/goods_detail/goods_detail?goods_id=" + this.data.goods_id
                })
              }
            },
            fail(res) {
              console.log(res);
            }
          })
        }).catch(res => {
          wx.showToast({
            title: res.msg,
            icon: 'none',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
            duration: 2000,      //停留时间
          })
          _this.triggerEvent('close');
        })
      }
    },
    // 关闭支付方式
    onClose() {
      this.setData({ show: false });
      this.triggerEvent('close');
    },
    // 关闭密码
    onClosePsd() {
      this.setData({
        show: true,
        showPsd: false
      });
    },

    // 输入密码监听
    inputPwd: function (e) {
      this.setData({
        codeVal: e.detail.value
      });
      if (e.detail.value.length == 6) {
        this.setData({
          show: false,
          showPsd: false,
          payFocus: false
        })
        // 调取余额支付接口
        request('Pay/balancePay', {
          paypassword: this.data.codeVal,
          order_id: this.data.order_id
        }, 1).then(data => {
          // 支付成功
          wx.showToast({
            title: '支付成功',
            icon: '',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
            duration: 2000,      //停留时间
          })
          setTimeout(function () {
            wx.redirectTo({
              url: '/pages/my/order/order?index=2'
            })
          }, 2000)
        }).catch(res => {
          wx.showToast({
            title: res.msg,
            icon: 'none',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
            duration: 2000,      //停留时间
          })
          this.triggerEvent('close');
        })
      }
    },
    //获取输入密码焦点
    getFocus() {
      this.setData({ payFocus: true });
    },

    // 点击忘记密码，去设置
    toSetPwd() {
      wx.navigateTo({
        url: '/pages/set/resetPsd/resetPsd'
      })
    }
  }
})

页面调用组件

{
  "usingComponents": {
    "pay": "/components/pay/payType"
  },
  "navigationBarTitleText": "报名提交保证金"
}

<view class="button" bindtap="gopay">报名，提交保证金</view>
<pay wx:if="{{show}}" money="{{money}}" pay_num="3" bind:close="close" />

// 点击支付保证金，有三种支付方式，所以传 pay_num 传 3
data: {
    goods_id: '',  //商品id
    money: '',  //保证金
    show: false,  //是否显示支付组件
  },
  gopay() {
    this.setData({
      show: true
    })
  },
  // 关闭支付方式
  close() {
    this.setData({
      show: false
    })
  },