|
|
<template>
|
|
|
<view class="page">
|
|
|
<!-- <view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view> -->
|
|
|
<u-navbar
|
|
|
title="考勤打卡"
|
|
|
back-icon-color="#FFFFFF"
|
|
|
title-color="#FFFFFF"
|
|
|
leftText="返回"
|
|
|
:autoBack="true"
|
|
|
:placeholder="true"
|
|
|
/>
|
|
|
<view v-if="current == 1">
|
|
|
<comcall :lat="lat" :lng="lng" :Address="Address" />
|
|
|
</view>
|
|
|
<view v-if="current == 2">
|
|
|
<comsignin />
|
|
|
</view>
|
|
|
<view v-if="current == 3">
|
|
|
<comanalysis />
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部导航栏 -->
|
|
|
<!-- <div class="bottom-navigation">
|
|
|
<view
|
|
|
class="navigation-bar"
|
|
|
@click="isActive(item.id)"
|
|
|
v-for="(item, index) in tabBottomBar"
|
|
|
:key="index"
|
|
|
>
|
|
|
<img
|
|
|
:src="current == item.id ? item.activeImg : item.inActiveImg"
|
|
|
class="icon"
|
|
|
/>
|
|
|
<view :class="current == item.id ? 'label_' : 'label'">{{
|
|
|
item.label
|
|
|
}}</view>
|
|
|
</view>
|
|
|
</div> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import comcall from "./components/comcall.vue";
|
|
|
import comanalysis from "./components/comanalysis.vue";
|
|
|
import comsignin from "./components/comsignin.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
comcall,
|
|
|
comanalysis,
|
|
|
comsignin,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
current: 1,
|
|
|
tabBottomBar: [
|
|
|
{
|
|
|
id: 1,
|
|
|
inActiveImg: "./static/images/umale/call.png",
|
|
|
activeImg: ".//static/images/umale/call_.png",
|
|
|
label: "打卡",
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
inActiveImg: "./static/images/umale/signin.png",
|
|
|
activeImg: "./static/images/umale/signin_.png",
|
|
|
label: "签到",
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
inActiveImg: "./static/images/umale/analysis.png",
|
|
|
activeImg: "./static/images/umale/analysis_.png",
|
|
|
label: "统计",
|
|
|
},
|
|
|
],
|
|
|
lat:null,
|
|
|
lng:null,
|
|
|
Address: {}
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.getLocation()
|
|
|
},
|
|
|
onReady() {},
|
|
|
methods: {
|
|
|
isActive(val) {
|
|
|
console.log(val);
|
|
|
this.current = val;
|
|
|
},
|
|
|
getLocation(){
|
|
|
const that = this;
|
|
|
// #ifdef APP || H5
|
|
|
console.log("APP");
|
|
|
this.$modal.loading("正在获取位置信息，请耐心等待...");
|
|
|
uni.getLocation({
|
|
|
type: 'gcj02', //这里是不同的地图api支持的格式不一样，腾讯的gcj02，因为这里返回的是一个具体的经纬度，所以我们需要逆地址解析进行匹配对应的位置
|
|
|
geocode :true,
|
|
|
success: function(res) {
|
|
|
that.$modal.closeLoading();
|
|
|
that.lat = res.latitude;
|
|
|
that.lng = res.longitude;
|
|
|
that.Address = res.address
|
|
|
},
|
|
|
fail: function (err) {
|
|
|
console.log("获取定位失败",err);
|
|
|
uni.showToast({
|
|
|
title: '获取地址失败，将导致部分功能不可用',
|
|
|
icon:'none'
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.bottom-navigation {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
padding: 23rpx 0 61rpx 0;
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #dce3ec;
|
|
|
box-shadow: 10rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
|
|
|
.navigation-bar {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.icon {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
font-size: 20rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #9da2ab;
|
|
|
}
|
|
|
|
|
|
/* 设置选中状态下的文本颜色 */
|
|
|
.label_ {
|
|
|
font-size: 20rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #367bef;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
