hfln_miniprogram/src/pages/home/home.vue

<template>
    <view class="home-warp">
        <view class="header">
            <view class="headerPng" @click="gotoPath('/pagesA/my/my')">
                <image :src="imageUrl" mode="widthFix" />
            </view>
            <view class="title">健康雷达</view>
        </view>

        <view class="leineng">
            <view>
                <image
                    src="http://jkld.radar-power.com//uploadFiles/framework/file/20250620/home_ln.png"
                    mode=""
                />
            </view>
            <view class="right">
                <view class="rightItem">
                    <view class="rightTitle">今日天气</view>
                    <view class="rightPng">
                        <view
                            class="rightContent"
                            style="text-align: center; font-size: 40rpx"
                            >{{ weatherText }}</view
                        >
                    </view>
                </view>
                <view
                    class="rightItem"
                    @click="gotoDevice('/pagesA/devices/devices')"
                >
                    <view class="rightTitle">我的家庭</view>
                    <view class="rightContent"
                        ><text>{{ groupNum }}</text
                        >家</view
                    >
                </view>
                <view
                    class="rightItem"
                    @click="gotoDevice('/pagesA/devices/devices')"
                >
                    <view class="rightTitle">全部设备</view>
                    <view class="rightContent"
                        ><text>{{ devNum }}</text
                        >台</view
                    >
                </view>
                <view class="rightItem" @click="goAbnormalInfo()">
                    <view class="rightTitle">异常信息</view>
                    <view class="rightContent" v-if="warnNum == 0"
                        ><text>0</text>条</view
                    >
                    <view class="rightAlarm" v-else
                        ><text>{{ warnNum }}</text
                        >条</view
                    >
                </view>
            </view>
        </view>

        <view class="content">
            <view class="card" @click="gotoPath('/pagesA/adDevice/adDevice')">
                <view class="contentTitle">
                    <text>添加设备</text>
                    <image src="../../static/rightArrow.png" />
                </view>
                <view class="contentCenter"> 家庭陪伴探测器 </view>
                <view class="contentImg">
                    <image src="../../static/smalLn.png" mode="" />
                </view>
            </view>
            <view class="card" @click="gotoDevice('/pagesA/devices/devices')">
                <view class="contentTitle">
                    <text>我的家庭</text>
                    <image src="../../static/rightArrow.png" />
                </view>
                <view class="contentCenter"> 点击进入我的家 </view>
                <view class="contentImg">
                    <image src="../../static/myHome.png" mode="" />
                </view>
            </view>
        </view>

        <view class="bottom">
            <image src="../../static/linkService.png" mode="" />
            <button open-type="contact">联系客服</button>
        </view>
        <view class="bot_version"> v3.0.5 </view>

        <view
            class="shareInfo"
            @click="goDeviceShare()"
            v-if="shareNum > 0"
            :style="{ top: warnNum > 0 ? '280rpx' : '210rpx' }"
        >
            <image src="../../static/ln_small.png" class="shareimage"></image>
            <text class="sharetitle"
                >您有<text class="sharenum">{{ shareNum }}</text
                >台设备待授权</text
            >
            <image src="../../static/arrTwo.png" class="arrimage"></image>
        </view>

        <view
            class="warmInfo"
            @click="goAbnormalInfo()"
            v-if="warmList.length > 0"
        >
            <image src="../../static/warmImage.png" class="shareImage"></image>
            <view class="shareTitleContainer">
                <view class="shareTitleList" v-if="warmList.length > 1">
                    <view
                        class="shareTitle"
                        v-for="item in warmList"
                        :key="item.devId"
                    >
                        {{ item.devName }}检测到有目标滞留
                    </view>
                    <view
                        class="shareTitle"
                        v-for="(item, index) in warmList"
                        :key="index"
                    >
                        {{ item.devName }}检测到有目标滞留
                    </view>
                </view>
                <view class="shareTitleTwo" v-else>
                    <view class="shareTitle">
                        {{ warmList[0].devName }}检测到有目标滞留
                    </view>
                </view>
            </view>
            <image src="../../static/arrFour.png" class="warmImage"></image>
        </view>
        <alarModel v-if="isInitAlarm" />
        <tenMinutes v-if="isIniTenMinutes" />
    </view>
