小程序 提交订单 选择支付类型 demo

最新推荐文章于 2023-05-10 09:28:39 发布
最新推荐文章于 2023-05-10 09:28:39 发布
阅读量2.9k 收藏 9
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hector_1368391900/article/details/100133262
版权

概要：

  1. 支付类型 分为：微信支付、会员卡支付、到店支付。如果改用户不是会员 会员卡支付隐藏掉
  2. 通过元素属性hidden灵活的切换支付类型

目录

 

小程序代码：wxml

小程序代码：wxss

小程序代码：js

小程序代码：wxml

<import src="../../wxParse/wxParse.wxml" />
<view class='container'>
  <view class='message'>
    <view class='message-top'>
      <text class='title'>{{query.roomName}}</text>
      <view class='day'>
        <view class='inday'>
          <text>入住</text>
          <text>{{arriveDate}}</text>
        </view>
        <view class="outday">
          <text>离店</text>
          <text>{{leaveDate}}</text>
        </view>
        <text class='total-num'>共{{query.intevalDays}}晚</text>
      </view>
      <text class='name'>{{cname}}</text>
    </view>
    <view class='number'>
      <text>房间数</text>
      <view>
        <image bindtap='onMinus' src='images/minus.png'></image>
        <text>{{roomNum}}</text>
        <image bindtap='onAdd' src='images/add.png'></image>
      </view>
    </view>
  </view>
  <form bindsubmit="formSubmit" report-submit="true">
    <block>
      <view hidden wx:for="{{roomPrices}}" wx:key="key" wx:for-index="index">
        <input name="roomPrices[{{index}}].date" value="{{item.priceDate}}" type='hidden' />
        <input name="roomPrices[{{index}}].price" value="{{item.price}}" type='hidden' />
        <input name="roomPrices[{{index}}].breakfast" value="{{item.breakfast}}" type='hidden' />
        <input name="roomPrices[{{index}}].servicerate" value="{{item.servicerate}}" type='hidden' />
        <input name="roomPrices[{{index}}].roomCode" value="{{item.orderItemCode}}" type='hidden' />
        <input name="roomPrices[{{index}}].bookingNotice" value="{{item.bookingNoticeCdesc}}" type='hidden' />
        <input name="roomPrices[{{index}}].cancelNotice" value="{{item.cancelNoticeCdesc}}" type='hidden' />
      </view>
    </block>
    <block>
      <input type="hidden" hidden name="contractProfileId" value="" />
      <input type="hidden" hidden name="priceName" value="{{query.priceName}}" />
      <input type="hidden" hidden name="roomCode" value="{{query.roomCode}}" />
      <input type="hidden" hidden name="name" value="{{query.roomName}}" />
      <input type="hidden" hidden name="priceSystemId" value="{{query.priceSystemId}}" />
      <input type="hidden" hidden name="salesPromotionId" value="{{query.salesPromotionId}}" />
      <input type="hidden" hidden name="price" value="{{query.price}}" />
      <input type="hidden" hidden name="payMent" value="OFFLINEPAY" />
      <input type="hidden" hidden name="usablePayMent" value="{{query.payMent}}" />
      <input type="hidden" hidden name="rateCode" value="{{query.rateCode}}" />
      <input type="hidden" hidden name="roomQty" value="{{roomNum}}" />
      <input type="hidden" hidden name="hotelCode" value="{{query.hotelCode}}" />
      <input type="hidden" hidden name="totalFee" value="{{total}}" />
      <input type="hidden" hidden name="incamount" value="0" />
      <input type="hidden" hidden name="promotionFee" value="0" />
      <input type="hidden" hidden name="checkInTime" value="{{query.arriveDate}}" />
      <input type="hidden" hidden name="checkOutTime" value="{{query.leaveDate}}" />
      <input type="hidden" hidden name="intevalDays" value="{{query.intevalDays}}" />
      <!-- 优惠券ID -->
      <input type="hidden" hidden name="couponSeqid" value="{{query.couponSeqid}}" />
      <!-- 优惠券金额 -->
      <input type="hidden" hidden name="chargeamt" value="{{query.chargeamt}}" />
    </block>
    <view class='form'>
      <view>
        <text>预定人</text>
        <input type='text' name="contactName" placeholder='请输入预订人' value='' placeholder-style="color:#999;" bindinput='reserveInput' />
      </view>
      <view>
        <text>入住人</text>
        <input type='text' name="guestName" placeholder='请输入入住人' value='' placeholder-style="color:#999;" bindinput='nameInput' />
      </view>
      <view>
        <text>手机号</text>
        <input type='number' name="contactMobile" placeholder='请输入手机号码' value='' placeholder-style="color:#999;" maxlength='11' bindinput="telInput" />
      </view>
      <view>
        <text>备  注</text>
        <input type='text' name="roomSpecial" placeholder='请备注' value='' placeholder-style="color:#999;" />
      </view>
      <view hidden style='display:none'>
        <text>备  注</text>
        <input type='text' name="arriveTime" placeholder='抵达时间' value='18:00' placeholder-style="color:#999;" />
      </view>
    </view>

    <view class='order'>

      <view class='discount' bindtap='onCoupon'>
        <text>优惠券</text>
        <view class='coupon'>
          <text wx:if="{{!showMbrcardpay}}">非会员暂不支持优惠券</text>
          <text wx:elif="{{query.couponSeqid == null || query.couponSeqid == undefined || query.couponSeqid == ''}}">可用{{couponsObj.ableCount}}张优惠券</text>

          <text wx:else>优惠{{query.chargeamt}}元</text>
          <image src='images/arrows-right.png'></image>
        </view>
      </view>

      <!-- <view class='discount'>
        <text>返现</text>
        <view class='coupon'>
          <text>可返现5元</text>
        </view>
      </view> -->

      <view class='pay'>
        <text>支付方式</text>
        <view class='payment'>
          <view bindtap='onWxPay'>
            <view>
              <image src='images/wx.png'></image>
              <text>微信支付</text>
            </view>
            <image hidden="{{!(payMent=='WXPAY')}}" src='images/checked.png'></image>
          </view>
          <view bindtap='onMemberPay' hidden="{{!showMbrcardpay}}">
            <view>
              <image src='images/member.png'></image>
              <text>会员卡支付</text>
            </view>
            <image hidden="{{!(payMent=='BALANCEPAY')}}" src='images/checked.png'></image>
          </view>
          <view bindtap='onStorePay'>
            <view>
              <image src='images/store.png'></image>
              <text>到店支付</text>
            </view>
            <image hidden="{{!(payMent=='OFFLINEPAY')}}" src='images/checked.png'></image>
          </view>
        </view>
      </view>
      <view class='line'></view>
      <view class='tips'>
        <view class='tips-title'>
          <image src='images/tips.png'></image>
          <text>预订须知</text>
        </view>
        <view class='tips-text'>
          <template is="wxParse" data="{{wxParseData:article.nodes}}" />
        </view>

      </view>
      <view class='line'></view>
      <view class='tips' style='margin-bottom:120rpx'>
        <view class='tips-title'>
          <image src='images/tips.png'></image>
          <text>取消说明</text>
        </view>
        <view class='tips-text'>
          <template is="wxParse" data="{{wxParseData:a.nodes}}" />
        </view>

      </view>
    </view>
    <view class='submit'>
      <view class='submit-deatils' bindtap='onShade'>
        <text class='symbol'>￥</text>
        <text class='price'>{{total}}</text>
        <view class='details'>
          <text>明细</text>
          <image src="images/arrows-bottom.png"></image>
        </view>
      </view>
      <button class='submit-btn' form-type='submit'>提交订单</button>
      <!-- <view class='submit-btn' bindtap='onSubmit'>
        <text>提交订单</text>
      </view> -->
    </view>
  </form>

  <view class='shade-box' hidden="{{memberSubmit}}">
    <view class='member-pay'>
      <view class='member-money'>会员余额：￥
        <text class='money-num'>{{memberVo.balance}}</text>
      </view>
      <input type='password' bindinput="bindinputPwd" placeholder='请输入支付密码'></input>
      <view class='member-btn'>
        <view class='member-cancel' catchtap='closeMember'>取消</view>
        <view class='member-submit' catchtap="onBalancePay">提交</view>
      </view>
    </view>
  </view>

  <view class='shade-box' wx:if="{{shade}}">
    <view class='shade'>
      <image src='images/close.png' bindtap='onClose' />
      <text>在线支付</text>
      <view class='order-item'>
        <text>优雅大床房</text>
        <text>{{query.intevalDays}}晚，{{roomNum}}间共{{totalMoney}}元</text>
      </view>

      <view wx:if="{{query.couponSeqid != null && query.couponSeqid != undefined && query.couponSeqid != ''}}" class='order-item'>
        <text>优惠券</text>
        <text>-{{query.chargeamt}}元</text>
      </view>

      <view class='order-item'>
        <text>入住</text>
        <text>{{arriveDate}}</text>
      </view>
      <view class='order-item'>
        <text>离店</text>
        <text>{{leaveDate}}</text>
      </view>
      <!-- <view class='order-item'>
        <text>返现</text>
        <text>5元</text>
      </view>
      <view class='order-item'>
        <text>优惠券</text>
        <text>5元</text>
      </view> -->
      <view class='total'>
        <text>在线付款：</text>
        <text>￥</text>
        <text>{{total}}</text>
      </view>
    </view>
  </view>
