fle

package-lock.json

       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "signature_pad": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/signature_pad/-/signature_pad-4.0.2.tgz",
+      "integrity": "sha512-4jHtgCVvihLLPr0H4F0hB4eE9YOMcr/V9rFWwhPqzJ5qsBYhj7sg/B0yvcyM4HB+eWTKVoIep8Xh7gM/gKq+sA=="
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
     },
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
       "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
       "dev": true,
       "optional": true,
       "dependencies": {
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "optional": true,
         },
         "loader-utils": {
           "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
           "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
           "dev": true,
           "optional": true,

package.json

     "animate.css": "^4.1.1",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "signature_pad": "^4.0.2",
+    "smooth-signature": "^1.0.11",
     "vant": "^2.12.44",
     "vue": "^2.6.11",
     "vue-router": "^3.5.3",
       "parser": "babel-eslint"
     },
     "rules": {
-        "no-unused-vars":"off"
+      "no-unused-vars": "off"
     }
   },
   "browserslist": [

src/router/index.js

 import MyCollection from '@/views/MyCollection.vue'//收藏
 import SignIn from '@/views/SignIn.vue'//打卡
 import ClassInfo from '@/views/ClassInfo.vue'//课堂详情
+import WriteText from '@/views/WriteText.vue'//手写签名
+
 import StrongPhoto from '@/views/StrongPhoto.vue'//精彩集锦
 import UserCenter from '@/views/UserCenter.vue'//我的页面
 import Questionnaire from '@/views/Questionnaire.vue'
 import SetUser from '@/views/userPages/SetUser.vue'//修改个人信息
+
 import { share } from '../util/initial'
 
 
       name: 'MyCollection',
       component: MyCollection,
     },
+    //手写签名
+    {
+      path: '/WriteText',
+      name: 'WriteText',
+      component: WriteText,
+    },
+
   ]
 
 })

src/views/Course.vue

   },
 
   methods: {
-    // wen() {
-    //   this.$router.push({
-    //     name: 'Questionnaire',
-    //     params: { id: 'f5a47d178019bda33a370d7a6ed1e4c3' }
-    //   })
-    // },
-    // qian() {
-    //   this.$router.push({
-    //     name: 'SignIn',
-    //     params: { signId: '4ed7a69dc0df0e9132679d58a58fbf5a' }
-    //   })
-    // },
     goQuestion(courseId) {
       this.$router.push({ name: 'ClassInfo', params: { courseId: courseId } })
-      // this.$router.push('/Questionnaire')
+      // this.$router.push('/WriteText')
     },
     parseTime, //时间格式化
 

src/views/UserCenter.vue

           icon: require('@/assets/userImag/wenjuan.png'),
           title: '我的收藏',
           path: '/MyCollection'
+        },
+        // this.$router.push('/WriteText')
+
+        {
+          icon: require('@/assets/userImag/shoucang.png'),
+          title: '我的问卷',
+          path: '/WriteText'
         }
-        // {
-        //   icon: require('@/assets/userImag/shoucang.png'),
-        //   title: '我的问卷',
-        //   path: '',
-        // }
       ]
     }
   },

src/views/WriteText.vue

+<template>
+  <div class="pcDemo">
+    <div class="actions">
+      <button class="clear" @click="handleClear">清空</button>
+      <!-- <button @click="handleUndo">撤销</button> -->
+      <button class="preview clear" @click="handlePreview">确定</button>
+      <!-- <button @click="handleColor">颜色</button> -->
+    </div>
+    <div class="tip">签名</div>
+    <canvas />
+  </div>
+</template>
+
+<script>
+import SmoothSignature from 'smooth-signature'
+export default {
+  name: 'pcDemo',
+  data() {
+    return {
+      openSmooth: true
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const canvas = document.querySelector('canvas')
+      const options = {
+        width: Math.min(window.innerWidth, 1000) * 0.98,
+        height: 600,
+        minWidth: 4,
+        maxWidth: 12,
+        color: '#000',
+        bgColor: '#f6f6f6'
+      }
+      this.signature = new SmoothSignature(canvas, options)
+    },
+    handleClear() {
+      this.signature.clear()
+    },
+    handleUndo() {
+      this.signature.undo()
+    },
+    handleColor() {
+      this.signature.color = '#' + Math.random().toString(16).slice(-6)
+    },
+    // 验证canvas画布是否为空函数
+    isCanvasBlank(canvas) {
+      let isEmpty = this.signature.isEmpty()
+      return isEmpty
+    },
+
+    handlePreview() {
+      // var c = document.querySelector('canvas') // 获取html的canvas对象，我这个id="myCanvas"
+      if (this.isCanvasBlank()) {
+        // console.log('🚀 ~ file: WriteText.vue ~ line 66 ~ handlePreview ~ c', c)
+        alert('请在签名区域签名后再次确认')
+        return
+      } else {
+        var image = this.signature.toDataURL('image/jpeg') // 得到生成后的签名base64位  url 地址
+        console.log(image) // 打印图片base64 url
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped >
+.pcDemo {
+  button {
+    width: 98%;
+    margin-right: 10px;
+    font-size: 18px;
+  }
+  canvas {
+    border: 2px dashed #ccc;
+    cursor: crosshair;
+  }
+  .actions {
+    width: 100vw;
+    text-align: center;
+    margin: 30px auto;
+    .clear {
+      width: 40vw;
+      height: 5vh;
+    }
+    // .preview {
+    //   width: 40vw;
+    //   height: 5vh;
+    // }
+  }
+  .tip {
+    color: #108eff;
+    margin: 0 auto;
+    width: 100vw;
+    text-align: center;
+    font-size: 20px;
+  }
+}
+</style>