</template>
<script>
export default {
    name: "my",
    data() {
        return {
            notices: [],
            groupNum: 0,
            shareNum: 0,
            devNum: 0,
            warnNum: 0,
            imageUrl: "../../static/headerInfo.png",
            devDevice: "",
            warmNum: "",
            warmDetail: [],
            warmList: [],
            weatherText: "",
            isInitAlarm: false,
            isIniTenMinutes: false,
        };
    },
    computed: {},
    methods: {
        gotoPath(path) {
            if (uni.getStorageSync("userId")) {
                uni.navigateTo({
                    url: path,
                });
            } else {
                uni.showToast({
                    title: "暂未登录，请先登录",
                    icon: "none",
                    duration: 1500,
                });
                uni.reLaunch({
                    url: "/pagesA/loginNew/loginNew",
                });
            }
        },
        gotoDevice(url) {
            if (uni.getStorageSync("userId")) {
                if (this.devDevice.length == 1) {
                    uni.navigateTo({
                        url:
                            "/pagesA/deviceDetail/deviceDetail?devItem=" +
                            JSON.stringify(this.devDevice[0]),
                    });
                } else {
                    uni.navigateTo({
                        url: url,
                    });
                }
            } else {
                uni.showToast({
                    title: "暂未登录，请先登录",
                    icon: "none",
                    duration: 1500,
                });
                uni.reLaunch({
                    url: "/pagesA/loginNew/loginNew",
                });
            }
        },
        goAbnormalInfo() {
            if (uni.getStorageSync("userId")) {
                if (this.warnNum <= 0) {
                    uni.showToast({
                        title: "暂无异常信息",
                        icon: "none",
                        duration: 1500,
                    });
                    return;
                }
                uni.navigateTo({
                    url: "/pagesA/abnormalInfo/abnormalInfo",
                });
                return;
            }
            uni.reLaunch({
                url: "/pagesA/loginNew/loginNew",
            });
        },
        goDeviceShare() {
            uni.setStorageSync("shareStatus", "authorized");
            uni.navigateTo({
                url: "/pagesA/shareList/shareList",
            });
        },
        getperSonInfo() {
            this.$http
                .get("wap/home/homeInfo", {
                    userId: uni.getStorageSync("userId"),
                })
                .then((res) => {
                    if (res.data.data) {
                        const { groupNum, devNum, warnNum } = res.data.data;
                        this.groupNum = groupNum;
                        this.devNum = devNum;
                        this.warnNum = warnNum;
                        this.devDevice = res.data.data.deviceList;
                    }
                });
        },
        getShareNum() {
            // uni.showLoading({
            //     title: "雷能守护中...",
            // });
            this.$http
                .post("wap/share/queryDevShare", {
                    userId: uni.getStorageSync("userId"),
                    state: 0,
                })
                .then((res) => {
                    this.shareNum = res.data.data?.length || 0;
                });
        },
        // 获取天气接口
        getWeather() {
            uni.request({
                url: "https://kp36x7gr79.re.qweatherapi.com/v7/weather/now", // 使用官方域名
                data: {
                    location: "101220101", // 城市ID
                    key: "72afe228cd7f436ebea7caa1345956f2", // 你的API Key
                },
                method: "GET",
                success: (res) => {
                    if (res.statusCode === 200) {
                        this.weatherText = res.data.now.text;
                    }
                },
                fail: (err) => {
                    console.error("网络错误:", err);
                },
            });
        },
        // 需要跟车对接一下，换一个接口
        getWarmList() {
            this.$http
                .post(
                    "wap/stats/alarmRetentionQuery",
                    {
                        pageNo: 1,
                        pageSize: 20,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.data) {
                        // this.warmNum = res.data.data.total;
                        if (res.data.data.rows.length > 0) {
                            this.warmDetail = res.data.data.rows;
                            this.warmList = res.data.data.rows;
                        }
                    }
                });
            uni.hideLoading();
        },
    },
    onLoad() {},
    onShow() {
        if (uni.getStorageSync("userId")) {
            uni.showLoading({
                title: "雷能为您守护中...",
            });
            this.getperSonInfo();
            this.getShareNum();
            this.getWarmList();
            this.getWeather();
            this.isInitAlarm = true;
            this.isIniTenMinutes = true;
        }
        // 配置服务器
        let selectedService = uni.getStorageSync("sercviceChoice");
        if (!selectedService) {
            uni.setStorageSync("sercviceChoice", "aloneServe");
        }
    },
    onHide() {
        this.isInitAlarm = false;
        this.isIniTenMinutes = false;
    },
    onUnload() {
        this.isInitAlarm = false;
        this.isIniTenMinutes = false;
    },

    onShareAppMessage() {
        return {
            title: "好友向您分享雷能守护",
            path: "/pages/home/home",
        };
    },
};
</script>
<style lang="less" scoped>
.home-warp {
    position: relative;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    /* padding: 24rpx 30rpx 20rpx; */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90rpx 80rpx;
}

