收藏
回答

红米note8小程序检测不到用户截屏操作

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug Android MIU 12.5.5 Redmi Note 8 Vsrsion 3.0,49

已上传日志微信号:leelianjie0904,时间2024.05,11 00:00-24:00

import Taro, { useState, useRouter, useEffect, useDidShow, onUserCaptureScreen, } from "@tarojs/taro"; import { View, Text, Input, Image } from "@tarojs/components"; import { AtImagePicker, AtActivityIndicator } from "taro-ui"; import { USER_INFO, SIGN, SIGN_DATA } from "../../../utils/constant"; import Tarotip from "../../../utils/tip"; import API from "../../../api/api"; import Util from "../../../utils/util"; import "./clockMap.scss"; function ClockMap() { const router = useRouter().params; const [userInfo] = useState(Taro.getStorageSync(USER_INFO)); const [proveList, setProveList] = useState( Taro.getStorageSync(SIGN_DATA + router.id) ); // 本次签到证明图片 const [albumPic, setAlbumPic] = useState([]); // 选择图片 const [bookDetail, setBookDetail] = useState(false); // 预约详情 const [markerClockPoint, setMarkerClockPoint] = useState([]); // 地图mark打卡点 const [circles, setCircles] = useState([]); // 地图circles 打卡300米有效范围 const [scale, setScale] = useState(12); // 地图缩放等级 const [mapCenter, setMapCenter] = useState({ latitude: 0, longitude: 0 }); // 地图中心坐标 const [finish, setFinish] = useState(false); // 地图是否渲染完成 const [MapContext] = useState(Taro.createMapContext("map")); // 地图对象 const [captureScreen, setCaptureScreen] = useState(false); // 是否截图 const [location, setLocation] = useState(false); // 经纬度定位对象 const [distance, setDistance] = useState(0); // 距离打开地点距离 const [locationUpdate, setLocationUpdate] = useState(1); // 定位值变化时更新监听 最多三次不再执行错误后自动获取定位 // 获取预约详情和打卡记录 useEffect(() => { getMapPoint(); Taro.showNavigationBarLoading(); }, []); // 获取定位及异常处理 useEffect(async () => { try { await Taro.getLocation({ type: "gcj02", isHighAccuracy: true, success: (res) => { setLocation(res); }, }); } catch (error) { setLocation(false); Tarotip.programError( `${locationUpdate < 4 ? `获取定位失败` : `获取定位失败,请截图反馈`}`, `${ locationUpdate < 4 ? `程序将进行第${locationUpdate}次重新定位` : JSON.stringify(error) }`, () => { if (locationUpdate < 4) { setLocationUpdate(locationUpdate + 1); } } ); } }, [locationUpdate]); // 定位更新时再次计算距离 useEffect(async () => { if (location === false) return; if (bookDetail !== false) { let newMarkerClockPoint = JSON.parse(JSON.stringify(markerClockPoint)); newMarkerClockPoint.unshift( getMarker( 999999, "当前位置", location.latitude, location.longitude, `当前位置` ) ); await MapContext.includePoints({ points: newMarkerClockPoint, padding: [25, 25, 25, 25], }); finishMap(); setMarkerClockPoint(newMarkerClockPoint); setDistance( Util.getDistance( location.latitude, location.longitude, parseFloat(bookDetail.build.tag_lat), parseFloat(bookDetail.build.tag_lng) ) ); } }, [location, bookDetail]); const finishMap = async () => { await Util.sleep(2000); MapContext.getCenterLocation({ success: (res) => { delete res.errMsg; setMapCenter(res); }, }); MapContext.getScale({ success: (res) => { setScale(res.scale > 16 ? 16 : res.scale - 0.5); }, }); setFinish(true); Taro.hideNavigationBarLoading(); }; /** * 获取预约详情 */ const getMapPoint = async () => { let { code, data } = await API.getBookDetail({ id: router.id, supervisor_id: userInfo.id, }); if (code === 0) { setBookDetail(data); let markers = [ getMarker( data.id, "打卡地点", data.build.tag_lat, data.build.tag_lng, `打卡地点` ), getMarker( data.id + 1, "门口签到位置", proveList[0].location.latitude, proveList[0].location.longitude, `门口签到位置`, "#2f7cfb" ), ]; setCircles([ { latitude: data.build.tag_lat, longitude: data.build.tag_lng, radius: 300, fillColor: "#7cb5ec88", color: "#7cb5ec88", }, ]); setMarkerClockPoint(markers); } }; const getMarker = (id, name, lat, lng, content, color = "#FE621F") => { let iconPath = ""; switch (color) { case "#FE621F": iconPath = "https://www.niujiaojian.com/static/xcx/jianli/aboutClock_marker_red.png"; break; case "#2f7cfb": iconPath = "https://www.niujiaojian.com/static/xcx/jianli/aboutClock_marker_blue.png"; break; case "#20c064": iconPath = "https://www.niujiaojian.com/static/xcx/jianli/aboutClock_marker_green.png"; break; } return { id: id, title: name, latitude: parseFloat(lat), longitude: parseFloat(lng), iconPath: iconPath, width: "42rpx", height: "42rpx", callout: { content: content, color: "#fff", borderRadius: 12, borderColor: "#fff", borderWidth: 2, bgColor: color, padding: 6, display: "ALWAYS", textAlign: "center", fontSize: 14, }, }; }; onUserCaptureScreen((res) => { setCaptureScreen(true); }); return ( <View className="container clockMap"> {bookDetail !== false && ( <Block> <View className="clockMap_siteName"> {bookDetail.build_name.substr(0, bookDetail.build_name.length - 4)} <Text className="important_color"> {bookDetail.build_name.substr( bookDetail.build_name.length - 4, 4 )} </Text> </View> <View className="clockMap_siteTime"> 截图有效时间: {Util.getNowFormatDate(proveList[0].date * 1000)} ( <Text className="important_color"> {Util.formatHMLocation(proveList[0].date * 1000)}- {Util.formatHMLocation((proveList[0].date + 600) * 1000)} </Text> ) ( <Text className="important_color"> {Util.format12HMLocation(proveList[0].date * 1000)}- {Util.format12HMLocation((proveList[0].date + 600) * 1000)} </Text> ) </View> <View className="clockMap_siteTime"> 距离监理师设定的打卡直线距离: <Text className="important_color"> {distance > 999 ? (distance / 1000).toFixed(2) + "公里" : distance + "米"} </Text> </View> {finish === false && ( <View className="clockMap_tip">地图渲染中:请勿截图</View> )} <Map id="map" className="clockMap_map" latitude={mapCenter.latitude} longitude={mapCenter.longitude} markers={markerClockPoint} circles={circles} showLocation={true} enableZoom={true} enableScroll={false} scale={16} showScale={true} /> <View className="clockMap_tip clockMap_tip_blue"> 地图操作提示:可以通过双指放大缩小地图 </View> <View className="clockMap_tip"> 提示:截图后可以获得一次上传截图的权限! </View> <View className="clockMap_PicName">定位截图</View> <View className="clockMap_selectPic"> {captureScreen === false && ( <View className="clockMap_selectPicMark" onClick={() => { Tarotip.confirmSingle("请先截图后再上传"); }} ></View> )} <AtImagePicker className="select_pic" sourceType={["album"]} sizeType={["original"]} count={1} files={albumPic} showAddBtn={albumPic.length < 1} onChange={async (files, operationType) => { if (operationType == "add") { Tarotip.loading("处理中"); let index = files.length - 1; files[index].date = parseInt(new Date().getTime() / 1000); files[index].location = location; files[index].distance = Util.getDistance( location.latitude, location.longitude, bookDetail.build.tag_lat, bookDetail.build.tag_lng ); files[index].distance = files[index].distance > 999 ? (files[index].distance / 1000).toFixed(2) + "公里" : files[index].distance + "米"; let newCameraPic = await Util.uploadTask(files, SIGN); let newProveList = JSON.parse(JSON.stringify(proveList)); if (newProveList.length > 1) { newProveList[2] = newCameraPic[0]; } else { newProveList = newProveList.concat(newCameraPic); } setProveList(newProveList); setAlbumPic(newCameraPic); } else { setAlbumPic([]); setCaptureScreen(false); } }} onImageClick={(index, file) => Taro.previewImage({ current: file.url, urls: [file.url] }) } onFail={(msg) => Tarotip.confirmSingle(msg)} /> </View> <View className="clockMap_but" hoverClass="hover_class" onClick={() => { if (albumPic.length !== 1) { Tarotip.confirmSingle("请上传打卡截图"); return; } Taro.setStorageSync(SIGN_DATA + router.id, proveList); Taro.navigateBack(); }} > 保存 </View> </Block> )} {/* 加载提示 */} {bookDetail === false && ( <AtActivityIndicator mode="center" content="加载中..." ></AtActivityIndicator> )} </View> ); } export default ClockMap; ClockMap.config = { navigationBarTitleText: "打卡签到截图", };
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容