Skip to content

N
NFT
Commit 9f73b847 authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

Merge branch 'main' of gitlab.33.cn:HF_web/NFT

parents a70d378d 124ada16
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 19 deletions
.env
View file @ 9f73b847
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
package.json
View file @ 9f73b847
...@@ -18,9 +18,12 @@ ...@@ -18,9 +18,12 @@
"epic-spinners": "^1.1.0", "epic-spinners": "^1.1.0",
"html-to-image": "^1.6.2", "html-to-image": "^1.6.2",
"html2canvas": "^1.1.4", "html2canvas": "^1.1.4",
"jsqr": "^1.4.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"md5": "^2.3.0", "md5": "^2.3.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"mui": "0.0.1",
"quagga": "^0.12.1",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"validator": "^13.6.0", "validator": "^13.6.0",
"vant": "^2.12.22", "vant": "^2.12.22",
......
src/components/CardList.vue
View file @ 9f73b847
<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/layout/NavHeader.vue
View file @ 9f73b847
<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="$router.go(-1)"> <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>
</div> </div>
</div> </div>
...@@ -48,6 +48,15 @@ export default Vue.extend({ ...@@ -48,6 +48,15 @@ export default Vue.extend({
if(this.saveBtn.enable){ if(this.saveBtn.enable){
console.log(this.$route.params.type); console.log(this.$route.params.type);
} }
},
goback(){
if(this.$route.name == "NftTransfer"){
// const nftId = this.$route.query.nftId
// this.$router.push(`/Nft/${nftId}`)
history.go(-1)
}else {
history.go(-1)
}
} }
} }
}); });
......
src/router/index.ts
View file @ 9f73b847
...@@ -82,6 +82,14 @@ const routes: Array<RouteConfig> = [ ...@@ -82,6 +82,14 @@ const routes: Array<RouteConfig> = [
] ]
}, },
{ {
path:'/Nft/transfer/camera',
name:'NftTransferCamera',
component: () => import('@/view/NFT/Transfer/camera.vue'),
meta:{
title: 'NFT转让扫描'
}
},
{
path:'/Nft/MyList', path:'/Nft/MyList',
name:'myListNft', name:'myListNft',
component: () => import('@/view/NFT/Mynft/index.vue'), component: () => import('@/view/NFT/Mynft/index.vue'),
......
src/view/NFT/Create/components/certificate/index.vue
View file @ 9f73b847
...@@ -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/Transfer/camera.vue 0 → 100644
View file @ 9f73b847
<template>
<div id="scanner">
<div class="model">
<div class="scanner-view">
<div class="scanner-view-arrow arrow1"></div>
<div class="scanner-view-arrow arrow2"></div>
<div class="scanner-view-arrow arrow3"></div>
<div class="scanner-view-arrow arrow4"></div>
<div class="scanner-line"></div>
</div>
</div>
<video
class="video-view"
ref="video"
autoplay
playsinline="true"
webkit-playsinline="true"
></video>
<canvas
ref="canvas"
width="478"
height="850"
style="display: none"
></canvas>
</div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue';
import jsQR from "jsqr";
import Quagga from "quagga";
import testImg from "@/assets/img/testCode.jpg"
export default Vue.extend({
name: "",
data() {
return { cameraWidth: 0, cameraHeight: 0, timerID: 0};
},
beforeDestroy(){
console.log('clearInterval');
clearInterval(this.timerID)
},
methods: {
initVideo(constrains) {
let _this = this;
if (navigator.mediaDevices.getUserMedia) {
//最新标准API
navigator.mediaDevices
.getUserMedia(constrains)
.then(_this.videoSuccess)
.catch(_this.videoError);
} else if (navigator.webkitGetUserMedia) {
//webkit内核浏览器
navigator
.webkitGetUserMedia(constrains)
.then(_this.videoSuccess)
.catch(_this.videoError);
} else if (navigator.mozGetUserMedia) {
//Firefox浏览器
navagator
.mozGetUserMedia(constrains)
.then(_this.videoSuccess)
.catch(_this.videoError);
} else if (navigator.getUserMedia) {
//旧版API
navigator
.getUserMedia(constrains)
.then(_this.videoSuccess)
.catch(_this.videoError);
}
},
videoSuccess(stream) {
let video = this.$refs.video,
_this = this;
//将视频流设置为video元素的源
video.srcObject = stream;
//播放视频
video.play();
video.oncanplay = function () {
// 摄像头分辨率,手机480x640
console.log("摄像头分辨率");
console.log(video.videoWidth, video.videoHeight);
_this.cameraWidth = video.videoWidth;
_this.cameraHeight = video.videoHeight;
// 发送图片进行识别
_this.readImg();
};
},
videoError(error) {
this.$emit("onerror", `${error.name} ${error.message}`);
console.log("访问用户媒体设备失败：", error.name, error.message);
},
readImg() {
let video = this.$refs.video,
canvas = this.$refs.canvas,
context = canvas.getContext("2d"),
_this = this;
let timer = setInterval(function () {
context.drawImage(
video,
0,
0,
_this.cameraWidth,
_this.cameraHeight,
0,
0,
478,
850
);
// 扫码条形码
let imgUri = canvas.toDataURL();
_this.readBarcode(imgUri, timer);
// 扫码二维码
let imageData = context.getImageData(0, 0, 478, 850);
_this.readQrcode(imageData.data, timer);
}, 1000);
this.timerID = timer;
},
readBarcode(imgBase64, timer) {
let _this = this;
Quagga.decodeSingle(
{
inputStream: {
size: 1920,
},
locator: {
patchSize: "medium",
halfSample: false,
},
decoder: {
readers: [
{
format: "code_128_reader",
config: {},
},
],
},
locate: true,
src: imgBase64,
},
function (result) {
if (result) {
if (result.codeResult) {
console.log(result.codeResult);
clearInterval(timer);
_this.$emit("ondata", result.codeResult.code);
// alert("扫码成功，结果是..." + result.codeResult.code);
} else {
console.log("正在扫条形码...not detected 1");
}
} else {
console.log("正在扫条形码...not detected 2");
}
}
);
},
readQrcode(data, timer) {
let _this = this;
let code = jsQR(data, 478, 850, {
inversionAttempts: "dontInvert",
});
if (code) {
clearInterval(timer);
_this.$emit("ondata", code.data);
//
// alert("扫码成功，结果是..." + code.data);
} else {
console.log("正在扫二维码...");
}
},
},
mounted() {
console.log(navigator, "show navigator");
if (
(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//调用用户媒体设备，访问摄像头
this.initVideo({
video: {
height: 800,
facingMode: "environment",
// facingMode: {
// // 强制后置摄像头
// // exact: "user",
// exact: "environment",
// },
},
});
} else {
// alert("你的浏览器不支持访问用户媒体设备");
this.$emit("onerror", "你的浏览器不支持访问用户媒体设备");
}
},
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
#scanner {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.model {
box-sizing: border-box;
width: 100vw;
height: 100vh;
position: relative;
z-index: 88;
border-top: calc((100vh - 60vw) / 2) solid rgba(0, 0, 0, 0.2);
border-bottom: calc((100vh - 60vw) / 2) solid rgba(0, 0, 0, 0.2);
border-right: 20vw solid rgba(0, 0, 0, 0.2);
border-left: 20vw solid rgba(0, 0, 0, 0.2);
}
.scanner-view {
width: 100%;
height: 100%;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.3);
z-index: 89;
}
.scanner-line {
position: absolute;
width: 100%;
height: 1px;
background: #49ff46;
border-radius: 20px;
z-index: 90;
animation: myScan 1s infinite alternate;
}
@keyframes myScan {
from {
top: 0;
}
to {
top: 100%;
}
}
.scanner-view-arrow {
position: absolute;
width: 5vw;
height: 5vw;
border: 2px solid #09bb07;
}
.scanner-view-arrow.arrow1 {
top: -1px;
left: 0px;
z-index: 99;
border-right: none;
border-bottom: none;
}
.scanner-view-arrow.arrow2 {
top: -1px;
right: 0px;
z-index: 99;
border-left: none;
border-bottom: none;
}
.scanner-view-arrow.arrow3 {
bottom: -1px;
left: 0px;
z-index: 99;
border-right: none;
border-top: none;
}
.scanner-view-arrow.arrow4 {
bottom: -1px;
right: 0px;
z-index: 99;
border-left: none;
border-top: none;
}
.video-view {
position: absolute;
width: 100vw;
height: 100vh;
object-fit: cover;
top: 0px;
left: 0px;
z-index: 80;
}
</style>
src/view/NFT/Transfer/form.vue
View file @ 9f73b847
<template> <template>
<Layout-Child> <div>
<Layout-Child v-show="showTransfer">
<div class='mt-6 w-11/12 mx-auto break-all' @click="pageOnclick"> <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="flex flex-col mb-6 text-font-dark-blue">
<div class="label"> <div class="label">
...@@ -77,8 +78,9 @@ ...@@ -77,8 +78,9 @@
border="none" border="none"
></app-btn> ></app-btn>
</div> </div>
</Layout-Child> </Layout-Child>
<camera v-if="showCamera" @onData="getData" @onerror="getError"/>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -93,14 +95,18 @@ export default Vue.extend({ ...@@ -93,14 +95,18 @@ export default Vue.extend({
name:'', name:'',
addr:'', addr:'',
avatar:'' avatar:''
} },
showTransfer: true,
showCamera: false,
codeData:''
} }
}, },
components:{ components:{
'Layout-Child':()=>import('@/layout/Child.vue'), 'Layout-Child':()=>import('@/layout/Child.vue'),
'app-icon':()=>import('@/components/common/Icon.vue'), 'app-icon':()=>import('@/components/common/Icon.vue'),
'app-btn':()=>import('@/components/common/Btn.vue') 'app-btn':()=>import('@/components/common/Btn.vue'),
"camera":()=>import('./camera.vue')
}, },
methods:{ methods:{
inputOnclick(e:Event){ inputOnclick(e:Event){
...@@ -121,7 +127,19 @@ export default Vue.extend({ ...@@ -121,7 +127,19 @@ export default Vue.extend({
}, },
goScalePage(e:Event){ goScalePage(e:Event){
e.stopPropagation(); e.stopPropagation();
console.log(e.target,'去相机扫描页面'); 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(){ submitTransfer(){
const input = this.$refs.addrInput as HTMLInputElement; const input = this.$refs.addrInput as HTMLInputElement;
...@@ -161,7 +179,7 @@ export default Vue.extend({ ...@@ -161,7 +179,7 @@ export default Vue.extend({
} }
}, },
computed:{ computed:{
getUserInfo(){ getUserInfo():any{
return this.$util.userMsg.getUserMsg() return this.$util.userMsg.getUserMsg()
} }
} }
......
src/view/NFT/Transfer/index.vue
View file @ 9f73b847
...@@ -4,5 +4,4 @@ ...@@ -4,5 +4,4 @@
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</div> </div>
</template> </template>
\ No newline at end of file
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