front-end/hdApp/src/admin/refund/offlineCp.vue

<template>
  <view class="app-content">
    <view class="billing_box_bg">
      <view class="top-view"> </view>
      <view class="result-view">
        <view :class="['iconfont', 'iconchenggong']"></view>
        <view class="result-title">充值成功</view>
        <view class="textarea-container">
          <textarea 
            class="result-textarea" 
            v-model="copyText" 
            readonly 
            placeholder=""
          ></textarea>
        </view>
        <view style="font-size:34upx;color:#807d7d;">复制上面文字，发给客户</view>
        <view class="pay-confirm-content">
          <view>
              <button class="admin-button-com big" @click="copyBack" style="width:420upx;">复制并返回</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getMallRechargeShortLink } from "@/api/recharge";
export default {
  name: "offlineCp",
  data() {
    return {
      orderInfo:[],
      copyText:""
    }
  },
  onLoad(){

    //返回上一页时刷新
    let pages = getCurrentPages();
    let prevPage = pages[ pages.length - 2 ];
    if(prevPage.$vm){
      prevPage.$vm.pageAction = {refresh:1}
    }

  },
  methods: {
    init(){
      let amount = this.option.amount?parseFloat(this.option.amount):0
      let orderId = this.option.orderId?this.option.orderId:0
      getMallRechargeShortLink({orderId:orderId}).then(res=>{
        if(res.code == 1){
         let rechargeAccountLink = res.data.rechargeAccountLink ? res.data.rechargeAccountLink:''
         let orderLink = res.data.orderLink?res.data.orderLink:''
         this.copyText = "售后金额¥"+amount+"元，已充值到你的账户，点击下面链接查看你的账户余额\n\n余额 "+rechargeAccountLink+"\n\n订单 "+orderLink+"\n\n链接30天后失效"
        }
      })
    },
    copyBack(){
      uni.setClipboardData({
        data: this.copyText,
        success: () => {
          uni.showToast({ title: '复制成功', icon: 'success', duration: 2000 })
          setTimeout(() => {
            uni.navigateBack()      
          }, 800)
        },
        fail: () => {
          uni.showToast({ title: '复制失败', icon: 'none', duration: 2000 })
          setTimeout(() => {
            uni.navigateBack()      
          }, 1000)
        }
      });
    }
  },
};
</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: #3385ff;
    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;
    .iconchenggong {
      font-size: 130upx;
      color: $mainColor1;
    }
    .result-title {
      margin: 50upx 0 30upx;
      font-size: 38upx;
    }
    
    .textarea-container {
      width: 100%;
      padding: 0 40upx;
      margin-bottom: 40upx;
      
      .result-textarea {
        width: 100%;
        min-height: 300upx;
        padding: 30upx;
        background: #f8f9fa;
        border: 2upx solid #e9ecef;
        border-radius: 16upx;
        font-size: 32upx;
        line-height: 1.6;
        color: #333;
        resize: none;
        
        &:focus {
          border-color: $mainColor1;
          background: #fff;
        }
      }
    }
  }
}

.pay-confirm-content {
  padding: 40upx 40upx;
  text-align: center;
}
</style>