插件更多页(s-more) | SmartHome 参考文档

# 插件更多页(s-more)

为了规范插件更多页，国际美居封装了超级插件更多页组件H5版本，供各事业部自行调用。该组件当前分为可选功能、默认功能、以及自定义内容块。其中：默认功能中的电子说明书、常见问题(FAQ)需符合ibos配置才会自动展示功能入口，可选功能可根据事业部当前业务自行选择是否启用。

weex组件, 页面import导入。

# 实例

# 基础用法

<template>
  <s-more
    :isNewH5Webview="false"
    :languageType="lang"
    :unitActived="0"
    :notificiatonShow="true"
    :timeZoneShow="true"
    :serviceShow="true"
    :contactShow="true"
    :registerShow="true"
    :troubleshootingShow="true"
    :networkInfoShow="true"
    :plugVersion="'v1.3.1.3.22474939950'"
    :unitArr="unitArr"
    @broadcastChannel="broadcastChannel"
    @chooseUnit="chooseUnit"
  >
    <template v-slot:custom>
      <!-- 自定义区域1，位于单位切换cell下，样式由插件控制 -->
    </template>
    <template v-slot:custom2>
      <!-- 自定义区域2，位于ContectUs与分享设备之间，样式由插件控制 -->
    </template>
    <template v-slot:components>
      <!-- 自定义弹窗内容，如Modal、Popup，样式由插件控制 -->
      
    </template>
  </s-more>
</template>
<script>
// 从npm官网仓库导入
import 'smarthome-h5-components/dist/style.css'
import { SMore } from 'smarthome-h5-components';

export default {
    components: {
        SMore
    },
    data() {
        return {
            lang: '',
            unitArr: [{
                /**
                 * 数组元素定义
                 * unitId：单位id，必填，用于区分多组单位
                 * unitName：单位名称，必填，须由事业部处理多语言
                 * unitIndex：单位索引值，必填，当前所选单位的索引值，从0开始
                 * unitList：单位列表，必填，数组类型，每个元素为一个字符串，表示一个单位，须由事业部处理多语言
                 */
                unitId: '1',
                unitName: '温度',
                unitIndex: 0,
                unitList: ['℃', '℉']
            }],
        }
    },
    methods: {
        customerOTAClick() {
          // 如无须自行处理，可不监听组件该事件
          nativeService.toast('当前状态下暂不可升级设备')
        },
        broadcastChannel(message) {
          console.log(`broadcastChannel log in parent::${message.clickEvent}`);
        },
        chooseUnit({ unitId, chooseIndex }) {
            console.log('插件端chooseUnit');
            const modifyIndex = this.unitArr.findIndex(item => item.unitId === unitId);
            if (modifyIndex > -1) {
                console.log(this.unitArr[modifyIndex]);
                this.unitArr[modifyIndex].unitIndex = chooseIndex;
            }
        },
    },
    created() {
        nativeService.getLanguage().then((res) => {
            this.lang = res.language || 'en';
        });
    },
    mounted() {
    }
};
</script>

# CSS基准值

组件是基于750宽度（基准值75）的UI标注，以px为单位进行开发，需依赖插件整体项目做px2rem处理。若与插件基准不一致，可参考以下方式设置两套基准值：

# 功能描述

功能名称	功能说明
设备信息	设备信息展示(设备图片、设备名称、设备品类、设备型号、设备sn；主人设备可编辑/修改设备名称；点击可复制设备型号、设备SN到剪切板)
单位切换	由插件通过unitArr输入可选单位切换，样式由组件控制
网络信息	设备连接WiFi网络后网络信息展示，仅设备在线且模组支持时展示入口
设备时区	显示设备当前所在时区，支持修改，默认配网时所在时区，纯蓝牙直连设备不展示该入口
设备消息管理	可跳转设备消息开关管理页，默认存在一个总开关，其余子开关由事业部配置
电子说明书	根据ibos接口配置判断是否展示入口
常见问题	根据ibos接口配置判断是否展示入口
一键报修	针对已开放国家展示入口
智能诊断	根据ibos接口配置判断是否展示入口
产品注册	针对已开放国家展示入口
问题反馈	跳转App的设备FAQ进行问题反馈
售后电话	根据ibos接口配置判断是否展示入口
设备分享	仅主人且非蓝牙直连设备展示分享入口和操作设备分享
插件版本号	由事业部传参
固件升级	设备OTA，有待升级设备展示红点(蓝牙直连设备不展示入口)，支持自定义固件升级事件
删除设备	云端删除设备接口，删除设备成功后回到APP首页
多语言	依赖事业部传入插件当前语言码，若未能匹配事业部传入的语言码，则以英文兜底。注：自定义功能翻译需事业部自行处理
家庭信息	美居v3.8、东芝v2.5后，支持家庭信息展示，主人设备显示家庭名称&房间名称（如有分配）；分享设备显示设备所属家庭名称

