474 lines
10 KiB
Vue
474 lines
10 KiB
Vue
<template>
|
|
<view class="">
|
|
|
|
<view class="out_warp" v-if="isClock">
|
|
<view class="mapbox">
|
|
<map
|
|
style="width:750rpx;height:400rpx;"
|
|
name=""
|
|
id="mapself"
|
|
:latitude="lat"
|
|
:longitude="lng"
|
|
:markers="markers"
|
|
></map>
|
|
</view>
|
|
<view class="locainfo">
|
|
<view class="localeft">
|
|
<image :src="BASE_IMG_URL+'ydw.png'" class="dingwei" mode="scaleToFill"></image>
|
|
<view class="text">{{address}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="remarkbox" v-if="obj.remarks || obj.imgList.length != 0" @click="addContent">
|
|
<view class="remark_text">{{obj.remarks}}</view>
|
|
<view class="imgbox">
|
|
<image :src="obj.imgList[0].file_path" class="selfimg" mode=""></image>
|
|
<view class="imgnum">{{obj.imgList.length}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="addcontent" v-else @click="addContent">添加备注……</view>
|
|
<view class="clock_box" @click="toClock">
|
|
<view class="time">{{hour}} <span>:</span> {{branch}}</view>
|
|
<view class="status">外出打卡</view>
|
|
</view>
|
|
|
|
<!-- 添加备注 -->
|
|
<add-remark ref="remarkChild" @addSuccess="addSuccess"></add-remark>
|
|
</view>
|
|
<view class="" v-else>
|
|
<view class="clock_con">
|
|
<view class="top_warp">
|
|
<image :src="BASE_IMG_URL+'success.png'" class="companyimg" mode=""></image>
|
|
<view class="company">外出打卡成功</view>
|
|
</view>
|
|
<view class="clock_info">
|
|
<view class="li">
|
|
<view class="label">时间</view>
|
|
<view class="time">{{clockTime}}</view>
|
|
</view>
|
|
<view class="li">
|
|
<view class="label">位置</view>
|
|
<view class="time">{{info.address}}</view>
|
|
</view>
|
|
<view class="remarkbox" style="width:460rpx;border:none;padding:0" v-if="obj.remarks || obj.imgList.length != 0">
|
|
<view class="remark_text" style="width:300rpx">备注</view>
|
|
<view class="imgbox">
|
|
<image :src="obj.imgList[0].file_path" class="selfimg" mode=""></image>
|
|
<view class="imgnum">{{obj.imgList.length}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import { netMapKey } from '@/api/login.js'
|
|
import addRemark from './addRemark.vue'
|
|
import { netOutClock } from '@/api/index.js'
|
|
|
|
var QQMapWX;
|
|
var qqmapsdk;
|
|
let B;
|
|
export default{
|
|
components:{
|
|
addRemark
|
|
},
|
|
props:{
|
|
lat:{
|
|
type:String/Number,
|
|
default:''
|
|
},
|
|
lng:{
|
|
type:String/Number,
|
|
default:''
|
|
}
|
|
},
|
|
data() {
|
|
return{
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
latitude:null,
|
|
longitude:null,
|
|
markers: [],
|
|
address:'',
|
|
hour:'00',
|
|
branch:'00',
|
|
isClock:true,
|
|
//备注
|
|
obj:{
|
|
remarks:'',
|
|
imgList:[]
|
|
},
|
|
//打卡成功信息
|
|
info:{},
|
|
clockTime:'', //打卡时间
|
|
mapKey:''
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
created() {
|
|
this.getKey()
|
|
//获取当前时间
|
|
this.getTime()
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods:{
|
|
clear() {
|
|
clearInterval(B)
|
|
// #ifdef MP-WEIXIN
|
|
// wx.offLocationChange()
|
|
// wx.stopLocationUpdate()
|
|
// #endif
|
|
},
|
|
_locationChangeFn(res) {
|
|
this.longitude = res.longitude
|
|
this.latitude = res.latitude
|
|
this.markers = [{
|
|
id: 1,
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
iconPath: BASE_IMG_URL+'weizhi.png',
|
|
width: 30,
|
|
height: 30
|
|
}]
|
|
// #ifndef H5
|
|
//地址逆解析
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
longitude: res.longitude,
|
|
latitude: res.latitude
|
|
},
|
|
success: (re) => {
|
|
this.address = re.result.address
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1',{
|
|
key:this.mapKey,
|
|
output:'jsonp',
|
|
location:`${res.latitude},${res.longitude}`,
|
|
get_poi:'1'
|
|
}).then(res=>{
|
|
this.address = res.result.address_component.province+res.result.address_component.city+res.result.formatted_addresses.rough
|
|
})
|
|
// #endif
|
|
},
|
|
//获取地图key
|
|
getKey() {
|
|
netMapKey().then(res=>{
|
|
if(res.data.map_key){
|
|
this.mapKey = res.data.map_key
|
|
QQMapWX = require('../../util/qqmap-wx-jssdk.min.js')
|
|
qqmapsdk = new QQMapWX({
|
|
key: res.data.map_key // 必填
|
|
})
|
|
//判断是否可以打卡
|
|
// wx.onLocationChange(this._locationChangeFn)
|
|
//获取位置
|
|
// this.getAddressinfo()
|
|
//根据经纬度 或其地址
|
|
this.getAddress()
|
|
}else{
|
|
uni.showToast({
|
|
title:'请在后台配置地图key',
|
|
icon:'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getAddress() {
|
|
this.markers = [{
|
|
id: 1,
|
|
latitude: this.lat,
|
|
longitude: this.lng,
|
|
iconPath: BASE_IMG_URL+'weizhi.png',
|
|
width: 30,
|
|
height: 30
|
|
}]
|
|
// #ifndef H5
|
|
//地址逆解析
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
longitude: this.lng,
|
|
latitude: this.lat
|
|
},
|
|
success: (re) => {
|
|
this.address = re.result.address
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1',{
|
|
key:this.mapKey,
|
|
output:'jsonp',
|
|
location:`${this.lat},${this.lng}`,
|
|
get_poi:'1'
|
|
}).then(res=>{
|
|
this.address = res.result.address_component.province+res.result.address_component.city+res.result.formatted_addresses.rough
|
|
})
|
|
// #endif
|
|
},
|
|
getAddressinfo() {
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
altitude: true,
|
|
isHighAccuracy: true,
|
|
success: (res) => {
|
|
this.longitude = res.longitude
|
|
this.latitude = res.latitude
|
|
this.markers = [{
|
|
id: 1,
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
iconPath: BASE_IMG_URL+'weizhi.png',
|
|
width: 30,
|
|
height: 30
|
|
}]
|
|
// #ifndef H5
|
|
//地址逆解析
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
longitude: res.longitude,
|
|
latitude: res.latitude
|
|
},
|
|
success: (re) => {
|
|
console.log(re,'获取地址')
|
|
this.address = re.result.address
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1',{
|
|
key:key,
|
|
output:'jsonp',
|
|
location:`${res.latitude},${res.longitude}`,
|
|
get_poi:'1'
|
|
}).then(res=>{
|
|
this.address = res.result.address_component.province+res.result.address_component.city+res.result.formatted_addresses.rough
|
|
})
|
|
// #endif
|
|
},
|
|
fail: (err) => {
|
|
console.log(err, '错误')
|
|
uni.showToast({
|
|
title:'次数频繁，请稍后再试',
|
|
icon:'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getTime() {
|
|
B = setInterval(()=>{
|
|
let date = new Date()
|
|
let h = date.getHours()
|
|
let b = date.getMinutes()
|
|
this.hour = this.handleTime(h)
|
|
this.branch = this.handleTime(b)
|
|
},1000)
|
|
},
|
|
//添加备注
|
|
addContent() {
|
|
this.$refs.remarkChild.init(this.obj)
|
|
},
|
|
addSuccess(obj) {
|
|
this.obj = obj
|
|
},
|
|
//打卡
|
|
toClock() {
|
|
let arr = []
|
|
let b = this.obj.imgList
|
|
b.forEach(ele=>{
|
|
arr.push(ele.id)
|
|
})
|
|
let params = {
|
|
type:1,
|
|
address:this.address,
|
|
type_name:2,
|
|
lng:this.lng,
|
|
lat:this.lat,
|
|
remarks:this.obj.remarks,
|
|
file_ids:arr.join(',')
|
|
}
|
|
netOutClock(params).then(res=>{
|
|
this.isClock = false
|
|
this.info = res.data
|
|
let time = res.data.time
|
|
this.clockTime = time.substring(time.length-8,time.length)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.clock_con{
|
|
margin:24rpx auto;
|
|
width:690rpx;
|
|
height:calc(100vh - 210rpx);
|
|
background:#fff;
|
|
border-radius: 10rpx;
|
|
.top_warp{
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
padding-top:140rpx;
|
|
.companyimg{
|
|
width:150rpx;
|
|
height:150rpx;
|
|
margin-bottom:50rpx;
|
|
}
|
|
.company{
|
|
font-size:26rpx;
|
|
color:$uni-text-color;
|
|
}
|
|
}
|
|
.text{
|
|
text-align: center;
|
|
}
|
|
.clock_info{
|
|
width:460rpx;
|
|
margin:80rpx auto 20rpx;
|
|
border-top:1rpx solid #f5f5f5;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
.li{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin:24rpx 0;
|
|
.label{
|
|
font-size:24rpx;
|
|
color:#666;
|
|
}
|
|
.time{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.out_warp{
|
|
width:750rpx;
|
|
height:calc(100vh - 210rpx);
|
|
background:#fff;
|
|
}
|
|
.mapbox {
|
|
width: 750rpx;
|
|
height: 400rpx;
|
|
overflow: hidden;
|
|
}
|
|
.locainfo {
|
|
padding: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
.localeft {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.dingwei {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.addcontent{
|
|
font-size:24rpx;
|
|
text-align: center;
|
|
color:$uni-text-color;
|
|
width:750rpx;
|
|
background:#fff;
|
|
padding:24rpx 0;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
}
|
|
.remarkbox{
|
|
width:690rpx;
|
|
margin:24rpx auto;
|
|
border:1rpx solid #f5f5f5;
|
|
padding:15rpx;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
align-items: center;
|
|
.remark_text{
|
|
width:500rpx;
|
|
font-size:24rpx;
|
|
line-height: 34rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.imgbox{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
position: relative;
|
|
.selfimg{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
}
|
|
.imgnum{
|
|
position: absolute;
|
|
right:0;
|
|
bottom:0;
|
|
width:30rpx;
|
|
height:30rpx;
|
|
background:rgba(0,0,0,0.5);
|
|
font-size:24rpx;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
.clock_box{
|
|
width:260rpx;
|
|
height:260rpx;
|
|
border-radius: 50%;
|
|
border:15rpx solid $uni-text-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
margin:80rpx auto;
|
|
.time{
|
|
font-size:42rpx;
|
|
text-align: center;
|
|
margin-bottom:14rpx;
|
|
span{
|
|
animation:twinkle 1s infinite;
|
|
}
|
|
}
|
|
.status{
|
|
font-size:26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@keyframes twinkle{
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |