签订用户协议 vue 3 H5移动端(Vant 组件库)

Question

微信H5端，引导店家或用户签订

用户或合作协议（阅读，电子签名），用户隐私等协议；技术栈：Vue 3 H5移动端。

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue 3 和 Vant 组件库的基础上实现一个用户协议的签署功能，可以分为以下几个步骤：

1. 创建组件结构
2. 设计 UI 界面
3. 实现逻辑处理
4. 配置微信分享

首先，创建一个名为 Agreement.vue 的 Vue 文件，用于展示协议内容并提供电子签名的功能。

<template>
  <div class="agreement-container">
    <!-- 协议内容 -->
    <section class="agreement-content">
      <h2>用户协议</h2>
      <pre v-html="agreementText"></pre>
    </section>

    <!-- 电子签名区域 -->
    <section class="signature-area">
      <canvas ref="signatureCanvas" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" width="400" height="200"></canvas>
      <button @click="saveSignature">保存并提交</button>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const agreementText = `<p>这里是您的用户协议文本...</p>`;
// 在这里添加实际的协议内容

const signatureCanvasRef = ref(null);
let isDrawing = false;
let signatureData;

function onTouchStart(e) {
  isDrawing = true;
  handlePointerEvent('down', e);
}

function onTouchMove(e) {
  if (isDrawing) {
    handlePointerEvent('move', e);
  }
}

function onTouchEnd(e) {
  isDrawing = false;
  handlePointerEvent('up', e);
}

function handlePointerEvent(type, e) {
  const canvas = signatureCanvasRef.value;
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  ctx.lineTo(e.touches ? e.changedTouches[0].clientX - canvas.offsetLeft : e.clientX - canvas.offsetLeft,
            e.touches ? e.changedTouches[0].clientY - canvas.offsetTop : e.clientY - canvas.offsetTop);
  ctx.stroke();
  ctx.closePath();

  // 保存绘图数据
  if (!signatureData) {
    signatureData = [];
  }
  signatureData.push({
    type: type,
    x: e.clientX - canvas.offsetLeft,
    y: e.clientY - canvas.offsetTop,
  });
}

function saveSignature() {
  const canvas = signatureCanvasRef.value;
  const dataUrl = canvas.toDataURL();
  // 将 dataUrl 发送到后端服务器进行存储和验证
  // 示例代码：
  fetch('/api/save-signature', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ dataUrl }),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        alert('签名已保存并提交');
      } else {
        alert('签名保存失败，请重试');
      }
    })
    .catch((error) => {
      console.error('Error:', error);
      alert('签名保存失败，请稍后再试');
    });
}
</script>

<style scoped>
.agreement-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agreement-content {
  margin-bottom: 20px;
}

.signature-area {
  display: flex;
  justify-content: space-between;
}
</style>

接下来，你需要在其他组件中引入这个 Agreement 组件，并确保它能被正确地显示出来。例如，在 App.vue 中：

<template>
  <div id="app">
    <router-view />
    <router-link to="/agreement">查看并签署协议</router-link>
  </div>
</template>

<script>
import Agreement from './components/Agreement.vue';
import { createRouter, createWebHistory } from 'vue-router';
import { defineComponent } from 'vue';

const routes = [
  { path: '/agreement', component: Agreement },
];

export default defineComponent({
  name: 'App',
  components: {
    Agreement,
  },
  setup() {
    return {
      router: createRouter({
        history: createWebHistory(),
        routes,
      }),
    };
  },
});
</script>

为了在微信H5端分享，你需要在项目中安装微信JSSDK插件，比如 @wxtoken/jssdk，然后按照官方文档配置JSSDK：

1. 安装插件：npm install @wxtoken/jssdk --save
2. 配置 JSSDK：

// main.js 或者 app.js
import wxConfig from '@/config/wx.config.js'; // 你的微信配置文件
import WXTOKEN from '@wxtoken/jssdk';

const wxSDKInstance = new WXTOKEN(wxConfig);

const app = createApp(App);
app.use(WXTOKEN, wxSDKInstance);
app.mount('#app');

1. 在需要分享的页面中调用微信分享接口：

import { useStore } from 'pinia';
import { wxShare } from '@/utils/wx.utils';

setup() {
  const store = useStore();

  function share() {
    wxSDKInstance.init().then(() => {
      wxSDKInstance.updateTimelineShareData({
        title: '用户协议签署',
        link: window.location.href, // 分享链接
        imgUrl: '你的图片链接', // 可选，分享时显示的缩略图
      });

      wxSDKInstance.updateWechatTimelineShareData({
        desc: '请查看并签署用户协议',
      });

      wxSDKInstance.updateQQZoneShareData({
        title: '用户协议签署',
        description: '请查看并签署用户协议',
      });

      wxSDKInstance.updateWechatSessionShareData({
        title: '用户协议签署',
        link: window.location.href,
        imgUrl: '你的图片链接', // 可选，分享时显示的缩略图
        desc: '请查看并签署用户协议',
      });

      wxSDKInstance.showOptionMenu();
      wxSDKInstance.updateTimelineShareStatus(true);
      wxSDKInstance.updateWechatTimelineShareStatus(true);
      wxSDKInstance.updateWechatSessionShareStatus(true);
      wxSDKInstance.updateQQZoneShareStatus(true);
    });
  }

  onMounted(async () => {
    await wxSDKInstance.checkJsApi(['updateTimelineShareData', 'updateWechatTimelineShareData', 'updateQQZoneShareData', 'updateWechatSessionShareData']);
  });

  return { share };
}

注意：由于微信环境的特殊性，这里的代码示例可能需要根据实际情况进行调整，包括但不限于微信配置、JSSDK 初始化以及分享参数设置。此外，保存签名到后端服务器的具体实现依赖于你的后端服务架构，这部分需要你自己完成。