Skip to content

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

321

parent 1d60ee6b
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 132 deletions
public/index.html
View file @ 757288fc
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="//at.alicdn.com/t/font_2629369_yovz3dckpen.js"></script> <script src="//at.alicdn.com/t/font_2629369_uplaanctbdo.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
......
src/components/common/Btn.vue
View file @ 757288fc
<template> <template>
<div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3 flex items-center justify-center" :class="getSize && border" @click="eventEmit"> <div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3 flex items-center justify-center" :class="disabled?'filter grayscale':'' " @click="eventEmit">
{{text}} <slot name="icon-right"></slot> {{text}} <slot name="icon-right"></slot>
</div> </div>
</template> </template>
...@@ -35,7 +35,7 @@ export default Vue.extend({ ...@@ -35,7 +35,7 @@ export default Vue.extend({
getSize(){ getSize(){
switch (this.size) { switch (this.size) {
case 'full': case 'full':
return 'w-full' return 'w-full'
default: default:
return 'w-20'; return 'w-20';
} }
......
src/components/common/Cell.vue
View file @ 757288fc
<template> <template>
<div class="cell flex justify-between py-3 border-t border-b border-gray-500 px-2"> <div class="cell flex justify-between py-3 px-2 " :class="boxType ==='border'?' border-b border-font-gray border-opacity-25':'bg-font-gray bg-opacity-20 rounded-md'" >
<div class="left flex items-center"> <div class="left flex items-center ">
<app-icon v-if='icon' :name="icon" size='18px'></app-icon> <app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon>
<div class="px-2"> <div class="px-2">
{{text}} {{text}}
</div> </div>
</div> </div>
<div class="right"> <div class="right flex items-center">
<div v-if="type=='click'" @click="eventEmit(type)"> <div v-if="type=='click'" @click="eventEmit(type)">
<app-icon name="icon-xiayibu" size='18px'></app-icon> <div class='flex flex-row items-center'>
</div> <div>{{value}}</div>
<app-icon v-if="icon" :name='icon' class='self-center'></app-icon>
</div> </div>
</div> </div>
<div v-else-if="type=='input'">
<input v-model="inputValue" type="text" class=" bg-transparent" placeholder='输入' @input="cellOnChange">
</div>
<div v-else-if="type==='pick'">
<div class='flex flex-row items-center'>
<div>sdf</div>
<div @click="eventEmit(type)">
<app-icon name="icon-xiayibu" size='18px'></app-icon>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { Switch } from 'ant-design-vue' // import { Switch } from 'ant-design-vue'
Vue.use(Switch) // Vue.use(Switch)
export default Vue.extend({ export default Vue.extend({
components:{ components:{
'app-icon':()=>import('@/components/common/Icon.vue') 'app-icon':()=>import('@/components/common/Icon.vue')
}, },
props: { props: {
value: String,
pickValue:Array,
size: String, size: String,
type: { type: {
type:String, type:String,
default:'click' default:'click'
}, },
boxType:{
type: String,
default:'background'
},
disabled:{ disabled:{
type:Boolean, type:Boolean,
default:false default:false
...@@ -37,8 +56,13 @@ export default Vue.extend({ ...@@ -37,8 +56,13 @@ export default Vue.extend({
type: String, type: String,
required: true required: true
}, },
icon:String icon:String,
labelIcon: String
},
data(){
return{
inputValue:this.value,
}
}, },
methods:{ methods:{
eventEmit(v:any){ eventEmit(v:any){
...@@ -47,8 +71,16 @@ export default Vue.extend({ ...@@ -47,8 +71,16 @@ export default Vue.extend({
} }
if(this.type === 'click'){ if(this.type === 'click'){
this.$emit('onClick',v) this.$emit('onClick',v)
} }
if(this.type === 'pick'){
this.$emit('onClick',(cb:any)=>{
console.log(cb);
return cb
})
}
},
cellOnChange(){
this.$emit('cellOnChange',this.inputValue)
} }
}, },
computed:{ computed:{
...@@ -59,8 +91,27 @@ export default Vue.extend({ ...@@ -59,8 +91,27 @@ export default Vue.extend({
default: default:
return 'w-20'; return 'w-20';
} }
} },
// getBoxType(){
// switch (this.boxType) {
// case 'border':
// return 'border-t border-b border-gray-500'
// // case 'background':
// // return ' '
// }
// }
} }
}); });
</script> </script>
<style lang="less" scoped>
input[type='text'], input[type='password'], input[type='number'], textarea{
text-align: right;
padding: 0 25px;
}
input:not([type='range']), textarea{
padding: 0 10px;
}
</style>
\ No newline at end of file
src/view/NFT/Create.vue → src/components/common/Steps.vue
View file @ 757288fc
<template> <template>
<Layout-Child> <div class="steps flex text-font-white justify-center relative">
<div class="w-7/12 mx-auto"> <div class="step-item flex flex-col content-center relative mr-5 items-center" v-for="(i,index) in data" :key="index"
<div class="steps flex text-font-white relative"> :class="currentStep < index+1?'step-item':' step-item-actived'"
<div class="step-item flex flex-col content-center relative mr-5 items-center" v-for="(i,index) in mySteps" :key="i"> >
<div class="cycle relative items-center bg-font-gray bg-opacity-20 rounded-full z-10"> <div class="cycle relative items-center rounded-full z-10" :class="currentStep < index+1?'bg-font-gray bg-opacity-20':' bg-green-300 bg-opacity-80'">
<div class=" center-child ">{{index+1}}</div> <div class="center-child" v-if="currentStep < index+1">{{index+1}}</div>
<div class="center-child" 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>
<div class='text-sm mt-2'> <div class='text-sm mt-2'>
{{i}} {{i.text}}
</div> </div>
</div> </div>
</div> </div>
<div @click="nextStep">click</div>
</div>
</Layout-Child>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: {
data:{
type:Array,
required:true
},
currentStep:{
type:Number,
required:true
}
},
data(){ data(){
return{ return{
mySteps:['Step 1', 'Step 2', 'Step 3'], status:['finished','onprocess','undo']
currentStep:1, }
}
}, },
components:{ components:{
'Layout-Child':()=>import('@/layout/Child.vue'), 'app-icon':()=>import('@/components/common/Icon.vue')
}, },
methods:{ watch:{
nextStep(){ currentStep(newV){
if(this.currentStep<this.mySteps.length){ console.log(newV,this.data.length);
this.currentStep++ if(newV<=this.data.length){
this.$emit('stepOnChange',this.currentStep) this.$emit('stepOnChange',this.data[this.currentStep-1] )
}else{ }else{
this.$emit('stepOnFinished',true) this.$emit('stepOnFinished',true)
} }
console.log(this.currentStep); }
} },
computed:{
} }
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cycle{ .cycle{
padding:25px; padding:25px;
...@@ -60,7 +72,7 @@ export default Vue.extend({ ...@@ -60,7 +72,7 @@ export default Vue.extend({
.step-item:after{ .step-item:after{
content:''; content:'';
width: 24px; width: 24px;
height:5px; height:2px;
border-radius: 3px; border-radius: 3px;
background-color:#8899B3; background-color:#8899B3;
position: absolute; position: absolute;
...@@ -69,6 +81,18 @@ export default Vue.extend({ ...@@ -69,6 +81,18 @@ export default Vue.extend({
z-index: 1; z-index: 1;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.step-item-actived::after{
content:'';
width: 24px;
height:2px;
border-radius: 3px;
background-color:rgba(110, 231, 183,0.8);
position: absolute;
top: 34%;
left: 120%;
z-index: 1;
transform: translate(-50%, -50%);
}
} }
.step-item:last-of-type::after{ .step-item:last-of-type::after{
content:''; content:'';
......
src/layout/Child.vue
View file @ 757288fc
<template> <template>
<div id="Child" class="bg-font-black"> <div id="Child" class="bg-font-black">
<NavHeader></NavHeader> <div class="fixed top-0 left-0 w-full bg-font-black bg-opacity-75 z-40">
<div> <NavHeader></NavHeader>
</div>
<div class=" pt-7">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
......
src/layout/Main.vue
View file @ 757288fc
<template> <template>
<div id="Main" class=" bg-font-black"> <div id="Main" class=" bg-font-black ">
<div> <div>
<slot></slot> <slot></slot>
</div> </div>
<div class="footer fixed bottom-0 w-full"> <div class="footer fixed bottom-0 w-full z-40 ">
<NavFooter ></NavFooter> <NavFooter></NavFooter>
</div> </div>
</div> </div>
</template> </template>
...@@ -19,7 +19,3 @@ export default Vue.extend({ ...@@ -19,7 +19,3 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="less">
</style>
src/layout/NavFooter.vue
View file @ 757288fc
<template> <template>
<div class='flex items-center justify-around pb-6 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' > <div class='flex items-center justify-around pb-3 pt-3 rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
<div class='flex flex-col items-center' @click="setNav('Home')"> <div class='flex flex-col items-center' @click="setNav('Home')">
<app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon> <app-icon name='icon-BOSS-yingyeting-chushi' size='24px' color='#fff'></app-icon>
<div class='mt-2'>大厅</div> <div class='mt-2'>大厅</div>
</div> </div>
<div class='flex flex-col items-center relative' @click="goNFT"> <div class='flex flex-col items-center relative' @click="goNFT">
<div class=' absolute -top-12 rounded-full p-4 bg-font-black mx-auto shadow-nav text-center'> <div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'>
<app-icon name='icon-lianxiwomen' size='34px' color='#fff' ></app-icon> <app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
</div> </div>
<div class='mt-8'>发行NFT</div> <div class='mt-8'>发行NFT</div>
</div> </div>
<div class='flex flex-col items-center' @click="setNav('Mine')"> <div class='flex flex-col items-center' @click="setNav('Mine')">
<app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon> <app-icon name='icon-wodexuanzhong' size='24px' color='#fff'></app-icon>
<div class='mt-2'>我的</div> <div class='mt-2'>我的</div>
</div> </div>
</div> </div>
......
src/layout/NavHeader.vue
View file @ 757288fc
<template> <template>
<div class='text-font-white w-11/12 mx-auto py-3 flex justify-between items-center'> <div class='text-font-white w-11/12 mx-auto py-3 flex justify-between items-center '>
<div class='left'> <div class='left'>
<div @click="goBack"> <div @click="goBack">
<app-icon name='icon-fanhui' size='18px' color='#EEF1F6'></app-icon> <app-icon name='icon-fanhui' size='18px' color='#EEF1F6'></app-icon>
......
src/main.ts
View file @ 757288fc
...@@ -5,8 +5,10 @@ import router from './router' ...@@ -5,8 +5,10 @@ import router from './router'
import store from './store' import store from './store'
import "tailwindcss/tailwind.css" import "tailwindcss/tailwind.css"
import './style.less' import './style.less'
import Util from './util'
import service from './service' import service from './service'
import { Plugin } from 'vue-fragment' import { Plugin } from 'vue-fragment'
Vue.use(Util)
Vue.use(Plugin) Vue.use(Plugin)
Vue.use(service) Vue.use(service)
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/router/index.ts
View file @ 757288fc
...@@ -24,13 +24,37 @@ const routes: Array<RouteConfig> = [ ...@@ -24,13 +24,37 @@ const routes: Array<RouteConfig> = [
] ]
}, },
{ {
path: '/Nft/create', path: '/Nft/Create',
name: 'createNft', name: 'createNft',
component: () => import('@/view/NFT/Create.vue'), component: () => import('@/view/NFT/Create/index.vue'),
meta: { redirect:'/Nft/create/form',
title: 'NFT发行' 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:'/User',
name:'User',
meta: {
title: '个人中心'
},
component: () => import('@/view/User/index.vue')
},
{ {
path: '/auth', path: '/auth',
component: () => import("@/view/Auth/index.vue"), component: () => import("@/view/Auth/index.vue"),
......
src/service/index.ts
View file @ 757288fc
import {UserService} from './userService' import {UserService} from './userService'
......
src/service/nftService.ts
View file @ 757288fc
import {Service} from './Service'
import {NFT_CREATE} from '@/types/Dto'
import { token } from '@/util/userInfoUtils'
export class UserService extends Service {
router = {
create:{ path:'/nft/publish'},
getList:{ path:'/nft/generateNftId',dataType:'application/x-www-form-urlencoded'},
isRegisterd:{ path:'/user/isRegister', dataType:'application/x-www-form-urlencoded'},
isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'},
}
auth = 'Bearer ' + token.getToken()
constructor(){
super()
}
/**
* 获取验证码
* @param phone
* @param codeType 短信模板, 1:登录短信 2:修改密码 3:修改手机号
*/
async create(data:NFT_CREATE){
return await this.service.post(this.router.create.path,data,{
headers:{
"Authorization": this.auth
}
})
}
/**
* 获取NFT编号
* @param categoryId
* @returns
*/
async getList(categoryId:number){
return await this.service.get(this.router.getList.path,{
headers:{"Content-Type": this.router.getList.dataType},
params:{"categoryId":categoryId}
})
}
}
src/shimes-app.d.ts
View file @ 757288fc
import Vue from 'vue' import Vue from 'vue'
import { Service } from './service/index' import { Service } from './service/index'
import { UserService } from './service/userService' import { UserService } from './service/userService'
import { UTIL_INTERFACE } from '@/util/util.types'
import VueRouter, { Route } from 'vue-router' import VueRouter, { Route } from 'vue-router'
interface ServiceType { interface ServiceType {
...@@ -12,7 +12,8 @@ interface ServiceType { ...@@ -12,7 +12,8 @@ interface ServiceType {
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
$service: ServiceType, $service: ServiceType,
$router: VueRouter $router: VueRouter,
$util:UTIL_INTERFACE
} }
} }
src/style.less
View file @ 757288fc
...@@ -57,4 +57,9 @@ body{ ...@@ -57,4 +57,9 @@ body{
.step-progress__step-label, .step-progress__step-label,
.step-progress__step--active .step-progress__step-label, .step-progress__step--active span{ .step-progress__step--active .step-progress__step-label, .step-progress__step--active span{
font-size: 12px !important; font-size: 12px !important;
}
.page-scroll{
height: calc(100vh - 65px);
overflow-y: scroll;
} }
\ No newline at end of file
src/types/Dto.ts
View file @ 757288fc
...@@ -24,4 +24,19 @@ export interface PersonalCertifyDto{ ...@@ -24,4 +24,19 @@ export interface PersonalCertifyDto{
cardPictureBack: string cardPictureBack: string
cardPictureFront: string cardPictureFront: string
createDate: string createDate: string
}
export interface NFT_CREATE{
author:string
categoryId:number
fileHash:string
isArchives:number
name:string
nftId:string
synopsis:string
/**
* @param theme 字符串切割
*/
theme:string
isGrant?:number
} }
\ No newline at end of file
src/util/index.ts
View file @ 757288fc
import {token,userMsg} from './userInfoUtils'
export default { export default {
install(Vue: any) { install(Vue: any) {
Vue.prototype.$util = { Vue.prototype.$util = {
SHOW_AMOUNT: showAmount token: token,
userMsg: userMsg
} }
} }
} }
/**
* 将输入的金额转换为可读的金额各式 xx,xxx.xx
* @param amount 输入的金额
* @returns 字符串模式，只可用为显示，不可用于计算
*/
function showAmount(amount: string | number): string {
return '结果'
}
/**
* 将输入的金额转换为可读的金额各式 xx,xxx.xx,如果结果大于1显示小数点后两位，如果结果小于1，显示小数点后八位
* @param amount 输入的金额
* @returns 字符串模式，只可用为显示，不可用于计算
*/
function showChainAmount(amount: string | number): string {
return '结果'
}
/**
* 列表数据格式转换[{},{},{},{}] => [[{},{}],[{},{}]]
* @param data 原数据组
* @param rowNum 每个小组中的数量
* @returns Array
*/
function formArray(data: any[], rowNum: number): any[] {
const list: any[] = [];
let count = 0;
let tempList: any[] = [];
data.forEach((item, index) => {
count++;
if (count <= rowNum) {
tempList.push(item)
}
if (count === rowNum) {
list.push(tempList)
tempList = []
count = 0;
}
})
if (tempList.length !== 0) {
list.push(tempList)
}
return list;
}
src/util/util.types.ts 0 → 100644
View file @ 757288fc
import {token,userMsg} from './userInfoUtils'
export interface UTIL_INTERFACE{
token: typeof token,
userMsg: typeof userMsg
}
\ No newline at end of file
src/view/Mine/index.vue
View file @ 757288fc
<template> <template>
<Layout-Main> <Layout-Main class='page-scroll'>
<div class='user-info w-11/12 mx-auto flex text-font-white items-center py-5'> <div class='user-info w-11/12 mx-auto flex text-font-white items-center py-8 overflow-y-scroll'>
<div class='w-3/12 pr-5'> <div class='w-3/12 pr-5'>
<img src="@/assets/img/avatar.png" class='rounded-full w-18 object-fill' > <img src="@/assets/img/avatar.png" class='rounded-full w-18 object-fill' >
</div> </div>
<div class='w-9/12 info flex-grow'> <div class='w-9/12 info flex-grow'>
<div class='name-box flex justify-between'> <div class='name-box flex justify-between'>
<div class=' text-lg'>名字</div> <div class=' text-lg'>{{getUserInfo.nickname?getUserInfo.nickname:getUserInfo.telephone}}</div>
<div class=' text-sm flex items-center'> <div class=' text-sm flex items-center'>
<div>个人中心</div> <div @click='goUserSet'>个人中心</div>
<app-icon name="icon-xiayibu"></app-icon> <app-icon name="icon-xiayibu"></app-icon>
</div> </div>
</div> </div>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<app-tag text='编剧'></app-tag> <app-tag text='编剧'></app-tag>
</div> </div>
<div class='intro text-2xs line-clamp-1 text-font-gray'> <div class='intro text-2xs line-clamp-1 text-font-gray'>
我是一个热爱编剧事业的帅哥，我的理想,真jb不要脸dsfakjsdhfkljshda;fkljsdklfjlskadjf;lksdajf;lksajdf;lksjdadflkjsd;flkjsd;lkfjs;ldk {{getUserInfo.intro?getUserInfo.intro:'这个人很懒，什么也没留下'}}
</div> </div>
</div> </div>
</div> </div>
...@@ -42,8 +42,12 @@ ...@@ -42,8 +42,12 @@
<app-icon name="icon-xiayibu"></app-icon> <app-icon name="icon-xiayibu"></app-icon>
</div> </div>
</div> </div>
<div class='cells w-11/12 mx-auto text-font-white'> <div class='cells w-11/12 mx-auto text-font-white mt-3'>
<app-cell text='收藏' icon='icon-xiaoxi' @onClick='cellClick'></app-cell> <app-cell text='收藏' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='安全中心' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='联系我们' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<app-cell text='设置' boxType='border' icon='icon-xiayibu' @onClick='cellClick'></app-cell>
<div class='h-16'></div>
</div> </div>
</Layout-Main> </Layout-Main>
</template> </template>
...@@ -97,7 +101,15 @@ export default Vue.extend({ ...@@ -97,7 +101,15 @@ export default Vue.extend({
}, },
cellClick(){ cellClick(){
console.log(111); console.log(111);
},
goUserSet(){
this.$router.push('/User')
} }
},
computed:{
getUserInfo(){
return this.$util.userMsg.getUserMsg()
}
} }
}); });
</script> </script>
src/view/NFT/Create/form.vue 0 → 100644
View file @ 757288fc
<template>
<Layout-Child class='page-scroll'>
<div class="w-7/12 mx-auto my-6">
<app-steps :data='mySteps' :currentStep='currentStep' @stepOnChange="stepOnChange" @stepOnFinished='stepOnFinished'></app-steps>
</div>
<div class="w-11/12 mx-auto">
<div class="step-one" v-if="currentStep==1">
<app-cell v-model="value_name" type="input" text='剧本名称' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell v-model="value_publisher" type="input" text='发行人' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell :pickValue="mySteps" type="pick" text='剧本题材' class="text-font-white my-3" @onClick="what"></app-cell>
<div>
<div class="text-font-white my-2">剧本简介</div>
<textarea name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
</div>
<div class="fixed bottom-0 w-full left-0 z-30">
<app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
<div class="step-two" v-if="currentStep==2">
<app-cell text='剧本上传' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='剧本HASH' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='平台存档' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
<div class="step-three" v-if="currentStep==3">
<app-cell text='NFT编号' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='剧本HASH' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='发行人地址' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<app-cell text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
<div class="fixed bottom-0 w-full left-0 flex flex-row z-30">
<app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
<app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
</div>
</div>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data(){
return{
value_name:'',
value_publisher:'',
mySteps:[
{
text:'step1'
},
{
text:'step2'
},
{
text:'step3'
},
],
currentStep:1
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-steps':()=>import('@/components/common/Steps.vue'),
'app-cell':()=>import('@/components/common/Cell.vue'),
'app-btn':()=>import('@/components/common/Btn.vue')
},
methods:{
addStep(){
this.currentStep ++
},
stepOnFinished(e:boolean){
console.log(e,'finished');
},
stepOnChange(e:string){
console.log(e,'change');
},
getValue(val:string){
console.log(val);
},
what(item:Function){
item(this.$router.push('/Nft/create/pick'))
},
currentStepChange(val:number){
console.log(1111,this.currentStep, this.mySteps.length+1,this.currentStep + val);
if(this.currentStep < this.mySteps.length+1){
this.currentStep += val
}
},
}
});
</script>
src/view/NFT/Create/index.vue 0 → 100644
View file @ 757288fc
<template>
<keep-alive>
<router-view></router-view>
</keep-alive>
</template>
src/view/NFT/Create/pick.vue 0 → 100644
View file @ 757288fc
<template>
<Layout-Child>
dfdf
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components:{
'Layout-Child':()=>import('@/layout/Child.vue')
},
});
</script>
src/view/User/index.vue 0 → 100644
View file @ 757288fc
<template>
<Layout-Child>
<div class=" w-11/12 mx-auto py-6 text-font-white">
<app-cell text='头像' boxType='border' icon='icon-xiayibu'></app-cell>
<app-cell text='昵称' boxType='border' icon='icon-xiayibu'></app-cell>
<app-cell text='手机号' boxType='border' icon='icon-xiayibu'></app-cell>
<app-cell text='个性签名' boxType='border' icon='icon-xiayibu'></app-cell>
</div>
<div class="fixed bottom-0 w-full left-0 z-30">
<app-btn text="退出登录" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-red" border='none'></app-btn>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-cell':()=>import('@/components/common/Cell.vue'),
'app-btn':()=>import('@/components/common/Btn.vue')
},
});
</script>
tailwind.config.js
View file @ 757288fc
...@@ -17,6 +17,7 @@ module.exports = { ...@@ -17,6 +17,7 @@ module.exports = {
current: 'currentColor', current: 'currentColor',
"app-blue":"#1311934", "app-blue":"#1311934",
"app-red":"#ED6F6F", "app-red":"#ED6F6F",
"cell-gray":'#182246',
"icon-bg":"#1C254C", "icon-bg":"#1C254C",
"font-black":"#1D2649", "font-black":"#1D2649",
"font-light-black": "#2B3661", "font-light-black": "#2B3661",
......
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