</view>

小程序代码：wxss

@import '../../wxParse/wxParse.wxss';
page {
  background-color: #f5f5f5;
}

.message {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}

.number image {
  width: 46rpx;
  height: 46rpx;
}

.message-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 35rpx 42rpx;
}

.title {
  width: 100%;
  font-size: 34rpx;
  font-weight: bold;
  line-height: 1;
}

.day {
  width: 100%;
  display: flex;
  flex-direction: row;
  line-height: 1;
  margin-top: 27rpx;
}

.inday text:first-child, .outday text:first-child {
  font-size: 28rpx;
  color: #999;
}

.inday text:nth-child(2), .outday text:nth-child(2) {
  font-size: 32rpx;
  color: #5d4f8e;
  margin-left: 23rpx;
}

.outday {
  margin-left: 57rpx;
}

.total-num {
  font-size: 32rpx;
  color: #5d4f8e;
  margin-left: 59rpx;
}

.name {
  font-size: 32rpx;
  margin-top: 27rpx;
  line-height: 1;
}

.number {
  width: 100%;
  border-top: 1px solid #efefef;
  box-sizing: border-box;
  padding: 26rpx 42rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.number>text {
  font-size: 32rpx;
  line-height: 1;
}

.number>view {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.number>view text {
  padding: 0 25rpx;
  font-size: 34rpx;
  line-height: 1;
}

.form {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}

.form view {
  width: 100%;
  height: 98rpx;
  border-top: 1px solid #efefef;
  box-sizing: border-box;
  padding: 0 42rpx;
  display: flex;
  align-items: center;
}

.form view:first-child {
  border-top: 0;
}

.form view text {
  font-size: 32rpx;
}

.form view input {
  flex: 1;
  margin-left: 30rpx;
  font-size: 32rpx;
}

.order {
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}

.line {
  width: 100%;
  height: 20rpx;
  background: #f5f5f5;
}

.discount {
  width: 100%;
  height: 98rpx;
  border-bottom: 1px solid #e2e2e2;
  box-sizing: border-box;
  padding: 0 42rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.discount image {
  width: 20rpx;
  height: 20rpx;
}

.discount>text {
  font-size: 32rpx;
}

.coupon{
  height: 32rpx;
  /* display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; */
}

.coupon text {
  color: #5d4f8e;
  font-size: 30rpx;
  margin-right: 8rpx;
}

.pay {
  width: 100%;
  box-sizing: border-box;
  /* padding: 50rpx 0rpx; */
  display: flex;
  flex-direction: column;
}

.pay>text {
  font-size: 32rpx;
  margin-bottom: 30rpx;
  margin-top: 30rpx;
  text-indent: 30rpx;
}

.payment {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.payment>view {
  width: 100%;
  height: 106rpx;
  box-sizing: border-box;
  border-top: 1px solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 70rpx 0 30rpx;
}

.payment>view>view {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.payment>view>view>image {
  width: 42rpx;
  height: 42rpx;
}

.payment>view>image {
  width: 42rpx;
  height: 42rpx;
}

.payment view text {
  font-size: 32rpx;
  color: #666;
  margin-left: 16rpx;
}

.tips {
  width: 100%;
  margin-top: 10rpx;
  /* margin-bottom: 140rpx; */
  box-sizing: border-box;
  padding: 0 42rpx;
  display: flex;
  flex-direction: column;
}

.tips image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}
.tips text{
  font-size: 30rpx;
  color: #999;
  line-height: 48rpx;
}
.tips .tips-text {
  font-size: 30rpx;
  color: #999;
  line-height: 48rpx;
}

.tips view {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}

.submit {
  width: 100%;
  height: 95rpx;
  border-top: 1px solid #efefef;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.submit-deatils {
  flex: 1;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding-left: 74rpx;
  align-items: baseline;
  line-height: 1;
}

.details image {
  width: 16rpx;
  height: 16rpx;
}

.submit-btn::after {
  border-radius: 0;
}

.submit-btn {
  width: 284rpx;
  height: 100%;
  background-color: #ceab67;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  outline: none;
  border-radius: 0;
  color: #fff;
}

.submit-btn text {
  font-size: 36rpx;
  color: #fff;
}

.symbol {
  font-size: 32rpx;
}

.price {
  font-size: 48rpx;
  font-family:DIN;
}

.details {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  font-size: 30rpx;
}

.details text {
  margin-right: 8rpx;
}

.shade-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 999;
}

.shade {
  width: 100%;
  height: 600rpx;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 70rpx 48rpx 0 58rpx;
  display: flex;
  flex-direction: column;
}

.shade text {
  font-size: 36rpx;
  color: #000;
  line-height: 1;
}

.shade .order-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30rpx;
}

.shade image {
  width: 28rpx;
  height: 28rpx;
  padding: 30rpx 48rpx 0 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}

.total {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  margin-top: 50rpx;
}

.total text:first-child {
  font-size: 36rpx;
  color: #000;
}

.total text:nth-child(2) {
  font-size: 28rpx;
  color: #ceab67;
}

.total text:nth-child(3) {
  font-size: 36rpx;
  font-family:DIN;
  color: #ceab67;
}


.member-pay{
  width: 560rpx;
  height: 300rpx;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 20rpx;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.member-money{
  text-align: center;
  font-size: 30rpx;
  color: #333;
  margin-top: 30rpx;
}
.member-money text{
  font-family: DIN;
  font-weight: 500;
  color: #333;
  font-size: 40rpx;
}

.member-pay input{
  width: 480rpx;
  height: 80rpx;
  border: 1px solid #efefef;
  border-radius: 6rpx;
  font-size: 30rpx;
  color: #333;
  box-sizing: border-box;
  padding: 0 30rpx;
}

.member-btn{
  width: 100%;
  height: 80rpx;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  border-top: 1px solid #efefef;
}
.member-btn view{
  flex: 1;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.member-btn view:first-child{
  border-right: 1px solid #efefef;
}

小程序代码：js

// pages/order/index.js
var Moment = require("../../utils/moment.js");
const WxParse = require('../../wxParse/wxParse.js');
var DATE_LIST = [];
var DATE_YEAR = new Date().getFullYear()
var DATE_MONTH = new Date().getMonth() + 1
var DATE_DAY = new Date().getDate();

const app = getApp();
const tool = app.utils;
let post_data = {
  payMent: 'WXPAY',
  mpOpenId: '',
  openId: '',
  orderSn: '',
  companyId: ''
}
let post_coupons = {
  totalFee: undefined,
  profileId: undefined,
  hotelCode: undefined,
  roomCode: undefined,
  rateCode: undefined
}
let post_member = {
  payPwd: undefined
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    roomNum: 1,
    shade: false,
    memberSubmit: true,
    userName: '',
    mobile: '',
    num: 1,
    contactName: '',
    price: 0,
    cname: '',
    total: 0,
    payMent: 'WXPAY',
    bookingNoticeCdesc: '',
    cancelNoticeCdesc: '',
    showMbrcardpay: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    console.debug("初始化数据：", options);
    this.setData({
      cname: options.cname
    })
    tool.loading.show();
    tool.https.post('/wxapp/hotel/booking.do', options)
      .then((res) => {
        if (res.success) {

          console.debug("客房数据查询结果：", res);

          let query = res.obj.query;
          this.serialQueryObj(query, res.obj);
          console.debug("query 对象序列化结果：", query);
          if (res.obj.roomPrices[0].bookingNoticeCdesc != null) {
            let bookingNoticeCdesc = res.obj.roomPrices[0].bookingNoticeCdesc;
            WxParse.wxParse('article', 'html', bookingNoticeCdesc, this, 0);
          }
          if (res.obj.roomPrices[0].cancelNoticeCdesc != null) {
            let cancelNoticeCdesc = res.obj.roomPrices[0].cancelNoticeCdesc;
            WxParse.wxParse('a', 'html', cancelNoticeCdesc, this, 0);
          }
          this.setData({
            roomPrices: res.obj.roomPrices,
            bookingNoticeCdesc: res.obj.roomPrices[0].bookingNoticeCdesc,
            cancelNoticeCdesc: res.obj.roomPrices[0].cancelNoticeCdesc,
            query: query,
            arriveDate: query.arriveDate.substring(5, 10).replace('-', '/'),
            leaveDate: query.leaveDate.substring(5, 10).replace('-', '/'),
            roomNum: query.roomQty,
            price: query.price.toFixed(2),
            totalFee: query.totalFee.toFixed(2),
            total: query.totalFee.toFixed(2)
          });

          post_coupons.hotelCode = query.hotelCode;
          post_coupons.rateCode = query.rateCode;
          post_coupons.roomCode = query.roomCode;
          post_coupons.totalFee = res.obj.totalFee;

          this.reqCouponsForHotel(); //加载优惠券

          this.reqMemberVo();

          tool.loading.hide();
        }
      }).catch((err) => {
        tool.loading.hide();
      });

    post_data.payMent = this.data.payMent;
  },
  reqCouponsForHotel() {
    console.info("请求-优惠券-param:", post_coupons);
    tool.https.post('/wxapp/memberCoupon/getCouponsForHotel.do', post_coupons).then(res => {
      console.info("请求-优惠券-成功:", res);
      this.setData({
        couponsObj: res.obj
      });
    }).catch(err => {
      console.info("请求-优惠券-失败:", err);
    });
  },
  reqMemberVo() {
    let payMent = this.data.query.payMent;
    if (tool.string.isEmpty(payMent)) {
      return true;
    }
    if (payMent.indexOf("mbrcardpay") == -1) {
      this.setData({
        showMbrcardpay: false
      });
      return true;
    }
    tool.https.gett("/wxapp/member/getMemberVo2.do").then(res => {
      console.info("请求-会员信息-成功:", res);
      if (res.success && tool.string.isNotEmpty(res.obj) && tool.string.isNotEmpty(res.obj.profileId)) {
        this.setData({
          showMbrcardpay: true,
          memberVo: res.obj
        });
      }
    }).catch(err => {
      console.info("请求-会员信息-失败:", err);
    });

  },
  //序列化 query 对像
  serialQueryObj: function(dest, src) {
    for (let k in src) {
      if (k == 'query' || k == 'roomPrices') continue;
      dest[k] = src[k];
    }
  },
  // 房间数量减法操作
  onMinus: function(event) {
    if (this.data.roomNum > 1) {
      var minusNum = this.data.roomNum - 1;
      // var totalMoney = minusNum * this.data.totalFee;
      this.setData({
        roomNum: minusNum
        // total: totalMoney.toFixed(2)
      })
    } else {
      this.setData({
        roomNum: 1
      })
    }
    this.updateTotalFee();
  },
  // 点击显示明细
  onShade: function(event) {
    this.setData({
      shade: !this.data.shade
    })
  },
  onClose: function(event) {
    this.setData({
      shade: !this.data.shade
    })
  },
  // 获取预订人信息
  reserveInput: function(e) {
    this.setData({
      contactName: e.detail.value
    })
  },
  // 获取入住人输入的信息
  nameInput: function(e) {
    this.setData({
      userName: e.detail.value
    })
  },
  // 获取输入的电话号码
  telInput: function(e) {
    this.setData({
      mobile: e.detail.value
    })
  },

  /**
   * 表单提交
   */
  formSubmit: function(e) {
    console.log(e)
    //TODO 校验表单
    var userName = this.data.userName;
    var mobile = this.data.mobile;
    var contactName = this.data.contactName;
    var phonetel = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    var name = /^[u4E00-u9FA5]+$/;
    if (contactName == '') {
      wx.showToast({
        title: '请输入预订人',
        icon: 'none',
        duration: 1500,
        mask: true
      })
      return false
    } else if (userName == '') {
      wx.showToast({
        title: '请输入入住人',
        icon: 'none',
        duration: 1500,
        mask: true
      })
      return false
    } else if (mobile == '') {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1500
      })
      return false
    } else if (mobile.length != 11) {
      wx.showToast({
        title: '手机号长度有误！',
        icon: 'none',
        duration: 1500
      })
      return false;
    } else if (!phonetel.test(mobile)) {
      wx.showToast({
        title: '手机号有误！',
        icon: 'none',
        duration: 1500
      })
      return false;
    } else {
      let form_data = e.detail.value;
      form_data.mpOpenId = app.globalData.openId;
      form_data.formId = e.detail.formId;

      console.log('form发生了submit事件，提交数据：', JSON.stringify(form_data));
      tool.loading.show('订单生成中', true);
      tool.https.post('/wxapp/hotel/order/save.do', form_data)
        .then((res) => {
          if (res.success) {
            tool.loading.show('订单校验', true);
            this.orderSubmit();


          } else {
            console.info("订单生成异常：", res);
            tool.modal.showToast(res.errmsg);
          }
        })
        .catch((err) => {
          console.error("订单生成错误:", err);
          tool.modal.showToast("网络异常0，稍后再试");
        });
    }

  },
  //提交订单
  orderSubmit: function() {

    // let post_data = {
    //   payMent: 'WXPAY',
    //   mpOpenId: app.globalData.openId
    // }
    post_data.mpOpenId = app.globalData.openId

    tool.https.post('/wxapp/hotel/order/submit.do', post_data)
      .then((res) => {
        if (res.success && res.errmsg != '') {
          console.log(post_data);
          tool.loading.show('校验成功', true);

          post_data.orderSn = res.errmsg;
          if (post_data.payMent == 'WXPAY') { //微信支付
            this.wxPay(res.errmsg);
          } else if (post_data.payMent == 'OFFLINEPAY') { //到店支付
            console.log("到店支付结果：", res);
            tool.loading.show('预定成功', true);
            this.toOrderPage(res.errmsg);
          } else if (post_data.payMent == 'BALANCEPAY') {
            tool.loading.hide();
            this.setData({
              memberSubmit: false
            });
          }
        } else {
          console.info("提交订单异常：", res);
          tool.modal.showToast(res.errmsg);
        }
      })
      .catch((err) => {
        tool.loading.hide();
        console.error("提交订单错误：", err);
        tool.modal.showToast("网络异常1,稍后再试");
      });
  },
  //微信支付
  wxPay: function(orderSn) {
    // let post_data = {
    //   openId: app.globalData.openId,
    //   orderSn: orderSn,
    //   companyId: app.globalData.comid
    // }
    post_data.openId = app.globalData.openId;
    post_data.orderSn = orderSn;
    post_data.companyId = app.globalData.comid

    tool.loading.show('支付校验', true);

    tool.https.post('/wxapp/pay/sign2.do', post_data).then(res => {
        tool.loading.hide();
        if (res.success) {
          wx.requestPayment({
            timeStamp: res.obj.timeStamp,
            nonceStr: res.obj.nonceStr,
            package: res.obj.package,
            signType: res.obj.signType,
            paySign: res.obj.paySign,
            success: msg => {
              console.info("微信支付成功", msg);
              this.toOrderPage(post_data.orderSn);
            },
            fail: function(msg) {
              console.info("微信支付失败", msg);
            }
          })
        } else {

          console.error(res);
          tool.modal.showToast(res.errmsg, 'none', true);
        }
      })
      .catch(err => {
        console.error(err);
      });
  },
  //会员卡支付
  onBalancePay(orderSn) {
    post_data.openId = app.globalData.openId;
    // post_data.orderSn = orderSn;
    post_data.companyId = app.globalData.comid;

    let balance = this.data.memberVo.balance;
    let totalFee = this.data.total;

    if (totalFee > balance) {
      tool.modal.showToast("余额不足");
      return false;
    }

    post_data.payPwd = post_member.payPwd;
    post_data.mbrCardNo = this.data.memberVo.mbrCardNo;

    console.info("表单-会员卡支付数据:", post_data);
    tool.loading.show('密码校验', true);
    tool.https.post("/wxapp/pay/balance.do", post_data).then(res => {
      console.info("请求-会员卡支付-成功:", res);
      tool.loading.hide();

      if (res.success) {
        this.toOrderPage(post_data.orderSn);
        return true;
      }
      tool.modal.showToast(res.errmsg);
    }).catch(err => {
      console.info("请求-会员卡支付-失败:", err);
    });
  },
  bindinputPwd(e) { //输入密码
    post_member.payPwd = e.detail.value;
  },
  //跳转到订单页面
  toOrderPage: function(orderSn) {
    wx.navigateTo({
      url: '../orderAffirm/index?orderSn=' + orderSn,
    });
  },
  // 房间数量加法操作
  onAdd: function(event) {
    var addNum = this.data.roomNum + 1;
    // var totalMoney = addNum * this.data.totalFee;
    this.setData({
      roomNum: addNum
    });
    this.updateTotalFee();
  },
  // 点击选择微信支付
  onWxPay: function() {
    post_data.payMent = 'WXPAY';
    this.setData({
      payMent: post_data.payMent
    });
  },
  // 点击选择到店支付
  onStorePay: function() {
    post_data.payMent = 'OFFLINEPAY';
    this.setData({
      payMent: post_data.payMent
    });
  },
  // 点击选择会员卡支付
  onMemberPay: function() {
    post_data.payMent = 'BALANCEPAY';
    this.setData({
      payMent: post_data.payMent
    });
  },
  // 点击关闭会员卡支付密码框
  closeMember: function() {
    this.setData({
      memberSubmit: true
    })
  },
  // 点击跳转到红包页面
  onCoupon: function(event) {
   if(!this.data.showMbrcardpay){
     return;
   }
    wx.navigateTo({
      url: '../coupon/index',
    });
  },
  onUseCouponByIndex(index) {
    let coupon = this.data.couponsObj.coupons[index];
    if (tool.string.isEmpty(coupon)) {
      return false;
    }
    let thatQuery = this.data.query;
    if (coupon.isAble) { //可用
      thatQuery.couponSeqid = coupon.seqid;
      thatQuery.chargeamt = coupon.chargeamt;

    } else {
      thatQuery.couponSeqid = '';
      thatQuery.chargeamt = 0;
    }
    this.setData({
      query: thatQuery
    });
    this.updateTotalFee(); //更新总价格
    // console.info("使用优惠券的数组索引:",index);
  },
  updateTotalFee() {
    let roomnum = this.data.roomNum; //数量
    let price = this.data.price; //单价
    let couponPrice = 0; //优惠价格
    if (tool.string.isEmpty(roomnum)) {
      roomnum = 1;
    }
    if (tool.string.isNotEmpty(this.data.query.couponSeqid)) {
      couponPrice = this.data.query.chargeamt;
    }
    let totalMoney = roomnum * price;
    let payMoney = totalMoney - couponPrice;
    this.setData({
      total: payMoney.toFixed(2),
      totalMoney: totalMoney.toFixed(2)
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

 

 

优惠券demo： https://blog.csdn.net/HECTOR_1368391900/article/details/99867725

 

 

蜗牛 Day Day Up
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序demo：微信支付后端demo（java）
03-17
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序picker选择器各种类型demo
11-13
微信小程序picker选择器各种类型的示例
小程序微信支付demo
野蛮女孩的博客
05-10 874
原文链接：https://blog.csdn.net/weixin_41476211/article/details/128496850。版权声明：本文为CSDN博主「俗人码农」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。参考文档:https://www.cnblogs.com/cchilei/p/16077207.html。申请APPID,申请mchid,绑定APPID及mchid,设置APIV3密钥,下载并配置商户证书。
手搓微信支付Demo【套全参数即可跑通】
m0_59588838的博客
08-15 1112
结合微信sdk用springboot手写微信支付demo，动起来！
微信小程序下订单支付代码实现
艾小逗
06-17 6876
目录支付流程具体实现一、前端调用登录获取code二、服务端接收code，服务端调用微信api获取openId三、前端点击去支付时四、服务端请求微信统一下单接口五、前端获取到prePay_id 调起支付六、注意 支付流程 点击去结算时，，前端判断是否登录【未登录跳转到登录页】,登录发送code到服务端，服务端使用code发送请求去获取openId；并返回userId/openId存储在storage； 点击去支付时，前端发送请求【订单详细，openId】，服务器用openId去统一下单，下单成功后，获
微信小程序订单页面
weixin_44267423的博客
08-17 1万+
微信小程序订单页面 先预览一下效果 html代码： <view class="order" wx:if="{{TabCur == 0}}"> <view class="content_"> <view class="title"> <view>订单编号：2018041729873019</view> <text>交易成功</text> </view> <view class="c
小程序识别用户手机系统选择支付方式
沉默的小猴子的博客
12-29 1013
写在前言：用过微信支付的都知道，小程序在支付时候也被苹果无情的抛弃了。所以就要区分是安卓机型还是苹果机型。那么怎么区分呢，在小程序中有API的。 wx.getSystemInfo组件功能就是获取用户手机系统信息 这一点我们直接配置在小程序的APP.JS中方便整个小程序的页面调用 //app.js onLaunch: function(ops) { //调用API从本地缓存中获取数据 ...
小程序支付字节跳动demo(头条抖音小程序等)
11-02
根据字节小程序(https://microapp.bytedance.com/)文档进行封装的支付\退款demo,用来练习参考，也可以用于项目业务改装
微信小程序端，调起H5支付demo
06-04
微信小程序端，调起H5支付demo，小程序代码
微信小程序 支付Demo
07-10
该代码资源包，用于进行配置微信小程序支付功能，包括前后端核心代码。需要根据文章：https://blog.csdn.net/u011415782/article/details/80944832 进行参考配置。欢迎指摘，谢谢...
微信小程序支付demo.zip
05-28
微信小程序支付|付款Demo,内有使用教程，详细注释，php代码，小程序代码，方便测试微信小程序支付各项参数是否正确，也可以用户项目支付开发
微信小程序支付demo后端(springboot)
03-10
java开发 微信小程序支付接口的demo; 使用springboot 进行编写,maven搭建的项目，调用官方的sdk 和自己编写的代码 demo中含有https映射配置讲解
小程序支付demo
06-25
小程序支付demo，本程序调试通过可以正常支付到自己的公众号上，只需要配置参数，本人已经调试通过。
uni-app 公众号做微信支付和支付宝支付
Becks_的博客
03-09 1166
公众号做微信支付和支付宝支付 微信支付 首先确保已经开通微信支付和绑定了微信公众号，如有疑问请前往微信公众平台申请。 uniapp端 <template> <view class="app"> <view class="price-box"> <text>支付金额</text> <text class="price">{{money}}</text> </view> <view
支付宝小程序自定义下拉选择框统计总和模块
JackieDYH的博客
02-02 1072
效果图 源码 <view class="pay"> <view class="head"> <view class="item"> <view class="lt"> <image mode="scaleToFill" src="/images/pay_fw_02.png"/> <text>房屋信息</text> </view> .
微信小程序-订单页面
热门推荐
ChibiMarukoChan的博客
09-28 3万+
说明：头部有一个三种预约状态的切换 wxml页面： <!-- 切换栏 --> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == item.index ? 'o...
小程序--确认订单
Acitylion的博客
04-26 4222
<import src="../../template/baseNavigationBar.wxml"/> <template is="navigationBar" data="{{...item}}"></template> <view class="order_address" bindtap="bindaddress"> <...
微信小程序点击选项卡跳转到订单页对应列表
青衫折扇的博客
03-25 3751
我们先看一下效果图: 接下来我们来看看代码吧: 个人中心WXML <view class="order-form"> <view class="order-cell"> <view class="cell" bindtap="noPay"> <image class="cell-img" src="../../../...
小程序拉起支付demo
最新发布
12-07
以上是一个小程序拉起支付的demo示例，通过调用小程序的支付接口，实现用户在小程序内进行支付的功能。根据实际业务需求，可以对支付接口的参数进行配置和处理，并根据支付结果进行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值