Commit 1d561ee7 by yuzhenWang

Merge branch 'feature-20250609-优化cffp' into 'dev'

Feature 20250609 优化cffp

See merge request !5
parents 75594927 132a2700
...@@ -39,7 +39,8 @@ ...@@ -39,7 +39,8 @@
points: [], points: [],
//签名图片 //签名图片
SignatureImg: '', SignatureImg: '',
hasSign: false hasSign: false,
isDrawing: false // 新增绘制状态
}; };
}, },
props: ['showCanvas'], props: ['showCanvas'],
...@@ -67,36 +68,83 @@ ...@@ -67,36 +68,83 @@
this.ctx.lineCap = 'round'; this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round'; this.ctx.lineJoin = 'round';
}, },
//触摸开始,获取到起点 // //触摸开始,获取到起点
touchstart(e) { // touchstart(e) {
let startX = e.changedTouches[0].x; // let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y; // let startY = e.changedTouches[0].y;
let startPoint = { // let startPoint = {
X: startX, // X: startX,
Y: startY // Y: startY
}; // };
this.points.push(startPoint); // this.points.push(startPoint);
//每次触摸开始,开启新的路径 // //每次触摸开始,开启新的路径
this.ctx.beginPath(); // this.ctx.beginPath();
}, // },
//触摸移动,获取到路径点 // 触摸开始,获取到起点 - 修改后的方法
touchmove(e) { touchstart(e) {
let moveX = e.changedTouches[0].x; this.isDrawing = true;
let moveY = e.changedTouches[0].y; let startX = e.changedTouches[0].x;
let movePoint = { let startY = e.changedTouches[0].y;
X: moveX, let startPoint = {
Y: moveY X: startX,
}; Y: startY
this.points.push(movePoint); //存点 };
let len = this.points.length; this.points.push(startPoint);
if (len >= 2) { this.ctx.beginPath();
this.draw(); //绘制路径
} // 阻止事件冒泡
}, e.stopPropagation();
// 触摸结束,将未绘制的点清空防止对后续路径产生干扰 return false;
touchend() { },
this.points = []; // //触摸移动,获取到路径点
}, // touchmove(e) {
// let moveX = e.changedTouches[0].x;
// let moveY = e.changedTouches[0].y;
// let movePoint = {
// X: moveX,
// Y: moveY
// };
// this.points.push(movePoint); //存点
// let len = this.points.length;
// if (len >= 2) {
// this.draw(); //绘制路径
// }
// },
// 触摸移动,获取到路径点 - 修改后的方法
touchmove(e) {
if (!this.isDrawing) return;
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = {
X: moveX,
Y: moveY
};
this.points.push(movePoint);
let len = this.points.length;
if (len >= 2) {
this.draw();
}
// 阻止事件冒泡
e.stopPropagation();
return false;
},
// // 触摸结束,将未绘制的点清空防止对后续路径产生干扰
// touchend() {
// this.points = [];
// },
// 触摸结束 - 修改后的方法
touchend() {
this.isDrawing = false;
this.points = [];
// 阻止事件冒泡
if (e) {
e.stopPropagation();
}
return false;
},
//绘制笔迹 //绘制笔迹
draw() { draw() {
let point1 = this.points[0]; let point1 = this.points[0];
...@@ -154,6 +202,18 @@ ...@@ -154,6 +202,18 @@
}, },
mounted() { mounted() {
this.createCanvas(); this.createCanvas();
// 新增代码
// 在组件挂载时添加额外的事件监听
// #ifdef H5
const canvas = document.querySelector('.mycanvas');
if (canvas) {
canvas.addEventListener('touchmove', (e) => {
if (this.isDrawing) {
e.preventDefault();
}
}, { passive: false });
}
// #endif
} }
}; };
</script> </script>
...@@ -163,32 +223,22 @@ ...@@ -163,32 +223,22 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #fff; background: #fff;
// height: calc(100vh-44rpx);
//签名模块 //签名模块
.signature { .signature {
// position: fixed; touch-action: none; /* 禁用触摸操作 */
// top: 10px;
// left: 2%;
// z-index: 999;
width: 96%; width: 96%;
//canvas //canvas
.mycanvas { .mycanvas {
touch-action: none; /* 禁用触摸操作 */
width: 100%; width: 100%;
// height: calc(100vh - 200upx);
height: calc(100vh - 600rpx); height: calc(100vh - 600rpx);
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
} }
//底部按钮 //底部按钮
.footer { .footer {
// font-size: 14px;
// height: 150upx;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
// align-items: center;
// background-color: #fff;
// border-radius: 0 0 10px 10px;
// border-top: 1px solid #a7a7a733;
} }
} }
//生成的图片 //生成的图片
......
...@@ -37,7 +37,7 @@ const config = { ...@@ -37,7 +37,7 @@ const config = {
stage, stage,
prod prod
} }
let env = 'prod'; let env = 'dev';
let baseURL = config[env].base_url; let baseURL = config[env].base_url;
let apiURL = config[env].api_url; let apiURL = config[env].api_url;
......
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
"vueVersion" : "3", "vueVersion" : "3",
"h5" : { "h5" : {
"router" : { "router" : {
"base" : "/appYdhomeoffice/", "base" : "/cffp/",
"mode" : "history" "mode" : "history"
}, },
"devServer" : { "devServer" : {
......
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
}, },
touchMoveHandler:null, touchMoveHandler:null,
isScrollLocked: false // 新增滚动锁定状态
} }
}, },
components:{eSignature}, components:{eSignature},
...@@ -97,34 +98,90 @@ ...@@ -97,34 +98,90 @@
this.releaseScroll(); this.releaseScroll();
}, },
methods: { methods: {
// 锁定滚动 // // 锁定滚动
lockScroll() { // lockScroll() {
// #ifdef H5 // // #ifdef H5
if (this.touchMoveHandler) return; // 避免重复绑定 // if (this.touchMoveHandler) return; // 避免重复绑定
this.touchMoveHandler = (e) => { // this.touchMoveHandler = (e) => {
e.preventDefault(); // e.preventDefault();
}; // };
document.body.addEventListener( // document.body.addEventListener(
'touchmove', // 'touchmove',
this.touchMoveHandler, // this.touchMoveHandler,
{ passive: false } // { passive: false }
); // );
// #endif // // #endif
}, // },
// 释放滚动 // 锁定滚动 - 修改后的方法
releaseScroll() { lockScroll() {
// #ifdef H5 if (this.isScrollLocked) return;
if (this.touchMoveHandler) {
document.body.removeEventListener( // #ifdef H5
'touchmove', // 阻止触摸事件默认行为
this.touchMoveHandler this.touchMoveHandler = (e) => {
); // 检查触摸事件是否发生在签名区域内
this.touchMoveHandler = null; const signatureArea = document.querySelector('.signatureContent');
} if (signatureArea && signatureArea.contains(e.target)) {
// #endif e.preventDefault();
}, }
};
document.body.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
// #endif
// 在App端也需要禁用滚动
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const webview = page.$getAppWebview();
webview.setStyle({
scrollIndicator: 'none',
scrollsToTop: false,
bounce: 'none'
});
// #endif
this.isScrollLocked = true;
},
// // 释放滚动
// releaseScroll() {
// // #ifdef H5
// if (this.touchMoveHandler) {
// document.body.removeEventListener(
// 'touchmove',
// this.touchMoveHandler
// );
// this.touchMoveHandler = null;
// }
// // #endif
// },
// 释放滚动 - 修改后的方法
releaseScroll() {
if (!this.isScrollLocked) return;
// #ifdef H5
if (this.touchMoveHandler) {
document.body.removeEventListener('touchmove', this.touchMoveHandler);
this.touchMoveHandler = null;
}
// #endif
// 在App端恢复滚动
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const webview = page.$getAppWebview();
webview.setStyle({
scrollIndicator: 'auto',
scrollsToTop: true,
bounce: 'vertical'
});
// #endif
this.isScrollLocked = false;
},
goBack() { goBack() {
this.releaseScroll() this.releaseScroll()
uni.navigateBack({ uni.navigateBack({
...@@ -218,17 +275,24 @@ ...@@ -218,17 +275,24 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'applyCommon.scss'; @import 'applyCommon.scss';
// uni-page-wrapper{
// overflow: hidden!important;
// }
.container{ .container{
background-color: #fff; background-color: #fff;
// 新增样式
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
-webkit-overflow-scrolling: touch;
} }
.signatureContent{ .signatureContent{
background: #fff; background: #fff;
margin-top: 20rpx; margin-top: 20rpx;
height: auto; height: auto;
position: relative; position: relative;
// 新增样式
touch-action: none; /* 禁用触摸操作 */
} }
.signature_action{ .signature_action{
display: flex; display: flex;
...@@ -243,10 +307,6 @@ ...@@ -243,10 +307,6 @@
.imgBox{ .imgBox{
display: flex; display: flex;
align-items: center; align-items: center;
// position: absolute;
// bottom: -7%;
// left: 50%;
// transform: translateX(-50%);
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
} }
......
...@@ -29,10 +29,13 @@ ...@@ -29,10 +29,13 @@
<view class="swiperBox" v-if="bannerViewType == '2'"> <view class="swiperBox" v-if="bannerViewType == '2'">
<uni-swiper-dot <uni-swiper-dot
:dots-styles="{ :dots-styles="{
backgroundColor: 'rgba(255, 255, 255, 0.5)', backgroundColor: 'rgba(145, 151, 201, .5)',
selectedBackgroundColor: 'rgba(255, 255, 255, 1)' selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
}" :info="swiperList" :current="current" mode="default"> bottom:100,
<swiper autoplay :interval="3000" circular class="swiper-box" @change="changeSwiper"> selectedBorder: '10rpx rgba(255, 255, 255, 1) solid',
width:8
}" :info="swiperList" :current="current" mode="default">
<swiper autoplay :indicator-dots="true" :interval="3000" circular class="swiper-box" @change="changeSwiper">
<swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-item-no-gap"> <swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-item-no-gap">
<view class="swiper-item"> <view class="swiper-item">
<image style="height: 100%;width: 100%;display: block;" :src="item['filePath']" mode="aspectFill"></image> <image style="height: 100%;width: 100%;display: block;" :src="item['filePath']" mode="aspectFill"></image>
......
...@@ -400,6 +400,14 @@ ...@@ -400,6 +400,14 @@
this.$emit('comfirm',{year:this.year,month:this.month,current:this.current,timeType:'8'}) this.$emit('comfirm',{year:this.year,month:this.month,current:this.current,timeType:'8'})
} }
if(this.current=='2'){ if(this.current=='2'){
if(!this.currentDate.length){
uni.showToast({
title: `请选择时间`,
duration: 1000,
icon: 'none'
});
return
}
let newObj = {} let newObj = {}
if(this.monthList.filter(item=>item.value == this.currentMonth).length>0){ if(this.monthList.filter(item=>item.value == this.currentMonth).length>0){
newObj = this.monthList.filter(item=>item.value == this.currentMonth)[0] newObj = this.monthList.filter(item=>item.value == this.currentMonth)[0]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment