front-end/hdApp/src/admin/billing/remind.vue

<template>
    <view class="app-content">
      <view class="billing_box_bg">
        <view class="top-view"> </view>
        <view class="result-view">
          <view class="custom-info-icon">i</view>
          <view class="result-title">操作成功，还有下一步</view>
          <view class="pay-confirm-content">
            <view class="confirm-text">
              <view class="text-desc">请给客户充值或线下转账</view>
              <view class="text-amount">￥{{orderInfo.actPrice?parseFloat(orderInfo.actPrice):0}}</view>
            </view>
            <view>
                <button class="admin-button-com blue big" @click="recharge()" style="width:320upx;">充到客户余额</button>
            </view>
            <view style="margin-top:30upx;">
                <button class="admin-button-com big" @click="goBack" style="width:320upx;">线下转账给客户</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  <script>
  import { getDetB} from "@/api/order";
  import {toManRecharge} from "@/api/recharge"
  export default {
    name: "remind",
    data() {
      return {
        orderInfo:[]
      }
    },
    onLoad(){
      //返回上一页时刷新
      let pages = getCurrentPages();
      let prevPage = pages[ pages.length - 2 ];
      prevPage.$vm.pageAction = {refresh:1}
    },
    methods: {
      recharge(){
        if(this.$util.isEmpty(this.orderInfo)){
          this.$msg('没有找到订单信息')
          return false
        }
        this.$util.confirmModal({content:'确认充到客户余额里？'},() => {
          this.toRecharge()
			  })
      },
      toRecharge(){
        let that = this
        uni.showLoading({mask:true})
        let orderId = this.orderInfo.id
        toManRecharge({amount:this.orderInfo.actPrice,payWay:0,customId:this.orderInfo.customId,shOrderId:orderId}).then(res=>{
          uni.hideLoading()
          if(res.code == 1){
            this.$msg('充值成功')
            setTimeout(() => {
              that.pageTo({url:`/admin/billing/resultCp?id=${this.option.orderId}&amount=${this.orderInfo.actPrice}`, type: 2})
            }, 1000)
          }
        })
      },
      init(){
        let orderId = this.option.orderId?this.option.orderId:0
        getDetB({id: orderId}).then(res => {
          this.orderInfo = res.data
        })
      },
      goBack(){
        uni.navigateBack()
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .billing_box_bg {
    position: relative;
    padding: 30upx 30upx;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    .top-view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 299upx;
      background: #09C567;
      border-radius: 0upx 0upx 83upx 83upx;
    }
    .result-view {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80upx 0upx 70upx 0upx;
      width: 100%;
      background: #ffffff;
      border-radius: 20upx;
      z-index: 1;
      .custom-info-icon {
        width: 130upx;
        height: 130upx;
        border-radius: 50%;
        background: #FF9800;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 80upx;
        font-weight: bold;
        box-shadow: 0 4upx 12upx rgba(9, 197, 103, 0.3);
      }
      .result-title {
        margin: 50upx 0 30upx;
        font-size: 38upx;
        font-weight:bold;
      }
    }
  }

  // 支付确认弹框样式
  .pay-confirm-content {
    padding: 30upx 40upx;
    text-align: center;
    
    .confirm-text {
      margin-bottom: 60upx;
      
      .text-title {
        font-size: 42upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 25upx;
        line-height: 1.4;
      }
      
      .text-desc {
        font-size: 38upx;
        color: #3f3e3e;
        line-height: 1.4;
      }
      .text-amount {
        margin-top: 30upx;
        font-size: 46upx;
        color: red;
        line-height: 1.4;
        font-weight: bold;
      }
    }
    
    .confirm-btn-wrap {
      .confirm-btn {
        width: 60%;
        height: 100upx;
        background: linear-gradient(135deg, #07c160 0%, #10ad6a 100%);
        color: #fff;
        border: none;
        border-radius: 50upx;
        font-size: 38upx;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4upx 12upx rgba(7, 193, 96, 0.3);
        transition: all 0.3s ease;
        margin: 0 auto 25upx;
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2upx 8upx rgba(7, 193, 96, 0.4);
        }
      }
      
      .tech-support {
        font-size: 32upx;
        color: #999;
        text-align: center;
        line-height: 1.4;
      }
    }
  }
  </style>