|
|
@@ -1,31 +1,42 @@
|
|
|
<template>
|
|
|
- <div class="mine">
|
|
|
+ <div class="mine" @scroll="handleScroll">
|
|
|
<div class="banner">
|
|
|
- <div class="flex-col flex-ac">
|
|
|
+ <div class="flex-row">
|
|
|
<div class="block_1">
|
|
|
- <img src="@/assets/logo.png" class="avatar" />
|
|
|
+ <img :src="userinfo.avatar" class="avatar" />
|
|
|
+ <input type="file" @change="onFileChange" class="upload" accept="image/*" />
|
|
|
+ <!-- <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead" class="avatar"> </van-uploader> -->
|
|
|
</div>
|
|
|
- <div class="flex-col flex-ac">
|
|
|
- <span class="text_1">{{ userinfo.nickname }}</span>
|
|
|
+ <div class="flex-col">
|
|
|
+ <span class="text_1">{{ userinfo.heading }}</span>
|
|
|
+ <div class="flex-row">
|
|
|
+ <span class="text_2">Uid：{{ userinfo.nickname }}</span>
|
|
|
+ <img src="@/assets/images/trade/copy.png" alt="" class="copys" @click="copy" :data-clipboard-text="this.userinfo.nickname" />
|
|
|
+ </div>
|
|
|
<div class="flex-row">
|
|
|
<span class="text_2">{{ $t('lang35') }}{{ userinfo.addressEncrypt }}</span>
|
|
|
- <!-- <div class="text-wrapper_2"> -->
|
|
|
- <!-- <span>复制</span> -->
|
|
|
<img src="@/assets/images/trade/copy.png" alt="" class="copys" @click="copy" :data-clipboard-text="this.userinfo.address" />
|
|
|
- <!-- </div> -->
|
|
|
</div>
|
|
|
- <img src="@/assets/images/lang.png" alt="" class="lang" @click="reckoningClick('language')" />
|
|
|
+ <div class="lang flex-col">
|
|
|
+ <img src="@/assets/images/lang1.png" alt="" class="lang_img" @click="reckoningClick('language')" />
|
|
|
+ <span>{{ $t('lang79') }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <div class="balance_box">
|
|
|
+ <div class="navbox flex-row jsb">
|
|
|
+ <div class="navbox_item flex-row" v-for="(item, index) in navlist" :key="index" @click="navigatorTo(item.url)">
|
|
|
+ <img :src="item.icon" alt="" />
|
|
|
+ <span>{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="balance_box">
|
|
|
<div class="balance_li" @click="reckoningClick('assets')">
|
|
|
<div class="left">
|
|
|
<span class="amount">{{ $t('lang36') }}</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <!-- <img src="@/assets/images/usdt.png" class="icon1" /> -->
|
|
|
<span>{{ $t('lang37') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -34,12 +45,11 @@
|
|
|
<span class="amount">{{ $t('lang218') }}</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <!-- <img src="@/assets/images/mine.png" class="icon2" /> -->
|
|
|
<span>{{ $t('lang39') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="list">
|
|
|
<div @click="switchovers('myTeaFriends')" class="li">
|
|
|
<div class="li_left">
|
|
|
<div class="imgbox">
|
|
|
@@ -58,15 +68,6 @@
|
|
|
</div>
|
|
|
<van-icon name="arrow" color="#aaaaaa" size="16" />
|
|
|
</div>
|
|
|
- <!-- <div @click="switchovers('share')" class="li">
|
|
|
- <div class="li_left">
|
|
|
- <div class="imgbox">
|
|
|
- <img src="@/assets/images/trade/detail.png" class="li_img" />
|
|
|
- </div>
|
|
|
- <span>{{ $t('lang205') }}</span>
|
|
|
- </div>
|
|
|
- <van-icon name="arrow" color="#aaaaaa" size="16" />
|
|
|
- </div> -->
|
|
|
<div @click="switchovers('1')" class="li">
|
|
|
<div class="li_left">
|
|
|
<div class="imgbox">
|
|
|
@@ -85,6 +86,34 @@
|
|
|
</div>
|
|
|
<van-icon name="arrow" color="#aaaaaa" size="16" />
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <van-tabs @click="onClick" color="#29B286" title-active-color="#29B286">
|
|
|
+ <van-tab v-for="(item, index) in statusList" :key="index" :title="item.key"> </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="list_box">
|
|
|
+ <div class="flex-row jsb">
|
|
|
+ <div class="small_nav flex-row">
|
|
|
+ <span :class="[index == smallNavIndex ? 'small_nav_item nav_active' : 'small_nav_item']" v-for="(item, index) in smallNav" :key="index">{{ item.key }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex-row">
|
|
|
+ <van-radio-group v-model="radio">
|
|
|
+ <van-radio name="1" checked-color="#29b286" icon-size="16px">{{ $t('lang256') }}</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ <van-icon name="search" size="22" color="#000000" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="record flex-row jsb" v-if="nft_list.length > 0">
|
|
|
+ <div class="record_item flex-col" v-for="(item, index) in nft_list" :key="index" @click="toTeaRight('teaRights', item)">
|
|
|
+ <img :src="item.img_url" alt="" />
|
|
|
+ <span class="record_item_name">{{ item.name }}</span>
|
|
|
+ <span class="record_item_count">{{ $t('lang257') }} {{ item.hold_num }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="record bare" v-else>
|
|
|
+ <span>{{ $t('lang82') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 上级弹窗 -->
|
|
|
@@ -133,6 +162,77 @@ export default {
|
|
|
},
|
|
|
receiptAmount: 0, // 实际到账金额
|
|
|
superiorShow: false, //上级弹窗
|
|
|
+ navlist: [
|
|
|
+ {
|
|
|
+ text: this.$t('lang250'),
|
|
|
+ icon: require('@/assets/images/index/qb.png'),
|
|
|
+ url: 'assets',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: this.$t('lang251'),
|
|
|
+ icon: require('@/assets/images/index/dd.png'),
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: this.$t('lang252'),
|
|
|
+ icon: require('@/assets/images/index/sq.png'),
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: this.$t('lang253'),
|
|
|
+ icon: require('@/assets/images/index/sz.png'),
|
|
|
+ url: 'setting',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fileList: [
|
|
|
+ {
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ nft_list: [],
|
|
|
+ statusList: [
|
|
|
+ //0总览 1寄售中 2已寄售 3存储中 4已赠送 5已提货
|
|
|
+ {
|
|
|
+ key: this.$t('lang248'),
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang141'),
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang221'),
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang222'),
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang193'),
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang223'),
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ chooseStatus: 0,
|
|
|
+ page: 1,
|
|
|
+ smallNav: [
|
|
|
+ {
|
|
|
+ key: this.$t('lang254'),
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang255'),
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ smallNavIndex: 0,
|
|
|
+ radio: '',
|
|
|
+ selectedFile: null, // 存储选中的文件
|
|
|
+ imageUrl: null, // 存储图片预览的URL
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -147,9 +247,44 @@ export default {
|
|
|
this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
|
|
|
this.userinfo.addressEncrypt = this.userinfo.address.substring(0, 5) + '****' + this.userinfo.address.substring(this.userinfo.address.length - 5, this.userinfo.address.length);
|
|
|
this.getUserInfo();
|
|
|
+ this.getNftList();
|
|
|
}
|
|
|
},
|
|
|
+ afterRead(file) {
|
|
|
+ // 此时可以自行将文件上传至服务器
|
|
|
+ file.status = 'uploading';
|
|
|
+ file.message = '上传中...';
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
+ file.status = 'failed';
|
|
|
+ file.message = '上传失败';
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ submit() {},
|
|
|
+ onClick(status) {
|
|
|
+ // console.log(status);
|
|
|
+ this.chooseStatus = status;
|
|
|
+ this.page = 1;
|
|
|
+ this.nft_list = [];
|
|
|
+ this.getNftList();
|
|
|
+ },
|
|
|
+ getNftList() {
|
|
|
+ homeApi.getMyNftList({ page: this.page, type_id: this.chooseStatus }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.total = res.data.total;
|
|
|
+ if (this.nft_list.length >= res.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ } else {
|
|
|
+ this.nft_list = [...this.nft_list, ...res.data.data];
|
|
|
+ // console.log(this.nft_list.length);
|
|
|
+ if (this.nft_list.length >= res.data.total) {
|
|
|
+ this.page = -1; // 重置为 -1，表示没有更多数据
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
switchovers(router) {
|
|
|
console.log(router);
|
|
|
if (router == '') {
|
|
|
@@ -164,6 +299,34 @@ export default {
|
|
|
reckoningClick(name) {
|
|
|
this.$router.push({ name: name });
|
|
|
},
|
|
|
+ toTeaRight(name, item) {
|
|
|
+ this.$router.push({ name: name, query: { product_id: item.product_id, type_id: this.chooseStatus } });
|
|
|
+ },
|
|
|
+ onFileChange(event) {
|
|
|
+ console.log(event.target.files[0]);
|
|
|
+
|
|
|
+ this.selectedFile = event.target.files[0]; // 获取选中的文件
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', this.selectedFile);
|
|
|
+ homeApi.upload(formData).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.getUserInfo();
|
|
|
+ homeApi.setUserInfo({ avatar: res.data.fullurl }).then(res1 => {
|
|
|
+ if (res1.code == 200) {
|
|
|
+ this.getUserInfo();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ previewImage() {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = e => {
|
|
|
+ this.imageUrl = e.target.result; // 设置图片预览的URL
|
|
|
+ };
|
|
|
+ reader.readAsDataURL(this.selectedFile); // 读取文件内容，并显示为DataURL格式的base64编码字符串
|
|
|
+ },
|
|
|
getUserInfo() {
|
|
|
homeApi.getUserInfo({}).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
@@ -173,6 +336,22 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ handleScroll(event) {
|
|
|
+ const container = event.target;
|
|
|
+ const scrollTop = container.scrollTop; // 滚动距离
|
|
|
+ const scrollHeight = container.scrollHeight; // 内容总高度
|
|
|
+ const clientHeight = container.clientHeight; // 可视区域高度
|
|
|
+ // 判断是否滑动到底部
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 10) {
|
|
|
+ // console.log(this.page);
|
|
|
+ // console.log('到底部');
|
|
|
+
|
|
|
+ if (this.page != -1) {
|
|
|
+ this.page++; // 页数加 1
|
|
|
+ this.getNftList(); // 触发加载更多
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
copy() {
|
|
|
if (this.userinfo.address) {
|
|
|
var clipboard = new Clipboard('.copys');
|
|
|
@@ -186,6 +365,14 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ navigatorTo(router) {
|
|
|
+ if (this.$route.name == router) return;
|
|
|
+ if (router != '') {
|
|
|
+ this.$router.push({ name: router });
|
|
|
+ } else {
|
|
|
+ this.$toast(this.$t('lang2'));
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['account']),
|
|
|
@@ -208,13 +395,15 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.mine {
|
|
|
- min-height: 100vh;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: scroll;
|
|
|
.banner {
|
|
|
// display: flex;
|
|
|
// justify-content: space-between;
|
|
|
background: linear-gradient(to bottom right, #29b286, #dae9fd);
|
|
|
- padding: 30px 16px 60px;
|
|
|
+ padding: 30px 16px 30px;
|
|
|
.block_1 {
|
|
|
+ position: relative;
|
|
|
box-shadow: 0px 0px 29px 0px rgba(97, 142, 184, 0.19);
|
|
|
// background-color: rgba(169, 191, 245, 1);
|
|
|
border-radius: 50%;
|
|
|
@@ -227,6 +416,27 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
+ // /deep/ .van-uploader__preview,
|
|
|
+ // /deep/.van-image,
|
|
|
+ // /deep/.van-uploader__wrapper,
|
|
|
+ // /deep/.van-uploader__upload {
|
|
|
+ // width: 68px !important;
|
|
|
+ // height: 68px !important;
|
|
|
+ // margin: 0;
|
|
|
+ // }
|
|
|
+ // /deep/ .van-uploader__upload,
|
|
|
+ // /deep/ .van-image__error,
|
|
|
+ // /deep/ .van-image__loading {
|
|
|
+ // background-color: rgba(#000, 0) !important;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .upload {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ left: 0;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: absolute;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
.copys {
|
|
|
@@ -235,10 +445,16 @@ export default {
|
|
|
margin-left: 4px;
|
|
|
}
|
|
|
.lang {
|
|
|
- width: 26px;
|
|
|
position: absolute;
|
|
|
right: 14px;
|
|
|
top: 14px;
|
|
|
+ color: #373737;
|
|
|
+ font-size: 10px;
|
|
|
+ align-items: center;
|
|
|
+ &_img {
|
|
|
+ width: 20px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
.grade {
|
|
|
display: flex;
|
|
|
@@ -252,14 +468,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.text_1 {
|
|
|
- color: rgba(6, 12, 80, 1);
|
|
|
+ color: rgb(0, 0, 0);
|
|
|
font-size: 16px;
|
|
|
font-weight: normal;
|
|
|
- padding: 8px 0 6px;
|
|
|
+ padding: 8px 0 0;
|
|
|
}
|
|
|
.text_2 {
|
|
|
color: rgba(#000, 0.6);
|
|
|
font-size: 13px;
|
|
|
+ padding-top: 3px;
|
|
|
}
|
|
|
.text-wrapper_1 {
|
|
|
font-size: 11px;
|
|
|
@@ -290,10 +507,32 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+ .jsb {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
.content {
|
|
|
- padding: 0 16px 100px;
|
|
|
- margin-top: -40px;
|
|
|
+ padding: 16px;
|
|
|
color: #000;
|
|
|
+ margin: 8px 0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .navbox {
|
|
|
+ // border-radius: 12px;
|
|
|
+ align-items: flex-start;
|
|
|
+ &_item {
|
|
|
+ width: 25%;
|
|
|
+ color: #000;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 550;
|
|
|
+ text-align: center;
|
|
|
+ flex-direction: column;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.balance_box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -423,6 +662,72 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .list_box {
|
|
|
+ padding: 14px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .small_nav {
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 2px;
|
|
|
+ border-radius: 20px;
|
|
|
+
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ &_item {
|
|
|
+ color: #8b8b8b;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 70px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ margin: 1px;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav_active {
|
|
|
+ color: #29b286;
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .record {
|
|
|
+ color: #000;
|
|
|
+ padding: 0 16px 100px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ &_item {
|
|
|
+ width: 46%;
|
|
|
+ padding: 16px 0 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ &_name {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 8px 0 4px;
|
|
|
+ height: 32px;
|
|
|
+ overflow: hidden; //超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ white-space: nowrap; //溢出不换行
|
|
|
+ }
|
|
|
+ &_count {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bare {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 60px 14px 60px;
|
|
|
+ color: #aaa;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.withdrawPopup {
|
|
|
padding: 20px 30px;
|
|
|
color: #666666;
|
|
|
@@ -470,4 +775,9 @@ export default {
|
|
|
/deep/ .van-field__body {
|
|
|
padding: 10px 10px;
|
|
|
}
|
|
|
+
|
|
|
+/deep/ .van-radio__label {
|
|
|
+ font-size: 13px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
</style>
|
xiaomei
