|
|
@@ -0,0 +1,288 @@
|
|
|
+// otherPages/loadArrive/shipSign.js
|
|
|
+var canvas = null;
|
|
|
+const app = getApp()
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ id:'',
|
|
|
+ ctx: null,
|
|
|
+ points: [], // 存储所有笔画
|
|
|
+ currentStroke: [], // 当前笔画
|
|
|
+ isDrawing: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad(options) {
|
|
|
+ this.setData({
|
|
|
+ id:options.id
|
|
|
+ })
|
|
|
+ this.initCanvas();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化画布
|
|
|
+ * 设置画布大小、像素比例和画笔样式
|
|
|
+ */
|
|
|
+ async initCanvas() {
|
|
|
+ // 使用ID获取canvas组件实例
|
|
|
+ const query = wx.createSelectorQuery();
|
|
|
+ query.select('#canvas')
|
|
|
+ .fields({ node: true, size: true })
|
|
|
+ .exec((res) => {
|
|
|
+ canvas = res[0].node;
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // Canvas 画布的实际绘制宽高
|
|
|
+ const width = res[0].width
|
|
|
+ const height = res[0].height
|
|
|
+ // 设置画布大小，使用新的API获取设备像素比
|
|
|
+ const dpr = wx.getWindowInfo().pixelRatio;
|
|
|
+ canvas.width = width * dpr;
|
|
|
+ canvas.height = height * dpr;
|
|
|
+ ctx.scale(dpr, dpr);
|
|
|
+
|
|
|
+ // 设置画笔样式
|
|
|
+ ctx.strokeStyle = '#000000';
|
|
|
+ ctx.lineWidth = 3;
|
|
|
+ ctx.lineCap = 'round';
|
|
|
+ ctx.lineJoin = 'round';
|
|
|
+
|
|
|
+ //绘制背景
|
|
|
+ ctx.fillStyle = '#fff'
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
|
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
|
+
|
|
|
+ this.setData({ ctx });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理触摸开始事件
|
|
|
+ * 开始一个新的笔画，记录起始点
|
|
|
+ * @param {Object} e - 触摸事件对象
|
|
|
+ */
|
|
|
+ handleTouchStart(e) {
|
|
|
+ const { x, y } = e.touches[0];
|
|
|
+ this.setData({
|
|
|
+ isDrawing: true,
|
|
|
+ currentStroke: [[x, y]]
|
|
|
+ });
|
|
|
+ this.data.ctx.beginPath();
|
|
|
+ this.data.ctx.moveTo(x, y);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理触摸移动事件
|
|
|
+ * 继续绘制当前笔画的路径
|
|
|
+ * @param {Object} e - 触摸事件对象
|
|
|
+ */
|
|
|
+ handleTouchMove(e) {
|
|
|
+ if (!this.data.isDrawing) return;
|
|
|
+ const { x, y } = e.touches[0];
|
|
|
+ this.data.currentStroke.push([x, y]);
|
|
|
+ this.data.ctx.lineTo(x, y);
|
|
|
+ this.data.ctx.stroke();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理触摸结束事件
|
|
|
+ * 完成当前笔画，将其添加到笔画历史中
|
|
|
+ */
|
|
|
+ handleTouchEnd() {
|
|
|
+ if (!this.data.isDrawing) return;
|
|
|
+ this.setData({
|
|
|
+ isDrawing: false,
|
|
|
+ points: [...this.data.points, this.data.currentStroke],
|
|
|
+ currentStroke: []
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 清除画布内容
|
|
|
+ * 清空所有笔画记录和画布显示
|
|
|
+ */
|
|
|
+ handleClear() {
|
|
|
+ const { ctx } = this.data;
|
|
|
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
+ this.setData({ points: [] });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 撤销上一步操作
|
|
|
+ * 移除最后一笔，并重绘剩余的笔画
|
|
|
+ */
|
|
|
+ handleUndo() {
|
|
|
+ if (this.data.points.length === 0) return;
|
|
|
+
|
|
|
+ const { ctx } = this.data;
|
|
|
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
+
|
|
|
+ // 移除最后一笔
|
|
|
+ const newPoints = this.data.points.slice(0, -1);
|
|
|
+ this.setData({ points: newPoints });
|
|
|
+
|
|
|
+ // 重绘所有笔画
|
|
|
+ newPoints.forEach(stroke => {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(stroke[0][0], stroke[0][1]);
|
|
|
+ stroke.forEach(([x, y]) => {
|
|
|
+ ctx.lineTo(x, y);
|
|
|
+ });
|
|
|
+ ctx.stroke();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交签名
|
|
|
+ * 将画布内容转换为图片并处理提交逻辑
|
|
|
+ * @returns {Promise<void>}
|
|
|
+ */
|
|
|
+ async handleSubmit() {
|
|
|
+ let that = this
|
|
|
+ if (this.data.points.length === 0) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '请先签名',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 将画布内容转换为图片
|
|
|
+ const tempFilePath = await new Promise((resolve, reject) => {
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ canvas: canvas,
|
|
|
+ success: res => resolve(res.tempFilePath),
|
|
|
+ fail: reject
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 这里可以处理签名图片，比如上传到服务器
|
|
|
+ console.log('签名图片路径:', tempFilePath);
|
|
|
+
|
|
|
+ // 将图片转为 Base64
|
|
|
+ that.imageToBase64(tempFilePath, function (error, base64String) {
|
|
|
+ if (error) {
|
|
|
+ console.error('Base64 转换失败', error);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ that.setData({
|
|
|
+ signature: base64String
|
|
|
+ })
|
|
|
+ let formData = {
|
|
|
+ id : that.data.id,
|
|
|
+ arriveSign : base64String
|
|
|
+ }
|
|
|
+ // 上传 Base64 编码的图片,订单签名
|
|
|
+ app.request.POST({
|
|
|
+ url: app.API.bizloadarriveSign,
|
|
|
+ params: formData,
|
|
|
+ page: that,
|
|
|
+ isLoadingTxt: '提交中...',
|
|
|
+ isSubmitting: true,
|
|
|
+ successFun: true
|
|
|
+ }).then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ title: '确认成功',
|
|
|
+ icon: 'success',
|
|
|
+ duration: 2000,
|
|
|
+ complete: function () {
|
|
|
+ setTimeout(() => {
|
|
|
+ wx.navigateBack()
|
|
|
+ }, 1500) //延迟时间
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ //that.selfConfirm(base64String);
|
|
|
+ });
|
|
|
+
|
|
|
+ // wx.showToast({
|
|
|
+ // title: '提交成功',
|
|
|
+ // icon: 'success'
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // 返回上一页
|
|
|
+ // setTimeout(() => {
|
|
|
+ // wx.navigateBack();
|
|
|
+ // }, 1500);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('提交签名失败:', error);
|
|
|
+ wx.showToast({
|
|
|
+ title: '提交失败',
|
|
|
+ icon: 'error'
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //图片转baose64
|
|
|
+ imageToBase64(tempFilePath, callback) {
|
|
|
+ wx.getFileSystemManager().readFile({
|
|
|
+ filePath: tempFilePath,
|
|
|
+ encoding: 'base64',
|
|
|
+ success: function (res) {
|
|
|
+ // 拼接与 PC 端一致的格式
|
|
|
+ var base64Str = "data:image/png;base64," + res.data;
|
|
|
+ callback(null, base64Str);
|
|
|
+ },
|
|
|
+ fail: function (error) {
|
|
|
+ callback(error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage() {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
