gxt_app/pages/index/index.uvue

<template>
	<uni-navbar-lite :showLeft=false title="首页"></uni-navbar-lite>
    <view class="page-container">
        <!-- 背景图 -->
        <!-- <image class="bg-image" src="/static/images/index/1.png" mode="widthFix"></image> -->

        <view class="bg-color"></view>

        <scroll-view class="page-content">
            <!-- 支流出库流量图表 -->
            <view class="chart-section">
                <text class="section-title">支流出库流量 (m³/s)</text>
                <flow-chart />
            </view>
			
			<view>
				<button @click="handlePush">通知</button>
			</view>
			
        </scroll-view>

        <!-- 底部 TabBar -->
        <custom-tabbar :current="0" />
    </view>
</template>

<script setup lang="uts">
    import { ref, onMounted } from 'vue'
    import { getUserInfo } from '../../utils/storage'
    import FlowChart from '../../components/index/flow-chart/flow-chart.uvue'

    // 用户名
    const userName = ref<string>('用户')
	
	const handleCreateChannel = (showToast : boolean) => {
	  // #ifdef APP-ANDROID
	  const manager = uni.getPushChannelManager()
	  manager.setPushChannel({
	    channelId: "msg-pass",
	    channelDesc: "留言审核通过",
	    soundName: "#填写配置的声音文件名#",
	    enableLights: true,
	    enableVibration: true,
	    importance: 4,
	    lockscreenVisibility: 1
	  } as SetPushChannelOptions)
	  if (showToast) {
	    uni.showToast({
	      title: "设置渠道成功"
	    })
	  }
	  // #endif
	}
	
	const handleCreateLocalNotification = () => {
	  if (uni.getAppAuthorizeSetting().notificationAuthorized == "authorized") {
	    handleCreateChannel(false)
	    const date = new Date();
	    const hour = date.getHours()
	    const minute = date.getMinutes()
	    const second = date.getSeconds()
	    const formateTime = (target : number) : string => {
	      return target < 10 ? `0${target}` : `${target}`
	    }
	    uni.createPushMessage({
	      title: "主标题(title)",
	      content: `内容(content)，创建时间: ${formateTime(hour)}:${formateTime(minute)}:${formateTime(second)}`,
	      cover: false,
	      channelId: "msg-pass",
	      when: Date.now() + 10000,
	      icon: "/static/uni.png",
	      sound: "system",
	      delay: 1,
	      payload: {
	        pkey: "pvalue1"
	      },
	      // #ifdef APP-HARMONY
	      category: "SOCIAL_COMMUNICATION",
	      // #endif
	      // #ifndef APP-HARMONY
	      category: "IM",
	      // #endif
	      success(res) {
	        console.log("res: " + res);
	        uni.hideToast()
	        uni.showToast({
	          title: "创建本地通知消息成功"
	        })
	      },
	      fail(e) {
	        console.log("fail :" + e);
	        uni.hideToast()
	        uni.showToast({
	          title: "创建本地通知消息失败",
	          icon: "error"
	        })
	      }
	    })
	  } else {
	    uni.showToast({
	      title: "请在设置中开启通知权限",
	      icon: "error"
	    })
	  }
	}
	
	const handlePush =  () => {
		// uni.navigateTo({
		//     url: '/pages/push/index',
		//     fail: (err: any) => {
		//         console.log('导航失败', err)
		//     }
		// })
		handleCreateLocalNotification();
	};

    // 初始化
    onMounted(() => {
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const realName = userInfo['nickName'] as string | null
            userName.value = realName ?? '用户'
        }
    })
</script>

<style lang="scss">
    .page-container {
        position: relative;
        flex: 1;
        padding-top: env(safe-area-inset-top);
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #71a6e4;
    }

    .page-content {
        position: relative;
        flex: 1;
        margin-bottom: 150rpx;
        padding: 30rpx;
        z-index: 10;
    }

    .header {
		flex-direction: row;
		height: 40px;
		
        &-title {
            font-size: 40rpx;
            color: #ffffff;
            font-weight: bold;
            margin-bottom: 15rpx;
        }

        &-greeting {
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.9);
        }
    }

    .section-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    /* 图表区域 */
    .chart-section {
        padding: 30rpx;
        margin-bottom: 20rpx;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%);
        box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
        border-radius: 16rpx;
    }
</style>