<template><view><!-- 顶部通知栏 --><view v-if="showtime" class="showtime"><wyb-noticeBar:url="guideCallbackUrl"color="#666666":text="['异常处理提醒:',' 我为什么不能打卡、我的定位异常应该怎么处理？',]"/></view><!-- 打卡内容主体部分 --><!-- <view class="show-time" v-if="showtime" :style="{ height: deviceHeight }"> --><view class="show-time" v-if="showtime"><!-- <text class="show-time-text">今日您还没签到 若按钮无反应、请打开定位功能</text> --><view class="sign-shell"><view class="sign-clock"><view>上班 09:00</view><view v-show="isNotClockk" class="signTime">未打卡</view><view v-show="!isNotClockk" :type="value" class="signTime">{{ signTime }}已打卡</view></view><view class="sign-clock2"><view>下班 17:00</view><view v-show="isNotClockk2" class="signTime">未打卡</view><view v-show="!isNotClockk2" class="signTime">{{ afterWorkTime }}已打卡</view></view></view><buttonclass="sign-button"open-type="getUserInfo"@getuserinfo="locationOnclick()"><view v-if="signFlag === 0">上班打卡</view><view v-else-if="signFlag === 1">下班打卡</view><view v-else>更新打卡</view><!-- 当前时间 15:11:15 --><view>{{ currentTime }}</view></button></view><!-- 底部当前日期 --><!-- <view class="bottom-date"> --><!-- <text class="index-container-text">{{ bottomCurrentDate }}</text> --><view class="index-place-box"><!-- 当前位置 默认显示 横杠 点击腾讯地图自动定位 --><view class="icon iconfont icon-location" @click="locationOnclick"><text class="index-container-box-text">当前位置：</text><text class="index-container-box-text2"> {{ place }}</text></view><!-- </view> --></view><!-- 签到成功日历组件 默认隐藏，当签到成功时显示 --><!-- <view v-if="!showtime" :style="{ height: deviceHeight }" class="content"> --><!-- 背景 --><!-- <view class="sign-showtime-bg"> </view><imt-calendar :selected="data"></imt-calendar></view> --></view>
</template><script>
// 引入签到成功日历组件
import imtCalendar from "components/imt-calendar/imt-calendar";
// 引入通知组件
import wybNoticeBar from "@/components/wyb-noticeBar/wyb-noticeBar.vue";
// 引入微信js sdk
import qqmapsdk from "../../static/qqmap-wx-jssdk.min.js";
// 注册定位插件
const chooseLocation = requirePlugin("chooseLocation");
export default {data() {return {value:'success',data: ["2022-01-01", "2022-01-01"],isNotClockk: true,isNotClockk2: true,// 记录下班打卡时间afterWorkTime: "",// 记录上班打卡时间signTime: "",dak_val: "",// 用户输入的值,json_data: "",// 是否显示时间showtime: true,signFlag: 0,// 设备高度deviceHeight: Number,// 经纬度latitude: "", // 维度longitude: "", // 经度// 当前所处位置place: "------------------",// 底部当前日期 2022-01-05bottomCurrentDate: "",// 签到的当前时间 15:21:21currentTime: "",guideCallbackUrl: "../../page_a/yichang/yichang",};},// 用户点击右上角分享onShareAppMessage: function (e) {return {title: "KJ打卡小程序",path: "pages/index/index",};},// 用户点击右上角分享onShareTimeline: function (e) {return {title: "KJ打卡小程序",path: "pages/index/index",};},methods: {// 签到的当前时间 15:11:21longtime() {let times = new Date();let a, b, c;if (times.getHours() < 10) {a = "0" + times.getHours();} else {a = times.getHours();}if (times.getMinutes() < 10) {b = "0" + times.getMinutes();} else {b = times.getMinutes();}if (times.getSeconds() < 10) {c = "0" + times.getSeconds();} else {c = times.getSeconds();}// 返回当前时间this.currentTime = `${a}:${b}:${c}`;},// 底部当前日期currentDateOnclick() {let times = new Date();this.bottomCurrentDate = `${times.getFullYear()}-${times.getMonth() + 1}-${times.getDate()}`;},/*** 获取经纬度信息+地址解析* 点击当前位置和打卡按钮触发自动定位事件* 1.调用腾讯地图* 2.获取授权定位*     1>允许则进入腾讯地图，进行自动定位*     2>不允许，则定位失败**/locationOnclick() {// 新增 先创建实例const QQMapWX = new qqmapsdk({key: "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU",});// 获取当前的地理位置、速度// api 文档：https://uniapp.dcloud.io/api/location/location?id=getlocationuni.getLocation({type: "wgs84",success: (res) => {this.longitude = res.longitude;this.latitude = res.latitude;console.log("获取经纬度成功");console.log("当前位置的经度:", res.longitude);console.log("当前位置的纬度:", res.latitude);let key = "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU"; //使用在腾讯位置服务申请的key;let referer = "KJ打卡"; //调用插件的app的名称// 解析经纬度信息const location = JSON.stringify({latitude: this.latitude,longitude: this.longitude,});// 分类名称const category = "生活服务,娱乐休闲";/***  1.保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面*  https://uniapp.dcloud.io/api/router?id=navigateto** 2.微信小程序插件文档* https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker*/wx.navigateTo({url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`,});},// 此处新增测试fail: () => {console.log("获取经纬度失败");},complete: () => {// 解析地址QQMapWX.reverseGeocoder({location: {latitude: this.latitude,longitude: this.longitude,},success: function (res) {console.log("解析地址成功");console.log(res);// 省let province = res.result.ad_info.province;// 市let city = res.result.ad_info.city;console.log(province);console.log(city);},fail: function (res) {uni.showToast({title: "定位失败",duration: 2000,icon: "none",});console.log(res);},complete: function (res) {console.log(res);},});},// 新增end});},weixin() {uni.getUserInfo({success: (res) => {let username = JSON.parse(res.rawData);uni.setStorage({key: "xiaochengxu",data: username,success: () => {// this.showtime = false;let times = new Date();var new_time = `${times.getFullYear()}-${times.getMonth() + 1}-${times.getDate()}`;// 这里是给打卡日历的容器push数据（打卡日历组件会接收数据）let go_code = this.data.includes(new_time);this.data.push(new_time);// 不包含就存储起来// uni.request({//   data: {//     pass: this.dak_val,//     name: '0x96c88fa89ab9594b05dc3bfabfe01143',//   },//   // 这里需要修改//   url: 'https://ani-qi.gitee.io/vue1.0/text.html',// });uni.setStorage({key: "data",data: this.data,});uni.setStorage({key: "showtime",data: false,});uni.showToast({title: "打卡成功",icon: "success",duration: 1500,});console.log("signFlag",this.signFlag)if (this.signFlag == 0) {// 上班打卡 打卡成功显示 下班打卡this.signFlag = 1;this.isNotClockk = false;this.signTime = this.currentTime;} else {//下班打卡 打卡成功显示 更新打卡this.signFlag = 2;this.isNotClockk2 = false;this.afterWorkTime = this.currentTime;}},});},});},// uni-app获取腾讯地图计算两经纬度的实际距离（可批量）// 官方地址： https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistancegetDistance() {uni.request({url: "https://apis.map.qq.com/ws/distance/v1/matrix", //仅为示例，并非真实接口地址。method: "GET",data: {mode: "walking",from: "39.775272,116.554588", //当前位置的经纬度to: "39.780864,116.567515", //办公地点经纬度key: "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU", //配置腾讯开发key},success: (res) => {console.log(res);let hw = res.data.result.rows[0].elements[0].distance; //拿到距离(米)if (hw && hw !== -1) {if (hw < 1000) {hw = hw + "m";}//转换成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距离太近或请刷新重试";}console.log("当前位置与办公地点距离:" + hw);},});},},// 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发onReady() {// 单元测试 获取腾讯地图计算两经纬度的实际距离（可批量）后期会移动到获取经纬度以后，算法判断中this.getDistance();uni.getStorage({key: "data",success: (res) => {this.data = res.data;console.log("接收数据传递后端res.data", res.data);},});// 底部日期this.currentDateOnclick();setInterval(() => {this.longtime();}, 1000);},// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）// https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9FonLoad() {uni.getSystemInfo({success: (res) => {this.deviceHeight = res.windowHeight - 100 + "px";},});uni.getStorage({key: "showtime",success: (res) => {this.showtime = res.data;},fail(e) {},});},// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面onShow() {if (this.showtime) {// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象// 如果点击确认选点按钮，则返回选点结果对象，否则返回nullconst location = chooseLocation.getLocation();if (chooseLocation.getLocation()) {this.place = location.address;// 获取用户信息this.weixin();}} else {const location = chooseLocation.getLocation();this.place = location.address;}},// 插件局部注册components: {imtCalendar,wybNoticeBar,},
};
</script><style lang="scss" scoped>
.sign-clock {margin-left: 11%;
}
.signTime {font-size: 26rpx;
}
.sign-clock2 {margin-left: 32%;
}.sign-shell {display: flex;margin-top: 21%;
}
.index-container {position: absolute;left: 0;bottom: 0;width: 100%;text-align: center;
}
.title {font-size: 36rpx;color: #dfdfe6;text-align: center;margin: 45rpx;
}
.index-container-text {line-height: 100rpx;letter-spacing: 2px;color: #c8c7cc;
}
.index-container-box {display: flex;align-items: center;border-top: 1px solid #ebebeb;justify-content: space-around;height: 75rpx;
}
.index-container-box-text {color: #2c405a;font-weight: bold;
}
.index-container-box-text2 {color: #007aff;font-size: 25rpx;font-weight: bold;line-height: 75rpx;
}
.showtime {position: absolute;top: 0;left: 0;
}
// .show-time {
//   width: 100%;
//   display: flex;
//   text-align: center;
//   justify-content: space-around;
//   flex-direction: column;
//   align-items: center;
// }
.index-place-box {margin-left: 20%;margin-top: 25%;
}
.show-time-text {letter-spacing: 2px;font-size: 40rpx;color: #dfdfe6;
}.sign-button {margin-top: 31% !important;background-color: #007aff;width: 320rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: white;margin-top: -50rpx;font-weight: 800;flex-direction: column;height: 320rpx;
}.sign-showtime-bg {width: 100%;height: 375rpx;z-index: -99;position: absolute;left: 0;top: 0;background-color: #007aff;border-radius: 0 0 15px 15px;
}page {overflow: hidden;
}.content {margin-top: 80rpx;
}
</style>