ufutx-love-h5-public/src/views/users/withdrawalRecord.vue

<template>
  <div class="withdrawalRecord">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :loosing-text="$t('loosing_text')" :loading-text="$t('loading_text')">
      <van-list v-model="loading" :finished="finished" @load="getList">
        <div class="text-center" style="padding: 170px 0" v-if="!emptyData">
          <img class="emptyDataIcon" src="https://image.fulllinkai.com/202109/24/718b67f67aa714f83e4dce2a598ad18c.png" alt="" />
          <div class="color9 font14" style="margin-top: 14px">{{ $t('Temporarily_no_data') }}</div>
        </div>
        <div class="record-box" v-else>
          <div v-for="(item, index) in list" :key="index">
            <div class="record-list">
              <div class="record-list-left">
                <img class="record-icon" src="https://image.fulllinkai.com/202109/24/4d97a2d419c435d6a375fee38a807ab0.png" alt="" />
                <div class="record-data">
                  <div class="font16 color3 alignment_left" style="margin-bottom: 4px;">
                    {{item.way ==='weixin'? '微信' : '支付宝'}}-<span
                    v-if="item.status == 'wait_user_confirm'"
                    class="retry-btn"
                    @click.stop="retryWxPay(item)"
                  >重新提现</span>
                    <span v-else>{{ item.status == 'freezing' ? '处理中' : item.status == 'canceled' ? '提现失败' : '提现成功' }}</span>
                    <img class="prompt-icon" src="https://image.fulllinkai.com/202109/24/c7374b0e93097fe327fb2391db286c7d.png" alt="" v-if="item.status == 'freezing'" @click.stop="prompt(index)" />
                    <img class="prompt-icon" src="https://image.fulllinkai.com/202109/24/c7374b0e93097fe327fb2391db286c7d.png" alt="" v-else-if="item.status == 'canceled'" @click.stop="prompt(index)" />
                  </div>
                  <div class="font12 color9">{{ item.created_at }}</div>
                </div>
                <div class='error-prompt-box colorff font13' :class="item.status == 'freezing'? 'error-prompt-box-v1': ''" v-if='item.is_show'>{{item.status == 'freezing' ? '处理中，将在24小时内到账': '账号不正确'}}</div>
                <div class='error-mask' v-if='errorMask' @click.stop='showPrompt'></div>
              </div>
              <div class="font18 color3">
                <span v-if="item.status == 'wait_user_confirm'" style="font-size:16px;">冻结中（</span>
                <span v-if="item.status == 'wait_user_confirm'">{{ item.value }}</span>
                <span v-if="item.status == 'wait_user_confirm'" style="font-size:16px;">）</span>
                <span v-else>-{{ item.real_value }}</span>
              </div>
            </div>
            <div class="line"></div>
          </div>
          <div class="bottomLine font12 color6 text-center" v-if="noMoreData">
            - {{ $t('I_have_a_line_in_the_sand') }} -
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { $toastClear, $toastLoading, $toastText, $toastSuccess } from '@/config/toast'
import service from '@/utils/request'
import { formatDate } from '@/plugins/timeConversion'
import wx from 'weixin-js-sdk'

export default {
  computed: {},
  components: {},
  data() {
    return {
      list: [],
      page: 1,
      index: 0,
      errorMask: false,
      finished: false,
      loading: false,
      refreshing: false,
      emptyData: true,
      noMoreData: false
    }
  },
  watch: {},
  methods: {
    getList() {
      const vm = this
      $toastLoading(vm.$i18n.t('loading_text'))
      service
        .get(`/s/h5/communities/MyWithdraws?page=${vm.page}`)
        .then(data => {
          const dataV = vm.page === 1 ? [] : vm.list
          dataV.push(...data.data)
          dataV.forEach(item => {
            if (item.err_msg && item.err_msg.includes('余额不足')) {
              item.err_msg = '系统正在升级中，请稍后重试'
            }
            item.is_show = false
          })
          vm.list = dataV
          vm.refreshing = false
          if (vm.list.length !== 0) {
            vm.emptyData = true
          } else {
            vm.emptyData = false
          }
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.finished = true
            vm.noMoreData = true
            if (vm.list.length === 0) {
              vm.noMoreData = false
            }
            $toastClear()
            return
          } else {
            vm.loading = false
            $toastClear()
          }
          vm.page++
          setTimeout(() => {
            $toastClear()
          }, 500)
        })
        .catch(error => {
          console.log(error)
        })
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.loading = true
      this.getList()
    },
    prompt(index) {
      this.index = index
      this.errorMask = true
      this.list[index].is_show = true
    },
    showPrompt() {
      this.errorMask = false
      this.list[this.index].is_show = false
      this.index = 0
    },
    // 直接重新发起微信支付（数据从list获取）
    retryWxPay(item) {
      const vm = this

      // 必须微信环境
      if (!/micromessenger/i.test(navigator.userAgent)) {
        $toastText('请在微信内操作')
        return
      }

      // 直接调用微信支付
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: ['requestMerchantTransfer'],
          success: function(res) {
            if (res.checkResult['requestMerchantTransfer']) {
              WeixinJSBridge.invoke('requestMerchantTransfer', {
                mchId: item.mch_id, // 从list直接取
                appId: item.app_id, // 从list直接取
                package: item.package_info // 从list直接取
              }, function(resp) {
                if (resp.err_msg === 'requestMerchantTransfer:ok') {
                  $toastSuccess('提现成功')
                  vm.getList() // 刷新列表
                } else if (resp.err_msg === 'requestMerchantTransfer:cancel') {
                  $toastText('已取消')
                  vm.getList()
                } else {
                  $toastText('支付失败')
                }
                setTimeout(() => {
                  $toastClear()
                }, 500)
              })
            }
          }
        })
      })
    }
  },
  created() {},
  mounted() {
    const ScrollTop = document.getElementById('app')
    ScrollTop.scrollTop = 0
  }
}
</script>
<style lang="scss" scoped>
.withdrawalRecord {
  width: 100vw;
  min-height: 100vh;
  background: #ffffff;
}
.emptyDataIcon {
  width: 220px;
  height: 180px;
  display: block;
  margin: 0 auto;
}
.record-box {
  margin: 0 15px;
  padding-top: 15px;
  padding-bottom: 50px;
  .record-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .record-list-left {
      display: flex;
      justify-content: left;
      align-items: center;
      .record-icon {
        width: 28px;
        height: 28px;
        display: block;
      }
      .record-data {
        margin-left: 8px;
        .prompt-icon {
          width: 16px;
          height: 16px;
          display: block;
          margin-left: 3px;
          margin-top: 2px;
        }
      }
      .error-prompt-box{
        max-width: 120px;
        min-width: 40px;
        padding: 6px 12px;
        text-align: justify;
        position: absolute;
        right: 50%;
        top: 30px;
        transform: translateX(50%);
        border-radius: 4px;
        z-index: 1111;
        background: #000000;
      }
      .error-prompt-box-v1{
        right: 55%;
      }
      .error-prompt-box:before{
        content:"";
        width:0;
        height:0;
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translate(-104%);
        border-top:solid 8px transparent;
        border-left:solid 8px transparent;
        border-right:solid 8px transparent;
        border-bottom:solid 8px black;
      }
      .error-mask{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 222222;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0);
      }
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    margin: 11px 0;
  }
  .retry-btn {
    color: #4356f3;
    font-weight: bold;
    cursor: pointer;
    margin-left: 4px;
  }
}

</style>