uniapp-ZHSQ/packages/smartDevice/home/index.vue

<!--
  页面：智能设备（聚合首页）
  说明：按设计稿 liuyuanxitong-yidong/pages/device 整体还原到 uniapp。
        顶部固定标题「智能设备」；登录前引导态（Hero 双按钮 + 8 卡锁文案），
        登录后总览态（问候 + 4 特性标签 + 8 卡操作链接 + 底部统计条）。
        「停车充电」卡挂到现有停车页 /packages/smartDevice/index/index，其余卡占位。
-->
<template>
  <view class="device-page">
    <!-- 头部：固定标题「智能设备」 -->
    <view class="device-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="title-bar">
        <text class="page-title">智能设备</text>
      </view>
    </view>

    <!-- 内容体：承接页头渐变往下续色（渐变加在此，从页头下方 0 处起、与页头 #ff4848 无缝） -->
    <view class="device-body">
    <!-- Hero：图片轮播底图 + 叠加文案（登录前双按钮 / 登录后问候 + 4 特性标签） -->
    <view class="device-hero">
      <swiper class="hero-swiper" :autoplay="true" :interval="4000" :duration="500" circular>
        <swiper-item v-for="(img, idx) in heroImages" :key="idx">
          <image class="hero-img" :src="img" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view class="hero-mask"></view>

      <view class="hero-overlay">
        <!-- 登录后问候 -->
        <block v-if="isLogin">
          <text class="hero-greeting">您好，{{ nickName || '业主' }}</text>
          <text class="hero-greeting-sub">欢迎查看您所在社区的智能设备</text>
          <text class="hero-title">社区智能设备总览</text>
          <text class="hero-sub">一站式浏览社区设备，智慧生活触手可及</text>
          <view class="hero-tags">
            <view class="hero-tag" v-for="tag in heroTags" :key="tag.key">
              <view class="hero-tag-icon">
                <u-icon :name="tag.icon" color="#fff" size="30"></u-icon>
              </view>
              <text class="hero-tag-label">{{ tag.label }}</text>
            </view>
          </view>
        </block>

        <!-- 登录前引导 -->
        <block v-else>
          <text class="hero-title">连接社区智能设备</text>
          <text class="hero-sub">门禁、停车、安防、环境，一页轻松查看</text>
          <view class="hero-actions">
            <view class="hero-btn primary" @click="goLogin">立即登录</view>
            <view class="hero-btn ghost" @click="handlePreview">先看看</view>
          </view>
        </block>
      </view>
    </view>

    <!-- 设备分类卡：2 列网格 -->
    <view class="cat-grid">
      <view class="cat-card" v-for="cat in deviceCategories" :key="cat.key" @click="handleCardTap(cat)">
        <!-- 右下角产品图（还原设计稿，渐变块为兜底底色） -->
        <view class="cat-pic" :class="'illust-' + cat.illust">
          <image class="cat-pic-img" :src="cat.image" mode="aspectFill" />
        </view>
        <!-- 文案 -->
        <view class="cat-text">
          <text class="cat-title">{{ cat.title }}</text>
          <text class="cat-desc">{{ cat.desc[0] }}</text>
          <text class="cat-desc">{{ cat.desc[1] }}</text>
        </view>
        <!-- 底部：登录前锁文案 / 登录后红色链接 -->
        <view class="cat-foot">
          <block v-if="isLogin">
            <u-icon name="play-circle" color="#ef111b" size="24"></u-icon>
            <text class="foot-action">{{ cat.actionText }}</text>
          </block>
          <block v-else>
            <u-icon name="lock" color="#b8b8b8" size="22"></u-icon>
            <text class="foot-lock">{{ cat.lockText }}</text>
          </block>
        </view>
      </view>
    </view>

    <!-- 登录后底部统计条 -->
    <view class="stat-bar" v-if="isLogin">
      <view class="stat-icon">
        <u-icon name="home" color="#fff" size="30"></u-icon>
      </view>
      <view class="stat-text">
        <text class="stat-title">社区已接入多类智能设备</text>
        <text class="stat-sub">持续升级中，为您带来更智慧的社区体验</text>
      </view>
      <view class="stat-num">
        <text class="stat-value">128+</text>
        <text class="stat-unit">设备类型</text>
      </view>
    </view>

    <view class="tabbar-spacer"></view>
    </view>

    <nav-footer :current="1" />
  </view>
</template>