.headerPng {
    z-index: 1;
}

.headerPng image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
}

.title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #111111;
    font-size: 32rpx;
}

.leineng {
    position: absolute;
    top: -100rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100vw;
    height: 100vh;
}

.leineng image {
    position: absolute;
    top: 10%;
    left: 0;
    width: 700rpx;
    height: 1200rpx;
}

.right {
    z-index: 99;
    padding-right: 100rpx;
}

.right .rightItem {
    margin-bottom: 60rpx;
    color: #666666;
}

.right .rightItem .rightTitle {
    font-size: 23.44rpx;
    text-align: center;
}

.right .rightItem .rightContent {
    margin-top: 17rpx;
    font-size: 24rpx;
    font-weight: bold;
}

.right .rightItem .rightContent text {
    font-weight: 700;
    font-size: 66rpx;
}

.right .rightItem .rightAlarm {
    margin-top: 17rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #f55050;
}

.right .rightItem .rightAlarm text {
    font-weight: 700;
    font-size: 66rpx;
    color: #f55050;
}

.content {
    position: absolute;
    bottom: 200rpx;
    width: 100vw;
    display: flex;
    justify-content: space-around;
}

.card {
    width: 350rpx;
    height: 300rpx;
    border: 2rpx solid #ffffff;
    border-radius: 37rpx;
    background: #ffffff;
    padding: 38rpx 30rpx;
    box-sizing: border-box;
}

.contentTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #111111;
}

.contentTitle image {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}

.contentCenter {
    margin-top: 14rpx;
    font-size: 24rpx;
    color: #999999;
}

.contentImg image {
    margin-top: 60rpx;
    width: 94rpx;
    height: 94rpx;
}

.bottom {
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom image {
    width: 28rpx;
    height: 28rpx;
}

.bottom button {
    all: unset;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: inherit;
    line-height: normal;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    margin-left: 6rpx;
    color: #a1aab4;
    font-size: 28rpx;
}

.bot_version {
    opacity: 0.4;
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    font-size: 28rpx;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.shareInfo {
    width: 100%;
    padding: 0 16rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    position: absolute;
    // top:210rpx;
    // top: 400rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        #6f4e37 0%,
        rgba(210, 180, 140, 0.3) 100%
    );
    .shareimage {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
    }
    .sharetitle {
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #ffffff;
        letter-spacing: 4rpx;
    }
    .sharenum {
        font-weight: bold;
        font-size: 28rpx;
        color: #ffffff;
    }
    .arrimage {
        width: 20rpx;
        height: 30rpx;
        margin-left: auto;
    }
}

.warmInfo {
    width: 100%;
    padding: 0rpx 10rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    position: absolute;
    top: 210rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        #f9e0d7 0%,
        #ff6262 45%,
        #ff6262 55%,
        #f9e0d7 100%
    );
    border-radius: 12rpx;
}

.shareImage {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
}

.warmImage {
    width: 30rpx;
    height: 30rpx;
    margin-left: auto;
}

.shareTitleContainer {
    flex: 1;
    overflow: hidden;
    height: 40rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
}

/* 内层列表：滚动 */
.shareTitleList {
    display: flex;
    flex-direction: column;
    animation: scrollUp 10s linear infinite;
}
.shareTitleTwo {
    display: flex;
    flex-direction: column;
}
.shareTitle {
    font-size: 28rpx;
    color: #ffffff;
    letter-spacing: 4rpx;
    height: 40rpx;
    line-height: 40rpx;
    white-space: nowrap;
}

/* 无限无缝滚动 */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}
</style>