OfficeApp/subpkg/withdrawList/withdrawList.vue

<template>
  <view class="">
    <view class="list">
      <view class="card" v-for="(item, index) in list" :key="index">
        <view class="top">
          <view class="tips" :class="typeList[item.status].class">{{typeList[item.status].text}}</view>
          <view>提现日期：{{item.create_time}}</view>
        </view>
        <view class="bottom">
          <view class="left">
            <view>提现金额(元)</view>
            <view class="num">{{item.amount}}</view>
          </view>
          <view class="right">
            <view>订单编号:</view>
            <view>{{item.order_sn}}</view>
          </view>
        </view>
        <view v-if="item.transfer_voucher" class="invoice" style="margin-bottom: 20rpx;">
          <view class="name">
            <image src="../../static/img/contract/pdf.png" style="width: 40rpx;height: 40rpx;margin-right: 12rpx;"></image>
            转账凭证
          </view>
          <view class="btn" @click="previewVoucher(item.transfer_voucher)">查看</view>
        </view>
        <view v-if="item.invoice" class="invoice">
          <view class="name">
            <image src="../../static/img/contract/pdf.png" style="width: 40rpx;height: 40rpx;margin-right: 12rpx;"></image>
            电子发票
          </view>
          <view class="btn" @click="previewPDF(item.invoice)">查看</view>
        </view>
        <view v-if="item.deny_desc" class="desc">
          拒绝原因: {{item.deny_desc}}
        </view>
      </view>
    </view>
    <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />    
  </view>
</template>

<script>
import {userWithdrawList} from "@/api/pay.js"
import { Toast } from "../../libs/uniApi";
export default {
  data() {
    return {
      list:[],
      typeList:[
        {
          text: '审核中',
          class: 'audit'
        },
        {
          text: '已通过',
          class: 'pass'
        },
        {
          text: '已拒绝',
          class: 'no_pass'
        },
        {
          text: '已转账',
          class: 'ok'
        }
      ],
       loadConfig:{
         page: 1,
         limit: 15,
         loadingText: '努力加载中',
         loadmoreText: '轻轻上拉',
         nomoreText: '没有更多记录了~~',
         status: 'loadmore'
       },
    }
  },
  onLoad() {
    this.loadList();
  },
  onShow() {},
  onReachBottom() {
    this.loadList()
  },
  methods: {
    previewVoucher(file){
      if(file.slice(-4)=='.pdf')this.previewPDF(file);
      else this.priviewImage(file);
    },
    previewPDF(file){
      if(file) uni.navigateTo({
      	url: `/subpkg/pdfView/pdfView?url=${file}`
      })
      else Toast('暂无电子文件')
    },
    priviewImage(url) {
      uni.previewImage({
        urls: [url],
        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'
                  })
                }
              })
            }
          },
          fail: () => {
            Toast('文件不存在!');
          }
        }
      })
    },
    async loadList(){
      if(this.loadConfig.status=="nomore")return;
      this.loadConfig.status="loading"
      let res = await userWithdrawList({
        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];
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.list{
    // background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28rpx;
    .card{
      padding: 28rpx;
      width: 694rpx;
      background-color: #fff;
      margin-bottom: 21rpx;
      border-radius: 26rpx;
      
      .top{
        display: flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 400;
        color: #333333FF;
        line-height: 39rpx;
        .tips{
          width: 137rpx;
          height: 49rpx;
          background: #0122c7;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          font-size: 25rpx;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 39rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;
        }
        .pass{
          background-color: #FF8C1A;
        }
        .no_pass{
          background-color: #F02828;
        }
        .ok{
          background-color: #47B347;
        }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;
        .left{
          flex: 1;
          text-align: center;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
          .num{
            font-size: 39rpx;
            font-weight: 500;
            color: #F02828;
            line-height: 39rpx;
          }
        }
        .right{
          flex: 1;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
        }
      }
      .desc{
        padding: 28rpx;
        background-color: rgba(#ff7c32, 0.2);
        color: #ff7c32;
        border-radius: 14rpx;
        margin-top: 20rpx;
      }
      .invoice{
        display: flex;
        justify-content: space-between;
        padding: 28rpx;
        // border: 2px solid #999;
        border-radius: 14rpx;
        background-color: rgba(#47be62, 0.2);
        
        .name {
          display: flex;
        }
        
        .btn {
          color: #0122c7;
        }
      }
    }
  }
</style>