272 lines
8.6 KiB
Vue
272 lines
8.6 KiB
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>
|