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
|
// subpages/index/checkOutConfirm/index/index.js
|
||||
Page({ |
Page({ |
||||
|
/** |
||||
/** |
* 页面的初始数据 |
||||
* 页面的初始数据 |
*/ |
||||
*/ |
data: { |
||||
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", |
||||
onLoad(options) { |
}, |
||||
|
{ type: "image", src: "https://img.yzcdn.cn/vant/cat.jpeg" }, |
||||
}, |
], |
||||
|
signImgSrc: "", // 签名图片路径
|
||||
/** |
canvasName: 'myCanvas', |
||||
* 生命周期函数--监听页面初次渲染完成 |
ctx: '', |
||||
*/ |
canvas: '', |
||||
onReady() { |
canvasWidth: 0, |
||||
|
canvasHeight: 0, |
||||
}, |
}, |
||||
|
scrollToView: function () { |
||||
/** |
this.setData({ |
||||
* 生命周期函数--监听页面显示 |
toView: "item1", |
||||
*/ |
}); |
||||
onShow() { |
}, |
||||
|
gotoSign: function () { |
||||
}, |
wx.navigateTo({ |
||||
|
url: "/subpages/index/checkOutConfirm/sign/sign", |
||||
/** |
}); |
||||
* 生命周期函数--监听页面隐藏 |
}, |
||||
*/ |
captureScrollArea() { |
||||
onHide() { |
const query = wx.createSelectorQuery() |
||||
|
query.select("#contentTitle").boundingClientRect(); |
||||
}, |
query.select("#contentTitle").scrollOffset(); |
||||
|
|
||||
/** |
query.exec((res) => { |
||||
* 生命周期函数--监听页面卸载 |
console.log('res',res) |
||||
*/ |
const scrollArea = res[0] |
||||
onUnload() { |
const scrollOffset = res[1] |
||||
|
const { width, height } = scrollArea |
||||
}, |
|
||||
|
// 设置 canvas 尺寸
|
||||
/** |
this.setData({ |
||||
* 页面相关事件处理函数--监听用户下拉动作 |
canvasWidth: width, |
||||
*/ |
canvasHeight: height |
||||
onPullDownRefresh() { |
}) |
||||
|
|
||||
}, |
const ctx = wx.createCanvasContext('myCanvas') |
||||
|
|
||||
/** |
// 绘制滚动区域内容到 canvas
|
||||
* 页面上拉触底事件的处理函数 |
ctx.drawImage(scrollArea.node, 0, 0, width, height) |
||||
*/ |
console.log('area',scrollArea.node); |
||||
onReachBottom() { |
ctx.draw(false, () => { |
||||
|
// 生成图片
|
||||
}, |
wx.canvasToTempFilePath({ |
||||
|
canvasId: 'myCanvas', |
||||
/** |
success: (res) => { |
||||
* 用户点击右上角分享 |
console.log('截图路径:', res) |
||||
*/ |
// 可以在这里处理截图，如保存到相册等
|
||||
onShareAppMessage() { |
}, |
||||
|
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--> |
<!-- 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> |
||||
@ -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