11 changed files with 423 additions and 74 deletions
|
After Width: | Height: | Size: 730 B |
|
After Width: | Height: | Size: 885 B |
@ -1,66 +1,195 @@ |
|||
// subpages/index/checkOutConfirm/index/index.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
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, |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() {}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() {}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() {}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() {}, |
|||
}); |
|||
|
|||
@ -1,2 +1,91 @@ |
|||
<!--subpages/index/checkOutConfirm/index/index.wxml--> |
|||
<navigationBar title="退房确认" isSowArrow titleAlign="center"></navigationBar> |
|||
<!-- subpages/index/checkOutConfirm/index/index.wxml --> |
|||
<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> |
|||
@ -1 +1,119 @@ |
|||
/* subpages/index/checkOutConfirm/index/index.wxss */ |
|||
/* 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; |
|||
} |
|||
Loading…
Reference in new issue