Skip to content

N
NFT
Commit 233a890b authored by salitedfish's avatar salitedfish
Browse files
Options

阶段性提交

parent c0f38a8a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4096 additions and 70 deletions
package.json
View file @ 233a890b
......@@ -10,6 +10,7 @@
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.2.1",
"@vant/area-data": "^1.1.3",
"ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"clipboard": "^2.0.8",
......@@ -32,6 +33,7 @@
"vue": "^2.6.11",
"vue-content-loading": "^1.6.0",
"vue-fragment": "^1.5.2",
"vue-qr": "^3.2.2",
"vue-router": "^3.2.0",
"vue-step-progress": "^0.3.5",
"vuex": "^3.4.0"
......
public/index.html
View file @ 233a890b
......@@ -8,6 +8,8 @@
<link href="<%= BASE_URL %>logo.png">
<script src="/iconfont.js"></script>
<script src="/iconfont1.js"></script>
<script src="//at.alicdn.com/t/font_2629369_79mgwiqma0p.js"></script>
<script src="//at.alicdn.com/t/font_2990811_g9lzvhjxit.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>一幕影链</title>
......
src/App.vue
View file @ 233a890b
<template>
<div id="app" class="bg-font-black">
<van-overlay :show="is_neizhi" class="weixin_qq_jump">
<div class="jump_img_box w-full h-full">
<img class="jump_img" src="@/assets/img/nft_ly_jump.png" alt="">
</div>
</van-overlay>
<!-- 发行NFT的选项弹窗 -->
<van-overlay :show="appState.overlay.show" class="">
<div class="overlay items-start flex flex-col text-font-white w-full px-6 relative">
<div class="text-xl py-12 pt-28">
......@@ -21,24 +17,24 @@
<app-icon name="icon-xiaoshipin" 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">
<app-icon name="icon-dianying" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'3'})">
<app-icon name="icon-dianying" 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">
<app-icon name="icon-yinle" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'4'})">
<app-icon name="icon-yinle" 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" @click="goNTF({url:'createNft',id:'5'})">
<app-icon name="icon-a-tupian" 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">
<app-icon name="icon-zhoubian" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'6'})">
<app-icon name="icon-zhoubian" 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">
<app-icon name="icon-qita" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
<div class="flex flex-col items-center content-center" @click="goNTF({url:'createNft',id:'7'})">
<app-icon name="icon-qita" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
<div class=" text-xs py-3">其他</div>
</div>
</div>
......@@ -60,7 +56,16 @@
<div class=" w-20 h-8 leading-8 rounded-full mx-auto bg-font-blue text-center mt-5" @click="gotoSafe()">去认证</div>
</van-popup>
</van-overlay>
<!-- 主要界面 -->
<router-view></router-view>
<!-- 封面弹窗 -->
<van-overlay :show="showDialog" class="weixin_qq_jump">
<div class=" relative jump_img_box w-full h-full">
<img v-if="is_neizhi" class="jump_img" src="@/assets/img/nft_ly_jump.png" alt="">
<img v-if="!is_neizhi" class="jump_img" src="@/assets/img/nft_ly_nojump.png" alt="">
<div v-if="!is_neizhi" class="absolute z-30 top-5 right-5 text-white ">倒计时 ( {{countdownNum}} ) s</div>
</div>
</van-overlay>
</div>
</template>
......@@ -76,12 +81,16 @@ export default Vue.extend({
},
data(){
return {
showGoSafe:false
// showDialog: this.$store.state.app.showOverImg,
showGoSafe: false,
countdownNum: 3,
countdownFun: null as any
}
},
name: "App",
mounted() {
this.dialogStatus()
this.routerController();
},
methods: {
......@@ -108,7 +117,6 @@ export default Vue.extend({
const isCertificate = localStorage.getItem('isCertificate')
if(!isCertificate || isCertificate !== 'true') {
this.showGoSafe = true
// this.$toast('对不起，请先进行实名认证~')
return
}
......@@ -124,13 +132,27 @@ export default Vue.extend({
this.showGoSafe = false
this.closeNFT()
this.$router.push('/safe')
},
dialogStatus(){
if(!this.is_neizhi) {
this.countdownFun = setInterval(()=>{
this.countdownNum = this.countdownNum-1
if(this.countdownNum <= 0) {
this.$store.commit('app/SET_SHOWOVERIMG', false)
clearInterval(this.countdownFun)
}
}, 1000)
}
}
},
computed: {
appState: function () {
return this.$store.state.app;
},
is_neizhi(){
showDialog(){
return this.$store.state.app.showOverImg
},
is_neizhi(): any{
const ua = navigator.userAgent.toLowerCase() as any;
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return "weixin";
......@@ -138,7 +160,7 @@ export default Vue.extend({
return "QQ";
}
return false;
}
},
},
});
</script>
......
src/components/CollectionCard.vue
View file @ 233a890b
......@@ -47,9 +47,6 @@ export default Vue.extend({
props: {
colletionData:{} as PropType<MyNFTItem>
},
mounted(){
console.log(this.colletionData)
},
computed:{
getThemeList():string | string[]{
if(this.colletionData.theme){
......
src/components/common/Certificate.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/components/common/CprCertificate.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/layout/NavHeader.vue
View file @ 233a890b
<template>
<div class='text-font-white w-11/12 mx-auto py-3 flex justify-between items-center '>
<div class='left'>
<div @click="goback()">
<div @click="goback()">
<app-icon name='icon-fanhui' size='18px' color='#EEF1F6'></app-icon>
</div>
</div>
......@@ -10,6 +10,9 @@
<!-- <div v-if="saveBtn.show" @click="clickSaveBtn" class="text-sm" :class="saveBtn.enable?' text-font-blue':' text-font-dark-blue'">
保存
</div> -->
<div v-if="rightBtn" class="text-sm text-font-blue" @click="routerJump(rightBtn.path)">
{{rightBtn.text}}
</div>
</div>
</div>
</template>
......@@ -42,7 +45,9 @@ export default Vue.extend({
}else {
return this.$route.meta?.title
}
// return this.$route.query.text?this.$route.query.text:(this.$route.query.type?`上传${this.$route.query.type}`:this.$route.meta?.title)
},
rightBtn(){
return this.$route.meta?.rightBtn
}
},
mounted(){
......@@ -53,10 +58,13 @@ export default Vue.extend({
}
},
methods:{
clickSaveBtn(){
if(this.saveBtn.enable){
console.log(this.$route.params.type);
}
// clickSaveBtn(){
// if(this.saveBtn.enable){
// console.log(this.$route.params.type);
// }
// },
routerJump(path:string){
this.$router.push(path)
},
goback(){
if(this.$route.name == "NftTransfer"){
......
src/main.ts
View file @ 233a890b
......@@ -10,7 +10,7 @@ import service from './service'
import { Plugin } from 'vue-fragment'
import { Image as VanImage } from 'vant';
import { Toast,Empty,Dialog,Lazyload } from 'vant'
import { Toast,Empty,Dialog,Lazyload,ActionSheet, Calendar, RadioGroup, Radio, Area } from 'vant'
import VConsole from 'vconsole';
const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
......@@ -20,14 +20,19 @@ window.console.log(vconsole,'移动console');
Vue.use(Lazyload);
Vue.use(VanImage);
Vue.use(Dialog);
Vue.use(ActionSheet)
Vue.use(Empty)
Vue.use(Toast)
Vue.use(Calendar)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Area)
Vue.use(Util)
Vue.use(Plugin)
Vue.use(service)
Vue.config.productionTip = false
new Vue({
export default new Vue({
router,
store,
render: h => h(App)
......
src/router/index.ts
View file @ 233a890b
......@@ -31,31 +31,31 @@ const routes: Array<RouteConfig> = [
component: () => import('@/view/NFT/Create/index.vue'),
redirect:'/Nft/create/form',
children: [
{
path: '/Nft/create/form',
name:'NftForm',
component: () => import('@/view/NFT/Create/form.vue'),
meta: {
title: 'NFT发行'
}
},
{
path: '/Nft/create/pick',
name:'NftPick',
component: () => import('@/view/NFT/Create/pick.vue'),
meta: {
title: '剧本题材'
}
},
{
path: '/Nft/create/upload',
name:'NftUpload',
component: () => import('@/view/NFT/Create/upload.vue'),
meta: {
title: '剧本附件'
}
},
]
{
path: '/Nft/create/form',
name:'NftForm',
component: () => import('@/view/NFT/Create/form.vue'),
meta: {
title: 'NFT发行'
}
},
{
path: '/Nft/create/pick',
name:'NftPick',
component: () => import('@/view/NFT/Create/pick.vue'),
meta: {
title: '剧本题材'
}
},
{
path: '/Nft/create/upload',
name:'NftUpload',
component: () => import('@/view/NFT/Create/upload.vue'),
meta: {
title: '剧本附件'
}
},
]
},
{
path:'/Nft/transfer',
......@@ -102,7 +102,7 @@ const routes: Array<RouteConfig> = [
name:'Nftdetail',
component:()=> import('@/view/NFT/Detail/index.vue'),
meta:{
title: 'NFT详情'
title: '存证查询'
}
},
{
......@@ -122,6 +122,66 @@ const routes: Array<RouteConfig> = [
component: () => import('@/view/NFT/TransferDetail/index.vue')
},
{
path:'/Copyright/List',
name: 'CopyrightList',
meta:{
title: '版权认证',
rightBtn: {
text: '版权申请',
path: '/Copyright/Step'
}
},
component: () => import('@/view/NFT/Copyright/CopyrightList/index.vue')
},
{
path:'/Copyright/Step',
name: 'CopyrightStep',
meta:{
title: '版权认证'
},
component: () => import('@/view/NFT/Copyright/CopyrightStep/index.vue')
},
{
path:'/Copyright/AddCprOwner',
name: 'AddCprOwner',
meta:{
title: '新增著作权人'
},
component: () => import('@/view/NFT/Copyright/AddCprOwner/index.vue')
},
{
path:'/Copyright/Res',
name: 'CopyrightRes',
meta:{
title: '版权登记'
},
component: () => import('@/view/NFT/Copyright/CopyrightRes/index.vue')
},
{
path:'/Copyright/Verified',
name: 'CopyrightVerified',
meta:{
title: '实名认证'
},
component: () => import('@/view/NFT/Copyright/CopyrightVerified/index.vue')
},
{
path:'/Copyright/Guarantee',
name: 'CopyrightGuarantee',
meta: {
title: '权利保证书'
},
component: () => import('@/view/NFT/Copyright/Guarantee/index.vue')
},
{
path: '/Copyright/PaperCer',
name: 'CopyrightPaperCer',
meta: {
title: '申请纸质证书'
},
component: () => import('@/view/NFT/Copyright/PaperCer/index.vue')
},
{
path:'/Collection',
name: 'Collection',
meta:{
......@@ -130,6 +190,14 @@ const routes: Array<RouteConfig> = [
component: () => import('@/view/NFT/Collection/index.vue')
},
{
path:'/Browser',
name: 'Browser',
meta:{
title: '存证查询'
},
component: () => import('@/view/NFT/Browser/index.vue')
},
{
path:'/User',
name:'User',
meta: {
......
src/service/copyrightService/copyrightService.ts 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/service/index.ts
View file @ 233a890b
import { Common } from './common'
import { NFTService } from './nftService/nftService'
import {UserService} from './userService'
import { CopyrightService } from './copyrightService/copyrightService'
export default{
......@@ -8,7 +9,8 @@ export default{
Vue.prototype.$service = {
userService: new UserService(),
nftService: new NFTService(),
common: new Common()
common: new Common(),
copyrightService: new CopyrightService()
}
}
}
......
src/service/nftService/nftService.ts
View file @ 233a890b
......@@ -76,7 +76,7 @@ export class NFTService extends Service {
dataType: 'application/x-www-form-urlencoded'
},
downloadCerfificate:{
path:"/proxyDowload/",
path:"/proxyDowload/nftCertificate",
dataType: 'application/json;charset=utf-8'
},
getTransferList:{
......@@ -246,13 +246,16 @@ export class NFTService extends Service {
}
//普通文件上传
async fileUpload(file:File):Promise<string>{
async fileUpload(file:File, callBack?:(p:number)=>void):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,
},
onUploadProgress: (p)=>{
if(callBack) callBack(p)
}
})
}
......
src/shimes-app.d.ts
View file @ 233a890b
......@@ -5,10 +5,12 @@ import { NFTService } from './service/nftService/nftService'
import { UserService } from './service/userService'
import { UTIL_INTERFACE } from '@/util/util.types'
import VueRouter, { Route } from 'vue-router'
import { CopyrightService } from './service/copyrightService/copyrightService'
interface ServiceType {
userService: UserService
nftService: NFTService
copyrightService: CopyrightService
common:Common
}
......
src/store/app.ts
View file @ 233a890b
......@@ -6,7 +6,8 @@ const stateData = {
title:'默认'
}
},
fileData:{}
fileData:{},
showOverImg: true
}
interface overlayData {
title:string
......@@ -26,6 +27,9 @@ export const appStore = {
},
SET_FILEDATA(state:AppType,payload:any){
state.fileData = payload
},
SET_SHOWOVERIMG(state:AppType,payload:any){
state.showOverImg = payload
}
},
actions: {
......
src/store/copyright.ts 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/store/index.ts
View file @ 233a890b
......@@ -4,6 +4,7 @@ import {appStore} from './app'
import {create} from "./create"
import {codeConfirmer} from "./codeConfimer"
import {nftTransfer} from "./transfer"
import {copyright} from "./copyright"
Vue.use(Vuex)
export default new Vuex.Store({
......@@ -11,6 +12,7 @@ export default new Vuex.Store({
app:appStore,
codeConfirmer:codeConfirmer,
transfer:nftTransfer,
create
create,
copyright
}
})
src/style.less
View file @ 233a890b
......@@ -32,7 +32,11 @@ body {
}
.van-overlay {
background-color: rgba(10, 14, 35, 0.95);
// background-color: rgba(10, 14, 35, 0.95);
}
.van-radio span.van-radio__label {
color: #2B446C;
font-size: 14px;
}
.fade-enter-active,
......
src/view/Mine/index.vue
View file @ 233a890b
......@@ -30,7 +30,7 @@
</div>
</div>
<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" @click="routerJump(i.path)">
<div class="flex flex-col items-center gap-y-2">
<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> -->
......@@ -76,11 +76,13 @@ Vue.use(Badge)
const apps=[
{
text:'版权授权',
icon: anquanzhongxin89
icon: anquanzhongxin89,
path: '/Copyright/List'
},
{
text:'区块链浏览器',
icon: chakan
icon: chakan,
path: '/Browser'
},
{
text:'制片管理',
......@@ -132,6 +134,10 @@ export default Vue.extend({
return
}
this.$router.push('/User')
},
routerJump(path:void | string){
if(!path) return
this.$router.push(path)
}
},
computed:{
......
src/view/NFT/Browser/index.vue 0 → 100644
View file @ 233a890b
<template>
<div class="browser_box">
<NavHeader></Navheader>
<div class="browser_img">
<img class="browser_img_B" src="@/assets/img/browser_img_B.png" alt="">
<img class="browser_img_C" src="@/assets/img/browser_img_C.png" alt="">
</div>
<div class="trace_count_text">存证数量</div>
<div class="trace_count_num">{{count}} <span class="unit">个</span> </div>
<div class="trace_search">
<Icon name="icon-xingzhuang" size=" 16px"></Icon>
<input class="search_area" type="text" placeholder="请输入存证名称/存证哈希">
</div>
<div class="trace_search_btn" @click="searchTrace()">查询</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
data(){
return {
count: 0
}
},
async mounted(){
await this.getApplyCount()
},
components: {
NavHeader:()=> import('@/layout/NavHeader.vue'),
Icon: ()=> import('@/components/common/Icon.vue')
},
methods: {
searchTrace(){
console.log('查找存证')
this.$router.push('/Nft/441')
},
async getApplyCount(){
const res = await this.$service.copyrightService.getApplyCount()
if(res) this.count = res
}
}
})
</script>
<style scoped lang='less'>
.browser_box {
height: 100vh;
overflow-y: scroll;
padding-bottom: 150px;
background-color: #201F7D;
text-align: center;
.browser_img {
position: relative;
height: 100vw;
background-image: url('../../../assets/img/browser_img_A.png');
background-size: cover;
background-repeat: no-repeat;
.browser_img_B {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
margin-top: -25%;
margin-left: -25%;
animation: ringAction 2.5s infinite linear;
}
.browser_img_C {
position: absolute;
top: 50%;
left: 50%;
width: 36%;
margin-top: -18%;
margin-left: -18%;
animation: ringAction 2.5s infinite linear;
}
@keyframes ringAction {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
}
.trace_count_text {
width: 30%;
height: 30px;
line-height: 30px;
margin: 10px auto 0;
font-size: 16px;
color: #fff;
background-color: #3C2BA2;
border: 1px solid #5238D7;
border-radius: 10px;
}
.trace_count_num {
margin-top: 10px;
color: #fff;
font-size: 30px;
.unit {
font-size: 18px;
}
}
.trace_search {
width: 85%;
margin: 30px auto 0;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
background: #302693;
border: 1px solid #4C4AEF;
border-radius: 20px;
.search_area {
flex: 1;
background: #302693;
padding-left: 20px;
color: #fff;
}
}
.trace_search_btn {
width: 85%;
margin: 30px auto 0;
background-color: #fff;
height: 40px;
line-height: 40px;
color: #201F7D;
font-size: 14px;
border-radius: 20px;
border: 1px solid #4C4AEF;
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/AddCprOwner/index.vue 0 → 100644
View file @ 233a890b
<template>
<div class="cpr_step_page">
<div class="center_container">
<CprHeader title="新增著作权人"></CprHeader>
<div>
<CprStepCell :cellData="copyrightOwner">
<CopyrightOwnerCard v-for="copyrightOwner, index in copyrightOwnerList"
:showSelect="true"
:key="index"
:xKey="index"
:cprOwnerCard="copyrightOwner"
@onDeleteCopyrightOwner="onDeleteCopyrightOwner"
@changeSelected="changeSelected"></CopyrightOwnerCard>
</CprStepCell>
</div>
</div>
<div class="step_change_box">
<div class="left" @click="cancel">取消</div>
<div class="right" @click="comfirmCprOwner">确定</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
data(){
return {
copyrightOwner: {
labelText: '著作权人',
nessesary: true,
tipText: '著作权人',
placeHolder: '添加著作权人',
inputType: 'addPeople',
contentText: '',
jumpPath: '/Copyright/Verified',
},
needDeleteId: [] as number[]
}
},
computed: {
copyrightOwnerList(): any{
return this.$store.state.copyright.allCprOwnerList
},
},
components: {
CprHeader: ()=>import('../component/CprHeader.vue'),
CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
CopyrightOwnerCard: ()=>import('@/view/NFT/Copyright/component/CopyrightOwnerCard.vue'),
},
mounted(){
this.getAllCprOwnerList()
},
methods: {
/**初始化著作权人列表 */
getAllCprOwnerList(){
this.$store.dispatch('copyright/getAllCprOwnerList')
},
/**删除著作权人 */
onDeleteCopyrightOwner(id: number){
this.$store.commit('copyright/onDeleteallCprOwnerList', id)
this.needDeleteId.push(id)
},
/**改变选择状态*/
changeSelected(id: number){
this.$store.commit('copyright/changeSelectedallCprOwnerList', id)
},
/**确认选择哪些版权人 */
comfirmCprOwner(){
this.$store.commit('copyright/comfirmCprOwner')
this.$router.push({path:'/Copyright/Step', query: {...this.$route.query}})
if(this.needDeleteId.length > 0) {
for(let id of this.needDeleteId){
this.$service.copyrightService.deleteCopyrightOwner(id)
}
}
},
/**取消选择实名的人 */
cancel(){
history.go(-1)
}
}
})
</script>
<style scoped lang='less'>
.cpr_step_page {
height: 100vh;
padding-bottom:150px;
background-color: #fff;
overflow-y: scroll;
.center_container {
padding: 0 16px;
}
.step_change_box {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
.left {
width: 48%;
background-color: #6377FF;
line-height: 40px;
color: #fff;
box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.4);
}
.right {
width: 48%;
background-color: #6377FF;
line-height: 40px;
color: #fff;
box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.4);
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightList/component/copyrightCard.vue 0 → 100644
View file @ 233a890b
<template>
<div>
<div class="copyright_card" @click="onClickCpyCard">
<div class="card_title" >
<div class="title_left">{{copyrightTitle}}</div>
<div class="title_right" :class="titleRightColor">{{copyrightState}}</div>
</div>
<div class="card_time" >{{copyrightData.updateDate}}</div>
<div class="card_footer">
<div class="footer_left">流水号 {{serialNum}}</div>
<div class="footer_right" @click.stop="showActionSheet=true">···</div>
</div>
</div>
<van-action-sheet v-model="showActionSheet" :actions="actions" cancel-text="取消" @select="onActionSelect" @cancel="showActionSheet=false" />
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
// interface CopyrightDataType {
// content: string,
// createDate: string,
// id: number,
// json: string,
// step: number,
// updateDate: string,
// userId: number,
// }
export default Vue.extend({
name:'',
props: {
copyrightData: {
default: ()=>{return {} as any},
required: true
}
},
data(){
return {
showActionSheet: false
}
},
computed: {
titleRightColor(): string {
switch(this.copyrightData.registerState){
case -1:
return 'blue';
case 0:
return 'blue';
case 2:
return 'green';
case 3:
return 'red';
case 4:
return 'green';
case 5:
return 'red';
}
return ''
},
copyrightState(): string{
switch(this.copyrightData.registerState){
case -1:
return '已撤回';
case 0:
return '待审核';
case 2:
return '已提交';
case 3:
return '已驳回';
case 4:
return '登记成功';
case 5:
return '审核失败';
}
return '草稿'
},
copyrightTitle(): string {
if(this.copyrightState == '草稿') {
return JSON.parse(this.copyrightData.content)[1].proofName
}else {
return this.copyrightData.opusName
}
},
serialNum(): string {
if(this.copyrightState == '草稿') {
return ''
}else {
return this.copyrightData.serialNum
}
},
actions(): any {
switch(this.copyrightData.registerState){
case -1:
return [{name:'编辑', value: 0}, {name:'删除', value: 1}];
case 0:
return [{name:'撤回', value: 0}];
case 2:
return [{name:'查看详情', value: 0}];
case 3:
return [{name:'查看详情', value: 0}];
case 4:
return [{name:'查看存证证书', value: 0}, {name:'查看版权证书', value: 1}, {name:'申请纸质证书', value: 2}];
case 5:
return [{name:'重新申请', value: 0}, {name:'删除', value: 1}];
}
return [{name:'编辑', value: 0}, {name:'删除', value: 2}]
}
},
methods: {
/**点击选择时 */
onActionSelect(selected: {name: string, value: number}){
this.$emit('onActionSelect', {id: this.copyrightData.id, selected, state: this.copyrightState})
this.showActionSheet = false
},
/**点击整个卡片时 */
onClickCpyCard(){
this.$emit('onClickCpyCard', {id: this.copyrightData.id, state: this.copyrightState})
}
}
})
</script>
<style scoped lang='less'>
.copyright_card {
padding: 13px;
box-shadow: 0px 2px 8px 0px #F5F5F5;
border-radius: 10px;
.card_title {
display: flex;
justify-content: space-between;
align-items: center;
.title_left {
color: #2B446C;
font-size: 16px;
}
.title_right {
color: #2B446C;
font-size: 12px;
}
.blue {
color: #6377FF;
}
.green {
color: #51AB8C;
}
.red {
color: #FF5454
}
}
.card_time {
color: #7388AB;
font-size: 12px;
margin-top: 10px;
}
.card_footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.footer_left {
color: #2B446C;
font-size: 12px;
}
.footer_right {
width: 30px;
height: 16px;
line-height: 16px;
text-align: center;
border: 1px solid #8899B3;
border-radius: 9px;
}
}
}
// 更改弹出层样式
.van-action-sheet__cancel, .van-action-sheet__item {
background-color: #fff;
color: #2B446C;
}
.van-action-sheet__item:active {
background-color: #F5F5F5;
}
.van-action-sheet__gap {
background-color: #2B446C;
height: 2px;
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightList/index.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Copyright/CopyrightRes/index.vue 0 → 100644
View file @ 233a890b
<template>
<div class="apply_res_page">
<CprHeader title="版权登记">
</CprHeader>
<div class="apply_success" v-if="resStatus == 'success'">
<img class="apply_res_img" src="@/assets/img/apply_success.png" alt="">
<div class="apply_success_tip">{{statusText.value || status}}</div>
<!-- <div class="apply_account">流水号：11111111111111</div> -->
<div class="apply_text">{{statusText.msg || text}}</div>
<div class="apply_after_btn" @click="goCheck">查看登记</div>
</div>
<div class="apply_fail" v-if="resStatus == 'fail'">
<img class="apply_res_img" src="@/assets/img/apply_fail.png" alt="">
<div class="apply_fail_tip">{{statusText.value || status}}</div>
<!-- <div class="apply_account">流水号：11111111111111</div> -->
<div class="apply_text">{{statusText.msg || text}}</div>
<div class="apply_after_btn" @click="reApply">重新提交</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
components: {
CprHeader: ()=>import('../component/CprHeader.vue'),
},
data(){
return {
id: this.$route.query.id,
resStatus: this.$route.query.res,
status: this.$route.query.state,
statusText: {} as {code: number, msg: string, value: string},
}
},
computed:{
text(): string{
switch(this.status){
case '待审核':
return '您的版权申请已提交，等待一幕影链初审';
case '已驳回':
return '';
case '已提交':
return '您的版权申请已提交湖北版权局，受理成功后将在15个工作日内完成登记';
case '登记成功':
return '恭喜您，您的版权申请登记成功';
case '登记失败':
return '';
default:
return ''
}
}
},
mounted(){
this.getApplyState(this.id as string)
},
methods: {
/**获取状态文字 */
async getApplyState(id:string){
const res = await this.$service.copyrightService.getApplyState(id)
if(res) this.statusText = res
},
/**查看申请记录 */
goCheck(){
this.$router.push({path:'/Copyright/Step', query: { editId: this.id, check: 'true'}})
this.$store.commit('copyright/changeCurrentStep', 5)
},
/**重新提交 */
reApply(){
this.$router.push({path:'/Copyright/Step', query: { editId: this.$route.query.id, reApply: 'true'}})
}
}
})
</script>
<style scoped lang='less'>
.apply_res_page {
height: 100vh;
background-color: #fff;
overflow-y: scroll;
padding: 0 16px 150px;
.apply_success, .apply_fail {
position: fixed;
top: 45%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
text-align: center;
.apply_res_img {
width: 70%;
margin: 0 auto;
}
.apply_success_tip {
margin-top: 15px;
color: #2B446C;
font-size: 14px;
}
.apply_fail_tip {
color: #F68585;
}
.apply_text {
margin-top: 15px;
color: #7388AB;
font-size: 14px;
}
.apply_after_btn {
margin-top: 15px;
color: #ffffff;
background-color: #6377FF;
width: 100%;
height: 40px;
line-height: 40px;
box-shadow: 0px 2px 6px 0px rgba(99, 119, 255, 0.35);
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightStep/component/StepFirstPage.vue 0 → 100644
View file @ 233a890b
<template>
<div>
<CprStepCell :key="traceChooseCell.labelText" :cellData="traceChooseCell" @onActionSelect="onActionSelect" :contentText='traceName'></CprStepCell>
<CprStepCell :key="uploadWorkCell.labelText" :cellData="uploadWorkCell" @fileListUpdata="fileListUpdata"></CprStepCell>
<FileCard class=" mt-3" v-for="item in pageData.fileList" :key="item.fileHash" :fileData="item" @deleteFile="deleteFile" @addFileUrl="addFileUrl" :limit="true"></FileCard>
<div class="tipText">
上传要求：<br/>
1、上传的作品必须包含您存证过的作品<br/>
2、单文件大小不超过200M，最多上传5个文件<br/>
3、支持文件格式，分别如下：<br/>
图片类：JPG、JPEG、GIF、BMP、PNG；<br/>
视频类：MP4、WMV；<br/>
音频类：MP3、WAV；<br/>
文件类: DOC、DOCX、XLS、XLSX、PPT、PPTX、PDF.
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
interface PageDataType {
trace: any;
fileList: any
}
export default Vue.extend({
name:'',
data(){
return {
traceChooseCell: {
labelText: '选择存证',
nessesary: true,
tipText: '一幕影链将会为您的存证进行版权登记。版权登记成功后，版权信息将会在一幕影链上进行增量存证，可溯源查询存证记录。',
placeHolder: '请选择存证',
inputType: 'choose',
actions:[]
},
uploadWorkCell: {
labelText: '上传作品',
nessesary: true,
tipText: '',
placeHolder: '请选择作品',
inputType: 'file',
fileListMaxCount: 5,
fileTypeArray: ['JPG','JPEG','GIF','BMP','PNG','MP4','WMV','MP3','WMV','MP3','WAV','DOC','DOCX','XLS','XLSX','PPT','PPTX','PDF']
},
}
},
mounted(){
this.getMyTrace()
},
computed: {
pageData(): PageDataType{
return this.$store.state.copyright.eachPageData[0]
},
traceName(): string{
return this.$store.state.copyright.eachPageData[0].trace.name
}
},
components:{
CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
FileCard: ()=>import('@/view/NFT/Copyright/component/FileCard.vue')
},
methods: {
/**获取我的存证 */
async getMyTrace(){
const traceList = await this.$service.copyrightService.getMyList()
if(traceList) {
this.traceChooseCell.actions = traceList
}
},
/**选择完存证后 */
onActionSelect(selected: any){
this.$store.commit('copyright/firstPageSelected', selected)
},
/**新增文件 */
fileListUpdata(fileData: {fileName: string, fileHash: string, type: string, file: File}){
this.$store.commit('copyright/updataFirstPageFileList', fileData)
},
/**删除文件 */
deleteFile(fileHash: string){
this.$store.commit('copyright/updataFirstPageFileList', fileHash)
},
/**上传完文件后 */
addFileUrl(payload: {fileHash: string, fileUrl: string}){
this.$store.commit('copyright/addUrlFirstPageFileList', payload)
}
}
})
</script>
<style scoped lang='less'>
.tipText {
margin-top: 20px;
color: #7388AB;
font-size: 12px;
line-height: 20px;
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightStep/component/StepFourthPage.vue 0 → 100644
View file @ 233a890b
<template>
<div>
<CprStepCell :cellData="copyrightOwner" @onAddPeople="onAddAuthor">
<CopyrightOwnerCard class="mt-2" v-for="copyrightOwner, index in copyrightOwnerList" :key="index" :xKey="index" :cprOwnerCard="copyrightOwner" @onDeleteCopyrightOwner="onDeleteCopyrightOwner"></CopyrightOwnerCard>
</CprStepCell>
<CprStepCell :cellData="author" @onAddPeople="onAddAuthor">
<AuthorCard class="mt-2" v-for="author, index in authorList" :key="index" :authorCard="author" :xkey="index" @onPeopleDataChange="onAuthorDataChange" @deleteAuthor="onDeleteAuthorData"></AuthorCard>
</CprStepCell>
<CprStepCell :cellData="rightSelect" @onSingleSelectChange="rightSelectTypeChange" :contentText="rightSelectType">
</CprStepCell>
<div class="right_list">
<div class="right_item" :class="{'right_item_selected': item.selected}" v-for="item in allRightList" :key="item.name" @click="changeRightSelected(item.name)">
{{item.name}}
<img class="selected_icon" src="@/assets/img/gouxuan.png" alt="">
</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
computed:{
authBelongWay(){
return this.$store.state.copyright.eachPageData[2].authBelongWay.value
},
copyrightOwnerList(){
return this.$store.state.copyright.eachPageData[3].copyrightOwnerList
},
authorList(){
return this.$store.state.copyright.eachPageData[3].authorList
},
rightList(){
return this.$store.state.copyright.eachPageData[3].rightList
},
rightSelectType(){
return this.$store.state.copyright.eachPageData[3].rightSelectType
},
},
data(){
return {
copyrightOwner: {
labelText: '著作权人',
nessesary: true,
tipText: '',
placeHolder: '添加著作权人',
inputType: 'addPeople',
contentText: '',
jumpPath: '/Copyright/AddCprOwner',
},
author: {
labelText: '作者',
nessesary: true,
tipText: '',
placeHolder: '新增作者',
inputType: 'addPeople',
contentText: '',
jumpPath: '',
},
rightSelect: {
labelText: '权利拥有情况',
nessesary: true,
tipText: '',
placeHolder: '',
inputType: 'singleSelect',
selectOption: [{value:0, text:'全部'}, {value:1, text:'部分'}]
},
allRightList: [
{name: '发表权', selected: false, value: 1},
{name: '署名权', selected: false, value: 2},
{name: '修改权', selected: false, value: 3},
{name: '保护作品完整权', selected: false, value: 4},
{name: '复制权', selected: false, value: 5},
{name: '发行权', selected: false, value: 6},
{name: '出租权', selected: false, value: 7},
{name: '展览权', selected: false, value: 8},
{name: '表演权', selected: false, value: 9},
{name: '放映权', selected: false, value: 10},
{name: '广播权', selected: false, value: 11},
{name: '信息网络传播权', selected: false, value: 12},
{name: '摄制权', selected: false, value: 13},
{name: '改编权', selected: false, value: 14},
{name: '翻译权', selected: false, value: 15},
{name: '汇编权', selected: false, value: 16},
{name: '其他', selected: false, value: 17},
]
}
},
components: {
CprStepCell: ()=>import('@/view/NFT/Copyright/component/CprStepCell.vue'),
CopyrightOwnerCard: ()=>import('@/view/NFT/Copyright/component/CopyrightOwnerCard.vue'),
AuthorCard: ()=>import('@/view/NFT/Copyright/component/AuthorCard.vue')
},
async mounted(){
/**初始化制作权人列表 */
await this.initCopyRightList()
/**初始化权利选择列表 */
this.initRightList()
},
methods: {
/**著作权人相关 */
/**这里是为了以防，当两个草稿同时使用一个著作权人，如果其中删了一个，其他的草稿也会收到影响，需要初始的时候先用草稿的著作权人与全部著作权人比对，如果已经删了，则不显示 */
async initCopyRightList(){
await this.$store.dispatch('copyright/getAllCprOwnerList')
this.$store.commit('copyright/comfirmCprOwner')
},
onDeleteCopyrightOwner(id: number){
this.$store.commit('copyright/onDeleteCopyrightOwner', id)
},
/**作者相关 */
/**添加作者 */
onAddAuthor(){
if(this.authBelongWay == 0 && this.authorList.length >= 1) {
this.$toast('个人作品只有一个作者')
return
}
this.$store.commit('copyright/onAddAuthor', {
id: Math.ceil(Math.random()*10000),
name: '',
aliasType: {},
alias: ''
})
},
/**改变作者内容 */
onAuthorDataChange(payload: {id: number, type: string, name?: string, alias?: string, aliasType?: any}){
this.$store.commit('copyright/onAuthorDataChange', payload)
},
/**删除作者 */
onDeleteAuthorData(id: number){
this.$store.commit('copyright/onDeleteAuthorData', id)
},
/**权利拥有情况 */
rightSelectTypeChange(selectedType: number){
this.$store.commit('copyright/changeRightSelectType', selectedType)
if(this.rightSelectType == 0) {
for(let item of this.allRightList) {
item.selected = true
}
this.$store.commit('copyright/changeRightList', this.allRightList)
}
},
/**先根据store里面的list处理allRightList, store里的list只有已经选择的权利 */
initRightList(){
for(let item of this.allRightList){//组件的list
for(let i of this.rightList) {//store的list
if(item.name == i.name) {
item.selected = true
}
}
}
},
/**改变权利选择情况 */
changeRightSelected(name: string){
if(this.rightSelectType == 0) return
for(let item of this.allRightList) {
if(item.name == name) {
item.selected = !item.selected
}
}
const resList = this.allRightList.filter((item: {name: string, selected: boolean})=>{
return item.selected == true
})
this.$store.commit('copyright/changeRightList', resList)
}
}
})
</script>
<style scoped lang='less'>
.right_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.right_item {
height: 30px;
line-height: 30px;
font-size: 12px;
width: 32%;
text-align: center;
margin-top: 10px;
border: 1px solid #7388AB;
color: #7388AB;
.selected_icon {
display: none;
}
}
.right_item_selected {
position: relative;
border: 1px solid #6377FF;
.selected_icon {
display: block;
position: absolute;
right: 0;
top: 0;
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightStep/component/StepThirdPage.vue 0 → 100644
View file @ 233a890b
<template>
<div>
<CprStepCell
:key="authGetWay.labelText"
:cellData="authGetWay"
@onActionSelect="(value)=>onDataChange(value, 'authGetWay')"
:contentText="authGetWayText"></CprStepCell>
<div :key="uploadAuthCer.labelText">
<CprStepCell :cellData="uploadAuthCer" @fileListUpdata="onUploadAuthCer" >
<div>
<span class="dowloadLink" @click="downloadFile('0')">《权利获取方式证明材料附件》</span>点击下载后，加盖单位公章，法人签字后上传。图片仅支持jpg、png、jpeg、pdf、word格式的签章文件。
</div>
</CprStepCell>
<FileCard class=" mt-3" :key="fileData.fileHash" v-for="fileData in pageData.uploadAuthCer" :fileData="fileData" @deleteFile="onUploadAuthCer" @addFileUrl="onAddAuthCerFileUrl" :limit="false"></FileCard>
</div>
<CprStepCell
:key="authBelongWay.labelText"
:cellData="authBelongWay"
@onActionSelect="(value)=>onDataChange(value, 'authBelongWay')"
:contentText="authBelongWayText"
></CprStepCell>
<div :key="authBelongCer.labelText" v-if="[1,2,3,4].indexOf(authBelongWayValue) != -1">
<CprStepCell :cellData="authBelongCer" @fileListUpdata="onAuthBelongCer" >
<div v-if="authBelongWayValue == 1">
<div>请上传jpg、png、jpeg、pdf、word、docx格式的权利归属证明材料，需亲笔签名或盖章确认</div>
<div class="dowloadLink" @click="downloadFile('2')">《合作作品权属协议书》</div>
</div>
<div v-if="authBelongWayValue == 2">
<div>请上传jpg、png、jpeg、pdf、word、docx格式的权利归属证明材料，需亲笔签名或盖章确认</div>
<div class="dowloadLink" @click="downloadFile('3')">《著作权权属声明》</div>
</div>
<div v-if="authBelongWayValue == 3">
<div>请上传jpg、png、jpeg、pdf、word、docx格式的权利归属证明材料，需亲笔签名或盖章确认</div>
<div class="dowloadLink" @click="downloadFile('4')">《职务作品权属约定》</div>
</div>
<div v-if="authBelongWayValue == 4">
<div>请上传jpg、png、jpeg、pdf、word、docx格式的权利归属证明材料，需亲笔签名或盖章确认</div>
<div class="dowloadLink" @click="downloadFile('5', 0)">《委托创作协议书附件（甲方享有全部权利）》</div>
<div class="dowloadLink" @click="downloadFile('5', 1)">《委托创作协议书附件（作者保留署名权）》</div>
</div>
</CprStepCell>
<FileCard class=" mt-3" :key="fileData.fileHash" v-for="fileData in pageData.authBelongCer" :fileData="fileData" @deleteFile="onAuthBelongCer" @addFileUrl="onAddAuthBelongCerFileUrl" :limit="false"></FileCard>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
import CprStepCell from '@/view/NFT/Copyright/component/CprStepCell.vue'
import FileCard from '@/view/NFT/Copyright/component/FileCard.vue'
/**自定义方法*/
interface FileData {
fileName: string;
fileHash: string;
fileUrl: string;
type: string;
file: File;
}
interface PageDataType {
authGetWay: unknown;
uploadAuthCer: FileData[];
authBelongWay: unknown;
authBelongCer: FileData[];
}
export default Vue.extend({
name:'',
data(){
return {
authGetWay: {
labelText: '权利取得方式',
nessesary: true,
tipText:
`原始：是指根据法律规定，最初取得著作权或不依赖于原所有人的意志而取得著作权;
继承：包括继承遗产，是指继承人按照法律的直接规定或者合法有效遗嘱的指定，取得被继承人死亡时遗留的个人合法著作权的财产权；
承受：指享有原著作权的企业被合并或分立，由合并或分立后其他企业享有著作权情况;
转让：指著作权人将著作权中的全部或部分财产权有偿或无偿地移交给他人所有的法律行为;
其他：因其他合法原因取得著作权的
`,
placeHolder: '请选择权利取得方式',
inputType: 'choose',
actions:[{name:'原始', value: 0}, {name:'继承', value: 1}, {name:'承受', value: 2}, {name:'其他', value: 3}]
},
uploadAuthCer: {
labelText: '权利取得证明',
nessesary: true,
tipText: '',
placeHolder: '请上传《权利取得方式证明材料》',
inputType: 'file',
fileListMaxCount: 1,
fileTypeArray: ['JPG','JPEG','PNG','PDF','WORD','DOCX'],
},
authBelongWay: {
labelText: '权利归属方式',
nessesary: true,
tipText:
`个人作品：指自然人在没有他人参与的情况下，独立创作完成的作品；
合作作品：指两人以上合作创作作品；
法人作品：指由法人或者其他组织主持，代表法人或者其他组织意志创作，并由法人或者其他组织承担责任的作品；
职务作品：指公民为完成法人或者其他组织工作任务所创作的作品；
委托作品：指委托人委托其他人创作的作品。
`,
placeHolder: '请选择归属方式',
inputType: 'choose',
actions:[{name:'个人作品', value: 0}, {name:'合作作品', value: 1}, {name:'法人作品', value: 2}, {name:'职务作品', value: 3}, {name:'委托作品', value: 4}]
},
authBelongCer: {
labelText: '权利归属证明',
nessesary: true,
tipText: '',
placeHolder: '请上传《合作作品权属协议书》',
inputType: 'file',
fileListMaxCount: 1,
fileTypeArray: ['JPG','JPEG','PNG','PDF','WORD','DOCX'],
},
}
},
computed: {
authGetWayText(){
return this.$store.state.copyright.eachPageData[2].authGetWay.name
},
authBelongWayValue(){
return this.$store.state.copyright.eachPageData[2].authBelongWay.value
},
authBelongWayText(){
return this.$store.state.copyright.eachPageData[2].authBelongWay.name
},
pageData(): PageDataType{
return this.$store.state.copyright.eachPageData[2]
}
},
components: {
CprStepCell ,
FileCard
},
methods: {
onDataChange(value: any, type: string){
if(type == 'authBelongWay') {
switch(value.value){
case 1:
this.authBelongCer.placeHolder = '请上传《合作作品权属协议书》'
break;
case 2:
this.authBelongCer.placeHolder = '请上传《著作权权属声明》'
break;
case 3:
this.authBelongCer.placeHolder = '请上传《职务作品权属约定》'
break;
case 4:
this.authBelongCer.placeHolder = '请上传《委托创作协议书附件》'
break;
}
}
this.$store.commit('copyright/updataThirdPageData', {type, value})
},
/**添加或删除权利获取证明 */
onUploadAuthCer(value: FileData | string){
this.$store.commit('copyright/updataThirdPageData', {type: 'uploadAuthCer', value})
},
/**添加权利获取证明文件路径 */
onAddAuthCerFileUrl(value: {fileHash: string, fileUrl: string}){
this.$store.commit('copyright/onAddCerFileUrl', {type: 'uploadAuthCer', value})
},
/**添加或删除权利归属证明 */
onAuthBelongCer(value: FileData | string){
this.$store.commit('copyright/updataThirdPageData', {type: 'authBelongCer', value})
},
/**添加权利归属证明文件路径 */
onAddAuthBelongCerFileUrl(value: {fileHash: string, fileUrl: string}){
this.$store.commit('copyright/onAddCerFileUrl', {type: 'authBelongCer', value})
},
/**下载文件 */
async downloadFile(type: string, count:number = 0){
this.$toast('开始下载文件')
const res = await this.$service.copyrightService.getTemplateUrlList(type) as any
if(res.length >= 1) {
let link = document.createElement('a')
link.download = res[count as number].fileName
link.style.display = 'none'
link.href = res[count as number].fileUrl
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
document.body.removeChild(link)
this.$toast('下载文件成功')
}
}
}
})
</script>
<style scoped lang='less'>
.dowloadLink {
color: #6377FF
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightStep/index.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Copyright/CopyrightStep/mapState.ts 0 → 100644
View file @ 233a890b
export const mapDraft = (state: any) => {
return {
/**第一页 */
nftHash: state[0].trace.nftHash,
nftName: state[0].trace.name,
files: state[0].fileList.map((item: {fileName: string, type: string, fileUrl: string, fileHash: string, fileSize:number})=>{
return {
fileHash: item.fileHash,
fileName: item.fileName,
fileSuffix: item.type,
fileUrl: item.fileUrl,
fileSize: item.fileSize
}
}),
/**第二页 */
firstPublishCity: state[1].proofPublishPlace[1]? state[1].proofPublishPlace[1].name : '',
firstPublishDate: state[1].proofPublishDate,
firstPublishProvince: state[1].proofPublishPlace[0]? state[1].proofPublishPlace[0].name : '',
opusCategoryId: state[1].proofType.value,
opusCompleteCity: state[1].proofFinishPlace[1]? state[1].proofFinishPlace[1].name : '',
opusCompleteDate: state[1].proofFinishDate,
opusCompleteProvince: state[1].proofFinishPlace[0]? state[1].proofFinishPlace[0].name : '',
opusName: state[1].proofName,
opusProperty: state[1].proofFeature.name,
contentSynopsis: state[1].proofDesc,
createProcess: state[1].proofCreateProgress,
publishState: state[1].proofPublishStatus,
/**第三页 */
authorityAcquireMode: state[2].authGetWay.name || '',
authorityAcquireProve: state[2].uploadAuthCer[0]? state[2].uploadAuthCer[0].fileUrl : '',
authorityAscriptionMode: state[2].authBelongWay.name || '',
authorityAscriptionProve: state[2].authBelongCer[0]? state[2].authBelongCer[0].fileUrl : '',
/**第四页 */
authors: state[3].authorList.map((item:{id: number, name: string, aliasType: {name: string}, alias: string})=>{
return {
name: item.name,
sign: item.alias,
signType: item.aliasType.name
}
}),
authorityIds: state[3].rightList.map((item: {name: string, selected: boolean, value: number})=>{
return item.value
}),
ownerIds: state[3].copyrightOwnerList.map((item: any)=>{
return item.id
}),
content:'',
}
}
/**这个是之前已经保存过数据，再次修改时，有些数据如果没修改，则传[] */
export const mapFilterDraft = (state: any, draft: any) => {
return {
/**第一页 */
nftHash: state[0].trace.nftHash,
nftName: state[0].trace.name,
files: JSON.stringify(state[0].fileList) != JSON.stringify(draft[0].fileList)? state[0].fileList.map((item: {fileName: string, type: string, fileUrl: string, fileHash: string, fileSize:number})=>{
return {
fileHash: item.fileHash,
fileName: item.fileName,
fileSuffix: item.type,
fileUrl: item.fileUrl,
fileSize: item.fileSize
}
}) : [],
/**第二页 */
firstPublishCity: state[1].proofPublishPlace[1]? state[1].proofPublishPlace[1].name : '',
firstPublishDate: state[1].proofPublishDate,
firstPublishProvince: state[1].proofPublishPlace[0]? state[1].proofPublishPlace[0].name : '',
opusCategoryId: state[1].proofType.value,
opusCompleteCity: state[1].proofFinishPlace[1]? state[1].proofFinishPlace[1].name : '',
opusCompleteDate: state[1].proofFinishDate,
opusCompleteProvince: state[1].proofFinishPlace[0]? state[1].proofFinishPlace[0].name : '',
opusName: state[1].proofName,
opusProperty: state[1].proofFeature.name,
contentSynopsis: state[1].proofDesc,
createProcess: state[1].proofCreateProgress,
publishState: state[1].proofPublishStatus,
/**第三页 */
authorityAcquireMode: state[2].authGetWay.name || '',
authorityAcquireProve: state[2].uploadAuthCer[0]? state[2].uploadAuthCer[0].fileUrl : '',
authorityAscriptionMode: state[2].authBelongWay.name || '',
authorityAscriptionProve: state[2].authBelongCer[0]? state[2].authBelongCer[0].fileUrl : '',
/**第四页 */
authors: JSON.stringify(state[3].authorList) != JSON.stringify(draft[3].authorList)? state[3].authorList.map((item:{id: number, name: string, aliasType: {name: string}, alias: string})=>{
return {
name: item.name,
sign: item.alias,
signType: item.aliasType.name
}
}):[],
authorityIds: JSON.stringify(state[3].rightList) != JSON.stringify(draft[3].rightList)? state[3].rightList.map((item: {name: string, selected: boolean, value: number})=>{
return item.value
}):[],
ownerIds: JSON.stringify(state[3].copyrightOwnerList) != JSON.stringify(draft[3].copyrightOwnerList)? state[3].copyrightOwnerList.map((item: any)=>{
return item.id
}):[],
content: '',
id: '',
}
}
\ No newline at end of file
src/view/NFT/Copyright/CopyrightVerified/component/imgUpload.vue 0 → 100644
View file @ 233a890b
<template>
<div class="img_item">
<div class="img_tip">{{imgUploadData.title}}</div>
<div class="img_box">
<img v-if="uploadStatus == eStatus.init" class="bg_img" :src="imgUploadData.bgImgUrl" alt="">
<img v-if="uploadStatus == eStatus.success" class="bg_img" :src="uploadImgUrl" onerror="this.src='/img/attorney.png'" alt="">
<label :for="imgUploadData.title">
<img v-if="uploadStatus == eStatus.init" class="action_img" src="@/assets/img/camera.png" alt="">
</label>
<div class="res_box" v-if="uploadStatus == eStatus.success">
<div class="toast"></div>
<div class="action_img">
<img src="@/assets/img/camera_success.png" alt="">
<div>上传成功</div>
</div>
<label :for="imgUploadData.title">
<div class="reup_btn">重新上传</div>
</label>
</div>
<div class="res_box" v-if="uploadStatus == eStatus.fail">
<div class="toast"></div>
<div class="action_img">
<img src="@/assets/img/camera_fail.png" alt="">
<div>上传失败</div>
</div>
<label :for="imgUploadData.title">
<div class="reup_btn">重新上传</div>
</label>
</div>
</div>
<input :id="imgUploadData.title" type="file" hidden @change="onUpload">
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
enum eStatus {
init,
success,
fail,
}
interface ImgUploadDataType {
title: string,
bgImgUrl: string
}
export default Vue.extend({
name:'',
props: {
imgUploadData: {
default: ()=>{return {} as ImgUploadDataType},
required: true
},
xKey: {
required: true,
type: Number
}
},
data(){
return {
imgData: '',
uploadStatus: eStatus.init,
uploadImgUrl: '',
eStatus
}
},
methods: {
async onUpload(e: {target: {files: File[], value: any}}){
const fileUrl = await this.$service.nftService.fileUpload(e.target.files[0])
if(fileUrl){
this.uploadStatus = eStatus.success
this.uploadImgUrl = window.URL.createObjectURL(e.target.files[0])
console.log( this.uploadImgUrl)
this.$emit('onUpload', {imgName: e.target.files[0].name, imgUrl: fileUrl, title: this.imgUploadData.title})
}else {
this.uploadStatus = eStatus.fail
}
}
}
})
</script>
<style scoped lang='less'>
.img_item {
margin-top: 21px;
color: #333649;
.img_tip {}
.img_box {
position: relative;
width: 258px;
height: 156px;
border-radius: 10px;
margin: 10px auto 0;
.bg_img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.action_img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50% );
}
.res_box {
color: #fff;
.toast {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000000;
border-radius: 10px;
opacity: 0.3;
}
.reup_btn {
width: 70px;
height: 22px;
background-color: #7181EF;
line-height: 22px;
text-align: center;
position: absolute;
top: 10px;
right: 10px;
border-radius: 11px;
font-size: 12px;
}
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/CopyrightVerified/index.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Copyright/Guarantee/index.vue 0 → 100644
View file @ 233a890b
<template>
<div class="guarantee_page">
<CprHeader title="权利保证书"></CprHeader>
<div class="title">权利保证书</div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;本人（单位）保证所申请登记的如下作品（制品）的权利归本人（单位）所有，保证提交的文件真实、合法。如有不实，本人愿承担一切法律责任。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;说明：凡申请作品自愿登记者，均须签署如上权利保证书。如系剽窃、抄袭他人作品进行登记以及提交的文件不真实、不合法，除应承担相应的法律责任外，著作权行政管理部门还将视情况给予行政处罚。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;本人（单位）保证所申请登记的如下作品（制品）的权利归本人（单位）所有，保证提交的文件真实、合法。如有不实，本人愿承担一切法律责任。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;说明：凡申请作品自愿登记者，均须签署如上权利保证书。如系剽窃、抄袭他人作品进行登记以及提交的文件不真实、不合法，除应承担相应的法律责任外，著作权行政管理部门还将视情况给予行政处罚。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;本人（单位）保证所申请登记的如下作品（制品）的权利归本人（单位）所有，保证提交的文件真实、合法。如有不实，本人愿承担一切法律责任。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;说明：凡申请作品自愿登记者，均须签署如上权利保证书。如系剽窃、抄袭他人作品进行登记以及提交的文件不真实、不合法，除应承担相应的法律责任外，著作权行政管理部门还将视情况给予行政处罚。</p>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
components: {
CprHeader: ()=>import('../component/CprHeader.vue'),
}
})
</script>
<style scoped lang='less'>
.guarantee_page {
height: 100vh;
background-color: #fff;
padding: 0 16px 150px;
overflow-y: scroll;
color: #2B446C;
.title {
margin-top: 20px;
text-align: center;
}
p {
margin-top: 10px;
font-size: 14px;
line-height: 28px;
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/PaperCer/index.vue 0 → 100644
View file @ 233a890b
<template>
<div class="paper_cer_page">
<CprHeader title="申请纸质证书"></CprHeader>
<div class="center_box" >
<img src="@/assets/img/paper_img.png" alt="">
<div class="text_tip">
《作品登记证书（纸质版）》当前只支持湖北版权局现场登记领取，线上申请暂未开放。
</div>
<div class="text_address">
<Icon class="icon_img" name="icon-fuwudiqiu" size="16px" color="#333"></Icon>
<div>
<div class="title">领取地址</div>
<div class="text_item">湖北省武昌区公正路9号 湖北省广播电视监测大楼一楼版权服务大厅 。</div>
</div>
</div>
<div class="text_phone">
<Icon class="icon_img" name="icon-24gf-telephone2" size="16px" color="#333"></Icon>
<div>
<div class="title">咨询电话</div>
<div class="text_item">027-87329653（版权登记）</div>
<div class="text_item">87329478（法律维权）</div>
</div>
</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
components: {
Icon: ()=>import('@/components/common/Icon.vue'),
CprHeader: ()=>import('../component/CprHeader.vue'),
}
})
</script>
<style scoped lang='less'>
.paper_cer_page {
height: 100vh;
background-color: #fff;
padding: 0 16px 150px;
overflow-y: scroll;
color: #2B446C;
font-size: 14px;
.center_box {
width: 70%;
height: 100px;
margin: 100px auto 0;
img {
width: 30%;
margin: 0 auto;
}
.text_tip {
margin-top: 50px;
}
.text_address {
margin-top: 20px;
display: flex;
.icon_img {
margin-right: 10px;
}
.title {
font-size: 12px;
}
}
.text_phone {
margin-top: 20px;
display: flex;
.icon_img {
margin-right: 10px;
}
.title {
font-size: 12px;
}
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/component/AuthorCard.vue 0 → 100644
View file @ 233a890b
<template>
<div>
<div class="author_title" >
<div>作者{{xkey+1}}</div>
<div @click="deleteAuthor">
<Icon name="icon-shanchu" size="14px" color="#ffffff" ></Icon>
</div>
</div>
<div class="author_name">
<div class="author_name_label">作者名称</div>
<div class="author_name_value">
<input type="text" placeholder="请输入作者名称" :value="authorCard.name" @change="onNameChange">
</div>
</div>
<div class="author_name_type">
<div class="name_type_label">署名</div>
<div class="name_type_value" @click="showActionSheet=true">
<div>{{authorCard.aliasType.name || ''}}</div>
<Icon name="icon-xiayibu" color="#A7B5CD" size="20px"></Icon>
</div>
</div>
<div class="author_name">
<div class="author_name_label">作者名称</div>
<div class="author_name_value">
<input type="text" placeholder="请输入作者署名" :value="authorCard.alias" @change="onAliasChange">
</div>
</div>
<van-action-sheet v-model="showActionSheet" :actions="actions" cancel-text="取消" @select="onSelect" @cancel="showActionSheet=false" />
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
import Icon from "@/components/common/Icon.vue"
/**自定义方法*/
interface AuthorCardType {
id: number;
name?: string;
aliasType?: any;
alias?: string;
}
export default Vue.extend({
name:'',
props: {
authorCard: {
default: ()=>{return {} as AuthorCardType }
},
xkey: {
type: Number
}
},
data(){
return {
actions: [{name: '本名'},{name:'别名'},{name:'匿名'}],
showActionSheet: false,
aliasTypeSelected: {},
name:'',
alias:''
}
},
mounted(){
console.log(this.xkey)
},
components: {
Icon
},
methods: {
/**名称改变 */
onNameChange(e: { target: HTMLInputElement }){
this.name = e.target.value
this.$emit('onPeopleDataChange', {
id: this.authorCard.id,
name: this.name,
type: 'name',
})
},
/**类型选择 */
onSelect(selected?: any){
this.aliasTypeSelected = selected
this.showActionSheet = false
this.$emit('onPeopleDataChange', {
id: this.authorCard.id,
aliasType: this.aliasTypeSelected,
type: 'aliasType',
})
},
/**别名改变 */
onAliasChange(e: { target: HTMLInputElement }){
this.alias = e.target.value
this.$emit('onPeopleDataChange', {
id: this.authorCard.id,
alias: this.alias,
type: 'alias',
})
},
/**删除作者 */
deleteAuthor(){
this.$emit('deleteAuthor', this.authorCard.id)
}
}
})
</script>
<style scoped lang='less'>
.author_title {
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
height: 23px;
font-size: 12px;
color: #fff;
background-color: #6377FF;
border-radius: 10px 10px 0px 0px;
}
.author_name {
border: 1px solid #F5F5F5;
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
color: #7388AB;
.author_name_label {
font-size: 12px;
}
.author_name_value {
font-size: 14px;
input {
text-align: right;
}
}
}
.author_name_type {
padding: 0px 10px;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
border: 1px solid #F5F5F5;
color: #7388AB;
.name_type_value {
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
// 更改弹出层样式
.van-action-sheet__cancel, .van-action-sheet__item {
background-color: #fff;
color: #2B446C;
}
.van-action-sheet__item:active {
background-color: #F5F5F5;
}
.van-action-sheet__gap {
background-color: #2B446C;
height: 2px;
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/component/CopyrightOwnerCard.vue 0 → 100644
View file @ 233a890b
<template>
<div class="cpr_owner_card">
<div class="cpr_owner_select" v-if="showSelect" @click="changeSelected">
<div class="cpr_owner_noselect" v-if="!cprOwnerCard.selected"></div>
<div class="cpr_owner_selected" v-else>
<Icon name="icon-gou" size="17px" color="#F68585"></Icon>
</div>
</div>
<div class="cpr_owner_content">
<div class="cpr_owner_title">
<div>著作权人{{xKey+1}}</div>
<div @click="deleteCprOwner">
<Icon name="icon-shanchu" size="14px" color="#ffffff"></Icon>
</div>
</div>
<div class="cpr_owner_name">
<div class="cpr_name_box">
<div class="name">{{cprOwnerCard.owner}}</div>
<div class="identity">{{cprOwnerCard.type == 0? '自然人' : '法人'}}</div>
</div>
<div class="identity_type">{{idType}}</div>
</div>
<div class="cpr_owner_info">
<div>{{cprOwnerCard.idNumber}}</div>
</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
interface CprOwnerCard {
backPhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
certificatesPhoto: "",
city: "杭州市",
effectiveEndDate: "2018-12-10",
effectiveStartDate: "1015-12-10",
entrustProve: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
idNumber: "420921193009090123",
idType: 0,
isEffective: 0,
owner: "金庸",
personalPhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
positivePhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
province: "浙江省",
type: 0,
selected: boolean,
id: number
}
export default Vue.extend({
name:'',
props: {
cprOwnerCard: {
default: ()=>{return {} as CprOwnerCard}
},
showSelect: {
default: false,
type: Boolean
},
xKey: {
required: true,
type: Number
}
},
computed: {
idType(): string{
switch(this.cprOwnerCard.idType.toString()){
case '0':
return '身份证';
case '1':
return '营业执照';
case '2':
return '企业法人营业执照';
case '3':
return '组织机构代码证书';
case '4':
return '事业单位法人证书';
case '5':
return '社团法人证书';
case '6':
return '统一社会信用代码';
case '7':
return '其他有效证件';
}
return ''
}
},
components: {
Icon: ()=>import('@/components/common/Icon.vue')
},
methods: {
changeSelected(){
this.$emit('changeSelected', this.cprOwnerCard.id)
},
deleteCprOwner(){
this.$emit('onDeleteCopyrightOwner', this.cprOwnerCard.id)
}
}
})
</script>
<style scoped lang='less'>
.cpr_owner_card {
display: flex;
align-items: center;
.cpr_owner_select {
margin-right: 8px;
.cpr_owner_noselect {
height: 17px;
width: 17px;
border-radius: 50%;;
border: 2px solid #7388AB;
}
}
.cpr_owner_content {
flex: 1;
.cpr_owner_title {
height: 23px;
background: #6377FF;
border-radius: 10px 10px 0px 0px;
padding: 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 12px;
line-height: 23px;
}
.cpr_owner_name {
padding: 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #F5F5F5;
.cpr_name_box {
height: 40px;
display: flex;
align-items: center;
.name {
color: #2B446C;
font-size: 12px;
margin-right: 10px;
}
.identity {
width: 48px;
color: #6377FF;
border: 1px solid #6377FF;
border-radius: 5px;
text-align: center;
}
}
}
.cpr_owner_info {
height: 36px;
border: 1px solid #F5F5F5;
display: flex;
padding: 0 12px;
align-items: center;
justify-content: space-between;
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/component/CprHeader.vue 0 → 100644
View file @ 233a890b
<template>
<div class="cpr_header">
<div class='left'>
<div @click="goback()">
<app-icon name='icon-fanhui' size='18px' color='#2B446C'></app-icon>
</div>
</div>
<div class='center'>{{title}}</div>
<div class='right'>
<slot></slot>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
export default Vue.extend({
name:'',
props: {
backPath: {
type: String
},
title:{
required: true,
type: String
}
},
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
methods:{
goback(){
if(this.backPath) {
}else {
history.go(-1)
}
this.$emit('onBack')
}
}
})
</script>
<style scoped lang='less'>
.cpr_header {
display: flex;
height: 40px;
align-items: center;
justify-content: space-between;
color: #2B446C;
.center {
font-size: 18px;
}
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/component/CprStep.vue 0 → 100644
View file @ 233a890b
<template>
<div class="steps ">
<div class="step-item " v-for="(i,index) in data" :key="index" :class="currentStep < index+1?'step-item':' step-item-actived'">
<div class="cycle" :class="currentStep < index+1?'bg-font-gray bg-opacity-20':' bg-font-blue bg-opacity-80'">
<div class="center-child text-font-gray" v-if="currentStep < index+1">{{index+1}}</div>
<div class="center-child text-white" v-else-if="currentStep === index+1">{{index+1}}</div>
<div class="center-child " v-else>
<app-icon name='icon-comfirm'></app-icon>
</div>
</div>
<div class='text-xs mt-2' :class="currentStep < index+1?'text-font-gray bg-opacity-20':' text-font-blue bg-opacity-80'">
{{i.text}}
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
data:{
type:Array,
required:true
},
currentStep:{
type:Number,
required:true
}
},
data(){
return{
status:['finished','onprocess','undo']
}
},
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
watch:{
currentStep(newV){
console.log(newV,this.data.length);
if(newV<=this.data.length){
this.$emit('stepOnChange',this.data[this.currentStep-1] )
}else{
this.$emit('stepOnFinished',true)
}
}
},
computed:{
}
});
</script>
<style lang="less" scoped>
.steps{
display: flex;
justify-content: space-around;
.step-item {
position: relative;
width: 25%;
text-align: center;
.cycle {
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;;
margin: 0 auto;
.center-child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
}
}
}
.step-item:last-of-type {
}
.step-item:after{
content:'';
width: 35px;
height:2px;
border-radius: 3px;
background-color:#8899B3;
position: absolute;
top: 27%;
right: 0;
z-index: 1;
transform: translateY(-50%);
}
.step-item:before{
content:'';
width: 35px;
height:2px;
border-radius: 3px;
background-color:#8899B3;
position: absolute;
top: 27%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.step-item-actived::before{
content:'';
width: 35px;
height:2px;
border-radius: 3px;
background-color:#0078FF;
position: absolute;
top: 27%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.step-item-actived::after{
content:'';
width: 35px;
height:2px;
border-radius: 3px;
background-color:#0078FF;
position: absolute;
top: 27%;
right: 0;
z-index: 1;
transform: translateY(-50%);
}
}
.step-item:last-of-type::after{
content:'';
width: 0px;
height:0px;
}
.step-item:first-of-type::before{
content:'';
width: 0px;
height:0px;
}
</style>
\ No newline at end of file
src/view/NFT/Copyright/component/CprStepCell.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Copyright/component/FileCard.vue 0 → 100644
View file @ 233a890b
<template>
<div class="file_card">
<div class="left">
<div class="upload_status upload_loading" v-if="uploadProgress <= 100 && uploadProgress >= 0 && !fileUrl">正在上传... {{uploadProgress}}%</div>
<div class="upload_status upload_fail" v-if="uploadProgress == -1">上传失败 <span class="reupload" @click="uploadFile(fileData.file)">重新上传</span></div>
<div class="upload_status upload_success" v-if=" fileUrl">上传成功</div>
<div class="file_name">{{fileData.fileName}}</div>
<div class="file_hash">文件哈希: {{fileData.fileHash}}</div>
</div>
<div class="right" @click="deleteFile()">
<Icon name="icon-shanchu" size="18px" color="#2B446C"></Icon>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
interface FileData {
fileName: string;
fileHash: string;
file: File;
fileUrl: string;
}
export default Vue.extend({
name:'',
data(){
return {
uploadProgress: 0,
fileUrl: ''
}
},
props: {
fileData: {
default: {} as FileData,
required: true,
},
limit: {
required: true,
type: Boolean
}
},
components: {
Icon: ()=>import('@/components/common/Icon.vue')
},
async mounted(){
/**挂载完, 如果没有文件地址就上传文件 */
if(!this.fileData.fileUrl) {
await this.uploadFile(this.fileData.file)
}else {
this.uploadProgress = 100
this.fileUrl = this.fileData.fileUrl
}
},
methods: {
/**上传文件,上传了之后给文件对象添加一个文件地址 */
async uploadFile(file: File){
/**两个上传接口,一个是做了限制，一个没有限制 */
if(this.limit) {
this.fileUrl = await this.$service.copyrightService.uploadCopyrightFile(file, this.updateUploadStatus)
}else {
this.fileUrl = await this.$service.nftService.fileUpload(file, this.updateUploadStatus)
}
if(this.fileUrl) {
this.$emit('addFileUrl', {fileHash: this.fileData.fileHash, fileUrl: this.fileUrl})
}else {
this.uploadProgress = -1
}
},
/**删除文件 */
deleteFile(){
this.$emit('deleteFile', this.fileData.fileHash)
this.$service.copyrightService.deleteFile(this.fileUrl)
},
/**定义修改上传进度的参数 */
updateUploadStatus(progress: any){
this.uploadProgress = Number((100*(progress.loaded)/(progress.total)).toFixed(2))
}
}
})
</script>
<style scoped lang='less'>
.file_card {
padding: 10px;
display: flex;
border-radius: 10px;
border: 1px solid #F5F5F5;
.left {
flex: 1;
.upload_status {
font-size: 12px;
line-height: 25px;
}
.upload_loading {
color: #6377FF
}
.upload_fail {
color: #F68585;
.reupload {
color: #6377FF;
}
}
.upload_success {
color: #51AB8C
}
.file_name {
font-size: 14px;
color: #2B446C;
line-height: 25px;
}
.file_hash {
font-size: 12px;
color: #7388AB;
line-height: 25px;
}
}
.right {
}
}
</style>
\ No newline at end of file
src/view/NFT/Create/form.vue
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Create/upload.vue
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Create/upload_old.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Detail/component/textCell.vue 0 → 100644
View file @ 233a890b
<template>
<div class="info_content_item">
<div class="content_item_key">{{label}}</div>
<div class="content_item_value">
<div class="text">{{isHash? formatHash : value}}</div>
<div class="copyBtn" @click="copyHandler(value)">
<Icon name="icon-fuzhi" color="#7388AB" v-if="copy"></Icon>
</div>
</div>
</div>
</template>
<script lang='ts'>
import Vue from 'vue'
import Icon from "@/components/common/Icon.vue"
import ClipboardJS from "clipboard";
export default Vue.extend({
name:'',
props:{
label:{
type: String,
required: true,
},
value:{
type: String,
required: true,
},
copy: {
type: Boolean,
default: false
},
isHash: {
type: Boolean,
default: false
}
},
components:{
Icon
},
computed: {
formatHash(){
return this.value.slice(0, 20) + '...' + this.value.slice(-4)
}
},
methods: {
copyHandler(text:string | number){
let clipboard = new ClipboardJS('.copyBtn', {
text: function() {
return text.toString();
}
});
clipboard.on("success", (e)=>{
this.$toast("复制成功~");
e.clearSelection();
});
clipboard.on("error", ()=>{
this.$toast("复制失败~");
});
}
}
})
</script>
<style scoped lang='less'>
.info_content_item {
height: 30px;
width: 100%;
display: flex;
align-items: center;
font-size: 12px;
line-height: 30px;
.content_item_key {
color: #7388AB;
width: 60px;
}
.content_item_value {
flex: 1;
color: #2B446C;
display: flex;
justify-content: space-between;
align-items: center;
.text {
padding-right: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Detail/component/traceCard.vue 0 → 100644
View file @ 233a890b
<template>
<div class="trace_card">
<div class="trace_card_title">
《我的第一本小说》
</div>
<div class="trace_card_content">
<div class="card_item">
<TextCell label="存证名称" value="2222222222"></TextCell>
</div>
<div class="card_item">
<TextCell label="存证名称" value="2222222222"></TextCell>
</div>
<div class="card_item">
<TextCell label="存证名称" value="2222222222"></TextCell>
</div>
<div class="card_item" :class="{'card_item_end':true}">
<TextCell label="存证名称" value="2222222222"></TextCell>
</div>
</div>
</div>
</template>
<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
import TextCell from './textCell.vue'
/**自定义方法*/
export default Vue.extend({
name:'',
components: {
TextCell
}
})
</script>
<style scoped lang='less'>
.trace_card {
.trace_card_title {
text-align: center;
color: #fff;
font-size: 14px;
height: 30px;
line-height: 30px;
background-color: #333393
}
.trace_card_content {
border: 1px solid #E2E2E2;
padding: 15px 15px;
.card_item {
height: 40px;
width: 100%;
display: flex;
align-items: center;
padding-left: 15px;
position: relative;
&:before {
content: " ";
font-size: 0;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #7388AB;
position: absolute;
left: -4px;
}
&:after {
content: " ";
font-size: 0;
height: 40px;
width: 1px;
border-radius: 50%;
background-color: #7388AB;
position: absolute;
left: -1px;
top: 50%;
}
}
.card_item_end {
&:after {
display: none;
}
}
}
}
</style>
\ No newline at end of file
src/view/NFT/Detail/index.vue
View file @ 233a890b
This diff is collapsed.
src/view/NFT/Detail/index_old.vue 0 → 100644
View file @ 233a890b
This diff is collapsed.
src/view/User/index.vue
View file @ 233a890b
......@@ -4,7 +4,7 @@
<input type="file" accept="image/*" capture="camera" class=" hidden" ref='cameraElem' @change="fileUpload"/>
<input type="file" accept="image/*" class=" hidden" ref='fileElem' @change="fileUpload"/>
<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: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' type='click' :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> -->
......@@ -26,7 +26,7 @@ Vue.use(ActionSheet);
export default Vue.extend({
data(){
return{
userInfo:this.$util.userMsg.getUserMsg(),
userInfo:this.$util.userMsg.getUserMsg() || {},
show:false,
actions: [
{ name: '从图片夹上传',router:'/photoEdit' },
......
src/vue-qr.d.ts 0 → 100644
View file @ 233a890b
declare module 'vue-qr'
\ No newline at end of file
tsconfig.json
View file @ 233a890b
......@@ -32,7 +32,7 @@
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
, "src/service/copyrightService" ],
"exclude": [
"node_modules"
]
......
vue.config.js
View file @ 233a890b
......@@ -15,16 +15,17 @@ module.exports = {
devServer: {
proxy: { // 设置代理
'/proxyApi': {
target:process.env.VUE_APP_URL,
// target: 'http://' + "124.71.183.184:8093",
// target:process.env.VUE_APP_URL,
target: "http://172.16.101.135:8001",
// target: "http://192.168.20.251:8001",
changeOrigin: true,
pathRewrite: {
'^/proxyApi': ''
}
},
'/proxyDowload':{
// target:"http://47.114.159.142:3001",
target:"http://121.40.18.70:3001",
// target:"http://121.40.18.70:3001",
target:"http://192.168.22.127:3001",
changeOrigin: true,
pathRewrite: {
'^/proxyDowload': ''
......
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