321

src/main.ts

@@ -10,13 +10,13 @@ import service from './service'
 import { Plugin } from 'vue-fragment'
 import { Image as VanImage } from 'vant';
 
-import { Toast,Empty,Dialog } from 'vant'
+import { Toast,Empty,Dialog,Lazyload } from 'vant'
 import VConsole from 'vconsole';
 
 const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
 
-// window.console.log(vconsole,'移动console');
-
+window.console.log(vconsole,'移动console');
+Vue.use(Lazyload);
 Vue.use(VanImage);
 Vue.use(Dialog);
 Vue.use(Empty)

src/router/index.ts

@@ -58,6 +58,14 @@ const routes: Array<RouteConfig> = [
     ]
     },
     {
+      path:'/Nft/transfer',
+      name:'NftTransfer',
+      component: () => import('@/view/NFT/Transfer/index.vue'),
+      meta:{
+        title: 'NFT转让'
+      }
+    },
+    {
       path:'/Nft/MyList',
       name:'myListNft',
       component: () => import('@/view/NFT/Mynft/index.vue'),

src/view/Mine/index.vue

@@ -5,7 +5,9 @@
                 <van-image
                 width="80"
                 height="80"
-             
+                lazy-load
+                show-loading
+                show-error
                 round
                 fit="cover"
                 :src='getUserInfo.avatar?getUserInfo.avatar:"/img/mokeImg/avatar.png"'

src/view/NFT/Transfer/index.vue

+<template>
+<Layout-Child>
+123
+</Layout-Child>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+    data(){
+        return{
+
+        }
+    },
+ 
+  components:{
+       'Layout-Child':()=>import('@/layout/Child.vue')
+  },
+
+});
+</script>

src/view/Other/QrScan.vue

+<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";
+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/User/index.vue

 <template>
 <Layout-Child>
     <div class=" w-11/12 mx-auto py-6 text-font-white">
-        <input type="file" accept="image/*" capture="camera" class=" hidden" ref='fileElem' @change="fileUpload"/>
+        <input type="file" accept="image/*"   capture="camera" class="hidden" ref='fileElem2' @change="fileUpload"/>
+        <input type="file" accept="image/*"  class=" hidden" ref='fileElem' @change="fileUpload"/>
         <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
         <app-cell text='头像' boxType='border' type='image'  :value='avatarImgUrl?avatarImgUrl:this.userInfo.avatar?this.userInfo.avatar : "/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
         <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
@@ -72,10 +73,14 @@ export default Vue.extend({
       onSelect(item:any){
         this.show = false;
         let fEl =this.$refs.fileElem as HTMLInputElement
+        let fEl2 =this.$refs.fileElem as HTMLInputElement
         switch(item.name){
             case '从图片夹上传':
                 fEl.click();
             break; 
+            case '拍摄头像':
+                fEl2.click();
+            break; 
         }
         this.$toast(item.name);
       }