JiangNingUmale-h5/subcontract/work/attence/index.vue

<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>