<script>
import { request, NavgateTo } from '../../../utils';
import { apiArr } from '../../../api/v2User';

export default {
  data() {
    return {
      statusBarHeight: 20,
      isLogin: false,
      nickName: '',
      // 顶部轮播图：还原设计稿的 4 张底图（已下载为本地图，必定可加载）
      heroImages: [
        '/static/smartDevice/hero1.jpg',
        '/static/smartDevice/hero2.jpg',
        '/static/smartDevice/hero3.jpg',
        '/static/smartDevice/hero4.jpg'
      ],
      // 登录后 4 特性标签（图标用 uview 内置图标名）
      heroTags: [
        { key: 'rich', label: '设备丰富', icon: 'grid' },
        { key: 'safe', label: '安全可靠', icon: 'checkmark-circle' },
        { key: 'smart', label: '智慧便捷', icon: 'star-fill' },
        { key: 'life', label: '美好生活', icon: 'heart' }
      ],
      // 8 个设备分类卡（还原设计稿 device-data.js）
      deviceCategories: [
        { key: 'access', title: '门禁通行', desc: ['安全有序出入', '无忧生活体验'], illust: 'access', image: '/static/smartDevice/cat-access.jpg', lockText: '登录后远程开门', actionText: '设备展示' },
        { key: 'parking', title: '停车充电', desc: ['社区停车便捷', '充电设备丰富'], illust: 'parking', image: '/static/smartDevice/cat-parking.jpg', lockText: '登录后查看车位与充电桩', actionText: '进入停车' },
        { key: 'guard', title: '家庭安防', desc: ['守护家庭安全', '安心每一天'], illust: 'guard', image: '/static/smartDevice/cat-guard.jpg', lockText: '登录后可控制', actionText: '设备简介' },
        { key: 'environment', title: '智慧环境', desc: ['空气与温湿度监测', '营造舒适环境'], illust: 'environment', image: '/static/smartDevice/cat-environment.jpg', lockText: '登录后可查看', actionText: '运行概览' },
        { key: 'monitor', title: '视频监控', desc: ['高清实时监控', '守护社区安全'], illust: 'monitor', image: '/static/smartDevice/cat-monitor.jpg', lockText: '登录后查看摄像头', actionText: '仅供查看' },
        { key: 'water', title: '净水设备', desc: ['优质净水体验', '健康饮水每一天'], illust: 'water', image: '/static/smartDevice/cat-water.jpg', lockText: '登录后可查看', actionText: '设备展示' },
        { key: 'lighting', title: '智能照明', desc: ['灯光随心营造', '温馨舒适氛围'], illust: 'lighting', image: '/static/smartDevice/cat-lighting.jpg', lockText: '登录后可控制', actionText: '场景展示' },
        { key: 'scene', title: '场景联动', desc: ['多设备协同', '智慧生活体验'], illust: 'scene', image: '/static/smartDevice/cat-scene.jpg', lockText: '登录后可使用', actionText: '场景展示' }
      ]
    }
  },
  onLoad() {
    const sys = uni.getSystemInfoSync();
    this.statusBarHeight = sys.statusBarHeight || 20;
  },
  onShow() {
    this.refreshLogin();
  },
  methods: {
    refreshLogin() {
      const ctoken = uni.getStorageSync('ctoken');
      this.isLogin = !!ctoken;
      if (this.isLogin) {
        this.getUserInfo();
      } else {
        this.nickName = '';
      }
    },
    async getUserInfo() {
      try {
        const res = await request(apiArr.getUserInfo, 'POST', {}, { silent: false });
        this.nickName = (res && res.nick_name) ? res.nick_name : '';
      } catch (e) {
        this.nickName = '';
      }
    },
    goLogin() {
      uni.redirectTo({ url: '/pages/login/login' });
    },
    handlePreview() {
      uni.showToast({ title: '浏览模式，登录后可使用完整功能', icon: 'none' });
    },
    // 卡片点击：停车充电 → 现有停车页；其余占位
    handleCardTap(item) {
      if (item.key === 'parking') {
        // 现有智能设备（停车）页；未登录时 NavgateTo 自动跳登录
        NavgateTo('/packages/smartDevice/index/index');
        return;
      }
      if (!this.isLogin) {
        uni.showToast({ title: '登录后可查看设备详情', icon: 'none' });
        return;
      }
      uni.showToast({ title: item.title + '功能开发中', icon: 'none' });
    }
  }
}
</script>

<style>
@import url("./index.css");
</style>