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.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'>确认支付</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>
    <!-- 支付宝支付链接复制组件 -->
    <alipay-link-copy :show.sync="alipayShow" :alipayLink="alipayLink"/>
  </view>
</template>

<script>
  import countDown from '@/components/countDown';
  import numberScroll from '@/components/numberScroll.vue'
  import AlipayLinkCopy from '@/components/aliPayLinkCopy'
  import {
    getOrderDetail,
    orderPay,
    wechatOrderPay
  } from '@/api/order.js';
  import uniPay from '@/libs/pay.js'
  export default {
    components: {
      countDown,
      numberScroll,
      AlipayLinkCopy
    },
    data() {
      return {
        cancelPayModalShow: false,
        alipayShow: false,
        alipayLink: '',
        checked: false,
        //支付方式
        cartArr: [{
            "name": '微信支付',
            "icon": "icon-weixin2",
            value: 'WXPAY',
            title: '使用微信快捷支付',
            payStatus: 1,
          },
          {
            "name": '支付宝支付',
            "icon": "icon-zhifubao",
            value: 'ALIPAY',
            title: '使用支付宝支付',
            payStatus: 1,
          }
        ],
        orderId: 0,
        active: 0,
        payPrice: 10.00,
        payPriceShow: 10.00,
        invalidTime: 1684836534,
        jumpData: {
          orderId: '',
          msg: ''
        },
        formContent: ''
      }
    },
    onLoad(options) {
      if (options.order_id) this.orderId = options.order_id
      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: '加载中'
        });
        getOrderDetail(this.orderId).then(res => {
          const orderInfo = res.data
          this.payPrice = parseFloat(orderInfo.proTotalPrice).toFixed(2)
          this.payPriceShow = parseFloat(orderInfo.proTotalPrice).toFixed(2)
        }).catch(err => {
          return this.$util.Tips({
            title: err
          })
        }).finally(uni.hideLoading)
      },
      payType(paytype, index) {
        this.active = index;
        this.paytype = paytype;
      },
      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() {
        let that = this;
        if (!that.orderId) return that.$util.Tips({
          title: '请选择要支付的订单'
        });
        uni.showLoading({
          title: '支付中'
        })
        uniPay({
          payInfo: {
            orderNo: that.orderId
          },
          payType: that.paytype,
          createOrderFun: wechatOrderPay,
          payResultHandle: (res) => {
            return {
              jsapiResult: res.jsapiConfig,
              body: res.data
            }
          },
          wxPaySuccess: () => {
            // window.location.reload()
          },
          aliPaySuccess: (link) => {
            that.alipayLink = link
            setTimeout(() => {
              document.querySelector(".clipboard").click();
              that.alipayShow = true
            }, 500)
          }
        })
      }
    }

  }
</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>