OfficeApp/subpkg/topUpDeposit/topUpDeposit.vue

<template>
  <view class="">
    <view class="info">
      <view class="bg"></view>
      <view class="card">
        <view class="title">充值信息</view>
        <view class="item">
          <text>充值账户</text>
          <text>{{$store.state.app.userInfo.company.company_name||''}}</text>
        </view>
        <u-line style="margin: 20rpx 0;"></u-line>
        <view class="item">
          <text>收款公司</text>
          <text>{{partyA.company_name}}</text>
        </view>
        <view class="item" @click="copyPhone(partyA.qualification.corporate_account, '对公账号')">
          <text>对公账号</text>
          <text>{{partyA.qualification.corporate_account||'暂无信息'}}</text>
        </view>
      </view>
    </view>
    <view class="deposit-list">
      <view class="card" v-for="(item, index) in list">
        <view class="item"><view>创建时间:</view><view class="text">{{item.create_time}}</view></view>
        <view class="item"><view>充值金额:</view><view class="text green">{{item.deposit}}</view>元</view>
        <view class="item" @click="previewVoucher(item.voucher)"><view>充值凭证:</view><view class="text blue">查看凭证</view></view>
      </view>
    </view>
    <u-empty v-if="list.length==0&&loadConfig.status=='nomore'" icon="/static/img/empty/data.png" text="没有数据"></u-empty>
    <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
    	:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
  </view>
</template>

<script>
  import { Toast } from '@/libs/uniApi.js'
  import { getPartyACompany, getDepositRechargeTransferVoucherList } from "@/api/company.js"
  export default {
    data() {
      return {
        partyA: {
          id:"",
          company_name:"",
          qualification:{
            corporate_account: ""
          }
        },
        list: [],
        loadConfig: {
        	page: 1,
        	limit: 15,
        	lastpage: '',
        	loadingText: '努力加载中',
        	loadmoreText: '轻轻上拉',
        	nomoreText: '我也是有底线的~~',
        	status: 'loadmore'
        },
      }
    },
    // 点击充值记录
    onNavigationBarButtonTap(res){
      if (res.index === 0) {
        uni.navigateTo({
          url: '/subpkg/topUpList/topUpList'
        })
      }
    },
    onLoad(options) {
      this.loadPartyACompany();
      this.initLoad();
    },
    onReachBottom() {
      this.loadList()
    },
    methods: {
      async loadPartyACompany(){
        let res = await getPartyACompany();
        if(res.data.qualification){
          try{
            res.data.qualification = JSON.parse(res.data.qualification);
          }catch(e){
            console.log(e);
          }
        }
        this.partyA = res.data;
        if(!this.partyA.qualification.corporate_account)this.partyA.qualification.corporate_account="";
      },
      async initLoad() {
      	this.loadConfig.page = 1;
      	this.loadConfig.status = "loadmore";
      	this.list = [];
      	await this.loadList();
      },
      async loadList(){
        if (this.loadConfig.status == "nomore") return;
        this.loadConfig.status = "loading";
        let res = await getDepositRechargeTransferVoucherList({
        	page: this.loadConfig.page,
        	limit: this.loadConfig.limit
        })
        this.loadConfig.status = "loadmore"
        if (res.data.data.length < this.loadConfig.limit) {
        	this.loadConfig.status = "nomore"
        } else {
        	this.loadConfig.page++;
        }
        this.list = [...this.list, ...res.data?.data]
      },
      previewVoucher(str=""){
        if(str.substring(str.length-4, str.length)=='.pdf'){ // 凭证为PDF时查看PDF
          uni.navigateTo({
          	url: `/subpkg/pdfView/pdfView?url=${str}`
          })
        }else {
          uni.previewImage({
          	urls: [str],
          	longPressActions: {
          		itemList: ['保存图片'],
          		success: function(data) {
          			if (data.tapIndex === 0) {
          				uni.saveImageToPhotosAlbum({
          					filePath: url,
          					success: function() {
          						uni.showToast({
          							title: '保存成功',
          							icon: 'success'
          						})
          					},
          					fail: function() {
          						uni.showToast({
          							title: '保存失败',
          							icon: 'none'
          						})
          					}
          				})
          			}
          		}
          	}
          })
        }
      },
      copyPhone(str = "", type = "号码") {
      	if (str) uni.setClipboardData({
      		data: str + "",
      		success: (e) => {
      			Toast(type + '已复制')
      		},
      		fail: (e) => {
      			Toast('复制失败')
      		}
      	})
      }
    },
    onPullDownRefresh() {
      this.initLoad().then(()=>{
        setTimeout(()=>{
          uni.stopPullDownRefresh()
        }, 500)
      })
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 350rpx;

    .bg {
      background-color: $theme-oa-color;
      height: 200rpx;
      width: 100vw;
      border-radius: 0rpx 0rpx 28rpx 28rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card {
      width: 694rpx;
      min-height: 180rpx;
      background: #FFFFFF;
      margin-top: 38.55rpx;
      box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 31.5rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      top: 0;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        padding-bottom: 10rpx;
      }

      .item {
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        text:nth-child(1){
          flex-shrink: 0;
          margin-right: 18rpx;
        }
      }
    }
  }

  .deposit-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    .card {
      width: 694rpx;
      min-height: 180rpx;
      background: #FFFFFF;
      margin-bottom: 28rpx;
      box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 31.5rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    
      .item{
        font-size: 28rpx;
        display: flex;
        justify-content: left;
        
        .text{
          margin-left: 12rpx;
          color: #999;
        }
        
        .green{
          color: #4cd964;
        }
        
        .blue{
          color: #0122c7;
        }
      }
    }
  }
</style>