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">暂无</view>
                    </view>
                </view>
                <view
                    class="rightItem"
                    @click="gotoPath('/pagesA/homeManage/homeManage')"
                >
                    <view class="rightTitle">我的家庭</view>
                    <view class="rightContent"
                        ><text>{{ groupNum }}</text
                        >家</view
                    >
                </view>
                <view
                    class="rightItem"
                    @click="gotoPath('/pagesA/devices/devices')"
                >
                    <view class="rightTitle">全部设备</view>
                    <view class="rightContent"
                        ><text>{{ devNum }}</text
                        >台</view
                    >
                </view>
                <view class="rightItem" @click="goNo()">
                    <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="gotoPath('/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.0 </view>

        <!-- <view class="headerInfo">111111</view> -->

        <alarmCom></alarmCom>
    </view>
</template>
<script>
export default {
    name: "my",
    data() {
        return {
            notices: [],
            groupNum: 0,
            shareNum: 0,
            devNum: 0,
            warnNum: 0,
            imageUrl: "../../static/headerInfo.png",
        };
    },
    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",
                });
            }
        },
        goNo() {
            if (uni.getStorageSync("userId")) {
                uni.showToast({
                    title: "该功能正在开发中，敬请期待",
                    icon: "none",
                    duration: 1500,
                });
                return;
            }
            uni.reLaunch({
                url: "/pagesA/loginNew/loginNew",
            });
        },
    },
    onLoad() {},
    onShow() {
        if (uni.getStorageSync("userId")) {
            this.$http
                .get("wap/home/homeInfo", {
                    userId: uni.getStorageSync("userId"),
                })
                .then((res) => {
                    if (res.data.data) {
                        const { groupNum, shareNum, devNum, warnNum } =
                            res.data.data;
                        this.groupNum = groupNum;
                        this.shareNum = shareNum;
                        this.devNum = devNum;
                        this.warnNum = warnNum;
                    }
                });
        }
        // 配置服务器
        let selectedService = uni.getStorageSync("sercviceChoice");
        if (!selectedService) {
            uni.setStorageSync("sercviceChoice", "aloneServe");
        }
    },
    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;
}
// .headerInfo {
//     position: fixed;
//     top: 40rpx;
//     left: 0;
//     width: 750rpx;
//     height: 105rpx;
//     background: linear-gradient(
//         90deg,
//         rgba(255, 97, 97, 0) 0%,
//         #6ddea7 50.44%,
//         rgba(255, 97, 97, 0) 100%
//     );
// }
</style>