Skip to content

N
NFT
Commit 55ac50fa authored by salitedfish's avatar salitedfish
Browse files
Options

上传ui更改

parent f2f72e7a
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 22 deletions
package.json
View file @ 55ac50fa
......@@ -19,6 +19,7 @@
"html-to-image": "^1.6.2",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"moment": "^2.29.1",
"register-service-worker": "^1.7.1",
"validator": "^13.6.0",
"vant": "^2.12.22",
......
src/view/NFT/Create/components/certificate/index.vue
View file @ 55ac50fa
......@@ -17,9 +17,9 @@
<div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded text-font-black">
<div class="w-full text-left ">
<div>NFT哈希</div>
<div>{{NFTHASH}}</div>
<div>{{certificateData?certificateData.nftId:'无'}}</div>
<div class="pt-1">剧本哈希</div>
<div>{{fileHash}}</div>
<div>{{certificateData?certificateData.fileHash:'无'}}</div>
</div>
</div>
</div>
......@@ -27,27 +27,27 @@
<div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs">
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本名称</div>
<div>{{ name }}</div>
<div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_name:'无'}}</div>
</div>
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人地址</div>
<div>{{ addr }}</div>
<div class="flex-1 text-left break-all">{{ certificateData?certificateData.wallet:'无' }}</div>
</div>
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人</div>
<div>{{ publisher }}</div>
<div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_publisher:'无' }}</div>
</div>
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">存证时间</div>
<div>{{ timeStamp }}</div>
<div class="flex-1 text-left break-all">{{ createTime }}</div>
</div>
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本审核</div>
<div v-if="auditing === 0">剧本未审核</div>
<div class="flex-1 text-left break-all" v-if="auditing === 0">剧本未审核</div>
</div>
<div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">版权证明</div>
<div v-if="copyRight === 0">版权未审核</div>
<div class="flex-1 text-left break-all" v-if="copyRight === 0">版权未审核</div>
</div>
</div>
</div>
......@@ -59,8 +59,14 @@
<script lang="ts">
import Vue from "vue";
import download from 'downloadjs'
import moment from 'moment'
import { toPng } from 'html-to-image';
export default Vue.extend({
data(){
return {
createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
}
},
props: {
name: {
type: String,
......@@ -93,7 +99,8 @@ export default Vue.extend({
fileHash:{
type:String,
default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
}
},
certificateData:Object,
},
methods:{
async downloadImg(){
......@@ -108,6 +115,6 @@ export default Vue.extend({
console.error('oops, something went wrong!', error);
});
}
}
},
});
</script>
src/view/NFT/Create/form.vue
View file @ 55ac50fa
......@@ -9,6 +9,7 @@
@stepOnFinished="stepOnFinished"
></app-steps>
</div>
<div class="w-11/12 mx-auto">
<div class="step-one" v-if="currentStep == 1">
<app-cell
......@@ -37,7 +38,6 @@
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">{{fromText.desText}}</div>
<textarea
......@@ -59,7 +59,6 @@
@input="textareaChange"
></textarea>
</div>
<div class="fixed bottom-0 w-full left-0 z-30">
<app-btn
text="下一步"
......@@ -70,6 +69,7 @@
></app-btn>
</div>
</div>
<div class="step-two" v-if="currentStep == 2">
<app-cell
:text="fromText.fileUploadText"
......@@ -77,7 +77,7 @@
type="upload"
:placeholder="fromText.filePlaceholder"
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })"
@cellOnChange="$router.push({ name: 'NftUpload',params:{type:getPreText()}})"
></app-cell>
<app-cell
text="封面上传(非必填)"
......@@ -85,7 +85,7 @@
type="upload"
placeholder="请上传相关封面"
:name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload'})"
@cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
></app-cell>
<app-cell
:text="fromText.fileHashText"
......@@ -132,12 +132,13 @@
></app-btn>
</div>
</div>
<div class="step-three" v-if="currentStep == 3">
<app-cell
text="NFT编号"
type="showText"
:name="publish.nftId"
class="text-font-white my-3"
class="text-font-white my-3 break-all"
></app-cell>
<app-cell
:text="fromText.fileHashText"
......@@ -183,6 +184,7 @@
></app-btn>
</div>
</div>
<div v-if="currentStep == 4" class="text-font-white">
<div
v-if="loading4"
......@@ -195,12 +197,12 @@
/>
<div class="mt-6 text-font-white">发行中...</div>
</div>
<div v-else class="text-center">
<div v-if="success" >
<van-overlay :show="showOverlay" class=" full-height flex items-center z-50" >
<div class="w-10/12 mx-auto">
<certificate />
<certificate :certificateData="certificateData"/>
<img
@click='showOverlay = !showOverlay;'
src="@/assets/icons/close_publish.png"
......@@ -217,6 +219,7 @@
<app-btn text="确认" class=' bg-font-blue' @click.native="$router.push('/Home')"></app-btn>
</div>
</div>
<div
v-else
class="flex flex-col items-center w-full pt-16 justify-center"
......@@ -304,6 +307,7 @@ export default Vue.extend({
loading4: false,
success: true,
errorMsg: "",
certificateData:{},
};
},
components: {
......@@ -315,7 +319,6 @@ export default Vue.extend({
BreedingRhombusSpinner
},
async mounted() {
const data = await this.getPreText()
this.fromText = this.concatFormText(data)
const list = await this.$service.nftService.getCategory();
......@@ -375,7 +378,6 @@ export default Vue.extend({
setState: "SET_STATE",
}),
getPreText():string{
console.log(this.categoryId,typeof this.categoryId);
switch (this.categoryId) {
case '1':
return '剧本'
......@@ -450,6 +452,7 @@ export default Vue.extend({
.then((ret: any) => {
this.success = ret === true;
this.loading4 = false;
this.certificateData = Object.assign({},this.createNFT,this.publish)
ret !== true && (this.errorMsg = ret);
})
.catch((err) => {
......
src/view/NFT/Create/upload.vue
View file @ 55ac50fa
<template>
<Layout-Child class="page-scroll text-center">
<div class="text-font-white mt-20 text-center mb-20">请上传剧本附件</div>
<div class="text-font-white mt-20 text-center mb-20">{{uploadAccept.acceptTitle}}</div>
<input
type="file"
id="upload"
class="hidden"
@change="handleFileChange"
ref="inputFile"
accept="application/pdf,application/msword,text/plain"
:accept="uploadAccept.acceptType"
/>
<label for="upload" class="inline-block">
......@@ -41,10 +41,11 @@
</label>
<div class="text-center text-font-white">
<div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div>
<div v-if="!fileName" class="mt-2">{{uploadAccept.acceptText}}</div>
<div v-if="fileName" class="mt-2">
{{ fileName }}
</div>
<label for="upload" class="mt-2">
<div
v-if="
......@@ -56,6 +57,7 @@
重新上传
</div>
</label>
</div>
<div class="flex justify-between fixed bottom-0 left-0 right-0">
......@@ -112,6 +114,28 @@ export default Vue.extend({
nextBtnDisabled(): boolean {
return !this.fileName;
},
uploadType(){
return this.$route.params.type
},
uploadAccept(){
switch(this.uploadType){
case '剧本':
return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
case '视频':
return {acceptTitle:'请上传视频附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
case '电影':
return {acceptTitle:'请上传电影附件',acceptType:'video/*',acceptText:'上传视频仅支持MOV、MP4格式文件，大小限制为100M以内'}
case '音频':
return {acceptTitle:'请上传音频附件',acceptType:"audio/*",acceptText:'上传音频仅支持MP3格式文件'}
case '图片':
return {acceptTitle:'请上传图片附件',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
case '封面图片':
return {acceptTitle:'请上传封面图片',acceptType:'image/*',acceptText:'仅支持png、jpg图片'}
default:
return {acceptTitle:'',acceptType:'',acceptText:''}
}
}
},
methods: {
handleFileChange() {
......
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