cyywl_server/yudao-ui-app/components/paymentMember/index.vue

<template>
  <view>
    <view class="payment" :class="pay_close ? 'on' : ''">
      <view class="title acea-row row-center-wrapper">
        选择付款方式<text class="iconfont icon-guanbi" @click='close'></text>
      </view>
      <view class="item acea-row row-between-wrapper" @click='goPay(item.value)' v-for="(item,index) in payMode"
        :key="index">
        <view class="left acea-row row-between-wrapper">
          <view class="iconfont" :class="item.icon"></view>
          <view class="text">
            <view class="name">{{item.name}}</view>
            <view class="info" v-if="item.number">
              {{item.title}} <span class="money">￥{{ item.number }}</span>
            </view>
            <view class="info" v-else>{{item.title}}</view>
          </view>
        </view>
        <view class="iconfont icon-xiangyou"></view>
      </view>
    </view>
    <view class="mask" @click='close' v-if="pay_close"></view>
    <!-- 支付宝支付界面 -->
    <u-modal :show="alipayShow" title="支付宝支付" @confirm="handleConfirm">
     <view class="slot-content">
        <rich-text :nodes="alipayForm"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import {
    orderPay,
    wechatOrderPay,
    wechatQueryPayResult
  } from '@/api/order.js';
  import {
    memberTopUp
  } from '@/api/member.js';
  import {
    mapGetters
  } from "vuex";
  export default {
    props: {
      payMode: {
        type: Array,
        default: function() {
          return [];
        }
      },
      pay_close: {
        type: Boolean,
        default: false,
      },
      payInfo: {
        type: Object,
        deafult: () => {
          return {
            orderInfos: []
          }
        }
      }
    },
    data() {
      return {
        alipayShow: false,
        alipayForm:`链接已复制，请到外部浏览器完成支付`
      };
    },
    computed: mapGetters(['systemPlatform', 'openId']),
    methods: {
      handleConfirm(){
        this.alipayShow = false
        window.location.reload()
      },
      // 复制操作
              _copy(context) {
                  // 创建输入框元素
                  let oInput = document.createElement('input');
                  // 将想要复制的值
                  oInput.value = context;
                  // 页面底部追加输入框
                  document.body.appendChild(oInput);
                  // 选中输入框
                  oInput.select();
                  // 执行浏览器复制命令
                  document.execCommand('Copy');
                  // 弹出复制成功信息
                  this.$util.Tips({
                  	title: '复制链接成功'
                  })
                  this.alipayShow = true
                  // 复制后移除输入框
                  oInput.remove();
              },
      close: function() {
        this.$emit('onChangeFun', {
          action: 'payClose'
        });
      },
      // 微信支付JSAPI调起
      wxPayJSAPI(payData) {
        function onBridgeReady() {
          WeixinJSBridge.invoke('getBrandWCPayRequest', {
              "appId": payData.appId, //公众号ID，由商户传入
              "timeStamp": payData.timeStamp, //时间戳，自1970年以来的秒数
              "nonceStr": payData.nonceStr, //随机串
              "package": payData.packageValue,
              "signType": payData.signType, //微信签名方式：
              "paySign": payData.paySign //微信签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                window.location.reload()
                // uni.switchTab({
                //   url: '/pages/member_application/index'
                // })
              }
            })
        }
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
          }
        } else {
          onBridgeReady()
        }
      },
      goPay: function(paytype) {
        let that = this;
        if (that.payInfo.orderInfos.length === 0) return that.$util.Tips({
          title: '请选择要支付的订单'
        });
        uni.showLoading({
          title: '支付中',
          mask: true
        });
        if(paytype === 'WXPAY' && !that.openId) {
          return that.$util.Tips({
            title: '请在微信客户端进行支付操作'
          });
        } else {
          that.payInfo.openid = that.openId
        }
        memberTopUp({
          ...that.payInfo,
          payType: paytype
        }).then(res => {
          let jsConfig = res.data
          switch (paytype) {
            case 'WXPAY':
              uni.hideLoading();
              that.wxPayJSAPI(jsConfig.jsapiResult)
              break;
            case 'ALIPAY':
              uni.hideLoading();
              this._copy(jsConfig.body)
              this.alipayShow = true
              // const div = document.createElement('div')
              // /* 下面的data.content就是后台返回接收到的数据 */
              // div.innerHTML = jsConfig.body
              // document.body.appendChild(div)
              // document.forms[0].submit()
              break;
            case 'weixinh5':
              uni.hideLoading();
              location.replace(jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol +
                '//' + window.location.host + goPages + '&status=1');
              return that.$util.Tips({
                title: "支付中",
                icon: 'success'
              }, () => {
                that.$emit('onChangeFun', {
                  action: 'pay_complete'
                });
              });
              break;
          }
        }).catch(err => {
          uni.hideLoading();
          return that.$util.Tips({
            title: err
          }, () => {
            that.$emit('onChangeFun', {
              action: 'pay_fail'
            });
          });
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .payment {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
    background-color: #fff;
    padding-bottom: 4%;
    z-index: 99;
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transform: translate3d(0, 100%, 0);
  }

  .payment.on {
    transform: translate3d(0, 0, 0);
  }

  .payment .title {
    text-align: center;
    height: 123rpx;
    font-size: 32rpx;
    color: #282828;
    font-weight: bold;
    padding-right: 30rpx;
    margin-left: 30rpx;
    position: relative;
    border-bottom: 1rpx solid #eee;
  }

  .payment .title .iconfont {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 43rpx;
    color: #8a8a8a;
    font-weight: normal;
  }

  .payment .item {
    border-bottom: 1rpx solid #eee;
    height: 130rpx;
    margin-left: 30rpx;
    padding-right: 30rpx;
  }

  .payment .item .left {
    width: 610rpx;
  }

  .payment .item .left .text {
    width: 540rpx;
  }

  .payment .item .left .text .name {
    font-size: 32rpx;
    color: #282828;
  }

  .payment .item .left .text .info {
    font-size: 24rpx;
    color: #999;
  }

  .payment .item .left .text .info .money {
    color: #ff9900;
  }

  .payment .item .left .iconfont {
    font-size: 45rpx;
    color: #09bb07;
  }

  .payment .item .left .iconfont.icon-zhifubao {
    color: #00aaea;
  }

  .payment .item .left .iconfont.icon-yuezhifu {
    color: #ff9900;
  }

  .payment .item .left .iconfont.icon-yuezhifu1 {
    color: #eb6623;
  }

  .payment .item .iconfont {
    font-size: 0.3rpx;
    color: #999;
  }
</style>