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 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
</head>
<body>
......
src/components/common/Btn.vue
View file @ 757288fc
<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>
</div>
</template>
......@@ -35,7 +35,7 @@ export default Vue.extend({
getSize(){
switch (this.size) {
case 'full':
return 'w-full'
return 'w-full'
default:
return 'w-20';
}
......
src/components/common/Cell.vue
View file @ 757288fc
<template>
<div class="cell flex justify-between py-3 border-t border-b border-gray-500 px-2">
<div class="left flex items-center">
<app-icon v-if='icon' :name="icon" size='18px'></app-icon>
<div class="px-2">
{{text}}
</div>
</div>
<div class="right">
<div v-if="type=='click'" @click="eventEmit(type)">
<app-icon name="icon-xiayibu" size='18px'></app-icon>
</div>
</div>
</div>
<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 ">
<app-icon v-if='labelIcon' :name="labelIcon" size='18px'></app-icon>
<div class="px-2">
{{text}}
</div>
</div>
<div class="right flex items-center">
<div v-if="type=='click'" @click="eventEmit(type)">
<div class='flex flex-row items-center'>
<div>{{value}}</div>
<app-icon v-if="icon" :name='icon' class='self-center'></app-icon>
</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>
<script lang="ts">
import Vue from 'vue';
import { Switch } from 'ant-design-vue'
Vue.use(Switch)
// import { Switch } from 'ant-design-vue'
// Vue.use(Switch)
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
props: {
value: String,
pickValue:Array,
size: String,
type: {
type:String,
default:'click'
},
boxType:{
type: String,
default:'background'
},
disabled:{
type:Boolean,
default:false
......@@ -37,8 +56,13 @@ export default Vue.extend({
type: String,
required: true
},
icon:String
icon:String,
labelIcon: String
},
data(){
return{
inputValue:this.value,
}
},
methods:{
eventEmit(v:any){
......@@ -47,8 +71,16 @@ export default Vue.extend({
}
if(this.type === 'click'){
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:{
......@@ -59,8 +91,27 @@ export default Vue.extend({
default:
return 'w-20';
}
}
},
// getBoxType(){
// switch (this.boxType) {
// case 'border':
// return 'border-t border-b border-gray-500'
// // case 'background':
// // return ' '
// }
// }
}
});
</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>
<Layout-Child>
<div class="w-7/12 mx-auto">
<div class="steps flex text-font-white relative">
<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=" center-child ">{{index+1}}</div>
<div class="steps flex text-font-white justify-center relative">
<div class="step-item flex flex-col content-center relative mr-5 items-center" v-for="(i,index) in data" :key="index"
:class="currentStep < index+1?'step-item':' step-item-actived'"
>
<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" 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 class='text-sm mt-2'>
{{i}}
{{i.text}}
</div>
</div>
</div>
<div @click="nextStep">click</div>
</div>
</Layout-Child>
</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{
mySteps:['Step 1', 'Step 2', 'Step 3'],
currentStep:1,
}
return{
status:['finished','onprocess','undo']
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-icon':()=>import('@/components/common/Icon.vue')
},
methods:{
nextStep(){
if(this.currentStep<this.mySteps.length){
this.currentStep++
this.$emit('stepOnChange',this.currentStep)
}else{
this.$emit('stepOnFinished',true)
}
console.log(this.currentStep);
}
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>
.cycle{
padding:25px;
......@@ -60,7 +72,7 @@ export default Vue.extend({
.step-item:after{
content:'';
width: 24px;
height:5px;
height:2px;
border-radius: 3px;
background-color:#8899B3;
position: absolute;
......@@ -69,6 +81,18 @@ export default Vue.extend({
z-index: 1;
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{
content:'';
......
src/layout/Child.vue
View file @ 757288fc
<template>
<div id="Child" class="bg-font-black">
<NavHeader></NavHeader>
<div>
<div class="fixed top-0 left-0 w-full bg-font-black bg-opacity-75 z-40">
<NavHeader></NavHeader>
</div>
<div class=" pt-7">
<slot></slot>
</div>
</div>
......
src/layout/Main.vue
View file @ 757288fc
<template>
<div id="Main" class=" bg-font-black">
<div id="Main" class=" bg-font-black ">
<div>
<slot></slot>
</div>
<div class="footer fixed bottom-0 w-full">
<NavFooter ></NavFooter>
<div class="footer fixed bottom-0 w-full z-40 ">
<NavFooter></NavFooter>
</div>
</div>
</template>
......@@ -19,7 +19,3 @@ export default Vue.extend({
}
});
</script>
<style lang="less">
</style>
src/layout/NavFooter.vue
View file @ 757288fc
<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')">
<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>
<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'>
<app-icon name='icon-lianxiwomen' size='34px' color='#fff' ></app-icon>
<div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'>
<app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
</div>
<div class='mt-8'>发行NFT</div>
</div>
<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>
</div>
......
src/layout/NavHeader.vue
View file @ 757288fc
<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 @click="goBack">
<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'
import store from './store'
import "tailwindcss/tailwind.css"
import './style.less'
import Util from './util'
import service from './service'
import { Plugin } from 'vue-fragment'
Vue.use(Util)
Vue.use(Plugin)
Vue.use(service)
Vue.config.productionTip = false
......
src/router/index.ts
View file @ 757288fc
......@@ -24,13 +24,37 @@ const routes: Array<RouteConfig> = [
]
},
{
path: '/Nft/create',
path: '/Nft/Create',
name: 'createNft',
component: () => import('@/view/NFT/Create.vue'),
meta: {
title: 'NFT发行'
}
},
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:'/User',
name:'User',
meta: {
title: '个人中心'
},
component: () => import('@/view/User/index.vue')
},
{
path: '/auth',
component: () => import("@/view/Auth/index.vue"),
......
src/service/index.ts
View file @ 757288fc
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 { Service } from './service/index'
import { UserService } from './service/userService'
import { UTIL_INTERFACE } from '@/util/util.types'
import VueRouter, { Route } from 'vue-router'
interface ServiceType {
......@@ -12,7 +12,8 @@ interface ServiceType {
declare module 'vue/types/vue' {
interface Vue {
$service: ServiceType,
$router: VueRouter
$router: VueRouter,
$util:UTIL_INTERFACE
}
}
src/style.less
View file @ 757288fc
......@@ -57,4 +57,9 @@ body{
.step-progress__step-label,
.step-progress__step--active .step-progress__step-label, .step-progress__step--active span{
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{
cardPictureBack: string
cardPictureFront: 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 {
install(Vue: any) {
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>
<Layout-Main>
<div class='user-info w-11/12 mx-auto flex text-font-white items-center py-5'>
<Layout-Main class='page-scroll'>
<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'>
<img src="@/assets/img/avatar.png" class='rounded-full w-18 object-fill' >
</div>
<div class='w-9/12 info flex-grow'>
<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>个人中心</div>
<div @click='goUserSet'>个人中心</div>
<app-icon name="icon-xiayibu"></app-icon>
</div>
</div>
......@@ -16,7 +16,7 @@
<app-tag text='编剧'></app-tag>
</div>
<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>
......@@ -42,8 +42,12 @@
<app-icon name="icon-xiayibu"></app-icon>
</div>
</div>
<div class='cells w-11/12 mx-auto text-font-white'>
<app-cell text='收藏' icon='icon-xiaoxi' @onClick='cellClick'></app-cell>
<div class='cells w-11/12 mx-auto text-font-white mt-3'>
<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>
</Layout-Main>
</template>
......@@ -97,7 +101,15 @@ export default Vue.extend({
},
cellClick(){
console.log(111);
},
goUserSet(){
this.$router.push('/User')
}
},
computed:{
getUserInfo(){
return this.$util.userMsg.getUserMsg()
}
}
});
</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 = {
current: 'currentColor',
"app-blue":"#1311934",
"app-red":"#ED6F6F",
"cell-gray":'#182246',
"icon-bg":"#1C254C",
"font-black":"#1D2649",
"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