退房确认

app.wxss

@@ -37,6 +37,9 @@ page{
 .flex-wrap{
   flex-wrap: wrap;
 }
+.flex-x-end{
+    justify-content: flex-end;
+}
 .card{
   background-color: #fff;
   border-radius: 20rpx;

pages/index/index.js

@@ -23,6 +23,7 @@ Page({
       },
       {
         name: "退房确认",
+        url: "/subpages/index/checkOutConfirm/index/index",
       },
       {
         name: "续期申请",

project.private.config.json

@@ -14,6 +14,13 @@
     "condition": {
         "miniprogram": {
             "list": [
+                {
+                    "name": "subpages/index/checkOutConfirm/index/index",
+                    "pathName": "subpages/index/checkOutConfirm/index/index",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
                 {
                     "name": "subpages/index/checkOutConfirm/sign/sign",
                     "pathName": "subpages/index/checkOutConfirm/sign/sign",

subpages/OCRCard/pages/confirm/confirm.wxss

@@ -41,6 +41,3 @@ page {
     height: 80rpx;
     margin: auto;
 }
-.van-cell{
-    /* line-height: 54rpx !important; */
-}

subpages/index/checkOutConfirm/index/index.js

@@ -1,18 +1,159 @@
 // subpages/index/checkOutConfirm/index/index.js
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
+    deviceCheckList: new Array(8).fill(0),
+    toView: "item5",
+    mediaList: [
+      { type: "image", src: "https://img.yzcdn.cn/vant/cat.jpeg" },
+      {
+        type: "video",
+        src: "https://cdn.uviewui.com/uview/resources/video.mp4",
+      },
+      { type: "image", src: "https://img.yzcdn.cn/vant/cat.jpeg" },
+    ],
+    signImgSrc: "", // 签名图片路径
+    canvasName: 'myCanvas',
+    ctx: '', 
+    canvas: '', 
+    canvasWidth: 0,
+    canvasHeight: 0,
+  },
+  scrollToView: function () {
+    this.setData({
+      toView: "item1",
+    });
+  },
+  gotoSign: function () {
+    wx.navigateTo({
+      url: "/subpages/index/checkOutConfirm/sign/sign",
+    });
+  },
+  captureScrollArea() {
+    const query = wx.createSelectorQuery()
+    query.select("#contentTitle").boundingClientRect();
+    query.select("#contentTitle").scrollOffset();
+    
+    query.exec((res) => {
+      console.log('res',res)
+      const scrollArea = res[0]
+      const scrollOffset = res[1]
+      const { width, height } = scrollArea
+
+      // 设置 canvas 尺寸
+      this.setData({
+        canvasWidth: width,
+        canvasHeight: height
+      })
 
+      const ctx = wx.createCanvasContext('myCanvas')
+
+      // 绘制滚动区域内容到 canvas
+      ctx.drawImage(scrollArea.node, 0, 0, width, height)
+console.log('area',scrollArea.node);
+      ctx.draw(false, () => {
+        // 生成图片
+        wx.canvasToTempFilePath({
+          canvasId: 'myCanvas',
+          success: (res) => {
+            console.log('截图路径:', res)
+            // 可以在这里处理截图，如保存到相册等
+          },
+          fail: (err) => {
+            console.error('截图失败:', err)
+          }
+        })
+      })
+    })
+  },
+  submit: function () {
+//    this.captureScrollArea()
+   wx.createSelectorQuery()
+   .select('#contentTitle') 
+   .fields({ node: true, size: true })
+   .exec(async res => {
+     const { posterSize } = this.data
+     wx.showLoading({
+       title: '海报生成中',
+       mask: false,
+     });
+     // Canvas 对象
+     console.log('resq1',res);
+     const canvas = res[0].node
+     // Canvas 画布的实际绘制宽高
+     const renderWidth = 300 * posterSize
+     const renderHeight = 4000 * posterSize
+     // Canvas 绘制上下文
+     const ctx = canvas.getContext('2d')
+
+     // 初始化画布大小
+     const dpr = wx.getWindowInfo().pixelRatio
+     canvas.width = renderWidth * dpr
+     canvas.height = renderHeight * dpr
+     ctx.scale(dpr, dpr)
+
+     // 插入直播间分享图
+     await this.createdImg(canvas, ctx, 'https://resurl.fuchuang.com/aef734b0-0b5b-11ee-b3ac-abf6790ece2d-juxingbeifen%402x.png', [0, 0, 300, 240]);
+
+     // 画个圆形将超出圆形部分的图片裁剪为圆形一样大
+     // 保存当前 Canvas 画布状态
+     ctx.save()
+     // 先画圆形
+     ctx.beginPath();
+     ctx.arc(235 * posterSize, 340 * posterSize, 48 * posterSize, 0, 2 * Math.PI * posterSize);
+     // 设置绘制圆形边框的颜色
+     ctx.strokeStyle = '#ffffff';
+     // 绘制圆形边框
+     ctx.stroke();
+     ctx.fillStyle = "#ffffff"
+     ctx.fill();
+     // 插入小程序二维码
+     ctx.clip()
+     await this.createdImg(canvas, ctx, 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7obwOicODY0ZfvZdp5VOoVLTxY0hibU7tq1UkFUUE7sC3Q/0', [200, 305, 70, 70]);
+     // 恢复到保存时的状态
+     ctx.restore()
+
+     ctx.fillStyle = '#333333';
+     ctx.font = `bold ${16 * posterSize}px 苹方-简 中粗体`;
+   
+
+     // 把当前画布指定区域的内容导出生成指定大小的图片
+     wx.canvasToTempFilePath({
+       canvas: canvas,
+       success: (res) => {
+         // 分享给朋友
+         console.log('res',res);
+         wx.showShareImageMenu({
+           path: res.tempFilePath,
+           success: (resShare) => {
+             console.log('showShareImageMenu调用成功：', resShare);
+           },
+           fail: (err) => {
+             console.log('showShareImageMenu调用失败：', err);
+           }
+         });
+       },
+       fail: (err) => {
+         console.log('canvasToTempFilePath调用失败:', err);
+       },
+       complete: () => {
+         wx.hideLoading();
        },
+     });
+   })
 
+  },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    const imgSrc = decodeURIComponent(options.imgSrc);
+    console.log("接收到的签名图片地址:", imgSrc);
+    this.setData({
+      signImgSrc: imgSrc,
+    });
   },
 
   /**
@@ -25,42 +166,30 @@ Page({
   /**
    * 生命周期函数--监听页面显示
    */
-    onShow() {
+  onShow() {},
-
-    },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-    onHide() {
+  onHide() {},
-
-    },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-    onUnload() {
+  onUnload() {},
-
-    },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-    onPullDownRefresh() {
+  onPullDownRefresh() {},
-
-    },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-    onReachBottom() {
+  onReachBottom() {},
-
-    },
 
   /**
    * 用户点击右上角分享
    */
-    onShareAppMessage() {
+  onShareAppMessage() {},
-
+});
-    }
-})

subpages/index/checkOutConfirm/index/index.json

@@ -6,6 +6,9 @@
       "van-button": "@vant/weapp/button/index",
       "van-tab": "@vant/weapp/tab/index",
       "van-tabs": "@vant/weapp/tabs/index",
-      "van-divider": "@vant/weapp/divider/index"
+      "van-divider": "@vant/weapp/divider/index",
+      "van-cell": "@vant/weapp/cell/index",
+      "van-cell-group": "@vant/weapp/cell-group/index",
+      "van-icon": "@vant/weapp/icon/index"
     }
   }

subpages/index/checkOutConfirm/index/index.wxml

@@ -1,2 +1,91 @@
 <!-- subpages/index/checkOutConfirm/index/index.wxml -->
-<navigationBar title="退房确认" isSowArrow titleAlign="center"></navigationBar>
+<navigationBar title="退房确认" isSowArrow titleAlign="left"></navigationBar>
+<view class="content">
+    <view class="content-title" id="contentTitle">
+        <scroll-view>
+            <view class="title-img" id="item1">
+                <van-image width="100%" height="200" src="/images/banner/banner1.png" />
+            </view>
+            <view class="info" id="item2">
+                <view class="title">国信棠樾云邸 三居室</view>
+                <view class="des">1号楼2单元201 南卧1</view>
+                <van-divider dashed customStyle="color:  #BBBBBB ; border-color:  #BBBBBB ;" />
+                <view class="item">
+                    <view class="item-des ">
+                        <view class="flex tit">
+                            居住人
+                            <view class="name">王女士</view>
+                        </view>
+                        <view class="flex tit">
+                            联系电话
+                            <view class="name">159****5678</view>
+                        </view>
+                        <view class="flex tit">
+                            居住日期
+                            <view class="name">2025-05-26至2025-08-08</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="check" id="item3">
+                <van-cell-group inset>
+                    <van-cell title="设备检查情况" border="{{false}}" title-style="color:#404040;font-size: 15px;font-weight: bold;" />
+                    <van-cell title="空调" title-style="color:#68758B;font-size: 15px;" wx:for="{{deviceCheckList}}" wx:key="index">
+                        <view slot="" class="flex flex-x-end">
+                            <van-icon name="/subpages/images/md-error.png" size="22px" />
+                            <van-icon name="/subpages/images/ze-checked.png" size="22px" />
+                            <view class="checkstatus">完好</view>
+                        </view>
+                    </van-cell>
+                </van-cell-group>
+            </view>
+            <view class="m-top-16 " id="item4">
+                <van-cell-group inset>
+                    <van-cell title="其他说明" border="{{false}}" title-style="color:#404040;font-size: 15px;font-weight: bold;" />
+                    <van-cell title-style="color:#68758B;font-size: 15px;">
+                        <view slot="title" class="flex ">
+                            <view class="checkstatus">所有设施完好，正常退房。</view>
+                        </view>
+                    </van-cell>
+                </van-cell-group>
+            </view>
+            <view class="m-top-16" id="item5">
+                <van-cell-group inset>
+                    <van-cell title="图片/视频" border="{{false}}" title-style="color:#404040;font-size: 15px;font-weight: bold;" />
+                    <van-cell title-style="color:#68758B;font-size: 15px;">
+                        <view slot="title" class="flex flex-wrap">
+                            <block wx:for="{{mediaList}}" wx:key="index">
+                                <view class="media-item">
+                                    <block wx:if="{{item.type === 'image'}}">
+                                        <van-image width="118" height="80" src="{{item.src}}" />
+                                    </block>
+                                    <block wx:else>
+                                        <video width="118px" height="80px" src="{{item.src}}"></video>
+                                    </block>
+                                </view>
+                            </block>
+                        </view>
+                    </van-cell>
+                </van-cell-group>
+            </view>
+        </scroll-view>
+    </view>
+</view>
+<view class=" fixed-bottom">
+    <view class="sign">
+        <view class="sign-title">请在以下区域手写签字</view>
+        <view class="sign-ara flex flex-center-j items-center" bind:tap="gotoSign">
+            <view class="sign-img" wx:if="{{signImgSrc}}">
+                <van-image width="325" height="100" src="{{signImgSrc}}" />
+            </view>
+            <view class="sign-txt " wx:else>在此区域手写签字</view>
+
+        </view>
+        <view class="btn">
+            <van-button slot="button" block type="primary" round color="linear-gradient(to right, #0DC6C6 , #46DBD5)" bind:tap="submit">
+                提交
+            </van-button>
+        </view>
+    </view>
+</view>
+<canvas style="position: absolute; left: -9999px; top: -9999px; width: {{canvasWidth}}px; height: {{canvasHeight}}px;" canvas-id="myCanvas" type="2d"></canvas>

subpages/index/checkOutConfirm/index/index.wxss

@@ -1 +1,119 @@
 /* subpages/index/checkOutConfirm/index/index.wxss */
+.content {
+    background: #f8f8f8;
+}
+
+.content-title {
+    position: relative;
+}
+
+.content-title scroll-view {
+    height: calc(100vh + 80vh);
+}
+
+
+
+.info {
+    background: #ffffff;
+    border-radius: 20rpx;
+    padding: 32rpx;
+    position: relative;
+    top: -30rpx;
+    z-index: 1;
+}
+
+.title {
+    color: #000000;
+    font-size: 32rpx;
+    font-weight: bold;
+}
+
+.des {
+    font-size: 28rpx;
+    line-height: 60rpx;
+}
+
+.item-des {
+    color: #A9AFBA;
+    font-size: 30rpx;
+}
+
+.name {
+    color: #000;
+    margin-left: 38rpx;
+}
+
+.tit {
+    line-height: 50rpx;
+}
+
+.checkstatus {
+    color: #101010;
+    font-size: 28rpx;
+    margin-left: 20rpx;
+}
+.media-item {
+    width: calc((100% / 3) - 20rpx); 
+  margin-left: 20rpx;
+  margin-bottom: 20rpx;
+}
+.media-item  video{
+    height: 160rpx;
+    width: 236rpx;
+}
+
+.media-item:nth-child(3n) {
+}
+
+.bottom {
+    background: #ffffff;
+
+}
+
+.fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    z-index: 100;
+    margin: 0 30rpx;
+}
+
+.sign {
+    margin: 34rpx;
+
+}
+
+.sign-title {
+    color: rgba(0, 0, 0, 1);
+    font-size: 32rpx;
+    margin-bottom: 30rpx;
+}
+
+.sign-ara {
+    width: 630rpx;
+    height: 200rpx;
+    background-color: rgba(232, 233, 234, 1);
+}
+
+.sign-img{
+    width: 100%;
+    height: 100%;
+    
+}
+
+.sign-txt {
+    color: rgba(187, 187, 187, 1);
+    font-size: 32rpx;
+    text-align: center;
+}
+
+.btn {
+
+    max-width: 440rpx;
+    width: calc(100% - 10rpx);
+    height: 80rpx;
+    margin: auto;
+    margin-top: 60rpx;
+}

subpages/index/checkOutConfirm/sign/sign.js

@@ -437,8 +437,10 @@ Page({
             setTimeout(function () {
                 wx.hideLoading()
                 wx.navigateTo({
-                    url: '/subpages/index/checkOutConfirm/index/index',
+                  url: `/subpages/index/checkOutConfirm/index/index?imgSrc=${encodeURIComponent(
-                })
+                    imgSrc
+                  )}`
+                });
             }, 1500)
         }