Skip to content

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

321

parent e3f025e1
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 115 deletions
src/components/CollectionCard.vue
View file @ 13949b07
......@@ -12,7 +12,7 @@
"
>
<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 class="right w-8/12">
<div class="w-full px-4">
......@@ -24,7 +24,6 @@
{{colletionData.nftId}}
</p>
</div>
<div class="flex flex-wrap w-full text-sm mt-3">
<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">
......
src/service/nftService/nftService.ts
View file @ 13949b07
......@@ -58,7 +58,8 @@ export class NFTService extends Service {
applyOfficialNft:{
path:'/commemorate/nft/receive',
dataType: 'application/x-www-form-urlencoded'
}
},
}
constructor() {
super()
......@@ -327,7 +328,13 @@ export class NFTService extends Service {
/**
* 申请领取官方活动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,7 +486,8 @@ export default Vue.extend({
synopsis: this.createNFT.value_des,
theme: this.pickedList.map((i: any) => i.text as string).toString(),
} as iSaveData;
console.log(this.createNFT.archives);
if (this.createNFT.archives === 0) {
data = {
...data,
......@@ -496,6 +497,7 @@ export default Vue.extend({
} else if (this.createNFT.archives === 1) {
//需要加密存档
const fileUrl = await this.uploadFileToOss(this.file);
console.log(fileUrl,'fileUrl');
data = {
...data,
isArchives: this.createNFT.archives,
......@@ -513,6 +515,8 @@ export default Vue.extend({
}
}
console.log(data);
const { id, nftId, wallet, fileHash } =
await this.$service.nftService.save(data);
this.publish.fileHash = fileHash;
......
src/view/NFT/Detail/index.vue
View file @ 13949b07
<template>
<Layout-Child class='page-scroll'>
<Layout-Child class="page-scroll">
<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 class='h-80 '>
<img :src="nftData" alt="">
<div class="h-80">
<img :src="nftData.cover" alt="" />
</div>
<div>
{{nftData.name}}
{{ nftData.name }}
</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 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 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只能进行转让，不能进行交易。最终解释权归平台所有。
</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
v-for="(i, index) in apps"
......@@ -33,8 +41,8 @@
:name="i.icon"
size="24px"
class="p-5 bg-table-light-blue shadow-md rounded-full"
></app-icon> -->
<img :src="i.icon" alt="" @click="appOnclick(i.action)">
></app-icon> -->
<img :src="i.icon" alt="" @click="appOnclick(i.action)" />
</div>
<div class="text-xs mt-3 text-font-white">
{{ i.text }}
......@@ -52,32 +60,37 @@
"
>
<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 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>
</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 class="py-3">
<div class="text-font-dark-blue">NFT信息</div>
<app-cell
v-if="!$route.query.officia"
v-if="!$route.query.officia"
text="编号"
:value="nftData.nftId"
boxType="border"
></app-cell>
<app-cell
v-if="!$route.query.officia"
v-if="!$route.query.officia"
text="剧本HASH"
:value="nftData.fileHash"
boxType="border"
></app-cell>
<app-cell
v-if="$route.query.officia"
v-if="$route.query.officia"
text="NFT HASH"
:value="nftData.nftHash"
boxType="border"
......@@ -97,7 +110,7 @@
></app-cell> -->
<app-cell
text="作者"
:value="nftData.author?nftData.author:'无'"
:value="nftData.author ? nftData.author : '无'"
boxType="border"
></app-cell>
<!-- <app-cell
......@@ -117,55 +130,128 @@
></app-cell> -->
</div>
<div class="py-3">
<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-3">
<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>
<div class="py-3">
<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-3">
<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>
<div class="py-3">
<div class="text-font-dark-blue">交易记录</div>
<div class="text-center py-5">
暂无记录
</div>
</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="py-3">
<div class="text-font-dark-blue">交易记录</div>
<div class="text-center py-5">暂无记录</div>
</div>
<van-overlay :show="showoverlay" @click="showoverlay = false" />
<div class="scroll-padding"></div>
</div>
</div>
<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>
</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>
</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 pl-8">
<app-btn
text="查看剧本"
class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div>
</div>
<div class='flex-grow '>
<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>
</div>
<div
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>
</Layout-Child>
</template>
<script lang="ts">
import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
import { token } from '@/util/userInfoUtils'
import anquanzhongxin89 from "@/assets/img/check.png"
import chakan from "@/assets/img/upload.png"
import atupian from "@/assets/img/transfer.png"
import BOSSyingyetingchushi from "@/assets/img/certigicate.png"
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue";
import { token } from "@/util/userInfoUtils";
import anquanzhongxin89 from "@/assets/img/check.png";
import chakan from "@/assets/img/upload.png";
import atupian from "@/assets/img/transfer.png";
import BOSSyingyetingchushi from "@/assets/img/certigicate.png";
import { Overlay } from "vant";
import download from "downloadjs";
Vue.use(Overlay);
const apps = [
{
text: "版权认证",
......@@ -178,7 +264,7 @@ const apps = [
{
text: "NFT转让",
icon: atupian,
action: 'pushToTransfer'
action: "pushToTransfer",
},
{
text: "查看证书",
......@@ -191,88 +277,117 @@ export default Vue.extend({
return {
id: this.$route.params.id,
apps,
showSkelton:true,
nftData:{} as any,
collectionData:{},
inMyCollection:false,
isOwner:false,
user:this.$util.userMsg.getUserMsg() as any
showoverlay: false,
showSkelton: true,
nftData: {} as any,
collectionData: {},
inMyCollection: false,
isOwner: false,
user: this.$util.userMsg.getUserMsg() as any,
// loading:true
};
},
async created() {
console.log(this.$route.query.officia);
if(this.$route.query.officia){
this.nftData = await this.$service.nftService.officialNFTDetail(parseInt(this.id))
if (this.$route.query.officia) {
this.nftData = await this.$service.nftService.officialNFTDetail(
parseInt(this.id)
);
console.log(this.nftData);
}else{
this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
this.nftData.wallet == this.user.wallet? this.isOwner=true:this.isOwner=false
if(!token.getToken()) {
return
} else {
this.nftData = await this.$service.nftService.getNFTdetail(
parseInt(this.id)
);
this.nftData.wallet == this.user.wallet
? (this.isOwner = true)
: (this.isOwner = false);
if (!token.getToken()) {
return;
}
await this.setMyCollection()
await this.setMyCollection();
}
this.showSkelton = false
this.showSkelton = false;
},
components: {
"Layout-Child": () => import("@/layout/Child.vue"),
"app-icon": () => import("@/components/common/Icon.vue"),
"app-tag": () => import("@/components/common/Tag.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-collectionCard": () => import("@/components/CollectionCard.vue"),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
SkeletonNftDetail,
},
methods:{
appOnclick(action:any){
methods: {
appOnclick(action: any) {
console.log(action);
switch (action) {
case 'pushToTransfer':
this.$router.push({name:'NftTransfer',query:{
nftId:this.nftData.id,
from:this.nftData.wallet,
avatar:this.nftData.avatar,
nftName:this.nftData.name
}})
case "pushToTransfer":
this.$router.push({
name: "NftTransfer",
query: {
nftId: this.nftData.id,
from: this.nftData.wallet,
avatar: this.nftData.avatar,
nftName: this.nftData.name,
},
});
break;
default:
break;
}
},
async setMyCollection():Promise<void>{
if(!token.getToken()) {
this.$router.push('/auth/login')
confirmBtn() {
console.log(this.nftData.status);
if (this.nftData.status === 1) {
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("");
}
})
}
}else if(this.nftData.status == 0){
this.$router.push('/Nft/MyList')
}
let list = await this.$service.nftService.getCollection()
if(list.find(i=> i.id == this.id)){
this.inMyCollection = true
}else{
this.inMyCollection = false
},
async setMyCollection(): Promise<void> {
if (!token.getToken()) {
this.$router.push("/auth/login");
}
let list = await this.$service.nftService.getCollection();
if (list.find((i) => i.id == this.id)) {
this.inMyCollection = true;
} else {
this.inMyCollection = false;
}
},
async editCollection(){
if(!token.getToken()) {
this.$router.push('/auth/login')
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已从我的收藏中移除')
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>
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