<template>
|
<div class="wrapper">
|
<div v-if="list.length <= 0" class="empty text-center">
|
{{ $t("hj162e") }}!
|
</div>
|
<div v-else>
|
<ul class="table-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
|
infinite-scroll-distance="10">
|
<li class="list-body" v-for="(item, index) in list" :key="index">
|
<div class="order-info-box">
|
<div class="order-title" @click="openDetail(item)">
|
<span class="main"> {{ $t("hjtxyhk") }} </span>
|
<span class="payNumber">
|
{{ item.withAmt | _toLocaleString }}
|
</span>
|
<span class="pull-right" :class="getWithdrawStatusClass(item.withStatus)">
|
{{ getWithdrawStatusText(item.withStatus) }}
|
<i class="iconfont animated" :class="getWithdrawStatusIconClass(item.withStatus)"></i>
|
</span>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<div v-show="loading" class="load-all text-center">
|
<mt-spinner type="fading-circle"></mt-spinner>
|
loading...
|
</div>
|
<div v-show="!loading" class="load-all text-center">
|
{{ $t("hj236") }}
|
</div>
|
</div>
|
|
<van-popup v-model="detailVisible" position="bottom" round closeable :style="{ maxHeight: '75%' }"
|
class="withdraw-detail-popup">
|
<div class="detail-popup-inner">
|
<div class="detail-popup-title">{{ $t("hj238") }}</div>
|
<div class="detail-popup-body">
|
<div v-for="row in detailRows" :key="row.key" class="detail-row">
|
<span class="detail-label">{{ row.label }}</span>
|
<span class="detail-value">{{ row.value }}</span>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import { Toast } from "mint-ui";
|
import * as api from "@/axios/api";
|
import { _toLocaleString } from "@/utils/filter";
|
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
loading: false,
|
list: [],
|
pageNum: 1,
|
pageSize: 15,
|
detailVisible: false,
|
detailItem: null
|
};
|
},
|
computed: {
|
detailRows() {
|
return this.buildDetailRows(this.detailItem);
|
}
|
},
|
watch: {},
|
created() { },
|
mounted() {
|
this.getListDetail();
|
},
|
methods: {
|
getWithdrawStatusClass(status) {
|
return status == 1 ? "green" : "red";
|
},
|
getWithdrawStatusIconClass(status) {
|
if (status == 1) return "icon-tongguo4 bounceIn";
|
if (status == 2) return "icon-failure bounceInDown";
|
if (status == 3) return "icon-iconfontweitongguo bounceInDown";
|
return "icon-dengdai bounceInDown";
|
},
|
getWithdrawStatusText(status) {
|
if (status == 1) return this.$t("hjtxcg");
|
if (status == 2) return this.$t("hjtxsb");
|
if (status == 3) return this.$t("hjddqx");
|
return this.$t("hjshz");
|
},
|
openDetail(item) {
|
this.detailItem = item ? { ...item } : null;
|
this.detailVisible = true;
|
},
|
/** 与精简前列表展示字段一致，不包含其它接口字段 */
|
buildDetailRows(item) {
|
if (!item || typeof item !== "object") return [];
|
const dash = "—";
|
const amt =
|
item.withAmt !== undefined && item.withAmt !== null && item.withAmt !== ""
|
? _toLocaleString(item.withAmt)
|
: dash;
|
const fee =
|
item.withFee !== undefined && item.withFee !== null && item.withFee !== ""
|
? _toLocaleString(item.withFee)
|
: dash;
|
const bankParts = [item.bankName, item.bankAddress].filter(
|
v => v !== undefined && v !== null && String(v).trim() !== ""
|
);
|
const bankLine = bankParts.length ? bankParts.join("-") : dash;
|
const bankNo =
|
item.bankNo !== undefined &&
|
item.bankNo !== null &&
|
String(item.bankNo).trim() !== ""
|
? String(item.bankNo)
|
: dash;
|
let timeStr = dash;
|
if (item.applyTime) {
|
timeStr = this.$moment(item.applyTime).format("DD-MM-YYYY hh:mm:ss A");
|
}
|
const rows = [
|
{
|
key: "withAmt",
|
label: this.$t("hjtxyhk"),
|
value: amt
|
},
|
{
|
key: "withStatus",
|
label: this.$t("状态"),
|
value: this.getWithdrawStatusText(item.withStatus)
|
},
|
{
|
key: "withFee",
|
label: this.$t("hj44"),
|
value: fee
|
},
|
{
|
key: "bank",
|
label: this.$t("hj247"),
|
value: bankLine
|
},
|
{
|
key: "bankNo",
|
label: this.$t("hjkh"),
|
value: bankNo
|
}
|
];
|
if (item.withStatus == 3) {
|
rows.push({
|
key: "withMsg-cancel",
|
label: this.$t("hjqxyy"),
|
value:
|
item.withMsg !== undefined &&
|
item.withMsg !== null &&
|
String(item.withMsg).trim() !== ""
|
? String(item.withMsg)
|
: dash
|
});
|
}
|
if (item.withStatus == 2) {
|
rows.push({
|
key: "withMsg-fail",
|
label: this.$t("hj201"),
|
value:
|
item.withMsg !== undefined &&
|
item.withMsg !== null &&
|
String(item.withMsg).trim() !== ""
|
? String(item.withMsg)
|
: dash
|
});
|
}
|
rows.push({
|
key: "applyTime",
|
label: this.$t("sj"),
|
value: timeStr
|
});
|
return rows;
|
},
|
async getListDetail() {
|
let opt = {
|
withStatus: "",
|
pageNum: this.pageNum,
|
pageSize: 15
|
};
|
let data = await api.withdrawList(opt);
|
if (data.status === 0) {
|
data.data.list.forEach(element => {
|
this.list.push(element);
|
});
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async loadMore() {
|
if (this.list.length < 10) {
|
return;
|
}
|
this.loading = true;
|
this.pageNum++;
|
await this.getListDetail();
|
this.loading = false;
|
},
|
async cancle(val) {
|
let opt = {
|
withId: val
|
};
|
let data = await api.canceloutMoney(opt);
|
if (data.status === 0) {
|
this.list = [];
|
Toast(data.msg);
|
this.getListDetail();
|
} else {
|
Toast(data.msg);
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.wrapper {
|
background-color: #fff !important;
|
height: 95vh;
|
}
|
|
.payNumber {
|
font-size: 0.3rem;
|
color: #ff8000;
|
}
|
|
.order-info--compact {
|
padding-bottom: 0;
|
}
|
|
.detail-btn-wrap {
|
padding: 0.12rem 0.2rem 0.2rem;
|
}
|
|
.detail-btn {
|
font-size: 0.26rem;
|
}
|
|
/deep/ .withdraw-detail-popup .van-popup__close-icon {
|
color: #666;
|
}
|
|
.detail-popup-inner {
|
padding: 0.36rem 0.32rem 0.48rem;
|
max-height: 70vh;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
}
|
|
.detail-popup-title {
|
font-size: 0.34rem;
|
font-weight: 600;
|
text-align: center;
|
margin-bottom: 0.28rem;
|
color: #14181f;
|
}
|
|
.detail-popup-body {
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
.detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
padding: 0.22rem 0;
|
border-bottom: 1px solid #f0f0f0;
|
font-size: 0.28rem;
|
line-height: 1.45;
|
}
|
|
.detail-row:last-child {
|
border-bottom: none;
|
}
|
|
.detail-label {
|
color: #888;
|
flex: 0 0 38%;
|
padding-right: 0.2rem;
|
word-break: break-word;
|
}
|
|
.detail-value {
|
color: #333;
|
flex: 1;
|
text-align: right;
|
word-break: break-word;
|
}
|
|
.table-list {
|
padding: 0.2rem 0;
|
|
.list-body {
|
padding: 0.1rem 0.2rem;
|
|
.capital:nth-child(1) {
|
border-top: 0.01rem solid #3f444a;
|
}
|
|
.capital {
|
padding: 0.2rem;
|
border-bottom: 0.01rem solid #3f444a;
|
|
div {
|
line-height: 0.4rem;
|
}
|
|
.col-xs-4 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
.pro {
|
color: #999;
|
}
|
}
|
}
|
}
|
</style>
|