# Attributes

Prop	Type	Required	Optional values(可选值)	Default	Description
isNewH5Webview	`boolean`	Yes	true/false	false	H5容器类型，目前插件H5容器有新旧之分，影响调用原生接口逻辑，务必准确传入
languageType	`string`	Yes	SmartHome/TSmartLife当前支持的所有语言码	en	语言码(根据国际美居/国际东芝语言码传入)，超出当前app范围内的语言或不传语言码，则以英文兜底
plugVersion	`string`	Yes	-	-	插件版本号
~~unitShow~~	~~`boolean`~~	No	t~~rue/false~~	~~false~~	单位
~~unitActived~~	~~`number`~~	No	~~0/1~~	0	~~单位默认值~~
notificiatonShow	`boolean`	No	true/false	false	设备消息管理
timeZoneShow	`boolean`	No	true/false	false	设备时区(蓝牙直连设备不展示入口)
serviceShow	`boolean`	No	true/false	false	一键报修
registerShow	`boolean`	No	true/false	false	产品注册
contactShow	`boolean`	No	true/false	false	联系我们，默认仅查询、展示当前设备品牌相关的售后电话
contactShowAllBrand	`boolean`	No	true/false	false	联系我们是否展示所有品牌的售后电话（已配置在后台的售后电话），^1.0.2
troubleshootingShow	`boolean`	No	true/false	false	智能诊断
networkInfoShow	`boolean`	No	true/false	true	网络信号强度
showOTARedDotCus	`boolean`	No	true/false	false	自定义固件升级是否显示小红点，仅在传入customerOTAClick时生效
unitArr	`Array`	No	-	[]	自定义单位设置

# Slots

name	Type	说明
custom	-	自定义功能区-位于温度单位切换下方
custom2	-	自定义功能区-位于ContactUs与分享设备之间
custom3	-	自定义功能区-位于设备信息二级页面底部，v1.0.2版本支持
components	-	自定义弹窗组件等放置区域

插件更多页UI标注参考

# Events

事件名称	说明	回调参数
~~customerUnitClick~~	~~点击切换单位(℉/℃)~~	~~index~~
customerFeedbackClick	针对“问题反馈”支持可选配置，触发该事件进行自定义操作。不触发该事件则默认跳转集团问题反馈功能页面	-
customerOTAClick	针对“固件升级”支持可选配置，触发该事件进行自定义操作。不触发该事件则默认跳转集团固件升级页	-
exitMorePage	为同时适配SPA与MPA应用，从更多页首页点击左上角返回按钮，页面回退交由插件完成	-
deleteDeviceSuccess	删除设备成功，若退出插件失败，需插件协助退出当前插件	-
broadcastChannel	通过事件回调，抛出用户点击事件，供事业部执行自定义行为，如：埋点等；主要判断/跳转逻辑依然由组件内完成，具体参考值如下	-
chooseUnit	切换单位事件回调	{ unitId, chooseIndex }；unitId：对应unitArr中的unitId；chooseIndex：用户选中的单位下标

function broadcastChannel(message) {
  console.log(`broadcastChannel log in parent::${message.clickEvent}`);
  // message结构
  // {
  //   clickEvent: 'deviceDetail'
  // }
}

clickEvent	说明
deviceDetail	点击设备信息
customerUnitClick	点击单位切换，与customerUnitClick事件共存
notifiSetting	点击消息开关设置
deviceTimeZone	点击设备时区
userGuide	点击电子说明书
FAQ	点击常见问题
Troubleshooting	点击智能诊断
serviceRequest	点击一键报修
Register	点击产品注册
contactUs	点击联系我们
Feedback	点击问题反馈
shareDevice	点击设备分享
deviceOTA	点击固件升级
networkDetail	点击网络信号强度
editDeviceName	编辑设备名称-二级页面
copySN	复制设备SN-二级页面
copyModel	复制设备型号-二级页面
pluginVersion	插件版本信息-无后续动作
homeName	家庭名称-无后续动作
roomName	房间名称-无后续动作
categoryName	品类名称-无后续动作
routerName	路由名称-无后续动作
routerSignal	路由信号强度-无后续动作
routerIpV4	路由IP地址-无后续动作
routerMac	路由MAC地址-无后续动作

← 更新日志