Skip to content

N
NFT
Commit 4b71d157 authored by salitedfish's avatar salitedfish
Browse files
Options

增加个人身份认证和流转记录

parent c0a0346c
Hide whitespace changes
Inline Side-by-side
Showing with 202 additions and 60 deletions
src/App.vue
View file @ 4b71d157
......@@ -89,6 +89,11 @@ export default Vue.extend({
/**
* 这里还需要判断是否实名，已实名才能发行NFT
*/
const isCertificate = localStorage.getItem('isCertificate')
if(!isCertificate || isCertificate == 'false') {
this.$toast('对不起，请先进行实名认证~')
return
}
this.$router.push({
name:obj.url,
query:{
......
src/assets/img/banner.png
View replaced file @ c0a0346c View file @ 4b71d157
src/assets/img/banner.png

74.5 KB | W: | H:

src/assets/img/banner.png

217 KB | W: | H:

src/assets/img/banner.png
src/assets/img/banner.png
src/assets/img/banner.png
src/assets/img/banner.png
  • 2-up
  • Swipe
  • Onion skin
src/service/nftService/nftService.ts
View file @ 4b71d157
......@@ -78,6 +78,18 @@ export class NFTService extends Service {
downloadCerfificate:{
path:"/proxyDowload/",
dataType: 'application/json;charset=utf-8'
},
getTransferList:{
path:"/proxyApi/nft/transfer/record/list/",
dataType: 'application/json;charset=utf-8'
},
getTransferDetail:{
path:"/proxyApi/nft/transfer/record/detail/",
dataType: 'application/json;charset=utf-8'
},
certificateByIdcard:{
path:"/proxyApi/user/auth/person",
dataType: 'multipart/form-data'
}
}
constructor() {
......@@ -408,4 +420,42 @@ export class NFTService extends Service {
}
})
}
/**
* 获取nft转让记录列表
*/
async getTransferList(type:string):Promise<any>{
return await this.service.get(this.router.getTransferList.path+type,{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.getTransferList.dataType,
}
})
}
/**
* 获取nft转让记录详情
*/
async getTransferDetail(id:string):Promise<any>{
return await this.service.get(this.router.getTransferDetail.path+id,{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.getTransferDetail.dataType,
}
})
}
/**
* 个人实名认证
*/
async certificateByIdcard(front:File,back:File):Promise<any>{
const fl = new FormData()
fl.append('front',front)
fl.append('back',back)
return await this.service.post(this.router.certificateByIdcard.path,fl,{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.officialNFTDetail.dataType,
},
})
}
}
src/service/userService.ts
View file @ 4b71d157
......@@ -12,7 +12,8 @@ export class UserService extends Service {
userInfo:{ path:'/proxyApi/user/detail',dataType:'application/x-www-form-urlencoded'},
editUser:{path:'/proxyApi/user/update'},
avatar:{ path:'/proxyApi/user/upload/avatar',dataType:'multipart/form-data'},
getUserInfoByAddr:{ path:'/proxyApi/user/getUserByWallet', dataType:'application/x-www-form-urlencoded'}
getUserInfoByAddr:{ path:'/proxyApi/user/getUserByWallet', dataType:'application/x-www-form-urlencoded'},
}
constructor(){
super()
......
src/util/userInfoUtils.ts
View file @ 4b71d157
const KEY_TOKEN = 'KEY_TOKEN'
const KEY_USER = 'KEY_USER'
const KEY_CERTIFICATE = 'KEY_CERTIFICATE'
function setToken(token: string) {
......
src/view/Auth/index.vue
View file @ 4b71d157
......@@ -47,6 +47,9 @@ export default Vue.extend({
this.$router.push({
name: "Home",
});
if((user as any).authStatus == 1) {
localStorage.setItem('isCertificate','true')
}
}
},
async loginByCodeFunc(phone: string, code: string) {
......
src/view/Home/index.vue
View file @ 4b71d157
......@@ -11,7 +11,7 @@
</van-badge>
</div>
</div>
<div class=" absolute z-20 bottom-5 w-full justify-center text-font-white">
<div class=" absolute z-20 bottom-8 w-full justify-center text-font-white">
<!-- <div class=" px-5 py-1 w-32 mx-auto text-center bg-gradient-to-r from-app-orange to-app-purple rounded-full">
立即领取
</div> -->
......
src/view/NFT/Create/form.vue
View file @ 4b71d157
......@@ -39,7 +39,7 @@
@click.native="$router.push({name:'NftPick',query:{text:`${getPreText()}题材`,id:categoryId}})"
></app-cell>
<app-cell
text="封面(选填)"
text="展示封面(选填)"
class="text-font-white my-3 text-sm"
labelIcon="icon-wenhao"
@clickIcon="alertCoverTip"
......@@ -422,7 +422,7 @@ export default Vue.extend({
themePlaceholder:`请选择${text}题材`,
desText:`${text}简介`,
desPlaceholder:`请输入${text}简介，限500字`,
fileUploadText:`${text}HASH计算`,
fileUploadText:this.categoryId != '5'?`${text}HASH计算`:'图片上传',
filePlaceholder:`请选择${text}文件`,
fileHashText:`${text}HASH`
}
......
src/view/NFT/Detail/index.vue
View file @ 4b71d157
......@@ -4,7 +4,8 @@
<SkeletonNftDetail v-if="showSkelton" />
<div v-if="$route.query.officia">
<div class="h-80">
<img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" />
<img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'@/assets/img/NFTCover.png'" alt="" />
<!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
</div>
<div>
{{ nftData.name }}
......@@ -206,14 +207,15 @@
></app-cell>
<div class="flex justify-center">
<van-image
v-if="nftData.isCommemorate == 1"
v-if="nftData.isCommemorate == 1 || nftData.category == '图片'"
class="my-3 self-center text-center"
width="180"
lazy-load
:src="nftData.fileUrl"
@click="downloadFile"
src="/img/mokeImg/查看NFT.png"
/>
<van-image
v-if="nftData.isCommemorate == 0"
v-else-if="nftData.isCommemorate == 0"
class="my-3 self-center text-center"
width="180"
lazy-load
......@@ -438,7 +440,10 @@ export default Vue.extend({
this.showSkelton = false
return
}
await this.setMyCollection();
/**
* 这个注释后面要去掉
*/
await this.setMyCollection();
}
this.showSkelton = false;
......
src/view/NFT/TransferDetail/index.vue
View file @ 4b71d157
<template>
<Layout-Child>
<div class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
<div class=" h-52 ">
<!-- <img src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto"> -->
<app-collectionCard :colletionData="{}"></app-collectionCard>
<div v-if="showSkelton" class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
<SkeletonNftDetail />
</div>
<div v-else class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
<div class=" h-52 " v-if="transferDetail.category && transferDetail.category == '图片'">
<img v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class=" max-h-full max-w-full mx-auto">
<img v-else src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto">
</div>
<div class=" h-48 mb-5 bg-font-light-black bg-opacity-70 rounded pt-2 pb-2 pr-8 pl-8 text-font-dark-blue" v-else>
<div class=" flex items-center">
<div class=" w-2/6 h-44 mr-4 bg-imgbox">
<img v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class="bg-img rounded">
<img v-else src="/img/cover.png" alt="" class="bg-img rounded">
</div>
<div class="flex-1 ">
<div class=" text-white text-lg">{{transferDetail.nftName || 'NFT名称'}}</div>
<div class="flex h-8">
<div class=" mr-3 text-gray-400">类型</div>
<div>{{transferDetail.category}}</div>
</div>
<div class="flex h-8">
<div class=" mr-3 text-gray-400">状态</div>
<div>已完成</div>
</div>
<div class="flex h-8">
<div class=" mr-3 text-gray-400">时间</div>
<div>{{transferDetail.createDate && transferDetail.createDate.substring(0,16)}}</div>
</div>
</div>
</div>
</div>
<div class=" h-20 mt-3 border-b border-font-gray border-opacity-25">
<div class=" text-white">nft名称</div>
<div class=" text-white">{{transferDetail.nftName || 'NFT名称'}}</div>
<div class=" text-font-dark-blue flex justify-between mt-4">
<div>
NFT类型： <span class="text-white">插画</span>
NFT类型： <span class="text-white">{{transferDetail.category}}</span>
</div>
<div>
创作者： <span class="text-white">士大夫但是</span>
创作者： <span class="text-white">{{transferDetail.publisher}}</span>
</div>
</div>
</div>
<div class=" h-20 flex items-center text-font-dark-blue ">
<div class=" rounded-full w-10 h-10">
<img src="/img/mokeImg/avatar.png" alt="">
<img v-if="transferDetail.fromAvatar" :src="transferDetail.fromAvatar" alt="" class=" rounded-full w-10 h-10 ">
<img v-else src="/img/mokeImg/avatar.png" alt="" class=" rounded-full w-10 h-10 ">
</div>
<div class=" ml-3 flex-1">
<div class="flex">
<div class=" mr-2 text-white">青木</div>
<div class=" mr-2 text-white">{{transferDetail.fromNickname || '转出人姓名'}}</div>
<div class=" w-12 bg-font-light-black text-center leading-6 text-sm rounded-xl">转出</div>
</div>
<div>4444444</div>
<div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.fromWallet || '转出人地址'}}</div>
</div>
<div>
<img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('333')">
<img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.fromWallet)">
</div>
</div>
<div class=" h-20 flex items-center text-font-dark-blue border-b border-font-gray border-opacity-25">
<div class=" rounded-full w-10 h-10 ">
<img src="/img/mokeImg/avatar.png" alt="">
<img v-if="transferDetail.toAvatar" :src="transferDetail.toAvatar" alt="" class=" rounded-full w-10 h-10 ">
<img v-else src="/img/mokeImg/avatar.png" alt="" class=" rounded-full w-10 h-10 ">
</div>
<div class=" ml-3 flex-1">
<div class="flex">
<div class=" mr-2 text-white">青木</div>
<div class=" mr-2 text-white">{{transferDetail.toNickname || '转入人姓名'}}</div>
<div class="w-12 bg-font-light-black text-center text-sm leading-6 rounded-xl">接收</div>
</div>
<div>4444444</div>
<div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.toWallet || '转入人地址'}}</div>
</div>
<div>
<img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('444')">
<img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.toWallet)">
</div>
</div>
<div class=" text-white">
<app-cell
text="NFT编号"
:value="1111"
:value="transferDetail.nftId || 'nftId'"
boxType="border"
></app-cell>
<app-cell
text="NFT HASH"
:name="'dfgrgrttttttttttttttttttttttttttttttttttttttttttttg'"
:name="transferDetail.nftHash"
boxType="border"
type="showText"
:needCopy="true"
></app-cell>
<app-cell
text="转让状态"
:value="1111"
value="已完成"
boxType="border"
></app-cell>
<app-cell
text="转让时间"
:value="1111"
:value="transferDetail.createDate"
boxType="border"
></app-cell>
<app-cell
text="转让数量"
:value="1111"
:value="1"
boxType="border"
></app-cell>
<app-cell
text="手续费"
:value="1111"
value="暂无"
boxType="border"
></app-cell>
</div>
......@@ -87,15 +115,18 @@
<script lang="ts">
import Vue from "vue"
import ClipboardJS from "clipboard";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue";
export default Vue.extend({
data(){
return {
transferDetail:{},
showSkelton: true
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
"app-cell": () => import("@/components/common/Cell.vue"),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
SkeletonNftDetail
},
methods:{
async handleClickCopy(text: string | number) {
......@@ -114,10 +145,24 @@ export default Vue.extend({
});
},
}
},
async mounted(){
this.transferDetail = await this.$service.nftService.getTransferDetail(this.$route.params.id)
this.showSkelton = false
},
})
</script>
<style lang="less" scoped>
.bg-imgbox {
position: relative
}
.bg-img {
max-width: 100%;
max-height: 100%;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
\ No newline at end of file
src/view/NFT/TransferList/index.vue
View file @ 4b71d157
......@@ -8,32 +8,36 @@
</van-tabs>
</div>
<div class=" pl-5 pr-5 text-font-dark-blue overflow-y-scroll h-screen pb-48">
<div v-for="i in transferList" @click="$router.push(`/TransferDetail/456`)" :key="i" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-10 pl-12">
<div v-if="transferList.length > 0" class=" pl-5 pr-5 text-font-dark-blue overflow-y-scroll h-screen pb-48">
<div v-for="i in transferList" @click="$router.push(`/TransferDetail/${i.id}`)" :key="i.id" class=" relative h-40 mb-5 bg-font-light-black bg-opacity-70 rounded pt-4 pb-4 pr-8 pl-12">
<div class=" flex">
<div class=" w-2/6 h-32 mr-4">
<img src="/img/cover.png" alt="" class="bg-img rounded">
<div class=" w-2/6 h-32 mr-4 bg-imgbox">
<img v-if="i.cover" :src="i.cover" alt="" class="bg-img rounded">
<img v-else src="/img/cover.png" alt="" class="bg-img rounded">
</div>
<div class="flex-1">
<div class=" text-white text-lg">大标题</div>
<div class="flex-1 ">
<div class=" text-white text-lg">{{i.nftName || 'NFT名称'}}</div>
<div class="flex h-8">
<div class=" mr-4 text-gray-400">类型</div>
<div>插画</div>
<div class=" mr-3 text-gray-400">类型</div>
<div>{{i.category}}</div>
</div>
<div class="flex h-8">
<div class=" mr-4 text-gray-400">状态</div>
<div class=" mr-3 text-gray-400">状态</div>
<div>已完成</div>
</div>
<div class="flex h-8">
<div class=" mr-4 text-gray-400">时间</div>
<div>2021-08-17</div>
<div class=" mr-3 text-gray-400">时间</div>
<div>{{i.createDate.substring(0,16)}}</div>
</div>
</div>
</div>
<img src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
<img src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
<img v-if="i.transferType == 1" src="@/assets/img/transferOut.png" alt="" class=" absolute top-0 left-0 w-10">
<img v-else-if="i.transferType == 2" src="@/assets/img/transferInter.png" alt="" class=" absolute top-0 left-0 w-10">
</div>
</div>
<div v-else class=" text-center text-gray-500">
暂无数据
</div>
</Layout-Child>
</template>
......@@ -54,34 +58,48 @@ export default Vue.extend({
},
{
id:'1',
title:'接收',
title:'转出',
value:'1'
},
{
id:'2',
title:'转出',
title:'接收',
value:'2'
},
],
activeTransferType:'0',
transferList:10
transferList:[]
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
},
methods:{
tabChange(item:any){
console.log(item)
async tabChange(type:any){
await this.getTransferList(type)
},
async getTransferList(type:string){
const res = await this.$service.nftService.getTransferList(type)
this.transferList = res
}
},
async mounted(){
await this.getTransferList('0')
}
})
</script>
<style lang="less" scoped>
.bg-imgbox {
position: relative
}
.bg-img {
max-width: 100%;
max-height: 100%
max-height: 100%;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
\ No newline at end of file
src/view/Safe/CertificationPersion.vue
View file @ 4b71d157
......@@ -41,8 +41,8 @@
<img src="/img/certification.png" alt="" class=" w-1/6 mx-auto">
</div>
<div class=" text-font-red text-xl mt-5">已实名</div>
<div class=" mt-10">姓名：<span>张**</span></div>
<div class=" mt-2">身份证号：<span>4*************7</span></div>
<div class=" mt-10">姓名：<span>{{successInfo.name}}</span></div>
<div class=" mt-2">身份证号：<span>{{successInfo.id}}</span></div>
</div>
<!-- 失败 -->
<div v-else class=" text-white">
......@@ -77,6 +77,10 @@ export default Vue.extend({
bottomImgUrl:'',
bottomImg:'',
resultStatus: false,
successInfo:{
name:'',
id:''
}
}
},
components:{
......@@ -95,13 +99,19 @@ export default Vue.extend({
}
},
methods:{
nextStep(){
async nextStep(){
this.currentStep ++
this.btnText = '审核中 请稍后'
const res = await this.$service.nftService.certificateByIdcard(this.topImg as any,this.bottomImg as any)
console.log('认证结果',res)
if(res){
this.resultStatus = true
this.successInfo.name = res.name
this.successInfo.id = res.idCard
localStorage.setItem('isCertificate','true')
}
this.currentStep ++
this.btnText = '审核中'
setTimeout(()=>{
this.currentStep ++
this.btnText = '确认'
},3000)
this.btnText = '确认'
},
initUpload(type:string){
if(this.currentStep == 2) {
......
src/view/Safe/Safe.vue
View file @ 4b71d157
......@@ -24,6 +24,8 @@ export default Vue.extend({
if(!token.getToken()){
this.$toast('请先登录后再试~')
this.$router.push('/auth/login')
}else if(localStorage.getItem('isCertificate') == 'true'){
this.$toast('您已完成实名认证~')
}else {
this.$router.push('/certificationPersion')
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment