JiangNingUmale-h5/pages/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:04:41
 * @LastEditors: laozt 2721205210@qq.com
 * @LastEditTime: 2024-01-17 17:20:24
 * @FilePath: \JiangNingUmale-App\pages\index.vue
-->
<template>
  <view class="page">
    <u-navbar
      title="首页"
      :placeholder="true"
      :isBack="false"
      :is-fixed="false"
    />
    <view class="welcome">
      <text class="title">欢迎登录城市精细化治理系统</text>
      <text class="name">{{ userInfo ? userInfo.account : "" }}</text>
      <view class="date-weather">
        <text class="date"> {{ time ? time : "" }} </text>
        <text class="weather"> 天气晴 </text>
      </view>
    </view>
    <view class="main-content">
      <view class="work-center">
        <view
          v-for="(item, index) in grids"
          :key="index"
          @click="goPath(item)"
          style="position: relative"
        >
          <image :src="item.gridImg" mode="" class="grid-img"></image>
          <text class="grid-name" :style="{ color: item.color }"
            >{{ item.name }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
// import { point, feature } from '@turf/helpers';
// import circle from '@turf/circle';
import { getUserIdByPoint } from "@/api/jn/login.js";
import { clock, getStatus, judgmentPosition } from "@/api/jn/clock.js";
import { listNews } from "@/api/jn/news";
// import chujie from "@/plugins/mapJson/chujie.json"
export default {
  data() {
    return {
      grids: [
        {
          name: "水生态治理科教（公众）",
          gridImg: "/static/images/umale/gr8.png",
          color: "#0D306B",
          subcolor: "",
          disable: false,
          toPage: "/subPublic/waterEducation/index",
        },
        {
          name: "活动管理(商家)",
          gridImg: "/static/images/umale/gr8.png",
          color: "#0D306B",
          subcolor: "",
          disable: false,
          toPage: "/subEnterprise/activity/activity",
        },
		  {
          name: "消息中心(商家)",
          gridImg: "/static/images/umale/gr8.png",
          color: "#0D306B",
          subcolor: "",
          disable: false,
          toPage: "pages/msg/index2",
        },
		{
          name: "门前三包服务(商家)",
          gridImg: "/static/images/umale/gr8.png",
          color: "#0D306B",
          subcolor: "",
          disable: false,
          toPage: "/subEnterprise/threeGuarantees/index",
        },
        {
          name: "店铺店招预审(商家)",
          gridImg: "/static/images/umale/gr8.png",
          color: "#0D306B",
          subcolor: "",
          disable: false,
          toPage: "/subEnterprise/WorkOrder/WorkOrder",
        },
      ],
      userInfo: null,
      time: null,
      lat: null,
      lng: null,
      circleLat: null,
      circleLng: null,
      circleClock: null,
      times: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: "",
        status: 0,
      },
    };
  },
  // 其他配置...
  onBackPress(options) {
    console.log("返回", options);
    if (options.from == "backbutton" || options.from == "navigateBack") {
      // 处理物理返回键或屏幕滑动返回手势
      uni.showModal({
        title: "退出应用",
        content: "您确定要退出应用吗？",
        success: function (res) {
          if (res.confirm) {
            // 用户选择了确认
            uni.exit();
          } else if (res.cancel) {
            // 用户选择了取消
          }
        },
      });
      return true; // 拦截返回事件，不继续执行返回操作
    }
    return false;
  },
  onLoad() {
    // this.getCircle();

    this.getUserLocation();
    this.times = setInterval(() => {
      console.log("获取用户位置信息");
      this.getUserLocation();
    }, 10000);
  },
  mounted() {
    this.userInfo = uni.getStorageSync("userInfo");
    console.log(JSON.stringify(this.userInfo), "用户信息");
    const currentDate = new Date();
    const year = currentDate.getFullYear(); // 获取当前年份
    const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从0开始，需要加1）
    const day = currentDate.getDate(); // 获取当前日期
    this.time = year + "年" + month + "月" + day + "日";
  },
  onShow() {
    this.getNumber();
  },
  methods: {
    getNumber() {
      listNews({ status: 0 }).then((res) => {
        if (res.code == 200) {
          this.$nextTick(() => {
            uni.setTabBarBadge({
              //显示数字
              index: 1, //tabbar下标
              text: res.total + "", //数字
            });
          });
        }
      });
    },
    goPath(item) {
      this.$tab.navigateTo(item.toPage);
    },
    getUserLocation() {
      let that = this;
      uni.getLocation({
        type: "gcj02", //这里是不同的地图api支持的格式不一样，腾讯的gcj02，因为这里返回的是一个具体的经纬度，所以我们需要逆地址解析进行匹配对应的位置
        geocode: true,
        success: function (res) {
          that.$modal.closeLoading();
          that.lat = res.latitude;
          that.lng = res.longitude;
          judgmentPosition({
            userId: that.userInfo.userId,
            latitude: res.latitude + "",
            longitude: res.longitude + "",
          })
            .then((position) => {
              // console.log(position,"position成功");
              if (position.code == 200 && position.data) {
                getStatus({ userId: that.userInfo.userId })
                  .then((status) => {
                    if (status.code == 200) {
                      if (res.data.status == 0) {
                        let data = {
                          userId: that.userInfo.userId,
                          latitude: res.latitude + "",
                          longitude: res.longitude + "",
                        };
                        return clock(data);
                      }
                    }
                  })
                  .then((daka) => {
                    if (data == 200) {
                      clearInterval(that.times);
                    }
                  });
              }
            })
            .catch((err) => {
              console.log(err, "position失败");
              if (err == "未设置考勤组") {
                // clearInterval(that.times)
              }
            });
          //
        },
        fail: function (err) {
          console.log("获取定位失败", err);
          uni.showToast({
            title: "获取地址失败，将导致部分功能不可用",
            icon: "none",
          });
          clearInterval(that.times);
        },
      });
    },
    // getCircle(){
    // 	console.log(this.userInfo,"userInfo");
    // 	getUserIdByPoint({id:this.userInfo.userId}).then(res=>{
    // 		console.log(res,"获取的考勤点");
    // 		if(res.data.length > 0) {
    // 			this.circleLat = res.data[0].lat;
    // 			this.circleLng = res.data[0].lng;
    // 			this.circleClock = res.data[0].clock;
    // 		}
    // 	})
    // },
  },
};
</script>

<style lang="scss">
.page {
  background-color: #f6f7f8;

  .welcome {
    margin: 20rpx;
    height: 281rpx;
    background-size: 100%;
    background-image: url("@/static/images/umale/intr.png");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    padding-left: 31rpx;
    padding-top: 45rpx;

    .title {
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      color: #ffffff;
      text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
    }

    .name {
      margin-top: 40rpx;
      font-size: 40rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
    }

    .date-weather {
      margin-top: 40rpx;

      .date {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        color: #f0f2f6;
        text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
      }

      .weather {
        margin-left: 50rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        color: #f0f2f6;
        text-shadow: 0rpx 3rpx 6rpx rgba(0, 42, 128, 0.4);
      }
    }
  }

  .main-content {
    position: relative;

    .work-center {
      // position: absolute;
      // top: 10rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;
      flex-wrap: wrap;

      & > view {
        width: 48%;
        height: 210rpx;
        margin-bottom: 22rpx;
        position: relative;

        .grid-img {
          height: 100%;
          width: 100%;
          display: block;
        }

        .grid-name {
          position: absolute;
          top: 27rpx;
          left: 26rpx;

          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: bold;
        }
      }

      & > view:nth-child(odd) {
        margin-right: 4%;
      }
    }
  }
}
</style>