Skip to content

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

阶段性提交

parent 19e892cf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 249 deletions
public/iconfont_2.js 0 → 100644
View file @ d32ce87c
This diff is collapsed.
public/index.html
View file @ d32ce87c
......@@ -7,6 +7,7 @@
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
<link href="<%= BASE_URL %>logo.png">
<script src="/iconfont.js"></script>
<script src="/iconfont_2.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 @ d32ce87c
<template>
<div id="app" class="bg-font-black">
<div id="app" class="bg-white">
<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">
......
src/components/CardList.vue
View file @ d32ce87c
<template>
<div class="list-container font-light">
<div class="list-row flex justify-start relative text-font-white text-sm mb-3" v-for="(i,index) in outputData" :key="index" :id="i.id">
<div class='item flex flex-col w-4/12 items-center z-10 h-44' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
<div class='desk_img_box'>
<!-- <img src='/img/cover.png' class=" w-11/12 mx-auto rounded-xl shadow-md"> -->
<img :src="k.cover?k.cover :'/img/cover.png'" class="desk_img rounded-md w-11/12 h-5/6 mx-auto" />
<div class="list-row flex justify-start relative text-zx-blue-light text-sm mb-3" v-for="(i,index) in outputData" :key="index" :id="i.id">
<div class='item flex flex-col w-1/2 items-center z-10 max-h-56' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
<div class=" w-11/12 h-full mx-auto shadow-sm pt-2">
<div class='desk_img_box w-full'>
<img :src="k.cover?k.cover :'/img/zx_default_img.png'" class="desk_img rounded-md w-full h-full mx-auto" />
</div>
<div class='overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-zx-blue-light pl-2 mt-2'>
{{k.name}}
</div>
<div class='overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-zx-blue-white pl-2 mt-2 text-xs'>
{{k.name}}
</div>
</div>
<div class='mt-3 overflow-hidden whitespace-nowrap overflow-ellipsis w-full text-center'>
{{k.name}}
</div>
</div>
<div class='absolute bottom-6 z-0 w-full '>
<img src="@/assets/img/holder.png" class="w-full ">
</div>
</div>
<div class="scroll-padding"></div>
</div>
</template>
......@@ -26,7 +26,7 @@ export default Vue.extend({
props: {
rowSize: {
type:Number,
default:3
default:2
},
data:{
type:Array,
......@@ -48,7 +48,7 @@ export default Vue.extend({
<style scoped>
.desk_img_box {
height: 80%;
height: 70%;
width: 100%;
}
......
src/components/common/Btn.vue
View file @ d32ce87c
......@@ -12,7 +12,7 @@
items-center
justify-center
"
:class="[disabled ? 'filter grayscale' : '', loading ? ' opacity-75' : '']"
:class="[disabled ? 'filter bg-zx-btn-disabled-bg text-zx-btn-disabled-text' : '', loading ? ' opacity-75' : '']"
@click="eventEmit"
>
{{ text }} <slot name="icon-right"></slot>
......
src/components/common/Cell.vue
View file @ d32ce87c
......@@ -3,8 +3,8 @@
class="cell flex justify-between py-3 px-2 text-sm overflow-hidden"
:class="
boxType === 'border'
? ' border-b border-font-gray border-opacity-25'
: 'bg-font-gray bg-opacity-20 rounded-md'
? ' border-b bg-white'
: 'bg-white rounded-md'
"
>
<div class="left flex items-center flex-row-reverse">
......@@ -26,7 +26,7 @@
<div v-if="type == 'click'" @click="eventEmit(type)">
<div class="flex items-center">
<div class="text-sm">{{ value }}</div>
<app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
<app-icon v-if="icon" :name="icon" class="self-center" color="#2b446c"></app-icon>
</div>
</div>
......@@ -35,7 +35,7 @@
v-model="inputValue"
type="text"
maxlength="16"
class="bg-transparent w-60"
class="bg-transparent w-60 text-zx-blue-light"
:placeholder="placeholder"
@input="cellOnChange"
/>
......@@ -72,7 +72,7 @@
:active="true"
></app-tag>
<div @click="eventEmit(type)">
<app-icon name="icon-xiayibu" size="18px"></app-icon>
<app-icon name="icon-xiayibu" size="18px" color="#A7B5CD"></app-icon>
</div>
</div>
</div>
......@@ -94,7 +94,7 @@
:placeholder="placeholder"
/>
<div @click="cellOnChange">
<app-icon name="icon-xiayibu" size="18px"></app-icon>
<app-icon name="icon-xiayibu" size="18px" ></app-icon>
</div>
</div>
</div>
......@@ -110,8 +110,8 @@
</div>
<div ref="btn" @click="handleClickCopy(name)" class="copyBtn ml-1" >
<img src="@/assets/icons/copy.png" class=" max-h-5" alt="" v-if="needCopy">
<!-- <app-icon name="icon-fuzhi" size="18px"></app-icon> -->
<!-- <img src="@/assets/icons/copy.png" class=" max-h-5" alt="" v-if="needCopy"> -->
<app-icon name="icon-fuzhi" size="18px" v-if="needCopy" color="#2b446c"></app-icon>
</div>
</div>
</div>
......
src/components/common/ScrollBar.vue
View file @ d32ce87c
<template>
<div class="w-full flex justify-between py-3 items-center" >
<div class="flex-grow flex flex-row ">
<van-tabs :value="active" class='w-11/12' swipeable @click="tabChange" lazy-render>
<van-tab v-for='i in list' :key="i.id" :title='i.categoryName' :id='i.id'>
<van-tabs :value="active" class='w-11/12' swipeable @click="tabChange" lazy-render title-active-color="#2B446C" title-inactive-color="#A7B5CD">
<van-tab v-for='i in list' :key="i.id" :title='i.categoryName' :id='i.id' >
</van-tab>
</van-tabs>
</div>
<div class="w-30 flex-grow-0">
<app-icon name="icon-shaixuan"></app-icon>
<app-icon name="icon-shaixuan" color="#A7B5CD"></app-icon>
</div>
</div>
......
src/components/common/Skeleton/Rect.vue
View file @ d32ce87c
......@@ -19,7 +19,8 @@ export default Vue.extend({
}
.el-skeleton.is-animated .el-skeleton__item {
background: linear-gradient(90deg, #0c0b31 25%, #282740 37%, #0c0b31 63%);
// background: linear-gradient(90deg, #0c0b31 25%, #282740 37%, #0c0b31 63%);
background: #A7B5CD;
background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite;
}
......
src/components/common/Skeleton/SkeletonNftDetail.vue
View file @ d32ce87c
<template>
<div>
<SkeletonRect _class="oneSkeleton" />
<div class="flex justify-between mt-2">
<!-- <div class="flex justify-between mt-2">
<div v-for="n in 4" :key="n">
<SkeletonRect _class="circleSkeleton" />
<SkeletonRect _class="paraSkeleton" />
</div>
</div>
</div> -->
<div class="flex justify-between mt-3 items-center">
<SkeletonRect _class="circle2Skeleton" class="mr-2" />
<!-- <SkeletonRect _class="circle2Skeleton" class="mr-2" /> -->
<div class="flex-grow mr-6">
<SkeletonRect _class="paraSkeleton" />
<SkeletonRect _class="paraSkeleton" />
......
src/layout/Child.vue
View file @ d32ce87c
<template>
<div id="Child" class="bg-font-black ">
<div id="Child" class=" bg-white ">
<van-overlay :show="CodeData.show" class='z-50'>
<div class="code-confirm flex flex-row item-center content-center justify-center text-font-white h-full" @click.stop>
<div class="self-center rounded-lg" :class="!CodeData.onAction?'bg-font-light-black':''">
......@@ -24,7 +24,7 @@
</div>
</div>
</van-overlay>
<div class="fixed top-0 left-0 w-full bg-font-black bg-opacity-75 z-40">
<div class="fixed top-0 left-0 w-full bg-white bg-opacity-75 z-40">
<NavHeader></NavHeader>
</div>
......
src/layout/Main.vue
View file @ d32ce87c
<template>
<div id="Main" class=" bg-font-black">
<div id="Main" class=" bg-white">
<div>
<slot></slot>
</div>
......
src/layout/NavFooter.vue
View file @ d32ce87c
<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-6 pt-3 bg-white text-font-white text-2xs shadow' >
<div class='flex flex-col items-center' @click="setNav('Home')">
<app-icon name='icon-BOSS-yingyeting-chushi' size='24px' :color='actived==="Home"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div>
<app-icon name='icon-shouye' size='22px' :color='actived==="Home"?"#707070":"#cdcdcd"'></app-icon>
<!-- <div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div> -->
</div>
<div class='flex flex-col items-center relative' @click="goNFT">
<div class=' absolute -top-12 rounded-full p-5 bg-app-red mx-auto shadow-nav text-center'>
<app-icon name='icon-fahangnft' size='33px' color="#1296db"></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 text-font-red'>发行NFT</div>
<div class='mt-8 text-font-red'>发行NFT</div> -->
</div>
<div class='flex flex-col items-center' @click="setNav('Mine')">
<app-icon name='icon-wodexuanzhong' size='24px' :color='actived==="Mine"?"#0078FF":"#FFF"'></app-icon>
<div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div>
<app-icon name='icon-wode' size='22px' :color='actived==="Mine"?"#707070":"#cdcdcd"'></app-icon>
<!-- <div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div> -->
</div>
</div>
</template>
......
src/layout/NavHeader.vue
View file @ d32ce87c
<template>
<div class='text-font-white w-11/12 mx-auto py-3 flex justify-between items-center '>
<div class=' text-zx-blue-light 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>
<app-icon name='icon-fanhui' size='18px' color='#2B446C'></app-icon>
</div>
</div>
<div class='center'>{{title}}</div>
......
src/router/index.ts
View file @ d32ce87c
......@@ -40,14 +40,6 @@ const routes: Array<RouteConfig> = [
}
},
{
path: '/Nft/create/pickPre',
name:'NftPickPre',
component: () => import('@/view/NFT/Create/pickPre.vue'),
meta: {
title: '艺术品类型'
}
},
{
path: '/Nft/create/pick',
name:'NftPick',
component: () => import('@/view/NFT/Create/pick.vue'),
......
src/service/nftService/nftService.ts
View file @ d32ce87c
......@@ -140,7 +140,7 @@ export class NFTService extends Service {
* 获取题材类型
* @returns
*/
async getCategory(): Promise<any[]> {
async getCategory(): Promise<any> {
return await this.service.get(this.router.getCategory.path)
}
......
src/style.less
View file @ d32ce87c
......@@ -11,7 +11,8 @@
::-webkit-scrollbar { width: 0 !important }
::webkit-scrollbar {background-color:transparent;display:none}
body {
background-color: #1d2649;
// background-color: #1d2649;
background-color: #fff;
}
.van-tabs__nav {
......@@ -20,9 +21,9 @@ body {
.van-tabs__line {
display: none;
}
.van-tab--active {
color: #eef1f6 !important;
}
// .van-tab--active {
// color: #2B446C !important;
// }
.van-badge {
background-color: #ed6f6f !important;
}
......
src/view/Auth/index.vue
View file @ d32ce87c
<template>
<div class="bg-font-black">
<div class="bg-white">
<router-view></router-view>
</div>
</template>
......
src/view/Home/index.vue
View file @ d32ce87c
<template>
<Layout-Main>
<div class="banner w-full relative">
<div class=" absolute w-full flex py-5 px-5 justify-between">
<div class="banner w-full relative h-56">
<div class=" w-full flex pt-5 pb-1 px-5 justify-between">
<div @click="search">
<!-- <app-icon name="icon-xingzhuang" size="24px"></app-icon> -->
<app-icon name="icon-xingzhuang" size="24px" color="#2B446C"></app-icon>
</div>
<div @click="info">
<van-badge :content="null" >
<app-icon name="icon-xiaoxi" size="24px" @click.native='$router.push({name:"Deving"})'></app-icon>
<app-icon name="icon-xiaoxi" size="24px" @click.native='$router.push({name:"Deving"})' color="#2B446C"></app-icon>
</van-badge>
</div>
</div>
<div class=" absolute z-20 bottom-5 w-full justify-center text-font-white">
<div class=" px-5 py-1 w-32 mx-auto text-center bg-gradient-to-r from-app-orange to-app-purple rounded-full">
立即领取
</div>
<!-- <div class=" px-5 py-1 w-32 mx-auto text-center bg-gradient-to-r from-app-orange to-app-purple rounded-full" @click="goDetail(officialList[0].id,true)">
立即领取
</div> -->
</div>
<img src="@/assets/img/banner.png" class="w-full z-0">
<img src="@/assets/img/zx_default_img.png" class=" h-44">
</div>
<div class="container-view w-11/12 mx-auto">
......
src/view/Mine/index.vue
View file @ d32ce87c
......@@ -15,10 +15,10 @@
</div>
<div class='w-9/12 info flex-grow'>
<div class='name-box flex justify-between'>
<div class=' text-lg flex-1'>{{getUserInfo.nickname?getUserInfo.nickname:getUserInfo.telephone}}</div>
<div class=' text-sm flex items-center'>
<div class=' text-lg flex-1 text-zx-blue-light'>{{getUserInfo.nickname?getUserInfo.nickname:getUserInfo.telephone}}</div>
<div class=' text-sm flex items-center text-zx-blue-white'>
<div @click='goUserSet'>个人中心</div>
<app-icon name="icon-xiayibu"></app-icon>
<app-icon name="icon-xiayibu" color="#A7B5CD"></app-icon>
</div>
</div>
<div class='tags flex py-2' v-if="hadToken">
......@@ -36,7 +36,7 @@
<!-- <app-icon :name="i.icon" size='24px' class='p-5 bg-table-light-blue shadow-md rounded-full'></app-icon> -->
<img :src="i.icon" alt="">
</div>
<div class='text-xs text-font-white'>
<div class='text-xs text-zx-blue-light'>
{{i.text}}
</div>
</div>
......
src/view/NFT/Create/components/uploadImg/uploadImg.vue
View file @ d32ce87c
<template>
<div class=" flex justify-between flex-wrap">
<div class=" flex flex-wrap">
<input type="file" class=" hidden" multiple ref="inputDom" @change="handleFileChange">
<div v-for="(item,index) in urlList" :key="item.name" class=" w-1/3 h-32 p-1 relative">
<img :src="item.url" alt="" class=" w-full h-full">
<div class=" h-8 text-center absolute bottom-1 left-1 right-1 bg-gray-500 opacity-80 text-white leading-8" v-if="index == 0">默认封面</div>
<img src="./delete.svg" alt="" class=" absolute top-2 right-2 w-1/6" @click="deleteImg(index)">
<img :src="item.url" alt="" class=" w-full h-full rounded">
<div class=" h-8 text-center absolute bottom-1 left-1 right-1 bg-gray-500 opacity-80 text-white leading-8 text-xs" v-if="index == 0">默认封面</div>
<app-icon name='icon-fahangnft' class="delete-icon absolute top-1 right-2 w-1/6" size='22px' color='#f68585' @click.native="deleteImg(index)"></app-icon>
</div>
<div v-if="fileList.length < maxCount" @click="upload" class=" w-1/3 text-white">
图片上传
<div v-if="fileList.length < maxCount" @click="upload" class=" h-32 w-1/3 text-zx-blue-light p-1">
<div class=" h-full w-full bg-zx-btn-disabled-bg relative">
<app-icon name='icon-shanchu' class="upload-icon" size="25px" color='#A7B5CD'></app-icon>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
import Vue from "vue"
export default Vue.extend({
props: {
fileList: Array,
maxCount: Number,
},
components:{
'app-icon':()=>import('@/components/common/Icon.vue')
},
methods: {
upload(){
upload():void{
const dom = this.$refs.inputDom as HTMLInputElement
dom.click()
},
handleFileChange(e:any){
handleFileChange(e:any):void{
const dom = this.$refs.inputDom as HTMLInputElement
for(let item of e.target.files) {
const type_name = item.name.substring(item.name.lastIndexOf('.'),item.name.length)
if(['.png','.jpg','.jpeg','.PNG','.JPG','.JPEG'].indexOf(type_name) == -1) {
this.$toast('请上传指定类型文件~')
dom.value = ''
return
}
}
this.$emit('fileChange',e.target.files)
dom.value = ''
},
deleteImg(index:number){
deleteImg(index:number):void{
this.$emit('deleteImg',index)
}
},
computed: {
urlList(){
return this.fileList.map((item)=>{
urlList():Array<any>{
return this.fileList.map((item:any)=>{
return {
url: window.URL.createObjectURL(item)
}
})
}
}
}
})
</script>
<style>
.delete-icon {
transform: rotate(45deg);
}
.upload-icon {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}
</style>
\ No newline at end of file
src/view/NFT/Create/form.vue
View file @ d32ce87c
......@@ -12,6 +12,9 @@
<div class="w-11/12 mx-auto">
<div id="step_box" class=" step-one" v-if="currentStep == 1">
<div class=" text-zx-blue-light text-2xl p-3">
发行NFT
</div>
<div>
<!-- <div class="my-4 text-font-gray text-sm ml-4">{{fromText.desText}}</div> -->
<textarea
......@@ -21,11 +24,11 @@
cols="30"
maxlength="500"
:placeholder="fromText.desPlaceholder"
rows="10"
rows="5"
class="
w-full
bg-font-gray bg-opacity-20
text-font-white
bg-white
text-zx-blue-light
p-3
rounded-md
text-sm
......@@ -42,7 +45,7 @@
:text='fromText.nameText'
:validate="{ maxLen: 15 }"
:placeholder="fromText.namePlaceholder"
class="text-font-white my-3 text-sm"
class=" my-3 text-sm "
@cellOnChange="(v) => setCreateNFT({ value_name: v })"
></app-cell>
......@@ -52,7 +55,7 @@
:text="fromText.authorText"
:validate="{ maxLen: 15 }"
:placeholder="fromText.authorPlaceholder"
class="text-font-white my-3 text-sm"
class=" my-3 text-sm "
@cellOnChange="(v) => setCreateNFT({ value_publisher: v })"
></app-cell>
......@@ -60,14 +63,14 @@
type="pick"
:text="fromText.themeText"
:placeholder="fromText.themePlaceholder"
class="text-font-white my-3"
@click.native="$router.push({name:'NftPickPre',query:{text:`艺术品类型`,id:categoryId}})"
class=" my-3 "
@click.native="$router.push({name:'NftPick',query:{text:`艺术品题材`,id:categoryId}})"
></app-cell>
<div class="fixed bottom-3 w-full left-0 z-30">
<app-btn
text="下一步"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
:disabled="validation"
border="none"
@btnClicked="currentStepChange(1)"
......@@ -125,17 +128,19 @@
class="text-font-white my-3 text-sm"
@cellOnChange="(v) => (createNFT.grant = v)"
></app-cell> -->
<div class=" text-white">第二步发行NFT</div>
<div class=" text-zx-blue-light text-2xl p-3">
NFT信息确认
</div>
<div class="fixed bottom-3 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"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
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"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
:disabled="false"
:loading="loading2"
border="none"
......@@ -182,13 +187,13 @@
<div class="fixed bottom-3 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"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
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"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
border="none"
:disabled="validation"
:loading="loading3"
......@@ -367,6 +372,7 @@ export default Vue.extend({
coverName: 'coverName',
coverFile: "coverFile"
}),
//判断按钮可用性
validation(): boolean {
let disabled = true;
const { value_name, value_publisher, value_des } = this.createNFT;
......@@ -405,7 +411,7 @@ export default Vue.extend({
getPreText():string{
switch (this.categoryId) {
case '1':
return '剧本'
return '艺术品'
case '2':
return '视频'
case '3':
......@@ -442,9 +448,15 @@ export default Vue.extend({
...obj,
};
},
//新增图片，最多9张
fileChange(files:any){
(this.fileList as any).push(...files)
if(this.fileList.length > 9){
const list = this.fileList.slice(-9)
this.fileList = list
}
},
//删除图片
deleteImg(index:number){
this.fileList.splice(index,1)
},
......@@ -474,18 +486,18 @@ export default Vue.extend({
// message: "封面将作为NFT的形象在大厅等位置进行展示，不上传封面则使用官方默认图进行展示。",
// });
// },
addStep() {
this.currentStep++;
},
stepOnFinished(e: boolean) {
console.log(e, "finished");
},
stepOnChange(e: string) {
console.log(e, "change");
},
getValue(val: string) {
console.log(val);
},
// addStep() {
// this.currentStep++;
// },
// stepOnFinished(e: boolean) {
// console.log(e, "finished");
// },
// stepOnChange(e: string) {
// console.log(e, "change");
// },
// getValue(val: string) {
// console.log(val);
// },
// what() {
// this.$router.push("/Nft/create/pick");
// },
......
src/view/NFT/Create/pick.vue
View file @ d32ce87c
......@@ -4,7 +4,10 @@
<div class="text-font-red text-sm text-center" v-if="selectType == '剧本题材'">*最多支持三个选项</div>
<div class="text-font-red text-sm text-center" v-if="selectType == '视频题材'">*最多支持一个选项</div>
<div class="grid grid-cols-3 w-11/12 mx-auto mt-6">
<van-tree-select :active-id.sync="activeItem" :main-active-index.sync="activeNav" :items="serviceData">
</van-tree-select>
<!-- <div class="grid grid-cols-3 w-11/12 mx-auto mt-6">
<div
class="box px-2 py-3"
v-for="(i, index) in serviceData"
......@@ -18,18 +21,18 @@
:id="i.id"
></app-tag>
</div>
</div>
</div> -->
<div class="fixed bottom-3 w-full left-0 flex flex-row z-30">
<app-btn
text="取消"
@btnClicked="clickCancel"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
border="none"
></app-btn>
<app-btn
text="确认"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
border="none"
@btnClicked="clickConfirm"
:disabled="!pickValid"
......@@ -42,17 +45,63 @@
<script lang="ts">
import Vue from "vue";
import {TreeSelect} from 'vant'
Vue.use(TreeSelect)
export default Vue.extend({
data() {
return {
picked: [] as Array<{ id: number; text: string }>,
serviceData: {},
serviceData: [],
maxNum: {
'古装': 3,
'偶像': 2,
'剧本题材': 3,
'艺术品题材': 3,
"视频题材": 1,
},
activeNav:null,
activeItem:[],
screenData:[
{
text: '所有城市',
children: [
{
text: '宁波',
id: 1,
},
{
text: '上海',
id: 2,
},
],
},
{
text: '所有地区',
children: [
{
text: '温州',
id: 3,
},
{
text: '杭州',
id: 4,
},
],
},
{
text: '所有国家',
children: [
{
text: '中国',
id: 5,
},
{
text: '日本',
id: 6,
},
],
},
],
};
},
async mounted() {
......@@ -60,40 +109,35 @@ export default Vue.extend({
},
components: {
"Layout-Child": () => import("@/layout/Child.vue"),
"app-tag": () => import("@/components/common/Tag2.vue"),
// "app-tag": () => import("@/components/common/Tag2.vue"),
"app-btn": () => import("@/components/common/Btn.vue"),
},
watch:{
async "$route.query.id"(){
this.picked = []
await this.getThemeList()
}
},
methods: {
async getThemeList(){
this.$toast.loading({
message: '类型获取中',
duration: 20000,
})
this.serviceData = await this.$service.nftService.getThemeList(this.$route.query.id);
this.serviceData = await this.$service.nftService.getCategory();
this.$toast.clear()
console.log(this.serviceData)
},
tagOnclick(item: any) {
if (this.picked.find((i) => i.id === item.id)) {
this.picked = this.picked.filter((i) => i.id !== item.id);
return;
}
if (this.picked.length >= (this.maxNum as any)[this.selectType as string]) {
return;
}
this.picked.push({
id: item.id,
text: item.text,
});
},
isActive(id: number) {
return !!this.picked.find((i) => i.id === id);
},
// tagOnclick(item: any) {
// if (this.picked.find((i) => i.id === item.id)) {
// this.picked = this.picked.filter((i) => i.id !== item.id);
// return;
// }
// if (this.picked.length >= (this.maxNum as any)[this.selectType as string]) {
// return;
// }
// this.picked.push({
// id: item.id,
// text: item.text,
// });
// },
// isActive(id: number) {
// return !!this.picked.find((i) => i.id === id);
// },
clickCancel() {
this.$router.back();
},
......
src/view/NFT/Create/pickPre.vue deleted 100644 → 0
View file @ 19e892cf
<template>
<Layout-Child class='page-scroll'>
<div class="pt-6 pb-28">
<div class="grid grid-cols-3 w-11/12 mx-auto mt-6">
<div
class="box px-2 py-3"
v-for="(i, index) in serviceData"
:key="index"
>
<app-tag
:text="i.name"
class="text-sm rounded-xl text-font-white bg-app-red"
@onclick="tagOnclick"
:active="isActive(i.id)"
:id="i.id"
></app-tag>
</div>
</div>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data() {
return {
picked: [] as Array<{ id: number; text: string }>,
serviceData: {},
maxNum: 1,
selectType: this.$route.query.text
};
},
async mounted() {
this.$toast.loading({
message: '类型获取中',
duration: 20000,
})
this.serviceData = await this.$service.nftService.getThemeList(this.$route.query.id);
this.$toast.clear()
},
components: {
"Layout-Child": () => import("@/layout/Child.vue"),
"app-tag": () => import("@/components/common/Tag2.vue"),
},
methods: {
tagOnclick(item: any) {
this.$router.push({name:'NftPick',query:{text:item.text,categoryId:this.$route.query.id,id:item.id}})
this.picked = [{
id: item.id,
text: item.text,
}]
},
isActive(id: number) {
return !!this.picked.find((i) => i.id === id);
},
},
});
</script>
src/view/NFT/Detail/index.vue
View file @ d32ce87c
......@@ -3,6 +3,7 @@
<div class="w-11/12 mx-auto mt-6 text-font-white">
<SkeletonNftDetail v-if="showSkelton" />
<!-- 领取纪念版NFT页面 -->
<div v-if="$route.query.officia">
<div class="h-80">
......@@ -38,10 +39,15 @@
</div>
</div>
<!-- 不是纪念版NFT -->
<app-collectionCard :colletionData="nftData" v-else></app-collectionCard>
<!-- <app-collectionCard :colletionData="nftData" v-else></app-collectionCard> -->
<div>
<div class="h-72 flex items-center">
<!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
<img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'/img/zx_default_img.png'" alt="" />
</div>
</div>
<!-- 几个图标 -->
<div class="app-icons mx-auto flex justify-around my-6" v-if="isOwner">
<!-- <div class="app-icons mx-auto flex justify-around my-6" v-if="isOwner">
<div
v-for="(i, index) in (nftData.isCommemorate == 0?apps:ComApps)"
:key="index + nftData.isCommemorate"
......@@ -57,10 +63,17 @@
</div>
</div>
</div>
</div>
</div> -->
<!-- 发行人 -->
<div
<div class="">
<div class=" text-zx-blue-light mt-2">灵魂中的倾听</div>
<div class=" flex justify-between mt-1">
<div class=" text-zx-blue-white">NFT类型：<span class=" text-zx-blue-light">插画</span> </div>
<div class=" text-zx-blue-white">创作者：<span class=" text-zx-blue-light">{{ nftData.publisher ? nftData.publisher : "匿名" }}</span> </div>
</div>
</div>
<!-- <div
class="
text-xs
w-full
......@@ -84,11 +97,20 @@
</div>
<div class="mt-1 text-font-dark-blue">{{ nftData.wallet?nftData.wallet:nftData.publishAddress }}</div>
</div>
</div> -->
<div class="py-3">
<!-- <div class="text-font-dark-blue">剧本简介</div> -->
<div class="text-font-dark-blue" v-if="nftData.isCommemorate == 0">作品简介</div>
<div class="text-font-dark-blue" v-if="nftData.isCommemorate == 1 || $route.query.officia">纪念版NFT简介</div>
<div class="py-2 tracking-wide leading-6 text-sm break-all text-zx-blue-light">
{{ nftData.synopsis ? nftData.synopsis : "无" }}
</div>
</div>
<div class="flex w-2/3 m-auto justify-between mt-5 text-font-dark-blue">
<div @click="changeBanner(0)" :class="{'text-white':bannerIndex == 0}">NFT信息</div>
<div @click="changeBanner(1)" :class="{'text-white':bannerIndex == 1}">溯源查询</div>
<div class="flex w-2/3 m-auto justify-between mt-5 text-zx-blue-white">
<div @click="changeBanner(0)" :class="{'text-zx-blue-light':bannerIndex == 0}">NFT信息</div>
<div @click="changeBanner(1)" :class="{'text-zx-blue-light':bannerIndex == 1}">溯源查询</div>
</div>
<div class="py-3" v-if="bannerIndex == 0">
......@@ -98,6 +120,7 @@
text="编号"
:value="nftData.nftId"
boxType="border"
class=" text-zx-blue-light"
></app-cell>
<app-cell
......@@ -107,6 +130,7 @@
boxType="border"
type="showText"
:needCopy="true"
class=" text-zx-blue-light"
></app-cell>
<app-cell
v-else
......@@ -115,11 +139,13 @@
boxType="border"
type="showText"
:needCopy="true"
class=" text-zx-blue-light"
></app-cell>
<app-cell
text="发行时间"
:value="nftData.publishTime"
boxType="border"
class=" text-zx-blue-light"
></app-cell>
</div>
......@@ -134,6 +160,7 @@
text="作者"
:value="nftData.author ? nftData.author : '无'"
boxType="border"
class=" text-zx-blue-light"
></app-cell>
<!-- <app-cell
text="发行人地址"
......@@ -158,17 +185,8 @@
</div>
<div class="py-3" v-if="bannerIndex == 0">
<!-- <div class="text-font-dark-blue">剧本简介</div> -->
<div class="text-font-dark-blue" v-if="nftData.isCommemorate == 0">作品简介</div>
<div class="text-font-dark-blue" v-if="nftData.isCommemorate == 1 || $route.query.officia">纪念版NFT简介</div>
<div class="py-2 tracking-wide leading-6 text-sm break-all">
{{ nftData.synopsis ? nftData.synopsis : "无" }}
</div>
</div>
<div class="py-3" v-if="bannerIndex == 0">
<div class="text-font-dark-blue">关于NFT</div>
<div class="py-2 tracking-wide leading-6 text-sm break-all">
<div class="py-2 tracking-wide leading-6 text-sm break-all text-zx-blue-light">
NFT全称为Non-Fungible
Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。
</div>
......@@ -176,7 +194,7 @@
<div class="py-3" v-if="!$route.query.officia && bannerIndex == 0">
<div class="text-font-dark-blue">流转记录</div>
<div class="text-center py-5">暂无记录</div>
<div class="text-center py-5 text-zx-blue-light">暂无记录</div>
</div>
<source-search v-if="bannerIndex == 1"></source-search>
......@@ -196,8 +214,8 @@
items-center
px-5
pb-7
bg-font-black bg-opacity-80
shadow-nav
bg-white bg-opacity-80
shadow
flex-col
"
v-if="!$route.query.officia"
......@@ -233,26 +251,32 @@
/> -->
</div>
</div>
<div class='flex w-full items-center'>
<div class="flex-grow-0">
<div @click="editCollection">
<app-icon
name="icon-heart1"
size="25px"
v-if="inMyCollection"
color="#ED6F6F"
></app-icon>
<app-icon name="icon-heart" size="25px" v-else></app-icon>
<div class='flex w-full items-center'>
<div class="flex-grow-0">
<div @click="editCollection">
<app-icon
name="icon-heart1"
size="25px"
v-if="inMyCollection"
color="#ED6F6F"
></app-icon>
<app-icon name="icon-heart" color="#A7B5CD" size="25px" v-else></app-icon>
</div>
</div>
<div class="flex-grow pl-8">
<!-- <app-btn
@click.native="confirmBtn"
text="咨询作者"
class="w-full mx-auto text-font-white bg-zx-blue-light"
border="none"
></app-btn> -->
<app-btn
text="咨询作者"
class="w-full mx-auto text-font-white bg-zx-blue-light"
border="none"
></app-btn>
</div>
</div>
<div class="flex-grow pl-8">
<app-btn
@click.native="confirmBtn"
text="查看内容"
class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div>
</div>
</div>
......@@ -451,11 +475,11 @@ export default Vue.extend({
components: {
"Layout-Child": () => import("@/layout/Child.vue"),
"app-icon": () => import("@/components/common/Icon.vue"),
"app-tag": () => import("@/components/common/Tag.vue"),
// "app-tag": () => import("@/components/common/Tag.vue"),
"app-cell": () => import("@/components/common/Cell.vue"),
"app-btn": () => import("@/components/common/Btn.vue"),
// 'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
"app-collectionCard": () => import("@/components/CollectionCard.vue"),
// "app-collectionCard": () => import("@/components/CollectionCard.vue"),
"certificate": () => import("@/view/NFT/Create/components/certificate/index.vue"),
SkeletonNftDetail,
'sourceSearch': ()=>import('./components/sourceSearch.vue'),
......
src/view/NFT/Mynft/index.vue
View file @ d32ce87c
......@@ -81,7 +81,7 @@ export default Vue.extend({
async created() {
const cates = await this.$service.nftService.getCategory()
if(this.$route.query.category){
const index = await cates.findIndex(i=>{
const index = await cates.findIndex((i:any)=>{
return i.categoryName == this.$route.query.category
})
......
src/view/NFT/Transfer/form.vue
View file @ d32ce87c
......@@ -76,7 +76,7 @@
@click.native="submitTransfer"
:disabled='validateUser'
text="下一步"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light"
border="none"
></app-btn>
</div>
......
src/view/Other/PhotoEdit.vue
View file @ d32ce87c
......@@ -6,7 +6,7 @@
</div>
</div>
<div class="fixed bottom-3 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'></app-btn>
<app-btn text="确认上传" class="w-11/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light" border='none'></app-btn>
</div>
</Layout-Child>
</template>
......
src/view/User/Edit.vue
View file @ d32ce87c
......@@ -22,7 +22,7 @@
</div>
</div>
<div class="fixed bottom-3 w-full left-0 z-30">
<app-btn text="确认" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled='btnDisabled' border='none' @click.native='submitUserInfo'></app-btn>
<app-btn text="确认" class="w-11/12 mx-auto text-font-white rounded-2xl bg-zx-blue-light" :disabled='btnDisabled' border='none' @click.native='submitUserInfo'></app-btn>
</div>
</Layout-Child>
</template>
......
src/view/User/index.vue
View file @ d32ce87c
<template>
<Layout-Child>
<div class=" w-11/12 mx-auto py-6 text-font-white">
<div class=" w-11/12 mx-auto py-6 text-zx-blue-light">
<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" />
......
tailwind.config.js
View file @ d32ce87c
......@@ -41,6 +41,10 @@ module.exports = {
"font-gray":"#8899B3",
"table-light-blue":'#35406C',
"table-dark-blue":'":"#1C2654',
"zx-blue-light":"#2B446C",
"zx-blue-white":"#A7B5CD",
"zx-btn-disabled-bg": "#F5F5F5",
"zx-btn-disabled-text": "#A7B5CD",
black: colors.black,
white: colors.white,
gray: colors.coolGray,
......
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