Skip to content

N
NFT
Commit 13949b07 authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

321

parent e3f025e1
Show whitespace changes
Inline Side-by-side
Showing with 217 additions and 92 deletions
src/components/CollectionCard.vue
View file @ 13949b07
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
" "
> >
<div class="left w-4/12 object-cover rounded-md"> <div class="left w-4/12 object-cover rounded-md">
<img src="/img/cover.png" class="rounded-md" /> <img :src="colletionData.cover?colletionData.cover:'/img/cover.png'" class="rounded-md" />
</div> </div>
<div class="right w-8/12"> <div class="right w-8/12">
<div class="w-full px-4"> <div class="w-full px-4">
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
{{colletionData.nftId}} {{colletionData.nftId}}
</p> </p>
</div> </div>
<div class="flex flex-wrap w-full text-sm mt-3"> <div class="flex flex-wrap w-full text-sm mt-3">
<div class="text-font-dark-blue">题材</div> <div class="text-font-dark-blue">题材</div>
<div class="flex-1 pl-3 flex gap-x-2" v-for='(i,index) in getThemeList' :key="index"> <div class="flex-1 pl-3 flex gap-x-2" v-for='(i,index) in getThemeList' :key="index">
......
src/service/nftService/nftService.ts
View file @ 13949b07
...@@ -58,7 +58,8 @@ export class NFTService extends Service { ...@@ -58,7 +58,8 @@ export class NFTService extends Service {
applyOfficialNft:{ applyOfficialNft:{
path:'/commemorate/nft/receive', path:'/commemorate/nft/receive',
dataType: 'application/x-www-form-urlencoded' dataType: 'application/x-www-form-urlencoded'
} },
} }
constructor() { constructor() {
super() super()
...@@ -327,7 +328,13 @@ export class NFTService extends Service { ...@@ -327,7 +328,13 @@ export class NFTService extends Service {
/** /**
* 申请领取官方活动NFT * 申请领取官方活动NFT
*/ */
async applyOfficialNft(){ async applyOfficialNft(id:number){
return await this.service.post(this.router.applyOfficialNft.path,{},{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.officialNFTDetail.dataType,
},
params:{id}
})
} }
} }
src/view/NFT/Create/form.vue
View file @ 13949b07
...@@ -486,6 +486,7 @@ export default Vue.extend({ ...@@ -486,6 +486,7 @@ export default Vue.extend({
synopsis: this.createNFT.value_des, synopsis: this.createNFT.value_des,
theme: this.pickedList.map((i: any) => i.text as string).toString(), theme: this.pickedList.map((i: any) => i.text as string).toString(),
} as iSaveData; } as iSaveData;
console.log(this.createNFT.archives);
if (this.createNFT.archives === 0) { if (this.createNFT.archives === 0) {
data = { data = {
...@@ -496,6 +497,7 @@ export default Vue.extend({ ...@@ -496,6 +497,7 @@ export default Vue.extend({
} else if (this.createNFT.archives === 1) { } else if (this.createNFT.archives === 1) {
//需要加密存档 //需要加密存档
const fileUrl = await this.uploadFileToOss(this.file); const fileUrl = await this.uploadFileToOss(this.file);
console.log(fileUrl,'fileUrl');
data = { data = {
...data, ...data,
isArchives: this.createNFT.archives, isArchives: this.createNFT.archives,
...@@ -513,6 +515,8 @@ export default Vue.extend({ ...@@ -513,6 +515,8 @@ export default Vue.extend({
} }
} }
console.log(data);
const { id, nftId, wallet, fileHash } = const { id, nftId, wallet, fileHash } =
await this.$service.nftService.save(data); await this.$service.nftService.save(data);
this.publish.fileHash = fileHash; this.publish.fileHash = fileHash;
......
src/view/NFT/Detail/index.vue
View file @ 13949b07
<template> <template>
<Layout-Child class='page-scroll'> <Layout-Child class="page-scroll">
<div class="w-11/12 mx-auto mt-6 text-font-white"> <div class="w-11/12 mx-auto mt-6 text-font-white">
<SkeletonNftDetail v-if="showSkelton"/> <SkeletonNftDetail v-if="showSkelton" />
<div v-if="$route.query.officia"> <div v-if="$route.query.officia">
<div class='h-80 '> <div class="h-80">
<img :src="nftData" alt=""> <img :src="nftData.cover" alt="" />
</div>
<div>
{{ nftData.name }}
</div> </div>
<div class="flex text-sm text-font-dark-blue justify-between my-3">
<div>全球限量发行{{ nftData.publishCount }}</div>
<div> <div>
{{nftData.name}} 已领取 <i class="text-font-blue">{{ nftData.receiveCount }}</i> 个
</div> </div>
<div class='flex text-sm text-font-dark-blue justify-between my-3'>
<div>全球限量发行{{nftData.publishCount}}</div>
<div>已领取 <i class=" text-font-blue">{{nftData.receiveCount}}</i> 个</div>
</div> </div>
<div class="border border-font-dark-blue border-opacity-50 rounded-lg text-sm p-6 text-font-dark-blue "> <div
class="
border border-font-dark-blue border-opacity-50
rounded-lg
text-sm
p-6
text-font-dark-blue
"
>
纪念版NFT只能进行转让，不能进行交易。最终解释权归平台所有。 纪念版NFT只能进行转让，不能进行交易。最终解释权归平台所有。
</div> </div>
</div> </div>
<app-collectionCard :colletionData='nftData' v-else></app-collectionCard> <app-collectionCard :colletionData="nftData" v-else></app-collectionCard>
<div class="app-icons mx-auto grid grid-cols-4 my-6" v-if="isOwner"> <div class="app-icons mx-auto grid grid-cols-4 my-6" v-if="isOwner">
<div <div
v-for="(i, index) in apps" v-for="(i, index) in apps"
...@@ -34,7 +42,7 @@ ...@@ -34,7 +42,7 @@
size="24px" size="24px"
class="p-5 bg-table-light-blue shadow-md rounded-full" class="p-5 bg-table-light-blue shadow-md rounded-full"
></app-icon> --> ></app-icon> -->
<img :src="i.icon" alt="" @click="appOnclick(i.action)"> <img :src="i.icon" alt="" @click="appOnclick(i.action)" />
</div> </div>
<div class="text-xs mt-3 text-font-white"> <div class="text-xs mt-3 text-font-white">
{{ i.text }} {{ i.text }}
...@@ -52,14 +60,19 @@ ...@@ -52,14 +60,19 @@
" "
> >
<div class="py-3 pr-4"> <div class="py-3 pr-4">
<img :src="nftData.avatar?nftData.avatar:'/img/mokeImg/avatar.png'" class="h-12 w-12 rounded-full" /> <img
:src="nftData.avatar ? nftData.avatar : '/img/mokeImg/avatar.png'"
class="h-12 w-12 rounded-full"
/>
</div> </div>
<div> <div>
<div class="flex items-center"> <div class="flex items-center">
<div class="pr-3 text-base">{{nftData.publisher?nftData.publisher:'匿名'}}</div> <div class="pr-3 text-base">
{{ nftData.publisher ? nftData.publisher : "匿名" }}
</div>
<app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag> <app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
</div> </div>
<div class="mt-1 text-font-dark-blue">{{nftData.wallet}}</div> <div class="mt-1 text-font-dark-blue">{{ nftData.wallet }}</div>
</div> </div>
</div> </div>
<div class="py-3"> <div class="py-3">
...@@ -97,7 +110,7 @@ ...@@ -97,7 +110,7 @@
></app-cell> --> ></app-cell> -->
<app-cell <app-cell
text="作者" text="作者"
:value="nftData.author?nftData.author:'无'" :value="nftData.author ? nftData.author : '无'"
boxType="border" boxType="border"
></app-cell> ></app-cell>
<!-- <app-cell <!-- <app-cell
...@@ -119,53 +132,126 @@ ...@@ -119,53 +132,126 @@
<div class="py-3"> <div class="py-3">
<div class="text-font-dark-blue">剧本简介</div> <div class="text-font-dark-blue">剧本简介</div>
<div class=" py-2 tracking-wide leading-6 text-sm break-all">{{nftData.synopsis?nftData.synopsis:'无'}}</div> <div class="py-2 tracking-wide leading-6 text-sm break-all">
{{ nftData.synopsis ? nftData.synopsis : "无" }}
</div>
</div> </div>
<div class="py-3"> <div class="py-3">
<div class="text-font-dark-blue">关于NFT</div> <div class="text-font-dark-blue">关于NFT</div>
<div class=' py-2 tracking-wide leading-6 text-sm break-all'>NFT全称为Non-Fungible Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。</div> <div class="py-2 tracking-wide leading-6 text-sm break-all">
NFT全称为Non-Fungible
Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。
</div>
</div> </div>
<div class="py-3"> <div class="py-3">
<div class="text-font-dark-blue">交易记录</div> <div class="text-font-dark-blue">交易记录</div>
<div class="text-center py-5"> <div class="text-center py-5">暂无记录</div>
暂无记录
</div>
</div> </div>
<van-overlay :show="showoverlay" @click="showoverlay = false" />
<div class="scroll-padding"></div> <div class="scroll-padding"></div>
<div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 mb-7 bg-font-black bg-opacity-80 shadow-nav" v-if="!$route.query.officia" >
<div class='flex-grow-0'>
<div @click='editCollection'>
<app-icon name='icon-heart1' size='25px' v-if="inMyCollection" color='#ED6F6F'></app-icon>
<app-icon name='icon-heart' size='25px' v-else></app-icon>
<div
class="
fixed
bottom-0
w-full
left-0
z-30
flex
items-center
px-5
mb-7
bg-font-black bg-opacity-80
shadow-nav
"
v-if="!$route.query.officia"
>
<div class="flex-grow-0">
<div @click="editCollection">
<app-icon
name="icon-heart1"
size="25px"
v-if="inMyCollection"
color="#ED6F6F"
></app-icon>
<app-icon name="icon-heart" size="25px" v-else></app-icon>
</div> </div>
</div> </div>
<div class='flex-grow pl-8'> <div class="flex-grow pl-8">
<app-btn text="查看剧本" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue" border='none' ></app-btn> <app-btn
text="查看剧本"
class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div> </div>
</div> </div>
<div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 mb-7 bg-font-black bg-opacity-80 shadow-nav" v-else>
<div class='flex-grow '> <div
<app-btn :text="nftData.status ===0?'已领取，去查看':nftData.status ===1?'立即领取':'已经领完'" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue" border='none' ></app-btn> class="
fixed
bottom-0
w-full
left-0
z-30
flex
items-center
px-5
mb-7
bg-font-black bg-opacity-95
shadow-nav
flex-col
"
v-else
>
<div class="w-10/12 pt-8" v-if="showoverlay">
<app-cell text="文件类型" value="png" class="my-1"></app-cell>
<app-cell
text="文件名"
:value="nftData.fileName"
class="my-1"
></app-cell>
<div class="flex justify-center">
<van-image
class="my-3 self-center text-center"
width="180"
lazy-load
:src="nftData.fileUrl"
/>
</div>
</div>
<div class="flex-grow w-10/12">
<app-btn
:text="
nftData.status === 0
? '已领取，去查看'
: nftData.status === 1
? '立即领取'
: '已经领完'
"
class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
@click.native="confirmBtn"
></app-btn>
</div> </div>
</div> </div>
</div> </div>
</Layout-Child> </Layout-Child>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue" import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue";
import { token } from '@/util/userInfoUtils' import { token } from "@/util/userInfoUtils";
import anquanzhongxin89 from "@/assets/img/check.png" import anquanzhongxin89 from "@/assets/img/check.png";
import chakan from "@/assets/img/upload.png" import chakan from "@/assets/img/upload.png";
import atupian from "@/assets/img/transfer.png" import atupian from "@/assets/img/transfer.png";
import BOSSyingyetingchushi from "@/assets/img/certigicate.png" import BOSSyingyetingchushi from "@/assets/img/certigicate.png";
import { Overlay } from "vant";
import download from "downloadjs";
Vue.use(Overlay);
const apps = [ const apps = [
{ {
text: "版权认证", text: "版权认证",
...@@ -178,7 +264,7 @@ const apps = [ ...@@ -178,7 +264,7 @@ const apps = [
{ {
text: "NFT转让", text: "NFT转让",
icon: atupian, icon: atupian,
action: 'pushToTransfer' action: "pushToTransfer",
}, },
{ {
text: "查看证书", text: "查看证书",
...@@ -191,31 +277,37 @@ export default Vue.extend({ ...@@ -191,31 +277,37 @@ export default Vue.extend({
return { return {
id: this.$route.params.id, id: this.$route.params.id,
apps, apps,
showSkelton:true, showoverlay: false,
nftData:{} as any, showSkelton: true,
collectionData:{}, nftData: {} as any,
inMyCollection:false, collectionData: {},
isOwner:false, inMyCollection: false,
user:this.$util.userMsg.getUserMsg() as any isOwner: false,
user: this.$util.userMsg.getUserMsg() as any,
// loading:true // loading:true
}; };
}, },
async created() { async created() {
console.log(this.$route.query.officia); console.log(this.$route.query.officia);
if(this.$route.query.officia){ if (this.$route.query.officia) {
this.nftData = await this.$service.nftService.officialNFTDetail(parseInt(this.id)) this.nftData = await this.$service.nftService.officialNFTDetail(
parseInt(this.id)
);
console.log(this.nftData); console.log(this.nftData);
} else {
}else{ this.nftData = await this.$service.nftService.getNFTdetail(
this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id)) parseInt(this.id)
this.nftData.wallet == this.user.wallet? this.isOwner=true:this.isOwner=false );
if(!token.getToken()) { this.nftData.wallet == this.user.wallet
return ? (this.isOwner = true)
: (this.isOwner = false);
if (!token.getToken()) {
return;
} }
await this.setMyCollection() await this.setMyCollection();
} }
this.showSkelton = false this.showSkelton = false;
}, },
components: { components: {
...@@ -223,56 +315,79 @@ export default Vue.extend({ ...@@ -223,56 +315,79 @@ export default Vue.extend({
"app-icon": () => import("@/components/common/Icon.vue"), "app-icon": () => import("@/components/common/Icon.vue"),
"app-tag": () => import("@/components/common/Tag.vue"), "app-tag": () => import("@/components/common/Tag.vue"),
"app-cell": () => import("@/components/common/Cell.vue"), "app-cell": () => import("@/components/common/Cell.vue"),
'app-btn':()=>import('@/components/common/Btn.vue'), "app-btn": () => import("@/components/common/Btn.vue"),
// 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'), // 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"), "app-collectionCard": () => import("@/components/CollectionCard.vue"),
SkeletonNftDetail, SkeletonNftDetail,
}, },
methods:{ methods: {
appOnclick(action:any){ appOnclick(action: any) {
console.log(action); console.log(action);
switch (action) { switch (action) {
case 'pushToTransfer': case "pushToTransfer":
this.$router.push({name:'NftTransfer',query:{ this.$router.push({
nftId:this.nftData.id, name: "NftTransfer",
from:this.nftData.wallet, query: {
avatar:this.nftData.avatar, nftId: this.nftData.id,
nftName:this.nftData.name from: this.nftData.wallet,
}}) avatar: this.nftData.avatar,
nftName: this.nftData.name,
},
});
break; break;
default: default:
break; break;
} }
}, },
confirmBtn() {
async setMyCollection():Promise<void>{ console.log(this.nftData.status);
if(!token.getToken()) { if (this.nftData.status === 1) {
this.$router.push('/auth/login') if (!this.showoverlay) {
this.showoverlay = true;
} else {
this.$service.nftService
.applyOfficialNft(Number(this.$route.params.id))
.then((res) => {
if (res) {
download(this.nftData.fileUrl);
this.$toast("领取成功");
this.$router.replace("");
}
})
} }
let list = await this.$service.nftService.getCollection() }else if(this.nftData.status == 0){
if(list.find(i=> i.id == this.id)){ this.$router.push('/Nft/MyList')
this.inMyCollection = true
}else{
this.inMyCollection = false
} }
}, },
async editCollection(){ async setMyCollection(): Promise<void> {
if(!token.getToken()) { if (!token.getToken()) {
this.$router.push('/auth/login') this.$router.push("/auth/login");
} }
await this.$service.nftService.editCollection(parseInt(this.id)).then(async (res)=>{ let list = await this.$service.nftService.getCollection();
if(res){ if (list.find((i) => i.id == this.id)) {
await this.setMyCollection() this.inMyCollection = true;
if(this.inMyCollection){ } else {
this.$toast.success('NFT已经收藏成功') this.inMyCollection = false;
}else {
this.$toast.success('NFT已从我的收藏中移除')
} }
},
async editCollection() {
if (!token.getToken()) {
this.$router.push("/auth/login");
} }
}) await this.$service.nftService
.editCollection(parseInt(this.id))
.then(async (res) => {
if (res) {
await this.setMyCollection();
if (this.inMyCollection) {
this.$toast.success("NFT已经收藏成功");
} else {
this.$toast.success("NFT已从我的收藏中移除");
} }
} }
});
},
},
}); });
</script> </script>
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