Skip to content

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

Merge branch 'main' of gitlab.33.cn:HF_web/NFT

parents 062a89eb fb253934
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 50 deletions
src/components/common/Cell.vue
View file @ e3f025e1
......@@ -22,7 +22,7 @@
<!-- 右边 -->
<div class="right flex items-center overflow-hidden">
<div class="right flex items-center overflow-ellipsis">
<div v-if="type == 'click'" @click="eventEmit(type)">
<div class="flex items-center">
<div class="text-sm">{{ value }}</div>
......@@ -40,6 +40,7 @@
@input="cellOnChange"
/>
</div>
<input v-else-if="type === 'input-num'"
:value="inputValue"
type="number"
......@@ -48,6 +49,7 @@
class="bg-transparent"
:placeholder="placeholder"
/>
<div v-else-if="type === 'pick'">
<div class="flex flex-row items-center">
<div @click="eventEmit(type)">
......@@ -74,11 +76,12 @@
</div>
</div>
</div>
<div v-else-if="type === 'upload'" class="overflow-hidden">
<div class="flex flex-row items-center overflow-hidden">
<div
v-if="name"
class="overflow-hidden overflow-ellipsis"
class="overflow-hidden overflow-ellipsis whitespace-nowrap w-48 text-right"
@click="cellOnChange"
>
{{ name }}
......@@ -95,15 +98,17 @@
</div>
</div>
</div>
<div v-else-if="type === 'showText'" class="overflow-hidden">
<div class="flex flex-row items-center overflow-hidden">
<div class="flex flex-row items-center overflow-ellipsis">
<div
v-if="name"
class="overflow-hidden overflow-ellipsis"
class=" overflow-hidden overflow-ellipsis whitespace-nowrap text-sm w-56"
id="copyNodeId"
>
{{ name }}
</div>
<div ref="btn" @click="handleClickCopy(name)" class="ml-1">
<app-icon name="icon-fuzhi" size="18px"></app-icon>
</div>
......@@ -112,7 +117,7 @@
<div v-else-if="type === 'select'" class="overflow-hidden">
<div class="flex flex-row items-center overflow-hidden">
<div
class="overflow-hidden overflow-ellipsis"
class="overflow-hidden overflow-ellipsis "
@click="eventEmit(type)"
>
{{ getNameOfSelect(selected) }}
......@@ -124,8 +129,8 @@
</div>
<div v-else-if="type === 'image'">
<div class="flex flex-row items-center self-end">
<div class='w-20 pr-1'>
<img :src="value" class='rounded-full w-18 object-fill' >
<div class='w-20 h-20 pr-1 flex items-center'>
<van-image width="80" height="80" lazy-load show-loading show-error round fit="cover" :src="value"/>
</div>
<app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
</div>
......@@ -183,6 +188,7 @@ export default Vue.extend({
name: [String, Number],
selected: [String, Number, Object],
list: Array,
validate:Object,
},
data() {
return {
......@@ -215,8 +221,8 @@ export default Vue.extend({
}
},
cellOnChange(e:any) {
if(e.target.value && e.target.value.length >= 15) {
this.inputValue = (this.inputValue as string).slice(0,15)
if(e.target.value && e.target.value.length >= this.validate.maxLen) {
this.inputValue = (this.inputValue as string).slice(0,this.validate.maxLen)
}
this.$emit("cellOnChange", this.inputValue);
},
......
src/service/nftService/nftService.ts
View file @ e3f025e1
......@@ -28,6 +28,10 @@ export class NFTService extends Service {
path: '/oss/policy',
dataType: 'application/x-www-form-urlencoded',
},
fileUpload: {
path: '/oss/upload',
dataType: 'multipart/form-data'
},
getMd5: { path: '/nft/file/md5', dataType: 'multipart/form-data' },
save: { path: '/nft/save', dataType: 'multipart/form-data' },
publish: { path: '/nft/publish', dataType: 'application/json' },
......@@ -209,6 +213,18 @@ export class NFTService extends Service {
})
}
//普通文件上传
async fileUpload(file:File):Promise<string>{
const fd = new FormData()
fd.append('file',file)
return await this.service.post(this.router.fileUpload.path,fd,{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.fileUpload.dataType,
}
})
}
/**
* 完成OSS签名
*/
......
src/service/nftService/types.ts
View file @ e3f025e1
......@@ -11,4 +11,5 @@ export interface iSaveData {
isGrant?: number
fileUrl?: string
fileName?: string
cover?: string
}
src/view/NFT/Create/form.vue
View file @ e3f025e1
......@@ -16,18 +16,18 @@
v-model="createNFT.value_name"
type="input"
:text='fromText.nameText'
:validate="{ maxLen: 20 }"
:validate="{ maxLen: 15 }"
:placeholder="fromText.namePlaceholder"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => setCreateNFT({ value_name: v })"
></app-cell>
<app-cell
v-model="createNFT.value_publisher"
type="input"
:text="fromText.authorText"
:validate="{ maxLen: 20 }"
:validate="{ maxLen: 15 }"
:placeholder="fromText.authorPlaceholder"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
></app-cell>
<app-cell
......@@ -44,7 +44,7 @@
v-model="createNFT.value_des"
name="des"
id="nft-des"
cols="10"
cols="30"
maxlength="500"
:placeholder="fromText.desPlaceholder"
rows="10"
......@@ -56,7 +56,6 @@
rounded-md
text-sm
"
@input="textareaChange"
></textarea>
</div>
<div class="fixed bottom-3 w-full left-0 z-30">
......@@ -73,7 +72,7 @@
<div class="step-two" v-if="currentStep == 2">
<app-cell
:text="fromText.fileUploadText"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
type="upload"
:placeholder="fromText.filePlaceholder"
:name="fileName"
......@@ -81,7 +80,7 @@
></app-cell>
<app-cell
text="封面上传(非必填)"
class="text-font-white my-3 "
class="text-font-white my-3 text-sm"
type="upload"
placeholder="请上传相关封面"
:name="coverName"
......@@ -89,7 +88,7 @@
></app-cell>
<app-cell
:text="fromText.fileHashText"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
type="showText"
:name="fileHash"
@cellOnChange="getValue"
......@@ -101,7 +100,7 @@
labelIcon="icon-wenhao"
@clickIcon="alertPlatformSave"
:list="archivesList"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => (createNFT.archives = v)"
></app-cell>
<app-cell
......@@ -112,7 +111,7 @@
labelIcon="icon-wenhao"
@clickIcon="alertAuthorizeRead"
:list="grantList"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => (createNFT.grant = v)"
></app-cell>
<div class="fixed bottom-3 w-full left-0 flex flex-row z-30">
......@@ -138,20 +137,20 @@
text="NFT编号"
type="showText"
:name="publish.nftId"
class="text-font-white my-3 break-all"
class="text-font-white my-3 text-sm"
></app-cell>
<app-cell
:text="fromText.fileHashText"
type="showText"
:name="publish.fileHash"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="getValue"
></app-cell>
<app-cell
text="发行人地址"
type="showText"
:name="publish.wallet"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="getValue"
></app-cell>
<app-cell
......@@ -160,7 +159,7 @@
:value="1"
:disabled="true"
type="input-num"
class="text-font-white my-3"
class="text-font-white my-3 text-sm"
@cellOnChange="
(v) => {
publish.count = v;
......@@ -344,7 +343,8 @@ export default Vue.extend({
fileName: "fileName",
file: "file",
pickedList: "pickedList",
coverName: 'coverName'
coverName: 'coverName',
coverFile: "coverFile"
}),
validation(): boolean {
let disabled = true;
......@@ -442,15 +442,15 @@ export default Vue.extend({
this.$router.push("/Nft/create/pick");
},
async publishNft() {
try {
// try {
this.loading4 = true;
const result = this.$service.nftService.publish({
fileHash: this.fileHash,
id: this.publish.id,
wallet: this.publish.wallet,
nftId: this.publish.nftId,
});
// const result = this.$service.nftService.publish();
result
.then((ret: any) => {
this.success = ret === true;
......@@ -463,20 +463,22 @@ export default Vue.extend({
this.success = false;
this.errorMsg = err;
});
} catch (err) {
console.log(err);
}
// } catch (err) {
// console.log(err);
// }
},
async uploadFileToOss(file: File): Promise<string> {
const ossRet = (await this.$service.nftService.ossPolicy()) as any;
await this.$service.nftService.uploadFileToOss(file, ossRet);
const { dir, host } = ossRet;
return `${host}/${dir}${file.name}`;
},
async encryptAndPushToChain() {
this.loading2 = true;
let mistake = false;
try {
// let mistake = false;
// try {
let data = {
author: this.createNFT.value_publisher,
categoryId: parseInt(this.categoryId) ,
......@@ -492,6 +494,7 @@ export default Vue.extend({
isArchives: this.createNFT.archives,
};
} else if (this.createNFT.archives === 1) {
//需要加密存档
const fileUrl = await this.uploadFileToOss(this.file);
data = {
...data,
......@@ -502,37 +505,54 @@ export default Vue.extend({
isGrant: this.createNFT.grant,
};
}
if(this.coverFile){
const coverImgUrl = await this.$service.nftService.fileUpload(this.coverFile)
data = {
...data,
cover: coverImgUrl
}
}
const { id, nftId, wallet, fileHash } =
await this.$service.nftService.save(data);
this.publish.fileHash = fileHash;
this.publish.nftId = nftId;
this.publish.id = id;
this.publish.wallet = wallet;
} catch (err) {
mistake = true;
}
// } catch (err) {
// mistake = true;
// }
this.loading2 = false;
if (mistake) return;
// if (mistake) return ;
},
async currentStepChange(val: number) {
if (this.currentStep === 2 && val === 1) {
await this.encryptAndPushToChain();
} else if (this.currentStep === 3 && val === 1) {
await this.publishNft();
try{
if (this.currentStep === 2 && val === 1) {
await this.encryptAndPushToChain();
} else if (this.currentStep === 3 && val === 1) {
await this.publishNft();
}
}catch(err){
this.loading2 = false
return
}
if (this.currentStep < this.mySteps.length + 1) {
this.currentStep += val;
}
},
clickRepublish() {
this.currentStep = 1;
},
textareaChange(e:any){
if(e.target.value.length >= 500) {
this.createNFT.value_des = e.target.value.slice(0,500)
}
}
// textareaChange(e:any){
// if(e.target.value.length >= 500) {
// this.createNFT.value_des = e.target.value.slice(0,500)
// }
// }
},
});
</script>
......
src/view/NFT/Create/upload.vue
View file @ e3f025e1
This diff is collapsed.
src/view/NFT/Detail/index.vue
View file @ e3f025e1
......@@ -161,10 +161,10 @@
import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
import { token } from '@/util/userInfoUtils'
import anquanzhongxin89 from "@/assets/img/img-anquanzhongxin89.png"
import chakan from "@/assets/img/img-chakan.png"
import atupian from "@/assets/img/img-a-tupian.png"
import BOSSyingyetingchushi from "@/assets/img/img-BOSS-yingyeting-chushi.png"
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"
const apps = [
{
......
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