Skip to content

N
NFT
Commit 25a9e3ab authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

321

parent bfa30b89
Hide whitespace changes
Inline Side-by-side
Showing with 417 additions and 97 deletions
public/index.html
View file @ 25a9e3ab
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="//at.alicdn.com/t/font_2629369_uplaanctbdo.js"></script>
<script src="//at.alicdn.com/t/font_2629369_3ll93o9x4uh.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
src/assets/img/avatar.png
View replaced file @ bfa30b89 View file @ 25a9e3ab
src/assets/img/avatar.png

21.2 KB | W: | H:

src/assets/img/avatar.png

105 KB | W: | H:

src/assets/img/avatar.png
src/assets/img/avatar.png
src/assets/img/avatar.png
src/assets/img/avatar.png
  • 2-up
  • Swipe
  • Onion skin
src/components/CollectionCard.vue 0 → 100644
View file @ 25a9e3ab
<template>
<div
class="
collection_card
flex
text-font-white
px-4
py-6
rounded-md
shadow-sm
bg-font-light-black
"
>
<div class="left w-4/12 object-cover rounded-md">
<img src="/img/cover.png" class="rounded-md" />
</div>
<div class="right w-8/12">
<div class="w-full px-4">
<div class=" text-lg">飙车大师</div>
<div class="flex flex-wrap w-full mt-1 text-sm">
<div class="text-font-dark-blue">题材</div>
<div class="flex px-3 gap-x-2">
<span>谍战</span>
<span>穿越</span>
<span>奇幻</span>
</div>
</div>
<p class=" break-words line-clamp-2 mt-8 w-full text-sm text-font-dark-blue">
sdfkjsdlkfjsdlkfsadfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfdsfsdfsddsfasdfsdfsdf
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "CollectionCard",
props: {
colletionData:{}
},
});
</script>
src/components/common/Cell.vue
View file @ 25a9e3ab
<template>
<div class="cell flex justify-between py-3 px-2 " :class="boxType ==='border'?' border-b border-font-gray border-opacity-25':'bg-font-gray bg-opacity-20 rounded-md'" >
<div class="cell flex justify-between py-3 " :class="boxType ==='border'?' border-b px-0 border-font-gray border-opacity-25':'bg-font-gray bg-opacity-20 px-2 rounded-md'" >
<div class="left flex items-center ">
<app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon>
<div class="px-2">
<div class=" text-font-dark-blue px-3">
{{text}}
</div>
</div>
......
src/components/common/Icon.vue
View file @ 25a9e3ab
......@@ -24,7 +24,7 @@ export default Vue.extend({
},
color:{
type:String,
default:'#fff'
default:'#ffffff'
},
name:{
type:String,
......
src/components/common/ScrollBar.vue
View file @ 25a9e3ab
<template>
<div class="w-full flex justify-between py-3 items-center">
<div class="flex-grow flex flex-row ">
<van-tabs v-model="active" class='w-11/12' swipeable @change="tabChange">
<van-tab v-for='(i,index) in listData' :key="index" :title='i.text'>
<van-tabs v-model="active" class='w-11/12' swipeable @change="tabChange">
<van-tab v-for='(i,index) in list' :key="index" :title='i.categoryName' :id='i.id'>
</van-tab>
</van-tabs>
</div>
......@@ -14,50 +14,38 @@
</template>
<script lang="ts">
import Vue from 'vue';
import Vue,{ PropType } from 'vue';
import { Tab, Tabs } from 'vant';
interface Category{
categoryName:string
createDate:string
englishName:string
id:number
updatedDate:string
}
Vue.use(Tab)
Vue.use(Tabs)
const listData = [
{
text:'剧本'
},
{
text:'花絮视频'
},
{
text:'电影'
},
{
text:'影视原声'
},
{
text:'更多'
},
{
text:'更多'
},
{
text:'更多'
},
]
export default Vue.extend({
props: {
list:{
type:Array as PropType<Category[]>,
required: true
}
},
data(){
return{
listData,
active: 2,
active: 0,
listData:this.list
}
},
props: {
},
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
methods:{
tabChange(item:any){
this.$emit('tabChange',listData[item])
this.$emit('tabChange',this.list[item])
}
}
......
src/components/common/Tag.vue
View file @ 25a9e3ab
......@@ -27,6 +27,10 @@ export default Vue.extend({
active: {
type:Boolean,
default:false
},
clickable:{
type:Boolean,
default: true
}
},
data(){
......@@ -36,14 +40,16 @@ export default Vue.extend({
},
methods:{
tagOnclick(){
console.log(this.disabled);
if(this.disabled===false){
this.tagActive = !this.tagActive;
this.$emit('onclick', {
id:this.id,
text:this.text,
picked: !this.tagActive
})
if(this.clickable){
if(this.disabled===false){
this.tagActive = !this.tagActive;
this.$emit('onclick', {
id:this.id,
text:this.text,
picked: !this.tagActive
})
}
}
}
......
src/layout/NavFooter.vue
View file @ 25a9e3ab
<template>
<div class='flex items-center justify-around pb-3 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
<div class='flex flex-col items-center' @click="setNav('Home')">
<app-icon name='icon-BOSS-yingyeting-chushi' size='24px' color='#fff'></app-icon>
<div class='mt-2'>大厅</div>
<app-icon name='icon-BOSS-yingyeting-chushi' size='24px' :color='actived==="Home"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div>
</div>
<div class='flex flex-col items-center relative' @click="goNFT">
<div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'>
<app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
</div>
<div class='mt-8'>发行NFT</div>
<div class='mt-8 text-font-red'>发行NFT</div>
</div>
<div class='flex flex-col items-center' @click="setNav('Mine')">
<app-icon name='icon-wodexuanzhong' size='24px' color='#fff'></app-icon>
<div class='mt-2'>我的</div>
<app-icon name='icon-wodexuanzhong' size='24px' :color='actived==="Mine"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div>
</div>
</div>
</template>
......@@ -20,20 +20,11 @@
<script lang="ts">
import Vue from 'vue';
const NavRouter = [
{
name:'Home',
path:'/Home',
text:'大厅',
icon:'icon-lianxiwomen'
}
]
export default Vue.extend({
name: 'layout_one',
data(){
return{
NavRouter,
actived:'Home'
actived:this.$route.name
}
},
components:{
......
src/layout/NavHeader.vue
View file @ 25a9e3ab
......@@ -7,7 +7,7 @@
</div>
<div class='center'>{{title}}</div>
<div class='right'>333</div>
<div class='right'></div>
</div>
</template>
......
src/router/index.ts
View file @ 25a9e3ab
......@@ -10,6 +10,7 @@ const routes: Array<RouteConfig> = [
path: '/',
name: 'App',
component: App,
redirect:'/Home',
children: [
{
path: '/Home',
......@@ -48,6 +49,30 @@ const routes: Array<RouteConfig> = [
]
},
{
path:'/Nft/MyList',
name:'myListNft',
component: () => import('@/view/NFT/Mynft/index.vue'),
meta:{
title: '我的NFT'
}
},
{
path:'/Nft/:id',
name:'Nftdetail',
component: () => import('@/view/NFT/Detail/index.vue'),
meta:{
title: ''
}
},
{
path:'/Collection',
name: 'Collection',
meta:{
title: '我的收藏'
},
component: () => import('@/view/NFT//Collection/index.vue')
},
{
path:'/User',
name:'User',
meta: {
......
src/service/Service.ts
View file @ 25a9e3ab
......@@ -18,9 +18,9 @@ export class Service {
const get = this.service.get
const post = this.service.post
const resolveData = (ret: any) => {
if (ret.code === 200)
if (ret.code === 200){
return ret.data;
else {
}else {
Toast.fail(ret.message)
throw new Error(ret.message)
}
......
src/service/nftService.ts
View file @ 25a9e3ab
......@@ -9,7 +9,8 @@ export class NFTService extends Service {
getList:{path:'/nft/list',dataType:'application/x-www-form-urlencoded'},
genId:{ path:'/nft/generateNftId', dataType:'application/x-www-form-urlencoded'},
detail:{ path:'/nft/get/{id}', dataType:'application/x-www-form-urlencoded'},
themes:{ path:'/label/list',dataType:'application/x-www-form-urlencoded'}
themes:{ path:'/label/list',dataType:'application/x-www-form-urlencoded'},
getCategory:{path:'/category/list',dataType:'application/x-www-form-urlencoded'}
}
auth = 'Bearer ' + token.getToken()
constructor(){
......@@ -29,6 +30,10 @@ export class NFTService extends Service {
})
}
async getCategory():Promise<any[]>{
return await this.service.get(this.router.getCategory.path)
}
/**
*
......
src/style.less
View file @ 25a9e3ab
......@@ -62,4 +62,8 @@ body{
.page-scroll{
height: calc(100vh - 65px);
overflow-y: scroll;
}
.list-scroll{
height: calc(100vh - 400px);
overflow-y: scroll;
}
\ No newline at end of file
src/view/Auth/Login/Login.vue
View file @ 25a9e3ab
......@@ -360,12 +360,3 @@ export default Vue.extend({
},
});
</script>
<style scoped lang="less">
.register {
.title {
}
.fontsize0 {
// font-size: 0;
}
}
</style>
src/view/Home/index.vue
View file @ 25a9e3ab
......@@ -12,8 +12,8 @@
<img src="@/assets/img/banner.png" class="w-full z-0">
</div>
<div class="container-view w-11/12 mx-auto">
<app-scrollbar></app-scrollbar>
<div>
<app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
<div class="list-scroll">
<app-cardList :data='mokeData'></app-cardList>
</div>
</div>
......@@ -40,12 +40,33 @@ const mokeData= [
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
{
cover:'/img/cover.png',
text:'ertfr'
},
]
Vue.use(Badge)
export default Vue.extend({
data() {
return{
mokeData
mokeData,
categoryTypes:[] as any[]
}
},
components:{
......@@ -55,6 +76,11 @@ export default Vue.extend({
'app-cardList':()=>import('@/components/CardList.vue')
},
name: 'Home',
async created(){
this.categoryTypes = await this.$service.nftService.getCategory()
console.log(this.categoryTypes);
},
methods:{
search(){
console.log(11);
......@@ -62,7 +88,9 @@ export default Vue.extend({
},
info(){
console.log(222);
},
getDataByCategory(item:any){
console.log(item);
}
}
});
......
src/view/Mine/index.vue
View file @ 25a9e3ab
......@@ -13,7 +13,7 @@
</div>
</div>
<div class='tags flex py-2'>
<app-tag text='编剧'></app-tag>
<app-tag text='编剧' :id='1' class=" bg-font-red" :clickable='false'></app-tag>
</div>
<div class='intro text-2xs line-clamp-1 text-font-gray'>
{{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}}
......@@ -37,16 +37,16 @@
<div>我的NFT</div>
<div>数量（个）</div>
</div>
<div class='pt-8 pb-4 text-2xl flex items-center content-end justify-end'>
<div class='pt-8 pb-4 text-2xl flex items-center content-end justify-end' @click="navigateTo('/Nft/MyList')">
30
<app-icon name="icon-xiayibu"></app-icon>
</div>
</div>
<div class='cells w-11/12 mx-auto text-font-white mt-3'>
<app-cell text='收藏' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='安全中心' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='联系我们' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='设置' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='收藏' boxType='border' labelIcon='icon-heart' icon='icon-xiayibu' @onClick='cellClick("Collection")'></app-cell>
<app-cell text='安全中心' boxType='border' labelIcon='icon-anquanzhongxin89' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='联系我们' boxType='border' labelIcon='icon-lianxiwomen' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='设置' boxType='border' labelIcon='icon-setting' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<div class='h-16'></div>
</div>
</Layout-Main>
......@@ -99,8 +99,11 @@ export default Vue.extend({
console.log(222);
},
cellClick(){
console.log(111);
navigateTo(url:string){
this.$router.push(url)
},
cellClick(item:string){
this.$router.push(item)
},
goUserSet(){
this.$router.push('/User')
......
src/view/NFT/Collection/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child>
<div class='w-11/12 mx-auto mt-6'>
<app-collectionCard></app-collectionCard>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-collectionCard':()=>import('@/components/CollectionCard.vue')
// 'app-cell':()=>import('@/components/common/Cell.vue'),
// 'app-btn':()=>import('@/components/common/Btn.vue')
},
});
</script>
src/view/NFT/Create/form.vue
View file @ 25a9e3ab
......@@ -13,7 +13,7 @@
<textarea v-model="createNFT.value_des" name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
</div>
<div class="fixed bottom-0 w-full left-0 z-30">
<app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
<app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
<div class="step-two" v-if="currentStep==2">
......@@ -23,7 +23,7 @@
<app-cell text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
<app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
<div class="step-three" v-if="currentStep==3">
......@@ -33,7 +33,7 @@
<app-cell text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' :disabled="validation" @btnClicked='currentStepChange(1)'></app-btn>
<app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
</div>
......@@ -79,17 +79,17 @@ export default Vue.extend({
'app-btn':()=>import('@/components/common/Btn.vue')
},
computed:{
validation:function(){
let disabled = true
const {value_name,value_publisher } = this.createNFT
if(this.currentStep === 1){
if(value_name&&value_publisher){
disabled = false
}
disabled = true
}
return disabled
}
// validation:function(){
// let disabled = true
// const {value_name,value_publisher } = this.createNFT
// if(this.currentStep === 1){
// if(value_name&&value_publisher){
// disabled = false
// }
// disabled = true
// }
// return disabled
// }
},
methods:{
addStep(){
......
src/view/NFT/Detail/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child class='page-scroll'>
<div class="w-11/12 mx-auto mt-6 text-font-white">
<app-collectionCard></app-collectionCard>
<div class="app-icons mx-auto grid grid-cols-4 my-6">
<div
v-for="(i, index) in apps"
:key="index"
class="flex justify-center"
>
<div class="flex flex-col items-center gap-y-2">
<div class="flex content-center">
<app-icon
:name="i.icon"
size="24px"
class="p-5 bg-table-light-blue shadow-md rounded-full"
></app-icon>
</div>
<div class="text-xs text-font-white">
{{ i.text }}
</div>
</div>
</div>
</div>
<div
class="
text-xs
w-full
flex
border-b border-font-dark-blue border-opacity-50
items-center
"
>
<div class="py-3 pr-4">
<img src="@/assets/img/avatar.png" class="h-12 w-12 rounded-full" />
</div>
<div>
<div class="flex items-center">
<div class="pr-3 text-base">张瀚峰</div>
<app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
</div>
<div class="mt-1 text-font-dark-blue">sdfsdfsdf</div>
</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">NFT信息</div>
<app-cell
text="编号"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="剧本HASH"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="发行时间"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
</div>
<div class="py-3">
<div class="text-font-dark-blue">版权信息</div>
<app-cell
text="版权登记号"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="作者"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="著作权人"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="版权登记日期"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
<app-cell
text="版权HASH"
value="JOYING-20210615-HONGJUREN"
boxType="border"
></app-cell>
</div>
<div class="py-3">
<div class="text-font-dark-blue">版权信息</div>
<div class=" py-2 tracking-wide leading-6 text-sm">在人工智能和机械人科技日新月异的进步下，我们已经不能阻止这些科技已经超越了一般只 是用于方便人们日常生活的范畴。特斯拉 CEO 埃隆·马斯克在公开场合说过“无人机等技 术的发展的迅速，在降低了生</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">关于NFT</div>
<div class=' py-2 tracking-wide leading-6 text-sm'>NFT全称为Non-Fungible Token，也称为非同质化代币。可以通俗化理解为在区块链上的唯一凭证。为剧本、电影、花絮等电影产业铸造NFT。NFT不可分割、不可替代、独一无二，可以将资产数字化。采用NFT形式，推动剧本知识产权保护、剧本价值挖掘、促进剧本流通交易、保护编剧及电影制片方利益。我平台的NFT基于比特元（BTY）公链，根据ERC20或ERC1155协议发行，链上创建合约、链上确权、链上流转、链上查询。能有效保护剧本知识产权，防止篡改、伪造，并可在链上永久保留剧本原创作者信息，保留原创作者署名权，所有权等权益。保护编剧利益，促进编剧的创作欲望，促进电影行业生态健康发展。</div>
</div>
<div class="py-3">
<div class="text-font-dark-blue">交易记录</div>
<div class="text-center py-5">
暂无记录
</div>
</div>
<div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 shadow-nav">
<div class='flex-grow-0'>
<app-icon name='icon-heart' size='25px'></app-icon>
</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>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from "vue";
const apps = [
{
text: "版权认证",
icon: "icon-anquanzhongxin89",
},
{
text: "大厅下架",
icon: "icon-chakan",
},
{
text: "交易设置",
icon: "icon-a-tupian",
},
{
text: "查看证书",
icon: "icon-BOSS-yingyeting-chushi",
},
];
export default Vue.extend({
data() {
return {
id: this.$route.params.id,
apps,
};
},
created() {},
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-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
},
});
</script>
src/view/NFT/Mynft/index.vue 0 → 100644
View file @ 25a9e3ab
<template>
<Layout-Child>
<div class="nft-cardBox w-11/12 mx-auto mt-6">
<div class="nft-card w-full bg-font-red text-font-white px-5 py-3 rounded-md">
<div class="w-full flex items-start justify-between mb-12">
<div>我的NFT(个）</div>
<div></div>
</div>
<div class='flex items-end justify-between flex-wrap'>
<div class=' text-3xl'>30</div>
<div>sidfhuoisdufsdjufosdfjosdi</div>
</div>
</div>
</div>
<div class="container-view w-11/12 mx-auto">
<app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
<div>
<app-collectionCard></app-collectionCard>
</div>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data(){
return{
categoryTypes:[] as any[]
}
},
async created(){
this.categoryTypes = await this.$service.nftService.getCategory()
},
methods: {
getDataByCategory(item:any){
console.log(item);
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
'app-collectionCard':()=>import('@/components/CollectionCard.vue')
},
});
</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