cyywl_server/yudao-ui-app/pages/goods_cashier/index.vue

<template>
  <view class="page" v-if="payPriceShow">
    <view class="pay-price">
      <view class="title">实付金额</view>
      <view class="price">
        <text class="unit">￥</text>
        <numberScroll :num='payPriceShow' color="#F12A65" width='30' height='50' fontSize='50'></numberScroll>
      </view>
      <view class="count-down">
        支付剩余时间
        <countDown :is-day="false" :is-show-hour='false' :tip-text="''" :day-text="''" :hour-text="''" :minute-text="' : '"
          :second-text="' '" :datatime="invalidTime"></countDown>
      </view>
    </view>
    <view class="payment">
      <view class="title">
        请选择支付方式
      </view>
      <view class="item acea-row row-between-wrapper" v-for="(item,index) in cartArr" :key="index"
        v-show='item.payStatus' @click="payType(item.number || 0, item.value, 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.value == 'yue'">
              {{item.title}} <span class="money">￥{{ item.number }}</span>
            </view>
            <!-- <view class="info" v-else>{{item.title}}</view> -->
          </view>
        </view>
        <view class="iconfont" :class="active==index?'icon-xuanzhong11 font-num':'icon-weixuan'"></view>
      </view>
    </view>
    <view class="btn">
      <view class="button acea-row row-center-wrapper pay-button" @click='goPay(number, paytype)'>确认支付</view>
      <view class="wait-pay" @click="waitPay">暂不支付</view>
    </view>
    <view v-show="false" v-html="formContent"></view>
    <u-modal :show="cancelPayModalShow" width="519rpx">
      <view class="modal-wrap">
        <view class="count-down">
          支付剩余时间
          <countDown :is-day="false" :is-show-hour='false' :tip-text="''" :day-text="''" :hour-text="''" :minute-text="' : '"
            :second-text="' '" :datatime="invalidTime"></countDown>
        </view>
        <view class="model-content">确认要放弃付款吗？</view>
      </view>
      <view slot="confirmButton">
        <view class="modal-btn-wrap">
          <u-button class="give-up-btn" @click="onGiveUpPay">放弃</u-button>
          <u-button class="continue-btn">继续支付</u-button>
        </view>
      </view>
    </u-modal>
  </view>
  </view>
</template>

