Skip to content

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

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

parents 834de053 1a2f5989
Show whitespace changes
Inline Side-by-side
Showing with 227 additions and 69 deletions
package.json
View file @ a534e3c8
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"html-to-image": "^1.6.2", "html-to-image": "^1.6.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"md5": "^2.3.0", "md5": "^2.3.0",
"moment": "^2.29.1",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"validator": "^13.6.0", "validator": "^13.6.0",
"vant": "^2.12.22", "vant": "^2.12.22",
......
src/components/common/Cell.vue
View file @ a534e3c8
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
<app-icon v-if="icon" :name="icon" class="self-center"></app-icon> <app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
</div> </div>
</div> </div>
<div v-else-if="type == 'input'"> <div v-else-if="type == 'input'">
<input <input
v-model="inputValue" v-model="inputValue"
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
<input <input
@click="eventEmit(type)" @click="eventEmit(type)"
:disabled="true" :disabled="true"
v-if="$store.state.create.pickedList.length === 0" v-if="!$store.state.create.pickedList || $store.state.create.pickedList.length === 0"
type="text" type="text"
class="bg-transparent" class="bg-transparent"
:placeholder="placeholder" :placeholder="placeholder"
...@@ -193,6 +194,7 @@ export default Vue.extend({ ...@@ -193,6 +194,7 @@ export default Vue.extend({
// const temp = this.inputValue; // const temp = this.inputValue;
const value = e.target.value as string; const value = e.target.value as string;
this.inputValue = value; this.inputValue = value;
this.$emit("cellOnChange", Number(this.inputValue)); this.$emit("cellOnChange", Number(this.inputValue));
}, },
eventEmit(v: any) { eventEmit(v: any) {
...@@ -211,7 +213,10 @@ export default Vue.extend({ ...@@ -211,7 +213,10 @@ export default Vue.extend({
this.show = true; this.show = true;
} }
}, },
cellOnChange() { cellOnChange(e:any) {
if(e.target.value && e.target.value.length >= 15) {
this.inputValue = (this.inputValue as string).slice(0,15)
}
this.$emit("cellOnChange", this.inputValue); this.$emit("cellOnChange", this.inputValue);
}, },
handleClickCopy(text: string | number) { handleClickCopy(text: string | number) {
...@@ -266,7 +271,7 @@ input[type="password"], ...@@ -266,7 +271,7 @@ input[type="password"],
input[type="number"], input[type="number"],
textarea { textarea {
text-align: right; text-align: right;
padding: 0 25px; padding: 0 25px 0 0;
} }
input:not([type="range"]), input:not([type="range"]),
textarea { textarea {
......
src/store/create.ts
View file @ a534e3c8
...@@ -4,7 +4,7 @@ const stateData = { ...@@ -4,7 +4,7 @@ const stateData = {
fileName: '', fileName: '',
file: undefined as undefined | File, file: undefined as undefined | File,
coverName:'', coverName:'',
coverFile: undefined as undefined | File coverFile: undefined as undefined | File,
} }
export type AppType = typeof stateData export type AppType = typeof stateData
......
src/view/Mine/index.vue
View file @ a534e3c8
...@@ -29,11 +29,12 @@ ...@@ -29,11 +29,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class='app-icons w-11/12 mx-auto grid grid-cols-4 gap-4 my-3'> <div class='app-icons w-11/12 mx-auto grid grid-cols-4 gap-4'>
<div v-for="(i,index) in apps" :key="index" class="flex justify-center"> <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 flex-col items-center gap-y-2">
<div class="flex content-center"> <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> <!-- <app-icon :name="i.icon" size='24px' class='p-5 bg-table-light-blue shadow-md rounded-full'></app-icon> -->
<img :src="i.icon" alt="">
</div> </div>
<div class='text-xs text-font-white'> <div class='text-xs text-font-white'>
{{i.text}} {{i.text}}
...@@ -65,25 +66,28 @@ ...@@ -65,25 +66,28 @@
import Vue from 'vue'; import Vue from 'vue';
import { Badge } from 'vant'; import { Badge } from 'vant';
import { token } from '@/util/userInfoUtils' 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"
Vue.use(Badge) Vue.use(Badge)
const apps=[ const apps=[
{ {
text:'版权授权', text:'版权授权',
icon:'icon-anquanzhongxin89' icon: anquanzhongxin89
}, },
{ {
text:'区块链浏览器', text:'区块链浏览器',
icon:'icon-chakan' icon: chakan
}, },
{ {
text:'制片管理', text:'制片管理',
icon:'icon-a-tupian' icon: atupian
}, },
{ {
text:'我的投资', text:'我的投资',
icon:'icon-BOSS-yingyeting-chushi' icon: bossyingyetingchushi
}, },
] ]
......
src/view/NFT/Create/components/certificate/index.vue
View file @ a534e3c8
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
<div>影视区块链版权电子数据确权书</div> <div>影视区块链版权电子数据确权书</div>
</div> </div>
<div> <div>
<img src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" /> <img v-if="!coverName" src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
<img id="coverImg" :src="showUploadFile" v-else class=" w-20 xs:w-24 mx-auto mt-4" />
</div> </div>
<div class="float-box w-full absolute -bottom-10 text-3xs xs:text-2xs"> <div class="float-box w-full absolute -bottom-10 text-3xs xs:text-2xs">
<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-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 class="w-full text-left ">
<div>NFT哈希</div> <div>NFT哈希</div>
<div>{{NFTHASH}}</div> <div>{{certificateData?certificateData.nftId:'无'}}</div>
<div class="pt-1">剧本哈希</div> <div class="pt-1">剧本哈希</div>
<div>{{fileHash}}</div> <div>{{certificateData?certificateData.fileHash:'无'}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -27,27 +28,27 @@ ...@@ -27,27 +28,27 @@
<div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs"> <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="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本名称</div> <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>
<div class="ceritfy-item flex py-1"> <div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人地址</div> <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>
<div class="ceritfy-item flex py-1"> <div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">发行人</div> <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>
<div class="ceritfy-item flex py-1"> <div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">存证时间</div> <div class="w-4/12 text-left">存证时间</div>
<div>{{ timeStamp }}</div> <div class="flex-1 text-left break-all">{{ createTime }}</div>
</div> </div>
<div class="ceritfy-item flex py-1"> <div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">剧本审核</div> <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>
<div class="ceritfy-item flex py-1"> <div class="ceritfy-item flex py-1">
<div class="w-4/12 text-left">版权证明</div> <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> </div>
</div> </div>
...@@ -59,8 +60,32 @@ ...@@ -59,8 +60,32 @@
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
import download from 'downloadjs' import download from 'downloadjs'
import moment from 'moment'
import { toPng } from 'html-to-image'; import { toPng } from 'html-to-image';
import { mapState } from "vuex";
export default Vue.extend({ export default Vue.extend({
data(){
return {
createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
}
},
computed:{
...mapState("create", ["coverFile","coverName"]),
showUploadFile(){
if(this.coverFile) {
return window.URL.createObjectURL(this.coverFile)
}else {
return ''
}
}
},
mounted(){
const fileReader = new FileReader();
fileReader.readAsDataURL(this.coverFile);
fileReader.onload = function (){
(document.getElementById("coverImg") as any).src = fileReader.result;
}
},
props: { props: {
name: { name: {
type: String, type: String,
...@@ -93,7 +118,8 @@ export default Vue.extend({ ...@@ -93,7 +118,8 @@ export default Vue.extend({
fileHash:{ fileHash:{
type:String, type:String,
default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974" default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
} },
certificateData:Object,
}, },
methods:{ methods:{
async downloadImg(){ async downloadImg(){
...@@ -108,6 +134,6 @@ export default Vue.extend({ ...@@ -108,6 +134,6 @@ export default Vue.extend({
console.error('oops, something went wrong!', error); console.error('oops, something went wrong!', error);
}); });
} }
} },
}); });
</script> </script>
src/view/NFT/Create/form.vue
View file @ a534e3c8
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
@stepOnFinished="stepOnFinished" @stepOnFinished="stepOnFinished"
></app-steps> ></app-steps>
</div> </div>
<div class="w-11/12 mx-auto"> <div class="w-11/12 mx-auto">
<div class="step-one" v-if="currentStep == 1"> <div class="step-one" v-if="currentStep == 1">
<app-cell <app-cell
...@@ -55,6 +56,7 @@ ...@@ -55,6 +56,7 @@
rounded-md rounded-md
text-sm text-sm
" "
@input="textareaChange"
></textarea> ></textarea>
</div> </div>
<div class="fixed bottom-0 w-full left-0 z-30"> <div class="fixed bottom-0 w-full left-0 z-30">
...@@ -67,6 +69,7 @@ ...@@ -67,6 +69,7 @@
></app-btn> ></app-btn>
</div> </div>
</div> </div>
<div class="step-two" v-if="currentStep == 2"> <div class="step-two" v-if="currentStep == 2">
<app-cell <app-cell
:text="fromText.fileUploadText" :text="fromText.fileUploadText"
...@@ -74,16 +77,16 @@ ...@@ -74,16 +77,16 @@
type="upload" type="upload"
:placeholder="fromText.filePlaceholder" :placeholder="fromText.filePlaceholder"
:name="fileName" :name="fileName"
@cellOnChange="$router.push({ name: 'NftUpload' })" @cellOnChange="$router.push({ name: 'NftUpload',params:{type:getPreText()}})"
></app-cell> ></app-cell>
<!-- <app-cell <app-cell
text="封面上传(非必填)" text="封面上传(非必填)"
class="text-font-white my-3" class="text-font-white my-3 "
type="upload" type="upload"
placeholder="请上传相关封面" placeholder="请上传相关封面"
:name="fileName" :name="coverName"
@cellOnChange="$router.push({ name: 'NftUpload' })" @cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
></app-cell> --> ></app-cell>
<app-cell <app-cell
:text="fromText.fileHashText" :text="fromText.fileHashText"
class="text-font-white my-3" class="text-font-white my-3"
...@@ -129,12 +132,13 @@ ...@@ -129,12 +132,13 @@
></app-btn> ></app-btn>
</div> </div>
</div> </div>
<div class="step-three" v-if="currentStep == 3"> <div class="step-three" v-if="currentStep == 3">
<app-cell <app-cell
text="NFT编号" text="NFT编号"
type="showText" type="showText"
:name="publish.nftId" :name="publish.nftId"
class="text-font-white my-3" class="text-font-white my-3 break-all"
></app-cell> ></app-cell>
<app-cell <app-cell
:text="fromText.fileHashText" :text="fromText.fileHashText"
...@@ -180,6 +184,7 @@ ...@@ -180,6 +184,7 @@
></app-btn> ></app-btn>
</div> </div>
</div> </div>
<div v-if="currentStep == 4" class="text-font-white"> <div v-if="currentStep == 4" class="text-font-white">
<div <div
v-if="loading4" v-if="loading4"
...@@ -192,12 +197,12 @@ ...@@ -192,12 +197,12 @@
/> />
<div class="mt-6 text-font-white">发行中...</div> <div class="mt-6 text-font-white">发行中...</div>
</div> </div>
<div v-else class="text-center"> <div v-else class="text-center">
<div v-if="success" > <div v-if="success" >
<van-overlay :show="showOverlay" class=" full-height flex items-center z-50" > <van-overlay :show="showOverlay" class=" full-height flex items-center z-50" >
<div class="w-10/12 mx-auto"> <div class="w-10/12 mx-auto">
<certificate /> <certificate :certificateData="certificateData"/>
<img <img
@click='showOverlay = !showOverlay;' @click='showOverlay = !showOverlay;'
src="@/assets/icons/close_publish.png" src="@/assets/icons/close_publish.png"
...@@ -214,6 +219,7 @@ ...@@ -214,6 +219,7 @@
<app-btn text="确认" class=' bg-font-blue' @click.native="$router.push('/Home')"></app-btn> <app-btn text="确认" class=' bg-font-blue' @click.native="$router.push('/Home')"></app-btn>
</div> </div>
</div> </div>
<div <div
v-else v-else
class="flex flex-col items-center w-full pt-16 justify-center" class="flex flex-col items-center w-full pt-16 justify-center"
...@@ -301,6 +307,7 @@ export default Vue.extend({ ...@@ -301,6 +307,7 @@ export default Vue.extend({
loading4: false, loading4: false,
success: true, success: true,
errorMsg: "", errorMsg: "",
certificateData:{},
}; };
}, },
components: { components: {
...@@ -312,7 +319,6 @@ export default Vue.extend({ ...@@ -312,7 +319,6 @@ export default Vue.extend({
BreedingRhombusSpinner BreedingRhombusSpinner
}, },
async mounted() { async mounted() {
const data = await this.getPreText() const data = await this.getPreText()
this.fromText = this.concatFormText(data) this.fromText = this.concatFormText(data)
const list = await this.$service.nftService.getCategory(); const list = await this.$service.nftService.getCategory();
...@@ -336,6 +342,7 @@ export default Vue.extend({ ...@@ -336,6 +342,7 @@ export default Vue.extend({
fileName: "fileName", fileName: "fileName",
file: "file", file: "file",
pickedList: "pickedList", pickedList: "pickedList",
coverName: 'coverName'
}), }),
validation(): boolean { validation(): boolean {
let disabled = true; let disabled = true;
...@@ -372,7 +379,6 @@ export default Vue.extend({ ...@@ -372,7 +379,6 @@ export default Vue.extend({
setState: "SET_STATE", setState: "SET_STATE",
}), }),
getPreText():string{ getPreText():string{
console.log(this.categoryId,typeof this.categoryId);
switch (this.categoryId) { switch (this.categoryId) {
case '1': case '1':
return '剧本' return '剧本'
...@@ -447,6 +453,7 @@ export default Vue.extend({ ...@@ -447,6 +453,7 @@ export default Vue.extend({
.then((ret: any) => { .then((ret: any) => {
this.success = ret === true; this.success = ret === true;
this.loading4 = false; this.loading4 = false;
this.certificateData = Object.assign({},this.createNFT,this.publish)
ret !== true && (this.errorMsg = ret); ret !== true && (this.errorMsg = ret);
}) })
.catch((err) => { .catch((err) => {
...@@ -519,6 +526,11 @@ export default Vue.extend({ ...@@ -519,6 +526,11 @@ export default Vue.extend({
clickRepublish() { clickRepublish() {
this.currentStep = 1; this.currentStep = 1;
}, },
textareaChange(e:any){
if(e.target.value.length >= 500) {
this.createNFT.value_des = e.target.value.slice(0,500)
}
}
}, },
}); });
</script> </script>
......
src/view/NFT/Create/upload.vue
View file @ a534e3c8
<template> <template>
<Layout-Child class="page-scroll text-center"> <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 <input type="file" id="upload" class="hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
type="file" <input type="file" id="upload" accept="image/*" class=" hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
id="upload" <input type="file" id="upload" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
class="hidden" <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
@change="handleFileChange"
ref="inputFile" <label @click="initUpload" class="inline-block">
accept="application/pdf,application/msword,text/plain"
/>
<label for="upload" class="inline-block">
<div <div
ref="uploadBox" ref="uploadBox"
class=" class="
...@@ -23,38 +20,52 @@ ...@@ -23,38 +20,52 @@
" "
> >
<img <img
v-if="status === uploadStatus.NULL" v-if="showNotUploadImg "
src="@/assets/icons/upload.png" src="@/assets/icons/upload.png"
alt="" alt=""
class="mx-auto" class="mx-auto"
/> />
<img <img
v-else-if="status === uploadStatus.success" v-else-if="showImgUploadImg"
src="@/assets/icons/file.png" :src="showUploadFile"
alt=""
class="mx-auto"
/>
<img
v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
src="@/assets/icons/upload.png"
alt="" alt=""
class="mx-auto" class="mx-auto"
/> />
<Loading type="spiner" v-else-if="status === uploadStatus.uploading" /> <Loading type="spiner" v-else-if="status === uploadStatus.uploading || coverstatus === uploadStatus.uploading" />
<div v-else-if="status === uploadStatus.failed">上传失败</div> <div v-else-if="status === uploadStatus.failed || coverstatus === uploadStatus.uploading">上传失败</div>
</div> </div>
</label> </label>
<div class="text-center text-font-white"> <div class="text-center text-font-white">
<div v-if="!fileName" class="mt-2">支持扩展名格式：PDF</div> <div v-if="(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class="mt-2">{{uploadAccept.acceptText}}</div>
<div v-if="fileName" class="mt-2"> <div v-else class="mt-2">
{{ fileName }} {{ (uploadType == '封面图片' && coverName)?coverName:fileName }}
</div>
<!-- <div v-if="uploadType == '封面图片' && coverName" class="mt-2">
{{ coverName }}
</div> </div>
<div v-else-if="uploadType !== '封面图片' && fileName" class="mt-2">
{{ fileName }}
</div> -->
<label for="upload" class="mt-2"> <label for="upload" class="mt-2">
<div <div
v-if=" v-if="showReUpload"
status === uploadStatus.failed || status === uploadStatus.success
"
style="color: #0076ff" style="color: #0076ff"
class="inline-block" class="inline-block"
> >
重新上传 重新上传
</div> </div>
</label> </label>
</div> </div>
<div class="flex justify-between fixed bottom-0 left-0 right-0"> <div class="flex justify-between fixed bottom-0 left-0 right-0">
<app-btn <app-btn
text="取消" text="取消"
...@@ -70,6 +81,7 @@ ...@@ -70,6 +81,7 @@
@btnClicked="$router.back()" @btnClicked="$router.back()"
></app-btn> ></app-btn>
</div> </div>
</Layout-Child> </Layout-Child>
</template> </template>
...@@ -79,6 +91,9 @@ import Vue from "vue"; ...@@ -79,6 +91,9 @@ import Vue from "vue";
import { Uploader, Loading } from "vant"; import { Uploader, Loading } from "vant";
import { mapMutations, mapState } from "vuex"; import { mapMutations, mapState } from "vuex";
import md5 from "md5"; import md5 from "md5";
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);
enum uploadStatus { enum uploadStatus {
NULL, NULL,
...@@ -94,7 +109,13 @@ export default Vue.extend({ ...@@ -94,7 +109,13 @@ export default Vue.extend({
uploading: false, uploading: false,
uploadStatus, uploadStatus,
status: uploadStatus.NULL, status: uploadStatus.NULL,
coverstatus: uploadStatus.NULL,
// accept: // accept:
show: false,
actions: [
{ name: '本地相册'},
{ name: '拍照'},
],
}; };
}, },
components: { components: {
...@@ -104,14 +125,78 @@ export default Vue.extend({ ...@@ -104,14 +125,78 @@ export default Vue.extend({
Loading, Loading,
}, },
computed: { computed: {
...mapState("create", ["fileName"]), ...mapState("create", ["fileName","coverName",'coverFile','file']),
nextBtnDisabled(): boolean { nextBtnDisabled(): boolean {
if(this.uploadType == '封面图片') {
return !this.coverName
}else {
return !this.fileName; return !this.fileName;
}
},
uploadType():any{
return this.$route.params.type
},
uploadAccept():object{
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:''}
}
},
showUploadFile():string{
if(this.uploadType == '封面图片' && this.coverFile) {
return window.URL.createObjectURL(this.coverFile)
}else if(this.uploadType !== '图片' && this.file) {
return window.URL.createObjectURL(this.file)
}else {
return ''
}
},
showNotUploadImg():boolean{
return (this.uploadType !== '封面图片' && this.status === uploadStatus.NULL) || (this.uploadType == '封面图片' && this.coverstatus === uploadStatus.NULL)
},
showImgUploadImg():boolean{
return (this.status === uploadStatus.success && this.uploadType == '图片') || (this.coverstatus === uploadStatus.success && this.uploadType == '封面图片')
}, },
showReUpload():boolean{
return ((this.uploadType !== '封面图片') && (this.status === uploadStatus.failed || this.status === uploadStatus.success))||((this.uploadType == '封面图片') && (this.coverstatus === uploadStatus.failed || this.coverstatus === uploadStatus.success))
}
}, },
methods: { methods: {
handleFileChange() { initUpload(){
const ele = this.$refs.inputFile as HTMLInputElement; if(this.uploadType == '图片' || this.uploadType == '封面图片') {
this.show = true
}else {
(this.$refs.inputFile as HTMLInputElement).click()
}
},
onSelect(item:any){
this.show = false;
let cEl =this.$refs.cameraElem as HTMLInputElement
let fEl =this.$refs.localImgElem as HTMLInputElement
switch(item.name){
case '拍照':
cEl.click();
break;
case '本地相册':
fEl.click();
break;
}
this.$toast(item.name);
},
handleFileChange(ref:any) {
const ele = this.$refs[ref] as HTMLInputElement;
const files = ele.files; const files = ele.files;
if (files && files.length >= 1) { if (files && files.length >= 1) {
this.afterRead(files[0]); this.afterRead(files[0]);
...@@ -124,22 +209,38 @@ export default Vue.extend({ ...@@ -124,22 +209,38 @@ export default Vue.extend({
try { try {
const ab = await file.arrayBuffer(); const ab = await file.arrayBuffer();
const fileMd5 = md5(Buffer.from(ab)); const fileMd5 = md5(Buffer.from(ab));
this.status = uploadStatus.uploading;
// const ossRet = await this.$service.nftService.ossPolicy(); // const ossRet = await this.$service.nftService.ossPolicy();
// const uploadRet = await this.$service.nftService.uploadFileToOss( // const uploadRet = await this.$service.nftService.uploadFileToOss(
// file, // file,
// ossRet // ossRet
// ); // );
if(this.uploadType == '封面图片') {
this.coverstatus = uploadStatus.uploading;
this.setState({
coverName: file.name,
coverFile: file,
});
this.coverstatus = uploadStatus.success;
}else {
this.status = uploadStatus.uploading;
this.setState({ this.setState({
fileName: file.name, fileName: file.name,
fileHash: fileMd5, fileHash: fileMd5,
file: file, file: file,
}); });
this.status = uploadStatus.success; this.status = uploadStatus.success;
}
} catch (err) { } catch (err) {
console.log(err, "show err"); console.log(err, "show err");
if(this.uploadType == '封面图片') {
this.coverstatus = uploadStatus.failed;
}else {
this.status = uploadStatus.failed; this.status = uploadStatus.failed;
} }
}
}, },
afterRead2(file: any) { afterRead2(file: any) {
file.status = "uploading"; file.status = "uploading";
...@@ -153,6 +254,7 @@ export default Vue.extend({ ...@@ -153,6 +254,7 @@ export default Vue.extend({
}, },
}); });
</script> </script>
<style scoped> <style scoped>
.upload-box { .upload-box {
width: 140px; width: 140px;
......
src/view/NFT/Detail/index.vue
View file @ a534e3c8
...@@ -35,7 +35,8 @@ ...@@ -35,7 +35,8 @@
:name="i.icon" :name="i.icon"
size="24px" size="24px"
class="p-5 bg-table-light-blue shadow-md rounded-full" class="p-5 bg-table-light-blue shadow-md rounded-full"
></app-icon> ></app-icon> -->
<img :src="i.icon" alt="">
</div> </div>
<div class="text-xs mt-3 text-font-white"> <div class="text-xs mt-3 text-font-white">
{{ i.text }} {{ i.text }}
...@@ -162,23 +163,28 @@ ...@@ -162,23 +163,28 @@
import Vue from "vue"; import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue" import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
import { token } from '@/util/userInfoUtils' 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"
const apps = [ const apps = [
{ {
text: "版权认证", text: "版权认证",
icon: "icon-anquanzhongxin89", icon: anquanzhongxin89,
}, },
{ {
text: "大厅下架", text: "大厅下架",
icon: "icon-chakan", icon: chakan,
}, },
{ {
text: "NFT转让", text: "NFT转让",
icon: "icon-a-tupian", icon: atupian,
action: 'pushToTransfer' action: 'pushToTransfer'
}, },
{ {
text: "查看证书", text: "查看证书",
icon: "icon-BOSS-yingyeting-chushi", icon: BOSSyingyetingchushi,
}, },
]; ];
......
src/view/User/index.vue
View file @ a534e3c8
<template> <template>
<Layout-Child> <Layout-Child>
<div class=" w-11/12 mx-auto py-6 text-font-white"> <div class=" w-11/12 mx-auto py-6 text-font-white">
<input type="file" accept="image/*" capture="camera" class="hidden" ref='fileElem2' @change="fileUpload"/> <input type="file" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="fileUpload"/>
<input type="file" accept="image/*" class=" hidden" ref='fileElem' @change="fileUpload"/> <input type="file" accept="image/*" class=" hidden" ref='fileElem' @change="fileUpload"/>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<app-cell text='头像' boxType='border' type='image' :value='avatarImgUrl?avatarImgUrl:this.userInfo.avatar?this.userInfo.avatar : "/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell> <app-cell text='头像' boxType='border' type='image' :value='avatarImgUrl?avatarImgUrl:this.userInfo.avatar?this.userInfo.avatar : "/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
...@@ -29,8 +29,9 @@ export default Vue.extend({ ...@@ -29,8 +29,9 @@ export default Vue.extend({
userInfo:this.$util.userMsg.getUserMsg(), userInfo:this.$util.userMsg.getUserMsg(),
show:false, show:false,
actions: [ actions: [
{ name: '拍摄头像',router:'/photo' },
{ name: '从图片夹上传',router:'/photoEdit' }, { name: '从图片夹上传',router:'/photoEdit' },
{ name: '拍摄头像',router:'/photo' },
], ],
file:{}, file:{},
avatarImgUrl:'' avatarImgUrl:''
...@@ -60,6 +61,7 @@ export default Vue.extend({ ...@@ -60,6 +61,7 @@ export default Vue.extend({
this.show= true this.show= true
}, },
async fileUpload(event:any){ async fileUpload(event:any){
this.$toast.loading('头像更新中...')
this.file = event.target.files[0] this.file = event.target.files[0]
// this.$store.commit('app/SET_FILEDATA',event.target.files) // this.$store.commit('app/SET_FILEDATA',event.target.files)
const upload = await this.$service.userService.avatarUpload(event.target.files[0]) const upload = await this.$service.userService.avatarUpload(event.target.files[0])
...@@ -72,15 +74,15 @@ export default Vue.extend({ ...@@ -72,15 +74,15 @@ export default Vue.extend({
}, },
onSelect(item:any){ onSelect(item:any){
this.show = false; this.show = false;
let cEl =this.$refs.cameraElem as HTMLInputElement
let fEl =this.$refs.fileElem as HTMLInputElement let fEl =this.$refs.fileElem as HTMLInputElement
let fEl2 =this.$refs.fileElem as HTMLInputElement
switch(item.name){ switch(item.name){
case '拍摄头像':
cEl.click();
break;
case '从图片夹上传': case '从图片夹上传':
fEl.click(); fEl.click();
break; break;
case '拍摄头像':
fEl2.click();
break;
} }
this.$toast(item.name); this.$toast(item.name);
} }
......
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