初始化导入 hjsq H5 项目代码
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
谢宇宁
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="withdraw-record">
|
||||
<Header title="提现记录" />
|
||||
<div class="main overflow-y-auto">
|
||||
<PullRefresh :params="moreParams" @onLoad="onLoad" @onRefresh="onRefresh">
|
||||
<div class="withdraw-box" v-for="(item, index) in state.list" :key="item.id">
|
||||
<div class="withdraw-amount">{{ item.money / 100 }}元</div>
|
||||
<div class="order-box flex-center-between">
|
||||
<div class="order-id">账单编号：{{ item.id }}</div>
|
||||
<div class="copy" @click="saveOrder(item.id)">复制</div>
|
||||
</div>
|
||||
<div class="withdraw-status">状态：{{ converStatus(item.status) }}</div>
|
||||
<div class="middle-box flex-center-between">
|
||||
<div class="withdraw-time">{{ moment(item.createdAt).format('YYYY-MM-DD HH:mm') }}</div>
|
||||
<div class="view-reason" v-if="item.statusDesc" @click="viewReason(index + '')">查看原因</div>
|
||||
</div>
|
||||
<div class="reason" v-if="state.currentIndex == index + ''">
|
||||
{{ item.statusDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</PullRefresh>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import MineApi from '@/service/mine';
|
||||
import moment from 'moment';
|
||||
import { showToast } from 'vant';
|
||||
import toClipboard from '@/utils/clipboard';
|
||||
const state = reactive({
|
||||
list: <Array<Types.Recharge.WithdrawRecordItem>>[],
|
||||
pageNumber: 1,
|
||||
pageSize: 15,
|
||||
show: false,
|
||||
currentIndex: '',
|
||||
});
|
||||
const moreParams = reactive({
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
finished: false,
|
||||
isNoData: false,
|
||||
error: false,
|
||||
isHigehtMax: true,
|
||||
});
|
||||
const getList = async (type: any) => {
|
||||
let req = {
|
||||
pageNumber: state.pageNumber,
|
||||
pageSize: state.pageSize,
|
||||
};
|
||||
try {
|
||||
let res: any = await MineApi.withdrawRecord(req);
|
||||
moreParams.loading = false;
|
||||
moreParams.refreshing = false;
|
||||
|
||||
let list = res.list || [];
|
||||
if (type === 'refresh') {
|
||||
state.list = list;
|
||||
} else {
|
||||
state.list = state.list.concat(list);
|
||||
}
|
||||
if (state.pageNumber == 1 && state.list.length == 0) {
|
||||
moreParams.isNoData = true;
|
||||
}
|
||||
if (!res.hasNext) {
|
||||
moreParams.finished = true;
|
||||
}
|
||||
} catch (e) {
|
||||
moreParams.loading = false;
|
||||
moreParams.error = true;
|
||||
}
|
||||
};
|
||||
getList('');
|
||||
const onLoad = () => {
|
||||
moreParams.loading = true;
|
||||
state.pageNumber++;
|
||||
getList(null);
|
||||
};
|
||||
const onRefresh = () => {
|
||||
state.pageNumber = 1;
|
||||
moreParams.refreshing = true;
|
||||
moreParams.finished = false;
|
||||
getList('refresh');
|
||||
};
|
||||
const converStatus = (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '未审核';
|
||||
case 2:
|
||||
return '审核通过，转账中';
|
||||
case 3:
|
||||
return '已拒绝';
|
||||
case 4:
|
||||
return '未知错误';
|
||||
case 5:
|
||||
return '提现成功';
|
||||
case 6:
|
||||
return '提现失败';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
// 复制订单号
|
||||
const saveOrder = async (orderId: string) => {
|
||||
try {
|
||||
await toClipboard(orderId); //实现复制
|
||||
showToast('复制成功');
|
||||
} catch (e: any) {
|
||||
showToast(e);
|
||||
}
|
||||
};
|
||||
const viewReason = (index: any) => {
|
||||
if (index == state.currentIndex) return (state.currentIndex = '');
|
||||
state.currentIndex = index;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-record {
|
||||
height: 100%;
|
||||
.main {
|
||||
height: calc(100vh - 44px);
|
||||
.withdraw-box {
|
||||
border-radius: 9px;
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #262626;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.withdraw-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.order-box {
|
||||
.order-id {
|
||||
color: #ccc;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.copy {
|
||||
font-size: 14px;
|
||||
color: #3476ff;
|
||||
}
|
||||
}
|
||||
.withdraw-status {
|
||||
color: #3476ff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.middle-box {
|
||||
align-items: center;
|
||||
.withdraw-time {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.view-reason {
|
||||
font-size: 14px;
|
||||
color: #3476ff;
|
||||
}
|
||||
}
|
||||
.reason {
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="withdraw-record">
|
||||
<Header title="提现明细" />
|
||||
<div class="main overflow-y-auto">
|
||||
<PullRefresh :params="moreParams" @onLoad="onLoad" @onRefresh="onRefresh">
|
||||
<div class="withdraw-box" v-for="item in state.list" :key="item.id">
|
||||
<div class="withdraw-amount-box">
|
||||
<div class="withdraw-amount">{{ item.money / 100 }}元</div>
|
||||
</div>
|
||||
<div class="order-box flex-center-between">
|
||||
<div class="order-id">账单编号：{{ item.id }}</div>
|
||||
<div class="copy" @click="saveOrder(item.id)"></div>
|
||||
</div>
|
||||
<div class="middle-box flex-center-between">
|
||||
<div class="withdraw-info-box">
|
||||
<div class="withdraw-status flex-vcenter">
|
||||
<div class="status success" v-if="item.status === 5">
|
||||
{{ payType(item.payType) }}提现{{ converStatus(item.status) }}
|
||||
</div>
|
||||
<div class="status" v-else>{{ payType(item.payType) }}提现{{ converStatus(item.status) }}</div>
|
||||
<span v-if="item.status == 3 || item.status == 4 || item.status == 6" @click="showDialog(item)">
|
||||
查看原因
|
||||
</span>
|
||||
</div>
|
||||
<div class="withdraw-time">{{ moment(item.createdAt).format('YYYY-MM-DD HH:mm') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PullRefresh>
|
||||
</div>
|
||||
<van-popup v-model:show="state.isShow">
|
||||
<div class="warp">
|
||||
<div class="content_warp">
|
||||
<div class="content">
|
||||
<p class="title">未通过原因</p>
|
||||
<div class="line"></div>
|
||||
<div class="mess">
|
||||
{{ state.reason }}
|
||||
</div>
|
||||
<div class="btn_box">
|
||||
<div class="ISee flex-center-center" @click="state.isShow = false">我知道了</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import MineApi from '@/service/mine';
|
||||
import moment from 'moment';
|
||||
import { showToast } from 'vant';
|
||||
import toClipboard from '@/utils/clipboard';
|
||||
|
||||
const state = reactive({
|
||||
list: <Array<Types.Recharge.WithdrawRecordItem>>[],
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
show: false,
|
||||
currentIndex: '',
|
||||
isShow: false,
|
||||
reason: '',
|
||||
});
|
||||
const moreParams = reactive({
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
finished: false,
|
||||
isNoData: false,
|
||||
error: false,
|
||||
isHigehtMax: true,
|
||||
});
|
||||
const getList = async (type: any) => {
|
||||
let req = {
|
||||
pageNumber: state.pageNumber,
|
||||
pageSize: state.pageSize,
|
||||
};
|
||||
try {
|
||||
let res: any = await MineApi.withdrawRecord(req);
|
||||
moreParams.loading = false;
|
||||
moreParams.refreshing = false;
|
||||
let list = res.list || [];
|
||||
if (type === 'refresh') {
|
||||
state.list = list;
|
||||
} else {
|
||||
state.list = state.list.concat(list);
|
||||
}
|
||||
if (state.pageNumber == 1 && state.list.length == 0) {
|
||||
moreParams.isNoData = true;
|
||||
}
|
||||
if (!res.hasNext) {
|
||||
moreParams.finished = true;
|
||||
}
|
||||
} catch (e) {
|
||||
moreParams.loading = false;
|
||||
moreParams.error = true;
|
||||
}
|
||||
};
|
||||
getList('');
|
||||
const onLoad = () => {
|
||||
moreParams.loading = true;
|
||||
state.pageNumber++;
|
||||
getList(null);
|
||||
};
|
||||
const onRefresh = () => {
|
||||
state.pageNumber = 1;
|
||||
moreParams.refreshing = true;
|
||||
moreParams.finished = false;
|
||||
getList('refresh');
|
||||
};
|
||||
const converStatus = (val: number) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '未审核';
|
||||
case 2:
|
||||
return '审核通过，转账中';
|
||||
case 3:
|
||||
return '已拒绝';
|
||||
case 4:
|
||||
return '未知错误';
|
||||
case 5:
|
||||
return '提现成功';
|
||||
case 6:
|
||||
return '提现失败';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
const payType = (val: string) => {
|
||||
switch (val) {
|
||||
case 'bankcard':
|
||||
return '银行卡';
|
||||
case 'usdt':
|
||||
return 'USDT';
|
||||
default:
|
||||
return '其他方式';
|
||||
}
|
||||
};
|
||||
// 复制订单号
|
||||
const saveOrder = async (orderId: string) => {
|
||||
try {
|
||||
await toClipboard(orderId); //实现复制
|
||||
showToast('复制成功');
|
||||
} catch (e: any) {
|
||||
showToast(e);
|
||||
}
|
||||
};
|
||||
const showDialog = (data: any) => {
|
||||
state.isShow = true;
|
||||
state.reason = data.statusDesc;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-record {
|
||||
height: 100%;
|
||||
.main {
|
||||
height: calc(100% - 44px);
|
||||
background: #000;
|
||||
.withdraw-box {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
.order-box {
|
||||
color: #fff;
|
||||
.order-id {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.copy {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('@/assets/images/png/mine/copy.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 12px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.middle-box {
|
||||
align-items: flex-end;
|
||||
.withdraw-info-box {
|
||||
.withdraw-status {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.24px;
|
||||
margin: 4px 0 10px;
|
||||
.status {
|
||||
padding: 5px 0;
|
||||
color: rgba(152, 152, 152, 1);
|
||||
border-radius: 20px;
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
span {
|
||||
color: #ffc000;
|
||||
}
|
||||
.success {
|
||||
color: #03fceb;
|
||||
}
|
||||
}
|
||||
.withdraw-time {
|
||||
color: rgba(152, 152, 152, 1);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.reason {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24px;
|
||||
line-height: 16px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.withdraw-amount-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 5px;
|
||||
.withdraw-amount {
|
||||
color: #ffc000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.view-reason {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22px;
|
||||
margin-top: 6px;
|
||||
color: #ffc000;
|
||||
}
|
||||
}
|
||||
.warp {
|
||||
.content_warp {
|
||||
width: 300px;
|
||||
border-radius: 12px;
|
||||
background: #1a1a1a;
|
||||
.content {
|
||||
height: auto !important;
|
||||
font-size: 12px;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.mess {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
}
|
||||
.btn_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin: 30px 0 0 0;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
.ISee {
|
||||
font-size: 15px;
|
||||
width: 263px;
|
||||
height: 44px;
|
||||
background: #ffc000;
|
||||
color: #1f2029;
|
||||
font-weight: 600;
|
||||
margin: 0 10px 0 0;
|
||||
border-radius: 44px;
|
||||
}
|
||||
.ISee:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user