Skip to content

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

bug修复

parents b9c1e7d6 1106bc79
Hide whitespace changes
Inline Side-by-side
Showing with 507 additions and 185 deletions
.env
View file @ 124ada16
NODE_ENV = DEVELOPMENT NODE_ENV = DEVELOPMENT
VUE_APP_ENV = DEVELOPMENT VUE_APP_ENV = DEVELOPMENT
VUE_APP_TITLE=开发版本 VUE_APP_TITLE=开发版本
VUE_APP_URL = http://172.16.101.135:8001 VUE_APP_URL = http://172.16.101.136:8001
\ No newline at end of file \ No newline at end of file
src/components/CardList.vue
View file @ 124ada16
<template> <template>
<div class="list-container font-light"> <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="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' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.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='w-full '> <div class='w-full h-full flex items-center '>
<!-- <img src='/img/cover.png' class=" w-11/12 mx-auto rounded-xl shadow-md"> --> <!-- <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="rounded-md max-h-36 mx-auto" /> <img :src="k.cover?k.cover :'/img/cover.png'" class="rounded-md max-h-32 mx-auto" />
</div> </div>
<div class='mt-3'> <div class='mt-3'>
{{k.name}} {{k.name}}
</div> </div>
</div> </div>
<div class='absolute bottom-6 z-0 w-full '> <div class='absolute bottom-6 z-0 w-full '>
<img src="@/assets/img/holder.png" class="w-full "> <img src="@/assets/img/holder.png" class="w-full ">
</div> </div>
</div> </div>
<div class="scroll-padding"></div> <div class="scroll-padding"></div>
</div> </div>
......
src/components/common/ScrollBar.vue
View file @ 124ada16
<template> <template>
<div class="w-full flex justify-between py-3 items-center" > <div class="w-full flex justify-between py-3 items-center" >
<div class="flex-grow flex flex-row "> <div class="flex-grow flex flex-row ">
<van-tabs v-model="indexValue" class='w-11/12' swipeable @change="tabChange" lazy-render> <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-tab v-for='i in list' :key="i.id" :title='i.categoryName' :id='i.id'>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
...@@ -32,43 +32,26 @@ export default Vue.extend({ ...@@ -32,43 +32,26 @@ export default Vue.extend({
type:Array as PropType<Category[]>, type:Array as PropType<Category[]>,
required: true required: true
}, },
defaultActive:Number defaultIndex:Number
}, },
// watch:{
// 'defaultActive'(newv,oldv){
// console.log(newv,oldv);
// }
// },
data(){ data(){
return{ return{
// active: this.defaultActive, active: 0
listData:this.list
} }
}, },
components:{ components:{
'app-icon':()=>import('@/components/common/Icon.vue') 'app-icon':()=>import('@/components/common/Icon.vue')
}, },
computed:{ async created() {
indexValue:{ if(this.defaultIndex){
get():number{ this.active = this.defaultIndex
return this.defaultActive
},
set(id:any){
this.$emit('indexOnchange',id)
}
} }
}, },
methods:{ methods:{
tabChange(item:any){ tabChange(item:any){
console.log(item); console.log(item);
this.$emit('tabChange',{data:this.list[item],activeIndex:item+1})
this.$emit('tabChange',{data:this.list[item],activeIndex:item})
}, },
// indexChange(index:any){
// this.$emit('indexCahge',this.active)
// }
} }
}); });
......
src/layout/Child.vue
View file @ 124ada16
<template> <template>
<div id="Child" class="bg-font-black"> <div id="Child" class="bg-font-black">
<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 bg-font-light-black rounded-lg">
<div class=" flex flex-col text-font-white p-6 ">
<div class=' text-font-dark-blue'>安全验证</div>
<div class='text-xs my-1'>验证码已发送到您绑定的手机</div>
<input type="number" class=" bg-font-black py-2 px-1 w-48 my-3" v-model="codeValue" placeholder="请输入验证码">
<div class=' text-font-dark-blue text-xs self-end'> <span v-if="CodeData.resend"> {{CodeData.count}}秒后,重新发送</span> <span v-else class='text-font-blue'> 重新发送</span></div>
</div>
<!-- <div class='flex w-10/12 mx-auto justify-between'>
<app-btn text="取消" class=" text-font-gray"></app-btn>
<app-btn text="确认" class=' text-font-blue'></app-btn>
</div> -->
</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-font-black bg-opacity-75 z-40">
<NavHeader></NavHeader> <NavHeader></NavHeader>
</div> </div>
...@@ -14,9 +31,30 @@ ...@@ -14,9 +31,30 @@
import Vue from 'vue'; import Vue from 'vue';
import NavHeader from './NavHeader.vue' import NavHeader from './NavHeader.vue'
export default Vue.extend({ export default Vue.extend({
data(){
return{
codeValue:null
}
},
watch:{
codeValue(newV,oldV){
console.log(newV.length);
if(newV.length==4){
console.log('send');
}else if(newV.length>4){
this.codeValue = oldV
}
}
},
computed:{
CodeData:function(){
return this.$store.state.codeConfirmer
}
},
name: 'layout_child', name: 'layout_child',
components:{ components:{
NavHeader NavHeader,
// 'app-btn':()=>import('@/components/common/Btn.vue')
} }
}); });
</script> </script>
src/router/index.ts
View file @ 124ada16
...@@ -61,9 +61,25 @@ const routes: Array<RouteConfig> = [ ...@@ -61,9 +61,25 @@ const routes: Array<RouteConfig> = [
path:'/Nft/transfer', path:'/Nft/transfer',
name:'NftTransfer', name:'NftTransfer',
component: () => import('@/view/NFT/Transfer/index.vue'), component: () => import('@/view/NFT/Transfer/index.vue'),
meta:{ redirect:'/Nft/transfer/form',
title: 'NFT转让' children:[
} {
path:'/Nft/transfer/form',
name:'NftTransfer_form',
component: () => import('@/view/NFT/Transfer/form.vue'),
meta:{
title: 'NFT转让'
},
},
{
path:'/Nft/transfer/confirm',
name:'NftTransfer_confirm',
component: () => import('@/view/NFT/Transfer/confirm.vue'),
meta:{
title: '确认信息'
},
},
]
}, },
{ {
path:'/Nft/transfer/camera', path:'/Nft/transfer/camera',
......
src/service/nftService/nftService.ts
View file @ 124ada16
...@@ -2,6 +2,7 @@ import { Service } from '../Service' ...@@ -2,6 +2,7 @@ import { Service } from '../Service'
import { token } from '@/util/userInfoUtils' import { token } from '@/util/userInfoUtils'
import { iSaveData } from './types' import { iSaveData } from './types'
import { NftTransferDTO } from '@/types/Dto'
export class NFTService extends Service { export class NFTService extends Service {
router = { router = {
getMyList: { getMyList: {
...@@ -59,7 +60,13 @@ export class NFTService extends Service { ...@@ -59,7 +60,13 @@ export class NFTService extends Service {
path:'/commemorate/nft/receive', path:'/commemorate/nft/receive',
dataType: 'application/x-www-form-urlencoded' dataType: 'application/x-www-form-urlencoded'
}, },
nftTransfer:{
path:'/nft/transfer'
},
sendTransferCode:{
path:'/verificationCode/send/Sms/transferNft',
dataType: 'application/x-www-form-urlencoded'
}
} }
constructor() { constructor() {
super() super()
...@@ -337,4 +344,27 @@ export class NFTService extends Service { ...@@ -337,4 +344,27 @@ export class NFTService extends Service {
params:{id} params:{id}
}) })
} }
/**
* 转让NFT
* @param data NftTransferDTO
* @returns
*/
async nftTransfer(data:NftTransferDTO){
return this.service.post(this.router.nftTransfer.path,data,{
headers: {
Authorization: this.getAuth()
}
})
}
async sendTransferCode(){
return await this.service.post(this.router.sendTransferCode.path,{},{
headers: {
Authorization: this.getAuth(),
'Content-Type': this.router.officialNFTDetail.dataType,
}
})
}
} }
src/service/userService.ts
View file @ 124ada16
...@@ -11,7 +11,8 @@ export class UserService extends Service { ...@@ -11,7 +11,8 @@ export class UserService extends Service {
isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'}, isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'},
userInfo:{ path:'/user/detail',dataType:'application/x-www-form-urlencoded'}, userInfo:{ path:'/user/detail',dataType:'application/x-www-form-urlencoded'},
editUser:{path:'/user/update'}, editUser:{path:'/user/update'},
avatar:{ path:'/user/upload/avatar',dataType:'multipart/form-data'} avatar:{ path:'/user/upload/avatar',dataType:'multipart/form-data'},
getUserInfoByAddr:{ path:'/user/getUserByWallet', dataType:'application/x-www-form-urlencoded'}
} }
constructor(){ constructor(){
super() super()
...@@ -83,6 +84,14 @@ export class UserService extends Service { ...@@ -83,6 +84,14 @@ export class UserService extends Service {
}) })
} }
async getUserInfoByAddr(addr:string):Promise<any>{
return await this.service.get(this.router.getUserInfoByAddr.path,{
headers:{
Authorization: this.getAuth()
},
params:{"wallet":addr}
})
}
/** /**
* 编辑用户的相关信息 * 编辑用户的相关信息
......
src/store/codeConfimer.ts 0 → 100644
View file @ 124ada16
import {NFTService} from '@/service/nftService/nftService'
const nftService = new NFTService()
const stateData = {
show:false,
count:30,
counter:null as any,
value:null as any,
resend:false,
}
export type CodeType = typeof stateData
export const codeConfirmer = {
namespaced: true,
state: () => ({
...stateData,
}),
mutations: {
CountDown(state:CodeType):void{
console.log(state.count);
if(!state.counter){
state.counter = setInterval(()=>{
if(state.count>-1){
state.resend = false
state.count--
}else{
state.count = 30
state.resend = true
clearInterval(state.counter)
}
},1000)
}
},
SET_CODE(state:CodeType,payload:any){
state.value = payload
},
ToggleCode(state:CodeType){
state.show = !state.show;
},
},
actions: {
async openCodeConfirm({commit,state} :any){
if(!state.show){
commit('ToggleCode')
console.log(state.count);
commit('CountDown')
await nftService.sendTransferCode()
}
},
},
getters: {},
}
src/store/index.ts
View file @ 124ada16
...@@ -2,11 +2,15 @@ import Vue from 'vue' ...@@ -2,11 +2,15 @@ import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import {appStore} from './app' import {appStore} from './app'
import {create} from "./create" import {create} from "./create"
import {codeConfirmer} from "./codeConfimer"
import {nftTransfer} from "./transfer"
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
app:appStore, app:appStore,
codeConfirmer:codeConfirmer,
transfer:nftTransfer,
create create
} }
}) })
src/store/transfer.ts 0 → 100644
View file @ 124ada16
const stateData = {
count:0,
receiveWallet:'',
receiveName:'',
nftid:0,
nftname:'',
feeCost:0,
senderName:'',
senderWallet:'',
}
export type TransferType = typeof stateData
export const nftTransfer = {
namespaced: true,
state: () => ({
...stateData,
}),
mutations: {
SET_STATE(state: TransferType, payload: any) {
Object.assign(state, payload)
},
}
}
\ No newline at end of file
src/types/Dto.ts
View file @ 124ada16
...@@ -35,6 +35,15 @@ export interface PersonalCertifyDto{ ...@@ -35,6 +35,15 @@ export interface PersonalCertifyDto{
} }
export interface NftTransferDTO{
code:string,
codeType:string,
count: number,
id: number,
receiveWallet:string
}
export interface UserInfo{ export interface UserInfo{
authStatus?: number; authStatus?: number;
authType?: number; authType?: number;
......
src/view/NFT/Create/components/certificate/index.vue
View file @ 124ada16
...@@ -10,9 +10,10 @@ ...@@ -10,9 +10,10 @@
<div class="pt-6 xs:text-sm text-xs"> <div class="pt-6 xs:text-sm text-xs">
<div>影视区块链版权电子数据确权书</div> <div>影视区块链版权电子数据确权书</div>
</div> </div>
<div class=" h-40 flex items-center "> <div class=" h-40 flex items-center relative">
<img id="coverImg" v-if="!coverName" src="/img/cover.png" class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" /> <img id="coverImg" v-if="!coverName" src="/img/cover.png" class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
<img id="coverImg" :src="showUploadFile" v-else class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" /> <img id="coverImg" :src="showUploadFile" v-else class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
<img src="./mark.png" class=" absolute right-20 bottom-0"/>
</div> </div>
<div class="float-box w-full absolute -bottom-10 text-3xs xs:text-2xs"> <div class="float-box w-full absolute -bottom-10 text-3xs xs:text-2xs">
<div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded text-font-black"> <div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded text-font-black">
...@@ -68,7 +69,7 @@ import { mapState } from "vuex"; ...@@ -68,7 +69,7 @@ import { mapState } from "vuex";
export default Vue.extend({ export default Vue.extend({
data(){ data(){
return { return {
createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss') createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
} }
}, },
computed:{ computed:{
......
src/view/NFT/Detail/index.vue
View file @ 124ada16
...@@ -169,13 +169,31 @@ ...@@ -169,13 +169,31 @@
flex flex
items-center items-center
px-5 px-5
mb-7 pb-7
bg-font-black bg-opacity-80 bg-font-black bg-opacity-80
shadow-nav shadow-nav
flex-col
" "
v-if="!$route.query.officia" v-if="!$route.query.officia"
> >
<div class="flex-grow-0"> <div class="w-10/12 pt-8" v-if="showoverlay">
<app-cell text="文件类型" value="png" class="my-1"></app-cell>
<app-cell
text="文件名"
:value="nftData.fileName"
class="my-1"
></app-cell>
<div class="flex justify-center">
<van-image
class="my-3 self-center text-center"
width="180"
lazy-load
:src="nftData.fileUrl"
/>
</div>
</div>
<div class='flex w-full items-center'>
<div class="flex-grow-0">
<div @click="editCollection"> <div @click="editCollection">
<app-icon <app-icon
name="icon-heart1" name="icon-heart1"
...@@ -188,11 +206,14 @@ ...@@ -188,11 +206,14 @@
</div> </div>
<div class="flex-grow pl-8"> <div class="flex-grow pl-8">
<app-btn <app-btn
@click.native="confirmBtn"
text="查看内容" text="查看内容"
class="w-full mx-auto text-font-white rounded-2xl bg-font-blue" class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
border="none" border="none"
></app-btn> ></app-btn>
</div> </div>
</div>
</div> </div>
<div <div
...@@ -205,7 +226,7 @@ ...@@ -205,7 +226,7 @@
flex flex
items-center items-center
px-5 px-5
mb-7 pb-7
bg-font-black bg-opacity-95 bg-font-black bg-opacity-95
shadow-nav shadow-nav
flex-col flex-col
...@@ -363,6 +384,10 @@ export default Vue.extend({ ...@@ -363,6 +384,10 @@ export default Vue.extend({
} }
}else if(this.nftData.status == 0){ }else if(this.nftData.status == 0){
this.$router.push({name:'myListNft',query:{category:this.nftData.category}}) this.$router.push({name:'myListNft',query:{category:this.nftData.category}})
}else{
console.log(11);
this.showoverlay = true;
} }
}, },
async setMyCollection(): Promise<void> { async setMyCollection(): Promise<void> {
......
src/view/NFT/Mynft/index.vue
View file @ 124ada16
...@@ -37,8 +37,7 @@ ...@@ -37,8 +37,7 @@
<app-scrollbar <app-scrollbar
:list="categoryTypes" :list="categoryTypes"
@tabChange="getDataByCategory" @tabChange="getDataByCategory"
@indexOnchange='indexOnchange' :defaultIndex='defaultIndex'
:defaultActive='defaultActive'
></app-scrollbar> ></app-scrollbar>
<div class="myNFT-list-scroll"> <div class="myNFT-list-scroll">
<div v-if="listData.length > 0"> <div v-if="listData.length > 0">
...@@ -74,18 +73,20 @@ export default Vue.extend({ ...@@ -74,18 +73,20 @@ export default Vue.extend({
qrcode:'', qrcode:'',
srcData:'' as any, srcData:'' as any,
showAction:false, showAction:false,
defaultActive:0 defaultIndex:0
}; };
}, },
async created() { async created() {
this.categoryTypes = await this.$service.nftService.getCategory(); const cates = await this.$service.nftService.getCategory()
if(this.$route.query.category){ if(this.$route.query.category){
const index = await this.categoryTypes.findIndex(i=>{ const index = await cates.findIndex(i=>{
return i.categoryName == this.$route.query.category return i.categoryName == this.$route.query.category
}) })
this.defaultActive = index
this.defaultIndex = index
} }
console.log(this.defaultIndex);
this.categoryTypes = cates
}, },
async mounted() { async mounted() {
let data = await this.$service.nftService.getMyList(); let data = await this.$service.nftService.getMyList();
...@@ -113,8 +114,6 @@ export default Vue.extend({ ...@@ -113,8 +114,6 @@ export default Vue.extend({
}, },
openAction(){ openAction(){
console.log(11);
this.showAction = true; this.showAction = true;
}, },
copyAddr(addr:any){ copyAddr(addr:any){
......
src/view/NFT/Transfer/camera.vue
View file @ 124ada16
<template> <template>
<div id="scanner"> <div id="scanner">
<div class="model"> <div class="model">
<div class="scanner-view" v-if="showScannerView"> <div class="scanner-view">
<div class="scanner-view-arrow arrow1"></div> <div class="scanner-view-arrow arrow1"></div>
<div class="scanner-view-arrow arrow2"></div> <div class="scanner-view-arrow arrow2"></div>
<div class="scanner-view-arrow arrow3"></div> <div class="scanner-view-arrow arrow3"></div>
...@@ -29,10 +29,11 @@ ...@@ -29,10 +29,11 @@
import Vue from 'vue'; import Vue from 'vue';
import jsQR from "jsqr"; import jsQR from "jsqr";
import Quagga from "quagga"; import Quagga from "quagga";
import testImg from "@/assets/img/testCode.jpg"
export default Vue.extend({ export default Vue.extend({
name: "", name: "",
data() { data() {
return { cameraWidth: 0, cameraHeight: 0, timerID: 0,showScannerView:false}; return { cameraWidth: 0, cameraHeight: 0, timerID: 0};
}, },
beforeDestroy(){ beforeDestroy(){
console.log('clearInterval'); console.log('clearInterval');
...@@ -142,7 +143,7 @@ export default Vue.extend({ ...@@ -142,7 +143,7 @@ export default Vue.extend({
if (result.codeResult) { if (result.codeResult) {
console.log(result.codeResult); console.log(result.codeResult);
clearInterval(timer); clearInterval(timer);
_this.$router.push({name:'NftTransfer',query:{codeData:result.codeResult.code}}) _this.$emit("ondata", result.codeResult.code);
// alert("扫码成功，结果是..." + result.codeResult.code); // alert("扫码成功，结果是..." + result.codeResult.code);
} else { } else {
console.log("正在扫条形码...not detected 1"); console.log("正在扫条形码...not detected 1");
...@@ -160,7 +161,8 @@ export default Vue.extend({ ...@@ -160,7 +161,8 @@ export default Vue.extend({
}); });
if (code) { if (code) {
clearInterval(timer); clearInterval(timer);
_this.$router.push({name:'NftTransfer',query:{codeData:code.data}})
_this.$emit("ondata", code.data);
// //
// alert("扫码成功，结果是..." + code.data); // alert("扫码成功，结果是..." + code.data);
} else { } else {
...@@ -169,6 +171,7 @@ export default Vue.extend({ ...@@ -169,6 +171,7 @@ export default Vue.extend({
}, },
}, },
mounted() { mounted() {
console.log(navigator, "show navigator"); console.log(navigator, "show navigator");
if ( if (
(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) || (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||
...@@ -176,7 +179,6 @@ export default Vue.extend({ ...@@ -176,7 +179,6 @@ export default Vue.extend({
navigator.webkitGetUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia navigator.mozGetUserMedia
) { ) {
this.showScannerView = true
//调用用户媒体设备，访问摄像头 //调用用户媒体设备，访问摄像头
this.initVideo({ this.initVideo({
video: { video: {
...@@ -190,15 +192,14 @@ export default Vue.extend({ ...@@ -190,15 +192,14 @@ export default Vue.extend({
}, },
}); });
} else { } else {
// alert("你的浏览器不支持访问用户媒体设备"); // alert("你的浏览器不支持访问用户媒体设备");
this.$router.push({name:'NftTransfer',query:{codeData:'扫描失败'}}) this.$emit("onerror", "你的浏览器不支持访问用户媒体设备");
this.$toast('不支持访问用户媒体设备')
} }
}, },
}); });
</script> </script>
<style scoped> <style>
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
......
src/view/NFT/Transfer/confirm.vue 0 → 100644
View file @ 124ada16
<template>
<Layout-Child>
<div class=" w-10/12 mx-auto mt-6 text-font-white">
<app-cell text='NFT名称' boxType='border' :value='transferFormData.nftname'></app-cell>
<app-cell text='接收人姓名' boxType='border' :value='transferFormData.receiveName'></app-cell>
<app-cell text='接收地址' boxType='border' :value='transferFormData.receiveWallet'></app-cell>
<app-cell text='手续费' boxType='border' value='限时免费'></app-cell>
<app-cell text='数量' boxType='border' :value='transferFormData.count'></app-cell>
</div>
<div class="fixed flex bottom-3 w-full left-0 z-30">
<app-btn
@click.native="$router.go(-1)"
text="上一步"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
<app-btn
@click.native="submitTransfer"
text="确认转出"
class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
import { TransferType } from '@/store/transfer'
export default Vue.extend({
data(){
return{
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-cell':()=>import('@/components/common/Cell.vue'),
'app-btn':()=>import('@/components/common/Btn.vue')
},
methods:{
submitTransfer(){
this.$store.dispatch('codeConfirmer/openCodeConfirm')
}
},
computed:{
transferFormData():TransferType{
return this.$store.state.transfer
}
}
});
</script>
src/view/NFT/Transfer/form.vue 0 → 100644
View file @ 124ada16
<template>
<div>
<Layout-Child v-show="showTransfer">
<div class='mt-6 w-11/12 mx-auto break-all' @click="pageOnclick">
<div class="flex flex-col mb-6 text-font-dark-blue">
<div class="label">
NFT名称
</div>
<div class="value-container h-11 leading-10 bg-font-light-black px-3 mt-2 rounded">
{{this.$route.query.nftName}}
</div>
</div>
<div class="flex flex-col text-font-dark-blue">
<div class="label">
转出地址
</div>
<div class="value-container h-24 flex flex-row items-center bg-font-light-black px-3 mt-2 rounded">
<div>
<van-image
width="45"
height="45"
lazy-load
show-loading
show-error
round
fit="cover"
:src='this.$route.query.avatar?this.$route.query.avatar:"/img/mokeImg/avatar.png"'
/>
</div>
<div class="pl-3 pr-8">
<div>张丽莉</div>
<div class=" text-xs">cbdusbvudbvubdvu45656464646bduvbduvbud</div>
</div>
</div>
</div>
<div class="flex flex-col text-font-dark-blue mt-6">
<div class="label">
收款地址
</div>
<div class="value-container h-24 flex flex-row items-center relative bg-font-light-black px-3 mt-2 rounded " :class='receiveOnfocus?"border border-font-blue":""' @click='inputOnclick' >
<div >
<div class=" absolute right-3 top-10">
<app-icon name="icon-a-saoma1" size='24px' @click.native="goScalePage"></app-icon>
</div>
<van-image
width="45"
height="45"
lazy-load
show-loading
show-error
round
fit="cover"
:src='this.receiver.avatar?this.receiver.avatar:"/img/mokeImg/avatar.png"'
/>
</div>
<div class=" pl-3 pr-8 w-10/12 ">
<input class="text-base bg-transparent bg-opacity-0 text-font-white w-6/12" placeholder='接受人姓名' :value="receiver.name" disabled/>
<input v-model="receiver.addr" class=" text-xs bg-transparent bg-opacity-0 text-font-white w-full" placeholder='接受人地址' ref="addrInput" @blur="searchUser"/>
</div>
</div>
</div>
<div class=" text-font-dark-blue my-3">
<div>转让须知</div>
<ol class=" text-xs">
<li class="my-1">1. 由持有人发起NFT转让，不涉及线上现金交易 </li>
<li class="my-1">2. NFT成功转让后，无法撤销</li>
</ol>
</div>
<div class="py-60"></div>
</div>
<div class="fixed bottom-3 w-full left-0 z-30">
<app-btn
@click.native="submitTransfer"
text="下一步"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div>
</Layout-Child>
<camera v-if="showCamera" @onData="getData" @onerror="getError"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data(){
return{
receiveOnfocus:false,
receiver:{
name:'',
addr:'',
avatar:''
},
showTransfer: true,
showCamera: false,
codeData:''
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-icon':()=>import('@/components/common/Icon.vue'),
'app-btn':()=>import('@/components/common/Btn.vue'),
"camera":()=>import('./camera.vue')
},
methods:{
inputOnclick(e:Event){
e.preventDefault();
e.stopPropagation();
const input = this.$refs.addrInput as HTMLInputElement;
if(!this.receiveOnfocus){
this.receiveOnfocus = true;
input.focus()
}
},
pageOnclick(){
const input = this.$refs.addrInput as HTMLInputElement;
if(this.receiveOnfocus){
this.receiveOnfocus = false;
input.blur()
}
},
goScalePage(e:Event){
e.stopPropagation();
this.showTransfer = false
this.showCamera = true
},
getData(codeData:any){
this.receiver.addr = codeData
this.showTransfer = true
this.showCamera = false
},
getError(errorMes:any){
this.showTransfer = true
this.showCamera = false
this.$toast(errorMes)
// this.showCamera = false
},
submitTransfer(){
const input = this.$refs.addrInput as HTMLInputElement;
if( this.receiveOnfocus){
this.receiveOnfocus = false;
input.blur()
}else{
let data = {
count:1,
receiveWallet:this.receiver.addr,
receiveName:this.receiver.name,
nftid:Number(this.$route.query.nftId),
nftname:this.$route.query.nftName,
senderWallet:this.$route.query.from
}
this.$store.commit('transfer/SET_STATE',data)
console.log(this.$store.state.transfer);
this.$router.push({ name:'NftTransfer_confirm'})
}
},
async searchUser(){
const {addr} = this.receiver
if(addr.length>30){
const req = await this.$service.userService.getUserInfoByAddr(addr)
console.log(req);
if(req.wallet){
this.receiver.name = req.nickname?req.nickname:req.telephone
this.receiver.avatar = req.avatar
}else{
this.$toast.fail('没有找到该用户')
}
}else{
this.$toast.fail('请输入合法地址')
}
}
},
computed:{
getUserInfo():any{
return this.$util.userMsg.getUserMsg()
}
}
});
</script>
src/view/NFT/Transfer/index.vue
View file @ 124ada16
<template> <template>
<Layout-Child> <div>
<div class='mt-6 w-11/12 mx-auto break-all' @click="pageOnclick"> <keep-alive>
<div class="flex flex-col mb-6 text-font-dark-blue"> <router-view></router-view>
<div class="label"> </keep-alive>
NFT名称
</div>
<div class="value-container h-11 leading-10 bg-font-light-black px-3 mt-2 rounded">
{{this.$route.query.nftName}}
</div>
</div>
<div class="flex flex-col text-font-dark-blue">
<div class="label">
转出地址
</div>
<div class="value-container h-24 flex flex-row items-center bg-font-light-black px-3 mt-2 rounded">
<div>
<van-image
width="45"
height="45"
lazy-load
show-loading
show-error
round
fit="cover"
:src='this.$route.query.avatar?this.$route.query.avatar:"/img/mokeImg/avatar.png"'
/>
</div>
<div class="pl-3 pr-8">
<div>张丽莉</div>
<div class=" text-xs">cbdusbvudbvubdvu45656464646bduvbduvbud</div>
</div>
</div>
</div>
<div class="flex flex-col text-font-dark-blue mt-6">
<div class="label">
收款地址
</div>
<div class="value-container h-24 flex flex-row items-center relative bg-font-light-black px-3 mt-2 rounded " :class='receiveOnfocus?"border border-font-blue":""' @click='inputOnclick'>
<div >
<div class=" absolute right-3 top-10">
<app-icon name="icon-a-saoma1" size='24px' @click.native="goScalePage"></app-icon>
</div>
<van-image
width="45"
height="45"
lazy-load
show-loading
show-error
round
fit="cover"
:src='this.$route.query.avatar?this.$route.query.avatar:"/img/mokeImg/avatar.png"'
/>
</div>
<div class=" pl-3 pr-8 w-10/12 ">
<input class="text-base bg-transparent bg-opacity-0 text-font-white w-6/12" placeholder='接受人姓名' disabled/>
<input v-model="receiver.addr" class=" text-xs bg-transparent bg-opacity-0 text-font-white w-full" placeholder='接受人地址' ref="addrInput"/>
</div>
</div>
</div>
<div class="py-60"></div>
</div> </div>
<div class="fixed bottom-3 w-full left-0 z-30"> </template>
<app-btn \ No newline at end of file
text="转出"
class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue"
border="none"
></app-btn>
</div>
</Layout-Child>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data(){
return{
receiveOnfocus:false,
receiver:{
name:'',
addr:''
}
}
},
components:{
'Layout-Child':()=>import('@/layout/Child.vue'),
'app-icon':()=>import('@/components/common/Icon.vue'),
'app-btn':()=>import('@/components/common/Btn.vue')
},
methods:{
inputOnclick(e:Event){
e.preventDefault();
e.stopPropagation();
const input = this.$refs.addrInput as HTMLInputElement;
if(!this.receiveOnfocus){
this.receiveOnfocus = true;
input.focus()
}
},
pageOnclick(e:Event){
console.log(e.target);
const input = this.$refs.addrInput as HTMLInputElement;
if(this.receiveOnfocus){
this.receiveOnfocus = false;
input.blur()
}
},
goScalePage(e:Event){
e.stopPropagation();
this.$router.push({name:'NftTransferCamera'})
// console.log(e.target,'去相机扫描页面');
}
},
computed:{
getUserInfo(){
return this.$util.userMsg.getUserMsg()
}
}
});
</script>
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