Skip to content

N
NFT
Commit 1a2f5989 authored by salitedfish's avatar salitedfish
Browse files
Options

阶段性提交

parent 55ac50fa
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 41 deletions
src/components/common/Cell.vue
View file @ 1a2f5989
......@@ -53,7 +53,7 @@
<input
@click="eventEmit(type)"
:disabled="true"
v-if="$store.state.create.pickedList.length === 0"
v-if="!$store.state.create.pickedList || $store.state.create.pickedList.length === 0"
type="text"
class="bg-transparent"
:placeholder="placeholder"
......@@ -214,7 +214,7 @@ export default Vue.extend({
}
},
cellOnChange(e:any) {
if(e.target.value.length >= 15) {
if(e.target.value && e.target.value.length >= 15) {
this.inputValue = (this.inputValue as string).slice(0,15)
}
this.$emit("cellOnChange", this.inputValue);
......
src/store/create.ts
View file @ 1a2f5989
......@@ -4,7 +4,7 @@ const stateData = {
fileName: '',
file: undefined as undefined | File,
coverName:'',
coverFile: undefined as undefined | File
coverFile: undefined as undefined | File,
}
export type AppType = typeof stateData
......
src/view/NFT/Create/components/certificate/index.vue
View file @ 1a2f5989
......@@ -11,7 +11,8 @@
<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 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">
......@@ -61,12 +62,30 @@ import Vue from "vue";
import download from 'downloadjs'
import moment from 'moment'
import { toPng } from 'html-to-image';
import { mapState } from "vuex";
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: {
name: {
type: String,
......
src/view/NFT/Create/form.vue
View file @ 1a2f5989
......@@ -81,10 +81,10 @@
></app-cell>
<app-cell
text="封面上传(非必填)"
class="text-font-white my-3"
class="text-font-white my-3 "
type="upload"
placeholder="请上传相关封面"
:name="fileName"
:name="coverName"
@cellOnChange="$router.push({ name: 'NftUpload',params:{type:'封面图片'}})"
></app-cell>
<app-cell
......@@ -342,6 +342,7 @@ export default Vue.extend({
fileName: "fileName",
file: "file",
pickedList: "pickedList",
coverName: 'coverName'
}),
validation(): boolean {
let disabled = true;
......
src/view/NFT/Create/upload.vue
View file @ 1a2f5989
......@@ -2,16 +2,12 @@
<template>
<Layout-Child class="page-scroll text-center">
<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="uploadAccept.acceptType"
/>
<input type="file" id="upload" class="hidden" @change="handleFileChange('inputFile')" ref="inputFile" :accept="uploadAccept.acceptType"/>
<input type="file" id="upload" accept="image/*" class=" hidden" ref='localImgElem' @change="handleFileChange('localImgElem')"/>
<input type="file" id="upload" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="handleFileChange('cameraElem')"/>
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
<label for="upload" class="inline-block">
<label @click="initUpload" class="inline-block">
<div
ref="uploadBox"
class="
......@@ -24,33 +20,43 @@
"
>
<img
v-if="status === uploadStatus.NULL"
v-if="showNotUploadImg "
src="@/assets/icons/upload.png"
alt=""
class="mx-auto"
/>
<img
v-else-if="status === uploadStatus.success"
src="@/assets/icons/file.png"
v-else-if="showImgUploadImg"
:src="showUploadFile"
alt=""
class="mx-auto"
/>
<Loading type="spiner" v-else-if="status === uploadStatus.uploading" />
<div v-else-if="status === uploadStatus.failed">上传失败</div>
<img
v-else-if="status === uploadStatus.success && uploadType !== '图片' && uploadType !== '封面图片'"
src="@/assets/icons/upload.png"
alt=""
class="mx-auto"
/>
<Loading type="spiner" v-else-if="status === uploadStatus.uploading || coverstatus === uploadStatus.uploading" />
<div v-else-if="status === uploadStatus.failed || coverstatus === uploadStatus.uploading">上传失败</div>
</div>
</label>
<div class="text-center text-font-white">
<div v-if="!fileName" class="mt-2">{{uploadAccept.acceptText}}</div>
<div v-if="fileName" class="mt-2">
{{ fileName }}
<div v-if="(uploadType == '封面图片' && !coverName) || (uploadType !== '封面图片' && !fileName)" class="mt-2">{{uploadAccept.acceptText}}</div>
<div v-else class="mt-2">
{{ (uploadType == '封面图片' && coverName)?coverName:fileName }}
</div>
<!-- <div v-if="uploadType == '封面图片' && coverName" class="mt-2">
{{ coverName }}
</div>
<div v-else-if="uploadType !== '封面图片' && fileName" class="mt-2">
{{ fileName }}
</div> -->
<label for="upload" class="mt-2">
<div
v-if="
status === uploadStatus.failed || status === uploadStatus.success
"
v-if="showReUpload"
style="color: #0076ff"
class="inline-block"
>
......@@ -85,6 +91,9 @@ import Vue from "vue";
import { Uploader, Loading } from "vant";
import { mapMutations, mapState } from "vuex";
import md5 from "md5";
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);
enum uploadStatus {
NULL,
......@@ -100,7 +109,13 @@ export default Vue.extend({
uploading: false,
uploadStatus,
status: uploadStatus.NULL,
coverstatus: uploadStatus.NULL,
// accept:
show: false,
actions: [
{ name: '本地相册'},
{ name: '拍照'},
],
};
},
components: {
......@@ -110,14 +125,18 @@ export default Vue.extend({
Loading,
},
computed: {
...mapState("create", ["fileName"]),
...mapState("create", ["fileName","coverName",'coverFile','file']),
nextBtnDisabled(): boolean {
return !this.fileName;
if(this.uploadType == '封面图片') {
return !this.coverName
}else {
return !this.fileName;
}
},
uploadType(){
uploadType():any{
return this.$route.params.type
},
uploadAccept(){
uploadAccept():object{
switch(this.uploadType){
case '剧本':
return {acceptTitle:'请上传剧本附件',acceptType:'application/pdf,application/msword,text/plain',acceptText:'支持扩展名格式PDF'}
......@@ -134,12 +153,50 @@ export default Vue.extend({
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: {
handleFileChange() {
const ele = this.$refs.inputFile as HTMLInputElement;
initUpload(){
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;
if (files && files.length >= 1) {
this.afterRead(files[0]);
......@@ -152,21 +209,37 @@ export default Vue.extend({
try {
const ab = await file.arrayBuffer();
const fileMd5 = md5(Buffer.from(ab));
this.status = uploadStatus.uploading;
// const ossRet = await this.$service.nftService.ossPolicy();
// const uploadRet = await this.$service.nftService.uploadFileToOss(
// file,
// ossRet
// );
this.setState({
fileName: file.name,
fileHash: fileMd5,
file: file,
});
this.status = uploadStatus.success;
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({
fileName: file.name,
fileHash: fileMd5,
file: file,
});
this.status = uploadStatus.success;
}
} catch (err) {
console.log(err, "show err");
this.status = uploadStatus.failed;
if(this.uploadType == '封面图片') {
this.coverstatus = uploadStatus.failed;
}else {
this.status = uploadStatus.failed;
}
}
},
afterRead2(file: any) {
......@@ -181,6 +254,7 @@ export default Vue.extend({
},
});
</script>
<style scoped>
.upload-box {
width: 140px;
......
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