插件更多页(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"
    :deviceVoiceShow="true"
    :darkMode="true"
    :brandColor="'#000000'"
    @exitMorePage="exitMorePage"
    @deleteDeviceSuccess="deleteDeviceSuccess"
    @customerFeedbackClick="customerFeedbackClick"
    @customerOTAClick="customerOTAClick"
    @broadcastChannel="broadcastChannel"
    @chooseUnit="chooseUnit"
  >
    <template v-slot:custom>
      <!-- 自定义区域1，位于单位切换cell下，样式由插件控制 -->
    </template>
    <template v-slot:custom2>
      <!-- 自定义区域2，位于ContectUs与分享设备之间，样式由插件控制 -->
    </template>
    <template v-slot:custom3>
      <!-- 自定义区域3，位于设备信息页底部，样式由插件控制 -->
    </template>
    <template v-slot:components>
      <!-- 自定义弹窗内容，如Modal、Popup，样式由插件控制 -->
    </template>
  </s-more>
</template>
<script>
// 从npm官网仓库导入
// vue2
import 'smarthome-h5-components/dist/style.css'
import { SMore } from 'smarthome-h5-components';

// vue3
import 'smarthome-h5-components-plus/dist/style.css'
import { SMore } from 'smarthome-h5-components-plus';

export default {
    components: {
        SMore
    },
    data() {
        return {
            lang: '',
            unitArr: [{
                /**
                 * 数组元素定义
                 * unitId：单位id，必填，用于区分多组单位
                 * unitName：单位名称，必填，须由事业部处理多语言
                 * unitIndex：单位索引值，必填，当前所选单位的索引值，从0开始
                 * unitList：单位列表，必填，数组类型，每个元素为一个字符串，表示一个单位，须由事业部处理多语言
                 */
                unitId: '1',
                unitName: '温度',
                unitIndex: 0,
                unitList: ['℃', '℉']
            }],
        }
    },
    methods: {
        exitMorePage() {
          // 必要监听事件，处理页面回退
        }
        customerFeedbackClick() {
          // 如无须自行处理，可不监听组件该事件
          nativeService.toast('跳转自定义问题反馈')
        },
        customerOTAClick() {
          // 如无须自行处理，可不监听组件该事件
          nativeService.toast('当前状态下暂不可升级设备')
        },
        deleteDeviceSuccess() {
          // 必要监听事件，删除设备后续插件协助退出插件
        }
        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网络后网络信息展示，仅设备在线且模组支持时展示入口
设备时区	显示设备当前所在时区，支持修改，默认配网时所在时区，纯蓝牙直连设备不展示该入口
设备语音	显示设备当前语音设置，支持修改，由事业部插件控制入口显示，列表需根据品类+sn8配置
设备消息管理	可跳转设备消息开关管理页，默认存在一个总开关，其余子开关由事业部配置
电子说明书	根据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 1.0.9^废弃	Boolean	No	true/false	false	单位
unitActived 1.0.9^废弃	Number	No	0/1	0	单位默认值
notificiatonShow	Boolean	No	true/false	false	设备消息管理
timeZoneShow	Boolean	No	true/false	false	设备时区(蓝牙直连设备不展示入口)
deviceVoiceShow	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	-	[]	自定义单位设置
targetStep	Number	No	1/2/3/4	1	自定义跳转子页面，1：s-more首页；2：设备信息页；3：网络信息页；4：语音列表页（跳转该页需同时设置deviceVoiceShow为true）；设置该参数后，返回按钮将直接返回上一级页面
darkMode	Boolean	No	true/false	false	是否暗黑
brandColor	String	No	十六进制/RGBA色值	''	自定义品牌色

Slots

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

插件更多页UI标注参考

Events

事件名称	说明	回调参数
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	点击设备信息
notifiSetting	点击消息开关设置
deviceTimeZone	点击设备时区
userGuide	点击电子说明书
FAQ	点击常见问题
Troubleshooting	点击智能诊断
serviceRequest	点击一键报修
Register	点击产品注册
contactUs	点击联系我们
Feedback	点击问题反馈
shareDevice	点击设备分享
deviceOTA	点击固件升级
editDeviceName	编辑设备名称-二级页面
copySN	复制设备SN-二级页面
copySerialNo	复制设备SerialNo-二级页面
copyModel	复制设备型号-二级页面
networkDetail	点击网络信号强度-跳转网络信号页-二级页面
pluginVersion	插件版本信息-无后续动作
homeName	家庭名称-无后续动作
roomName	房间名称-无后续动作
categoryName	品类名称-无后续动作
routerName	路由名称-无后续动作
routerSignal	路由信号强度-无后续动作
routerIpV4	路由IP地址-无后续动作 ——应安全建议，隐藏该信息字段
routerMac	路由MAC地址-无后续动作 ——应安全建议，隐藏该信息字段
deviceVoice	设备语音语种设置-跳转语音语种设置页-二级页面
updateVoice	更新设备语音语种设置-调用云端接口更新设备语音语种成功