Skip to content

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

321

parent a4c2e69f
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 316 deletions
public/img/mokeImg/avatar.png
View replaced file @ a4c2e69f View file @ feede0cb
public/img/mokeImg/avatar.png

105 KB | W: | H:

public/img/mokeImg/avatar.png

3.69 KB | W: | H:

public/img/mokeImg/avatar.png
public/img/mokeImg/avatar.png
public/img/mokeImg/avatar.png
public/img/mokeImg/avatar.png
  • 2-up
  • Swipe
  • Onion skin
src/App.vue
View file @ feede0cb
......@@ -8,11 +8,11 @@
</div>
<div class="bot w-11/12 mx-auto">
<div class="grid grid-cols-4 w-full gap-4">
<div class="flex flex-col items-center content-center" @click="goNTF('create')">
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'1'})">
<app-icon name="icon-juben" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
<div class=" text-xs py-3">剧本</div>
</div>
<div class="flex flex-col items-center content-center">
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'2'})">
<app-icon name="icon-xiaoshipin" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
<div class=" text-xs py-3">视频</div>
</div>
......@@ -72,8 +72,13 @@ export default Vue.extend({
closeNFT(){
this.$store.commit('app/TOGGLE_OVERLAY')
},
goNTF(routes:string){
this.$router.push(`/Nft/${routes}`)
goNTF(obj:{url:string,id:string} ){
this.$router.push({
name:obj.url,
query:{
id:obj.id
}
})
this.closeNFT()
}
},
......
src/router/index.ts
View file @ feede0cb
......@@ -148,8 +148,6 @@ const router = new VueRouter({
})
router.beforeEach((to, from, next) => {
console.log('to:',to , 'from:',from );
if (to.name === 'Login' && token.getToken() != null) {
// next({ name: 'Home' })
} else {
......
src/store/create.ts
View file @ feede0cb
......@@ -3,6 +3,8 @@ const stateData = {
fileHash: '',
fileName: '',
file: undefined as undefined | File,
coverName:'',
coverFile: undefined as undefined | File
}
export type AppType = typeof stateData
......
src/view/Mine/index.vue
View file @ feede0cb
......@@ -13,10 +13,10 @@
</div>
</div>
<div class='tags flex py-2'>
<app-tag text='编剧' :id='1' class=" bg-font-red" :clickable='false'></app-tag>
<app-tag text='编剧' :id='1' class="bg-app-red " :clickable='false'></app-tag>
</div>
<div class='intro text-2xs line-clamp-1 text-font-gray'>
{{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}}
{{getUserInfo.signature?getUserInfo.signature:'这个人很懒，什么也没留下'}}
</div>
</div>
</div>
......@@ -32,7 +32,7 @@
</div>
</div>
</div>
<div class='amount-card w-11/12 mx-auto rounded-t-lg bg-app-red py-3 px-2 text-font-white mt-8'>
<div class='amount-card w-11/12 mx-auto rounded-t-lg bg-cardBG bg-cover bg-no-repeat h-36 py-3 px-2 text-font-white mt-8'>
<div class='flex justify-between'>
<div>我的NFT</div>
<div>数量（个）</div>
......
src/view/NFT/Create/components/certificate/index.vue
View file @ feede0cb
<template>
<div class="theContainer bg-white text-left">
<div class="top-blur"></div>
<div class="top">
<div class="title">影视区块链版权电子数据确权书</div>
<div class="img-theContainer" style="position: relative">
<img class="img" src="/img/cover.png" alt="图片" />
<img
src="./mark.png"
style="position: absolute; right: -40px; bottom: -10px; width: 70px"
alt=""
/>
</div>
<div class="box">
<div>
<div class="py-3 text-xs">恭喜您获得NFT证书</div>
<div class="w-8/12 object-cover mx-auto">
<img src="./stars.png" class="mx-auto" />
</div>
<div class="box mt-6">
<div class="top h-60 relative bg-red-200">
<div class="blur-img h-full w-full absolute top-0 left-0"></div>
<div class="pt-6">
<div>影视区块链版权电子数据确权书</div>
</div>
<div>
<div>
<div class="box-font-title">NFT哈希</div>
<div class="box-font-content">{{ nftHash }}</div>
</div>
<div>
<div class="box-font-title">剧本哈希</div>
<div class="box-font-content">{{ hash }}</div>
</div>
<img src="/img/cover.png" class="w-4/12 mx-auto mt-4" />
</div>
<div style="flex-grow: 1"></div>
<div class="qr-theContainer">
<div class="qr-box">
<img
src="${qrCode}"
style="width: 100%; height: 100%"
alt="二维码"
/>
</div>
<div class="qr-font">存证二维码</div>
<div class="float-box w-full absolute -bottom-16 text-2xs">
<div class="w-11/12 p-2 flex-wrap mx-auto bg-certifyBG flex break-all ">
<div class="w-9/12 text-left ">
<div>NFT哈希</div>
<div>{{NFTHASH}}</div>
<div class="pt-1">剧本哈希</div>
<div>{{fileHash}}</div>
</div>
<div></div>
</div>
</div>
</div>
<div class="bot bg-font-white text-font-black px-3 py-10 pt-16">
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">剧本名称</div>
<div>{{ name }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">发行人地址</div>
<div>{{ addr }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">发行人</div>
<div>{{ publisher }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">存证时间</div>
<div>{{ timeStamp }}</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">剧本审核</div>
<div v-if="auditing === 0">剧本未审核</div>
</div>
<div class="ceritfy-item text-xs flex py-1">
<div class="w-4/12 text-left">版权证明</div>
<div v-if="copyRight === 0">版权未审核</div>
</div>
</div>
<div class="shadow_"></div>
</div>
<div class="bottom overflow-hidden px-4">
<table class="table_ overflow-hidden table-auto w-full">
<thead>
<tr>
<th class="w-1/4"></th>
<th class="w-3/4"></th>
</tr>
</thead>
<tbody>
<tr>
<td>剧本名称</td>
<td class="row-value">{{ name }}</td>
</tr>
<tr>
<td>发行人地址</td>
<td class="row-value">{{ wallet }}</td>
</tr>
<tr>
<td>发行人</td>
<td class="row-value">{{ publisher }}</td>
</tr>
<tr>
<td>存证时间</td>
<td class="row-value">{{ publishTimer }}</td>
</tr>
<tr>
<td>剧本审核</td>
<td class="row-value">
<div class="approve-outer">
<div class="approve-inner">{{ approveStatus1 }}</div>
</div>
</td>
</tr>
<tr>
<td>版权证明</td>
<td class="row-value">
<div class="approve-outer">
<div class="approve-inner">{{ approveStatus2 }}</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: {
nftHash: {
type: String,
default: "0x111",
},
hash: {
type: String,
default: "0x111",
},
name: {
type: String,
default: "0x111",
default: "飙车大师",
},
wallet: {
addr: {
type: String,
default: "0x111",
default: "ij1hoi12oi312i31ik1op1o1lwm3nhjk",
},
publisher: {
type: String,
default: "0x111",
default: "张瀚峰",
},
publishTimer: {
timeStamp: {
type: String,
default: "0x111",
default: "2021/06/19 14:42:24",
},
approveStatus1: {
type: String,
default: "0x111",
auditing: {
type: Number,
default: 0,
},
approveStatus2: {
type: String,
default: "0x111",
copyRight: {
type: Number,
default: 0,
},
NFTHASH:{
type:String,
default: "1a4f5032c12d8638324b5c97699e5c3ed5bee1325865kjdshshhdh"
},
fileHash:{
type:String,
default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
}
},
});
</script>
<style>
.theContainer {
position: relative;
height: calc(240px + 269px);
padding: 0 10px;
background: rgb(168, 167, 167);
overflow: hidden;
}
.theContainer .top-blur {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 246px;
background-image: url(/img/cover.png);
background-size: cover;
filter: blur(20px);
-webkit-filter: blur(20px);
}
.theContainer .top {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 246px;
z-index: 2;
}
.theContainer .top .title {
margin-top: 34px;
margin-bottom: 17px;
text-align: center;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #edf1f7;
line-height: 22px;
}
.theContainer .top .img-theContainer {
z-index: 2;
position: relative;
margin: 0 auto;
margin-bottom: 16px;
width: 86px;
height: 119px;
background-color: #a7b5b9;
border-radius: 2px;
opacity: 0.6;
}
.img-theContainer .img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 79px;
height: 111px;
}
.theContainer .box {
position: relative;
z-index: 20;
background: #ffffff;
border-radius: 5px;
margin: 0 10px;
display: flex;
white-space: normal;
padding: 10px 15px;
}
.theContainer .shadow_ {
position: relative;
z-index: 0;
width: 100%;
background-image: url(./shadow.png);
background-position: center;
height: 43px;
background-repeat: no-repeat;
margin-top: -21px;
}
.box-font-title {
font-size: 8px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1d2649;
margin-bottom: 3px;
}
.box-font-content {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1d2649;
margin-bottom: 4px;
word-break: break-all;
}
.box-font-content:last-of-type {
margin-bottom: 0;
}
.qr-theContainer {
position: relative;
margin-left: 20px;
text-align: center;
align-self: center;
}
.qr-font {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1d2649;
word-break: keep-all;
}
.qr-box {
width: 40px;
height: 40px;
background-color: gray;
margin: 0 auto;
margin-bottom: 4px;
}
.theContainer .bottom {
position: absolute;
top: 246px;
bottom: 0;
left: 0;
right: 0;
background-image: url(./bg.png);
z-index: 1;
}
.bottom .table_ {
margin-top: 77px;
padding-left: 38px;
padding-right: 38px;
table-layout: fixed;
font-size: 10px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1d2649;
line-height: 20px;
}
.table_ .row-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.approve-outer {
border: 1px solid #ef797e;
border-radius: 3px;
height: 25px;
width: fit-content;
}
.approve-inner {
border: 1px solid #ee0000;
border-radius: 3px;
margin: 1px;
color: #ef797e;
text-align: center;
padding: 0 3px;
}
.table_ tr,
td {
width: auto;
}
</style>
\ No newline at end of file
src/view/NFT/Create/form.vue
View file @ feede0cb
......@@ -14,38 +14,38 @@
<app-cell
v-model="createNFT.value_name"
type="input"
text="剧本名称"
:text='fromText.nameText'
:validate="{ maxLen: 20 }"
placeholder="请输入剧本名称"
:placeholder="fromText.namePlaceholder"
class="text-font-white my-3"
@cellOnChange="(v) => setCreateNFT({ value_name: v })"
></app-cell>
<app-cell
v-model="createNFT.value_publisher"
type="input"
text="剧本作者"
:text="fromText.authorText"
:validate="{ maxLen: 20 }"
placeholder="请输入剧本作者"
:placeholder="fromText.authorPlaceholder"
class="text-font-white my-3"
@cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
></app-cell>
<app-cell
:pickValue="mySteps"
type="pick"
text="剧本题材"
placeholder="请选择剧本题材"
:text="fromText.themeText"
:placeholder="fromText.themePlaceholder"
class="text-font-white my-3"
@click.native="$router.push('/Nft/create/pick')"
></app-cell>
<div>
<div class="my-4 text-font-gray text-sm ml-4">剧本简介</div>
<div class="my-4 text-font-gray text-sm ml-4">{{fromText.desText}}</div>
<textarea
v-model="createNFT.value_des"
name="des"
id="nft-des"
cols="30"
maxlength="1000"
placeholder="请输入剧本简介"
:placeholder="fromText.desPlaceholder"
rows="10"
class="
w-full
......@@ -69,15 +69,23 @@
</div>
<div class="step-two" v-if="currentStep == 2">
<app-cell
text="剧本上传"
:text="fromText.fileUploadText"
class="text-font-white my-3"
type="upload"
placeholder="请上传剧本"
:placeholder="fromText.filePlaceholder"
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })"
></app-cell>
<app-cell
text="剧本HASH"
text="封面上传(非必填)"
class="text-font-white my-3"
type="upload"
placeholder="请上传相关封面"
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })"
></app-cell>
<app-cell
:text="fromText.fileHashText"
class="text-font-white my-3"
type="showText"
:name="fileHash"
......@@ -129,7 +137,7 @@
class="text-font-white my-3"
></app-cell>
<app-cell
text="剧本HASH"
:text="fromText.fileHashText"
type="showText"
:name="publish.fileHash"
class="text-font-white my-3"
......@@ -185,16 +193,26 @@
<div class="mt-6 text-font-white">发行中...</div>
</div>
<div v-else class="text-center">
<div v-if="success" class=" absolute top-0 left-0 right-0">
<div>恭喜您获得NFT证书</div>
<img src="@/assets/img/starBg.png" class="w-full" alt="" />
<certificate class="-mt-36" />
<div>保存下载</div>
<img
src="@/assets/icons/close_publish.png"
class="w-5 mx-auto mt-10"
alt=""
/>
<div v-if="success" >
<van-overlay :show="showOverlay" class=" z-50" >
<div class="w-10/12 mx-auto">
<certificate />
<div class="py-3 text-xs">请截屏保存</div>
<img
@click='showOverlay = !showOverlay;'
src="@/assets/icons/close_publish.png"
class="w-5 mx-auto mt-10"
/>
</div>
</van-overlay>
<div class="w-10/12 mx-auto mt-32">
<img src="@/assets/img/success.png" class="w-36 mx-auto ">
<div class="mt-20">
NFT发行成功
</div>
<app-btn text="确认" class=' bg-font-blue' @click.native="$router.push('/Home')"></app-btn>
</div>
</div>
<div
v-else
......@@ -216,10 +234,12 @@
<script lang="ts">
import { iSaveData } from "@/service/nftService/types";
import { BreedingRhombusSpinner } from "epic-spinners";
import { Overlay } from 'vant'
import { Dialog } from "vant";
import Vue from "vue";
import { mapMutations, mapState } from "vuex";
Vue.use(Overlay)
export default Vue.extend({
data() {
return {
......@@ -233,6 +253,19 @@ export default Vue.extend({
grant: 0,
categoryType: NaN,
},
fromText:{
nameText:'',
namePlaceholder:'',
authorText:'',
authorPlaceholder:'',
themeText:'',
themePlaceholder:'',
desText:'',
desPlaceholder:'',
fileUploadText:'',
filePlaceholder:'',
fileHashText:''
},
publish: {
nftId: "",
id: NaN,
......@@ -260,7 +293,9 @@ export default Vue.extend({
text: "NFT发行",
},
],
currentStep: 4,
currentStep: 1,
categoryId:this.$route.query.id as string,
showOverlay:true,
loading2: false,
loading3: false,
loading4: false,
......@@ -274,9 +309,12 @@ export default Vue.extend({
"app-cell": () => import("@/components/common/Cell.vue"),
"app-btn": () => import("@/components/common/Btn.vue"),
certificate: () => import("./components/certificate/index.vue"),
BreedingRhombusSpinner,
BreedingRhombusSpinner
},
async mounted() {
const data = await this.getPreText()
this.fromText = this.concatFormText(data)
const list = await this.$service.nftService.getCategory();
this.categoryTypes = list;
this.createNFT.categoryType = (list.length !== 0 && list[0].id) || NaN;
......@@ -333,6 +371,33 @@ export default Vue.extend({
...mapMutations("create", {
setState: "SET_STATE",
}),
getPreText():string{
console.log(this.categoryId,typeof this.categoryId);
switch (this.categoryId) {
case '1':
return '剧本'
case '2':
return '视频'
default:
return ''
}
},
concatFormText(text: string){
let obj ={
nameText:`${text}名称`,
namePlaceholder:`请填写${text}名称`,
authorText:`${text}作者`,
authorPlaceholder:`请填写${text}作者`,
themeText:`${text}题材`,
themePlaceholder:`请选择${text}题材`,
desText:`${text}简介`,
desPlaceholder:`请输入${text}简介`,
fileUploadText:`请填写${text}名称`,
filePlaceholder:`${text}上传`,
fileHashText:`${text}HASH`
}
return obj
},
setCreateNFT(obj: any) {
this.createNFT = {
...this.createNFT,
......@@ -343,14 +408,14 @@ export default Vue.extend({
Dialog.alert({
title: "提示",
message: `1、选择加密存档后，您的剧本将由平台审核保管，您可以授权是否给其他人查看；
2、选择不存档后，您的剧本将由自己保管，您可以通过私下发送给其他用户查看；`,
2、选择不存档后，您的剧本将由自己保管，您可以通过私下发送给其他用户查看；`,
});
},
alertAuthorizeRead() {
Dialog.alert({
title: "提示",
message: `1、选择作者授权阅读，剧本需要您本人授权后方可查看；
2、选择无需授权，剧本可公开阅读。`,
2、选择无需授权，剧本可公开阅读。`,
});
},
addStep() {
......@@ -376,6 +441,7 @@ export default Vue.extend({
id: this.publish.id,
wallet: this.publish.wallet,
nftId: this.publish.nftId,
});
result
.then((ret: any) => {
......@@ -404,7 +470,7 @@ export default Vue.extend({
try {
let data = {
author: this.createNFT.value_publisher,
categoryId: 1,
categoryId: parseInt(this.categoryId) ,
name: this.createNFT.value_name,
synopsis: this.createNFT.value_des,
theme: this.pickedList.map((i: any) => i.text as string).toString(),
......
src/view/User/index.vue
View file @ feede0cb
......@@ -5,7 +5,7 @@
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<app-cell text='头像' boxType='border' type='image' :value='userInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
<app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
<app-cell text='手机号' boxType='border' :value='userInfo.telephone?userInfo.telephone:""' icon='icon-xiayibu' @click.native="goEdit({type:'telephone',title:'设置昵称'})"></app-cell>
<app-cell text='手机号' boxType='border' type='show' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
<app-cell text='邮箱绑定' boxType='border' :value='userInfo.email?userInfo.email:""' icon='icon-xiayibu' @click.native="goEdit({type:'email',title:'邮箱绑定'})"></app-cell>
<app-cell text='个性签名' boxType='border' icon='icon-xiayibu' @click.native="goEdit({type:'signature',title:'个性签名'})"></app-cell>
<app-cell text='安全中心' boxType='border' icon='icon-xiayibu' ></app-cell>
......
tailwind.config.js
View file @ feede0cb
......@@ -8,7 +8,13 @@ module.exports = {
presets: [],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
extend: {
backgroundImage: theme => ({
'cardBG': "url('/img/bg-card.png')",
'certifyBG':"url('/img/certify-bg.png')"
})
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
......
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