<script>
  import countDown from '@/components/countDown';
  import numberScroll from '@/components/numberScroll.vue'
  import {
    getCashierOrder,
    orderPay
  } from '@/api/order.js';
  export default {
    components: {
      countDown,
      numberScroll
    },
    data() {
      return {
        cancelPayModalShow: false,
        checked: false,
        //支付方式
        cartArr: [{
            "name": '微信支付',
            "icon": "icon-weixin2",
            value: 'weixin',
            title: '使用微信快捷支付',
            payStatus: 1,
          },
          {
            "name": '支付宝支付',
            "icon": "icon-zhifubao",
            value: 'alipay',
            title: '使用支付宝支付',
            payStatus: 1,
          }
        ],
        orderId: 0,
        fromType: '',
        active: 0,
        payPrice: 10.00,
        payPriceShow: 10.00,
        payPostage: 0,
        offlinePostage: false,
        invalidTime: 1684836534,
        initIn: false,
        jumpData: {
          orderId: '',
          msg: ''
        },
        formContent: ''
      }
    },
    watch: {
      cartArr: {
        handler(newV, oldValue) {
          let newPayList = [];
          newV.forEach((item, index) => {
            if (item.payStatus) {
              item.index = index;
              newPayList.push(item)
            }
          });
          this.active = newPayList[0].index;
          this.paytype = newPayList[0].value;
          this.number = newPayList[0].number || 0;
        },
        immediate: true,
        deep: true
      }
    },
    onLoad(options) {
      if (options.order_id) this.orderId = options.order_id
      if (options.from_type) this.fromType = options.from_type
      this.getCashierOrder()
    },
    onShow() {
      let options = wx.getEnterOptionsSync();
      console.log(options)
      if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.initIn) {
        // 代表从收银台小程序返回
        let extraData = options.referrerInfo.extraData;
        this.initIn = false
        if (!extraData) {
          // "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
          this.$util.Tips({
            title: `取消支付`
          }, {
            tab: 5,
            url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=取消支付&type=3&totalPrice=${this.payPriceShow}&status=2`
          });
        } else {
          if (extraData.code == 'success') {
            this.$util.Tips({
              title: `支付成功`,
              icon: 'success'
            }, {
              tab: 5,
              url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=${this.jumpData.msg}&type=3&totalPrice=${this.payPriceShow}`
            });
          } else if (extraData.code == 'cancel') {
            // "支付已取消";
            this.$util.Tips({
              title: `取消支付`
            }, {
              tab: 5,
              url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=取消支付&type=3&totalPrice=${this.payPriceShow}&status=2`
            });
          } else {
            // "支付失败：" + extraData.errmsg;
            uni.reLaunch({
              url: `/pages/goods/order_pay_status/index?order_id=${this.orderId}&msg=支付失败&totalPrice=${this.payPriceShow}`
            })
          }
        }
      }
    },
    methods: {
      onGiveUpPay() {
        this.cancelPayModalShow = false
        // uni.navigateBack()
      },
      getCashierOrder() {
        uni.showLoading({
          title: '加载中'
        });
        getCashierOrder(this.orderId, this.fromType).then(res => {
          console.log(res)
          this.payPrice = this.payPriceShow = res.data.pay_price
          this.payPostage = res.data.pay_postage
          this.offlinePostage = res.data.offline_postage
          this.invalidTime = res.data.invalid_time
          //微信支付是否开启
          this.cartArr[0].payStatus = res.data.wechat_pay_status || 0
          //支付宝是否开启
          this.cartArr[1].payStatus = res.data.ali_pay_status || 0;
          //#ifdef MP
          this.cartArr[1].payStatus = false;
          //#endif
          //余额支付是否开启
          // that.cartArr[2].title = '可用余额:' + res.data.userInfo.now_money;
          this.cartArr[2].number = res.data.now_money;
          this.cartArr[2].payStatus = res.data.yue_pay_status
          if (res.data.offline_pay_status) {
            this.cartArr[3].payStatus = 1
          } else {
            this.cartArr[3].payStatus = 0
          }
          //好友代付是否开启
          this.cartArr[4].payStatus = res.data.friend_pay_status || 0;
          uni.hideLoading();
        }).catch(err => {
          uni.hideLoading();
          return this.$util.Tips({
            title: err
          })
        })
      },
      payType(number, paytype, index) {
        this.active = index;
        this.paytype = paytype;
        this.number = number;
        if (this.offlinePostage) {
          if (paytype == 'offline') {
            this.payPriceShow = this.$util.$h.Sub(this.payPrice, this.payPostage);
          } else {
            this.payPriceShow = this.payPrice;
          }

        }
      },
      formpost(url, postData) {
        let tempform = document.createElement("form");
        tempform.action = url;
        tempform.method = "post";
        tempform.target = "_self";
        tempform.style.display = "none";
        for (let x in postData) {
          let opt = document.createElement("input");
          opt.name = x;
          opt.value = postData[x];
          tempform.appendChild(opt);
        }
        document.body.appendChild(tempform);
        this.$nextTick(e => {
          tempform.submit();
        })
      },
      waitPay() {
        this.cancelPayModalShow = true
        // uni.reLaunch({
        //   url: '/pages/goods/order_pay_status/index?order_id=' + this.orderId + '&msg=取消支付&type=3' +
        //     '&status=2&totalPrice=' + this.payPriceShow
        // })
      },
      goPay(number, paytype) {
        let that = this;
        if (!that.orderId) return that.$util.Tips({
          title: '请选择要支付的订单'
        });
        uni.showLoading({
          title: `支付中`
        });
        orderPay({
          uni: that.orderId,
          paytype: paytype,
          type: that.friendPay ? 1 : 0,
          // #ifdef H5
          quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location
            .port +
            '/pages/goods/order_details/index?order_id=' + this.orderId : location.protocol +
            '//' + location.hostname +
            '/pages/goods/order_details/index?order_id=' + this.orderId
          // #endif
          // #ifdef APP-PLUS
          quitUrl: '/pages/goods/order_details/index?order_id=' + this.orderId
          // #endif
        }).then(res => {
          let status = res.data.status,
            orderId = res.data.result.orderId,
            jsConfig = res.data.result.jsConfig,
            goPages = '/pages/goods/order_pay_status/index?order_id=' + this.orderId + '&msg=' +
            res
            .msg +
            '&type=3' + '&totalPrice=' + this.payPriceShow,
            friendPay = '/pages/users/payment_on_behalf/index?order_id=' + this.orderId +
            '&spread=' +
            this
            .$store.state.app.uid
          switch (status) {
            case 'ORDER_EXIST':
            case 'EXTEND_ORDER':
              uni.hideLoading();
              return that.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages
              });
            case 'ALLINPAY_PAY':
              uni.hideLoading();
              // #ifdef MP
              this.initIn = true
              wx.openEmbeddedMiniProgram({
                appId: 'wxef277996acc166c3',
                extraData: {
                  cusid: jsConfig.cusid,
                  appid: jsConfig.appid,
                  version: jsConfig.version,
                  trxamt: jsConfig.trxamt,
                  reqsn: jsConfig.reqsn,
                  notify_url: jsConfig.notify_url,
                  body: jsConfig.body,
                  remark: jsConfig.remark,
                  validtime: jsConfig.validtime,
                  randomstr: jsConfig.randomstr,
                  paytype: jsConfig.paytype,
                  sign: jsConfig.sign,
                  signtype: jsConfig.signtype
                }
              })
              this.jumpData = {
                orderId: res.data.result.orderId,
                msg: res.msg,
              }
              // #endif
              // #ifdef APP-PLUS
              plus.runtime.openURL(jsConfig.payinfo);
              setTimeout(e => {
                uni.reLaunch({
                  url: goPages
                })
              }, 1000)
              // #endif
              // #ifdef H5
              this.formpost(res.data.result.pay_url, jsConfig)
              // #endif
              break;
            case 'PAY_ERROR':
              uni.hideLoading();
              return that.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'SUCCESS':
              uni.hideLoading();
              if (paytype !== 'friend') {
                return that.$util.Tips({
                  title: res.msg,
                  icon: 'success'
                }, {
                  tab: 4,
                  url: goPages
                });
              } else {
                return that.$util.Tips({
                  title: res.msg,
                  icon: 'success'
                }, {
                  tab: 4,
                  url: friendPay
                });
              }


              break;
            case 'WECHAT_PAY':
              that.toPay = true;
              // #ifdef MP
              /* that.toPay = true; */
              let mp_pay_name = ''
              if (uni.requestOrderPayment) {
                mp_pay_name = 'requestOrderPayment'
              } else {
                mp_pay_name = 'requestPayment'
              }
              uni[mp_pay_name]({
                timeStamp: jsConfig.timestamp,
                nonceStr: jsConfig.nonceStr,
                package: jsConfig.package,
                signType: jsConfig.signType,
                paySign: jsConfig.paySign,
                success: function(res) {
                  uni.hideLoading();
                  if (that.BargainId || that.combinationId || that.pinkId ||
                    that
                    .seckillId || that.discountId)
                    return that.$util.Tips({
                      title: `支付成功`,
                      icon: 'success'
                    }, {
                      tab: 4,
                      url: goPages
                    });
                  return that.$util.Tips({
                    title: `支付成功`,
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: goPages
                  });
                },
                fail: function(e) {
                  uni.hideLoading();
                  return that.$util.Tips({
                    title: `取消支付`
                  }, {
                    tab: 5,
                    url: goPages + '&status=2'
                  });
                },
                complete: function(e) {
                  uni.hideLoading();
                  //关闭当前页面跳转至订单状态
                  if (res.errMsg == 'requestPayment:cancel' || e.errMsg ==
                    'requestOrderPayment:cancel') return that.$util
                    .Tips({
                      title: `取消支付`
                    }, {
                      tab: 5,
                      url: goPages + '&status=2'
                    });
                },
              })
              // #endif
              // #ifdef H5
              this.$wechat.pay(res.data.result.jsConfig).then(res => {
                return that.$util.Tips({
                  title: `支付成功`,
                  icon: 'success'
                }, {
                  tab: 5,
                  url: goPages
                });
              }).catch(res => {
                if (!this.$wechat.isWeixin()) {
                  uni.redirectTo({
                    url: goPages + '&msg=' + `支付失败` +
                      '&status=2'
                    // '&msg=支付失败&status=2'
                  })
                }
                if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
                  title: `取消支付`
                }, {
                  tab: 5,
                  url: goPages + '&status=2'
                });
              })
              // #endif
              // #ifdef APP-PLUS
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: jsConfig,
                success: (e) => {
                  let url = goPages;
                  uni.showToast({
                    title: `支付成功`
                  })
                  setTimeout(res => {
                    uni.redirectTo({
                      url: url
                    })
                  }, 2000)
                },
                fail: (e) => {
                  let url = '/pages/goods/order_pay_status/index?order_id=' +
                    orderId +
                    '&msg=' + `支付失败`;
                  uni.showModal({
                    content: `支付失败`,
                    showCancel: false,
                    success: function(res) {
                      if (res.confirm) {
                        uni.redirectTo({
                          url: url
                        })
                      } else if (res.cancel) {}
                    }
                  })
                },
                complete: () => {
                  uni.hideLoading();
                },
              });
              // #endif
              break;
            case 'PAY_DEFICIENCY':
              uni.hideLoading();
              //余额不足
              return that.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages + '&status=1'
              });
              break;

            case "WECHAT_H5_PAY":
              uni.hideLoading();
              that.$util.Tips({
                title: `等待支付中`
              }, {
                tab: 4,
                url: goPages + '&status=0'
              });
              setTimeout(() => {
                location.href = res.data.result.jsConfig.h5_url;
              }, 1500);
              break;

            case 'ALIPAY_PAY':
              //#ifdef H5
              uni.hideLoading();
              that.$util.Tips({
                title: `等待支付中`
              }, {
                tab: 4,
                url: goPages + '&status=0'
              });
              that.formContent = res.data.result.jsConfig;
              setTimeout(() => {
                document.getElementById('alipaysubmit').submit();
              }, 1500);
              //#endif
              // #ifdef MP
              uni.navigateTo({
                url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
              });
              // #endif
              // #ifdef APP-PLUS
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: jsConfig,
                success: (e) => {
                  uni.showToast({
                    title: `支付成功`
                  })
                  let url = '/pages/goods/order_pay_status/index?order_id=' +
                    orderId +
                    '&msg=' + `支付成功`;
                  setTimeout(res => {
                    uni.redirectTo({
                      url: url
                    })
                  }, 2000)

                },
                fail: (e) => {
                  let url = '/pages/goods/order_pay_status/index?order_id=' +
                    orderId +
                    '&msg=' + `支付失败`;
                  uni.showModal({
                    content: `支付失败`,
                    showCancel: false,
                    success: function(res) {
                      if (res.confirm) {
                        uni.redirectTo({
                          url: url
                        })
                      } else if (res.cancel) {}
                    }
                  })
                },
                complete: () => {
                  uni.hideLoading();
                },
              });
              // #endif
              break;
          }

        }).catch(err => {
          uni.hideLoading();
          return that.$util.Tips({
            title: err
          }, () => {
            that.$emit('onChangeFun', {
              action: 'pay_fail'
            });
          });
        })
      }
    }

  }
</script>
<style lang="scss" scoped>
  .page {
    .count-down .time {
      margin-left: 10rpx;
    }
    .modal-btn-wrap {
      display: flex;
      justify-content: space-between;

      .give-up-btn,
      .continue-btn {
        flex: 1;
        height: 71rpx;
        line-height: 71rpx;
        background: #F3F3F3;
        border: 1px solid #BFBFBF;
        border-radius: 35rpx;
        text-align: center
      }

      .continue-btn {
        margin-left: 47rpx;
        border: none;
        color: #fff;
        background: linear-gradient(0deg, #E83769 0%, #FE7E9D 100%);
      }
    }

    .modal-wrap {
      width: 100%;
      text-align: center;

      .count-down{
        display: flex;
        justify-content: center;
        font-size: 32rpx;
        color: #F4356B;
        margin-bottom: 42rpx;
        margin-top: 57rpx;
      }

      .model-content {
        font-size: 30rpx;
        color: #000;
      }
    }

    .pay-price {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 88rpx 0 56rpx 0;

      .title {
        font-size: 28rpx;
        color: #000;
        margin-bottom: 34rpx;
      }

      .price {
        color: #F12A65;
        margin-bottom: 29rpx;
        display: flex;
        align-items: flex-end;

        .unit {
          font-size: 30rpx;
          font-weight: 500;
          line-height: 41rpx;
        }

        .num {
          font-size: 50rpx;
          font-weight: 600;
        }
      }

      .count-down {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #7A7A7A;

        .time {
          margin-top: 0 !important;
        }

        /deep/.red {
          margin: 0 !important;
        }
      }
    }

    .payment {
      width: 690rpx;
      border-radius: 14rpx 14rpx;
      background-color: #fff;
      z-index: 999;
      margin: 0 30rpx;

      .title {
        color: #000;
        font-size: 32rpx;
        font-weight: 400;
        padding: 30rpx 0 25rpx 30rpx;
      }

      .payMoney {
        font-size: 28rpx;
        color: #333333;
        text-align: center;
        margin-top: 50rpx;

        .font-color {
          margin-left: 10rpx;

          .money {
            font-size: 40rpx;
          }
        }
      }


    }

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

    .icon-xuanzhong11 {
      color: #E93323 !important;
    }

    .payment .item {
      height: 80rpx;
      margin-left: 30rpx;
      padding-right: 30rpx;
    }

    .payment .item:last-child {
      border-bottom: none;
    }

    .payment .item .left {
      flex: 1;
    }

    .payment .item .left .text {
      flex: 1;
    }

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

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

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

    .payment .item .left .iconfont {
      font-size: 50rpx;
      color: #09bb07;
      margin-right: 28rpx;
    }

    .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 .left .iconfont.icon-tonglianzhifu1 {
      color: #305fd8;
    }

    .payment .item .iconfont {
      font-size: 40rpx;
      color: #ccc;
    }

    .icon-haoyoudaizhifu {
      color: #F34C3E !important;
    }

    .btn {
      position: fixed;
      left: 50rpx;
      right: 50rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      bottom: 30rpx;
      bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
      bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

      .pay-button {
        width: 100%;
        height: 87rpx;
        background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
        border-radius: 44px;
      }
    }

    .wait-pay {
      color: #aaa;
      font-size: 24rpx;
      padding-top: 20rpx;
    }

    .button {
      width: 690rpx;
      height: 90rpx;
      border-radius: 45rpx;
      color: #FFFFFF;
      background-color: #E93323;

    }

  }
</style>