|
|
<!--
|
|
|
* @Author: 张涛
|
|
|
* @Date: 2023-11-06 14:04:41
|
|
|
* @LastEditors: laozt 2721205210@qq.com
|
|
|
* @LastEditTime: 2024-01-18 09:58:33
|
|
|
* @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: "/subEnterprise/msg/index",
|
|
|
},
|
|
|
{
|
|
|
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/prequalification/index",
|
|
|
},
|
|
|
],
|
|
|
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>
|
