feat: 行权记录二维码
This commit is contained in:
黄泽群
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
|
||||
<up-popup :show="show" @close="close" @open="open" mode="center" :round="10">
|
||||
<view class="qrcode-preview" @click.stop="close" v-if="qrcodeUrl">
|
||||
<up-qrcode :val="qrcodeUrl" :key="key"></up-qrcode>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
qrcodeVal: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
qrcodeUrl: "",
|
||||
key: 0,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.qrcodeUrl = this.qrcodeVal;
|
||||
this.key++;
|
||||
console.log('qrcodeUrl',this.qrcodeUrl);
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
this.qrcodeUrl = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qrcode-preview {
|
||||
width: 440rpx;
|
||||
height: 440rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
// padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,223 +1,321 @@
|
||||
<template>
|
||||
<view class="rwa_withdrawal_log">
|
||||
<Header leftTitle="行权记录" left-path-type="navigateTo" :leftPath="leftPath" />
|
||||
<view class="_log_content">
|
||||
<view class="_log_content_title">
|
||||
<view>行权账户邮箱/时间</view>
|
||||
<view>金额/状态</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 300rpx)">
|
||||
<view class="_content_item" v-for="item in logList" :key="item.id" v-if="logList && logList.length !== 0">
|
||||
<view class="_content_item_no _content_item_no_buto">NO.{{ item.tradeNo }}</view>
|
||||
<!-- <view class="_content_item_no _content_item_no_buto" v-if="item.exchNo">股东流水号：{{item.exchNo}}</view> -->
|
||||
<view class="_content_item_but">
|
||||
<view class="_content_item_left">
|
||||
<up-image src="/static/rwa/account.png" width="40" height="40" bgColor="#f1f6ff00" />
|
||||
<view class="_content_item_left_">
|
||||
<view class="_content_item_left_title">{{ item.name }}-{{ item.account }}</view>
|
||||
<view class="_content_item_left_val">{{ formatDate(item.ctdate) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_content_item_right">
|
||||
<view class="_content_item_left_title _content_item_left_amount">{{ item.amount }} {{ categotyObj.name ||
|
||||
'USDT' }}</view>
|
||||
<view class="_content_item_left_status">{{ getValue(RWA_STATUS, item.status) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/kzt.png" width="100" height="100"
|
||||
bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">暂无行权数据～</view>
|
||||
</view>
|
||||
<view v-if="loading" style="text-align: center;">加载中...</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rwa_withdrawal_log">
|
||||
<Header
|
||||
leftTitle="行权记录"
|
||||
left-path-type="navigateTo"
|
||||
:leftPath="leftPath"
|
||||
/>
|
||||
<view class="_log_content">
|
||||
<view class="_log_content_title">
|
||||
<view>行权账户邮箱/时间</view>
|
||||
<view>金额/状态</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadMore"
|
||||
style="height: calc(100vh - 300rpx)"
|
||||
>
|
||||
<view
|
||||
class="_content_item"
|
||||
v-for="item in logList"
|
||||
:key="item.id"
|
||||
v-if="logList && logList.length !== 0"
|
||||
>
|
||||
<view class="_content_item_no _content_item_no_buto"
|
||||
>NO.{{ item.tradeNo }}</view
|
||||
>
|
||||
<!-- <view class="_content_item_no _content_item_no_buto" v-if="item.exchNo">股东流水号：{{item.exchNo}}</view> -->
|
||||
<view class="_content_item_but">
|
||||
<view class="_content_item_left">
|
||||
<up-image
|
||||
src="/static/rwa/account.png"
|
||||
width="40"
|
||||
height="40"
|
||||
bgColor="#f1f6ff00"
|
||||
/>
|
||||
<view class="_content_item_left_">
|
||||
<view class="_content_item_left_title"
|
||||
>{{ item.name }}-{{ item.account }}</view
|
||||
>
|
||||
<view class="_content_item_left_val">{{
|
||||
formatDate(item.ctdate)
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_content_item_right">
|
||||
<view class="_content_item_left_title _content_item_left_amount"
|
||||
>{{ item.amount }} {{ categotyObj.name || "USDT" }}</view
|
||||
>
|
||||
<view class="_content_item_left_status">{{
|
||||
getValue(RWA_STATUS, item.status)
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-top: 1rpx solid #f5f5f5; margin: 28rpx 0"></view>
|
||||
<view class="code_content" v-if="item.antChainHash">
|
||||
<view>
|
||||
<view style="font-size: 28rpx; color: #333; font-weight: bold"
|
||||
>您的订单已接入蚂蚁链溯源</view
|
||||
>
|
||||
<view style="font-size: 20rpx; color: #999; margin-bottom: 18rpx"
|
||||
>扫描二维码或复制下方链接查看溯源信息</view
|
||||
>
|
||||
<view class="code_content_item">
|
||||
<view class="code_content_item_text">
|
||||
{{
|
||||
`https://chaininsight.antdigital.com/search?unionId=2647&projectName=VBGAKNJB&content=${item.antChainHash}`
|
||||
}}
|
||||
</view>
|
||||
<up-image
|
||||
style="margin-left: 8rpx"
|
||||
src="/static/rwa/copy.png"
|
||||
width="12"
|
||||
@click="
|
||||
copyData(
|
||||
`https://chaininsight.antdigital.com/search?unionId=2647&projectName=VBGAKNJB&content=${item.antChainHash}`
|
||||
)
|
||||
"
|
||||
height="12"
|
||||
bgColor="#f1f6ff00"
|
||||
></up-image
|
||||
></view>
|
||||
</view>
|
||||
<view>
|
||||
<up-qrcode
|
||||
:val="`https://chaininsight.antdigital.com/search?unionId=2647&projectName=VBGAKNJB&content=${item.antChainHash}`"
|
||||
:size="63"
|
||||
@click.stop="previewOrderQrcode(`https://chaininsight.antdigital.com/search?unionId=2647&projectName=VBGAKNJB&content=${item.antChainHash}`)"
|
||||
></up-qrcode>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<up-image
|
||||
src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/kzt.png"
|
||||
width="100"
|
||||
height="100"
|
||||
bgColor="#f1f6ff00"
|
||||
></up-image>
|
||||
<view class="not_order_msg_warp">暂无行权数据～</view>
|
||||
</view>
|
||||
<view v-if="loading" style="text-align: center">加载中...</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<QrcodePreview ref="qrcodePreviewRef" :qrcodeVal="qrcodeVal" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/header.vue';
|
||||
import { getExchTransferRecord, getAcctBalance } from '@/api/finance.js'
|
||||
import { formatDate } from '@/utils/index.js';
|
||||
import { RWA_STATUS, getValue } from '@/utils/enumUtils.js';
|
||||
|
||||
import func from '@/utils/func.js';
|
||||
import Header from "@/components/header.vue";
|
||||
import { copyData } from "@/utils/index.js";
|
||||
import { getExchTransferRecord, getAcctBalance } from "@/api/finance.js";
|
||||
import { formatDate } from "@/utils/index.js";
|
||||
import { RWA_STATUS, getValue } from "@/utils/enumUtils.js";
|
||||
import QrcodePreview from "@/pages/rwa_package/rwa_withdrawal_log/qrcode-preview.vue";
|
||||
export default {
|
||||
components: { Header },
|
||||
computed: {
|
||||
RWA_STATUS() {
|
||||
return RWA_STATUS;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftPath: "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal",
|
||||
logList: [],
|
||||
form: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
categotyObj: {},
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
const back = option.back;
|
||||
if (back === "rwa") {
|
||||
this.leftPath = "/pages/rwa_package/rwa/rwa"
|
||||
}
|
||||
if (back === "withdrawal") {
|
||||
this.leftPath = "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal"
|
||||
}
|
||||
this.loadData();
|
||||
this.getAcctBalance();
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
formatDate,
|
||||
// 查询余额
|
||||
async getAcctBalance() {
|
||||
const resp = await getAcctBalance();
|
||||
let data = {};
|
||||
if (resp && resp.bizcode === 100) {
|
||||
if (resp.data) {
|
||||
resp.data.map(item => {
|
||||
// 交易币
|
||||
if (item.categoty === "vcoin") {
|
||||
data = item;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
this.categotyObj = data;
|
||||
},
|
||||
// 加载数据的方法
|
||||
async loadData() {
|
||||
if (this.loading) return; // 如果正在加载，则不重复加载
|
||||
this.loading = true; // 设置加载状态为true
|
||||
try {
|
||||
// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
|
||||
const newData = await this.fetchData(this.form.page, this.form.pageSize);
|
||||
this.logList = [...this.logList, ...newData]; // 将新数据添加到列表中
|
||||
this.logList.forEach(item=>{
|
||||
if(item.name == 'WALLET'){
|
||||
item.account = "******" + item.account.slice(-4);
|
||||
// item.account = func.addressTurn(item.account,6)
|
||||
}
|
||||
})
|
||||
this.form.page++; // 页码加1
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
} finally {
|
||||
this.loading = false; // 设置加载状态为false
|
||||
}
|
||||
},
|
||||
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
|
||||
async fetchData(page, pageSize) {
|
||||
const params = {
|
||||
page,
|
||||
pageSize,
|
||||
}
|
||||
console.log("params", params);
|
||||
const resp = await getExchTransferRecord(params);
|
||||
console.log("resp", resp);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data && resp.data.entitys || [];
|
||||
return data
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当滚动到底部时触发的方法
|
||||
loadMore() {
|
||||
this.loadData(); // 加载更多数据
|
||||
}
|
||||
}
|
||||
}
|
||||
components: { Header, QrcodePreview },
|
||||
computed: {
|
||||
RWA_STATUS() {
|
||||
return RWA_STATUS;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leftPath: "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal",
|
||||
logList: [],
|
||||
form: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
qrvalue: "",
|
||||
loading: false,
|
||||
categotyObj: {},
|
||||
qrcodeVal: '',
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
const back = option.back;
|
||||
if (back === "rwa") {
|
||||
this.leftPath = "/pages/rwa_package/rwa/rwa";
|
||||
}
|
||||
if (back === "withdrawal") {
|
||||
this.leftPath = "/pages/rwa_package/rwa_withdrawal/rwa_withdrawal";
|
||||
}
|
||||
this.loadData();
|
||||
this.getAcctBalance();
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
copyData,
|
||||
formatDate,
|
||||
// 查询余额
|
||||
async getAcctBalance() {
|
||||
const resp = await getAcctBalance();
|
||||
let data = {};
|
||||
if (resp && resp.bizcode === 100) {
|
||||
if (resp.data) {
|
||||
resp.data.map((item) => {
|
||||
// 交易币
|
||||
if (item.categoty === "vcoin") {
|
||||
data = item;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
this.categotyObj = data;
|
||||
},
|
||||
// 加载数据的方法
|
||||
async loadData() {
|
||||
if (this.loading) return; // 如果正在加载，则不重复加载
|
||||
this.loading = true; // 设置加载状态为true
|
||||
try {
|
||||
// 模拟异步获取数据，实际应用中应该替换为你的数据获取逻辑，例如API调用
|
||||
const newData = await this.fetchData(
|
||||
this.form.page,
|
||||
this.form.pageSize
|
||||
);
|
||||
this.logList = [...this.logList, ...newData]; // 将新数据添加到列表中
|
||||
this.logList.forEach((item) => {
|
||||
if (item.name == "WALLET") {
|
||||
item.account = "******" + item.account.slice(-4);
|
||||
// item.account = func.addressTurn(item.account,6)
|
||||
}
|
||||
});
|
||||
this.form.page++; // 页码加1
|
||||
} catch (error) {
|
||||
console.error("加载数据失败:", error);
|
||||
} finally {
|
||||
this.loading = false; // 设置加载状态为false
|
||||
}
|
||||
},
|
||||
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
|
||||
async fetchData(page, pageSize) {
|
||||
const params = {
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
console.log("params", params);
|
||||
const resp = await getExchTransferRecord(params);
|
||||
console.log("resp", resp);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = (resp.data && resp.data.entitys) || [];
|
||||
return data;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当滚动到底部时触发的方法
|
||||
loadMore() {
|
||||
this.loadData(); // 加载更多数据
|
||||
},
|
||||
previewOrderQrcode(val) {
|
||||
console.log("val--", val);
|
||||
this.qrcodeVal = val;
|
||||
this.$refs.qrcodePreviewRef.open();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.rwa_withdrawal_log {
|
||||
background: #F5F5F5;
|
||||
height: calc(100vh - 0rpx);
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
height: calc(100vh - 0rpx);
|
||||
overflow: hidden;
|
||||
|
||||
._log_content {
|
||||
height: calc(100vh - 216rpx);
|
||||
padding: 30rpx;
|
||||
._log_content {
|
||||
height: calc(100vh - 216rpx);
|
||||
padding: 30rpx;
|
||||
|
||||
._log_content_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
._log_content_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
._content_item {
|
||||
margin-bottom: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
._content_item {
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
._content_item_no {
|
||||
padding: 0 0 20rpx 0;
|
||||
text-align: right;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
._content_item_no {
|
||||
padding: 0 0 20rpx 0;
|
||||
text-align: right;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
._content_item_no_buto {
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
}
|
||||
._content_item_no_buto {
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
.code_content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.code_content_item {
|
||||
font-size: 20rpx;
|
||||
color: #7934f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.code_content_item_text {
|
||||
width: 350rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
word-break: keep-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
._content_item_but {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
._content_item_but {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
._content_item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
._content_item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
._content_item_left_ {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
._content_item_left_ {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
._content_item_left_title {
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
._content_item_left_title {
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
._content_item_left_amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
._content_item_left_amount {
|
||||
text-align: right;
|
||||
}
|
||||
._content_item_left_exchNo {
|
||||
font-size: 20rpx;
|
||||
color: #9e9e9e;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
._content_item_left_exchNo {
|
||||
font-size: 20rpx;
|
||||
color: #9E9E9E;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
._content_item_left_val {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
._content_item_left_val {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
._content_item_left_status {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
._content_item_left_status {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user