SmartHome 参考文档

# 插件更多页(s-more)

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

weex组件, 页面import导入。

# 实例

# 基础用法

<template>
  <s-more
    :languageType="lang"
    :unitShow="true"
    :unitActived="0"
    :notificiatonShow="true"
    :timeZoneShow="true"
    :serviceShow="true"
    :contactShow="true"
    :registerShow="true"
    :troubleshootingShow="true"
    :networkInfoShow="true"
    :plugVersion="'v1.3.1.3.22474939950'"
    :unitArr="unitArr"
    @chooseUnit="chooseUnit"
    @customerOTAClick="customerOTAClick"
  >
    <template slot="custom">
      <div v-for="(item, index) in customCellList" :key="index">
        <div :class="['currency-box', reverseFlag && 'reverse']" @click="customClick(item)">
          <text :class="['title-text', reverseFlag && 'marginRight32']">{{ item.title }}</text>
          <image :class="['right-img', reverseFlag && 'right-img-reverse']" :src="arrowIcon"></image>
        </div>
        <div class="cardBorderStyle"></div>
      </div>
    </template>
    <template slot="custom2">
      <div v-for="(item, index) in customCellList" :key="index">
        <div :class="['currency-box', reverseFlag && 'reverse']" @click="customClick(item)">
          <text :class="['title-text', reverseFlag && 'marginRight32']">{{ item.title }}</text>
          <image :class="['right-img', reverseFlag && 'right-img-reverse']" :src="arrowIcon"></image>
        </div>
        <div class="cardBorderStyle"></div>
      </div>
    </template>
    <template slot="components">
      <!-- 自定义弹窗内容 -->
      <dof-modal
        title="文本"
        :show="show"
        @dofModalCancelBtnClicked="show = false"
        @dofModalConfirmBtnClicked="show = false"
        :single="false"
      ></dof-modal>
      <dof-popup :show="show2" @dofPopupOverlayClicked="show2 = false" pos="bottom" :height="400"></dof-popup>
    </template>
  </s-more>
</template>
<script>
// 引入组件库
import { SMore } from 'smarthome-weex-components';
import { DofModal, DofPopup } from 'dolphin-weex-ui';

export default {
    components: {
        SMore,
        DofModal,
        DofPopup
    },
    data() {
        return {
            lang: '',
            customCellList: [
                {
                title: '周定时'
                },
                {
                title: '滤网复位'
                }
            ],
            arrowIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJ1BMVEUAAADS0tLIyM3IyM3j4+Pe3t7IyM3IyM3IyMzIyM3IyMzJyczHx8yqMS2VAAAADHRSTlMABbC8CQe254eA3Y0UyxObAAAAfklEQVQ4y2MYBICxvUIAqwTHmTOpWCXYz5w5FoBdAqoF0ygcWhhzcGkJw6WFlUwtpti0iAElDmN1mA5QxgSbFiGQFgeaa8HrsA24tBRgk3DGIcFiA5SYgEPDIQEcGhRHmAZWXBq4cWhgYIdqwJTAoYGBE4cGBsZZKwUYBg8AANHecMnOzL6KAAAAAElFTkSuQmCC',
            show: false,
            show2: false,
            unitArr: [
              /**
               * 数组元素定义
               * unitId：单位id，必填，用于区分多组单位
               * unitName：单位名称，必填，须由事业部处理多语言
               * unitIndex：单位索引值，必填，当前所选单位的索引值，从0开始
               * unitList：单位列表，必填，数组类型，每个元素为一个字符串，表示一个单位，须由事业部处理多语言
               */
              {
                unitId: '1',
                unitName: '单位1',
                unitIndex: 0,
                unitList: ['℃', '℉']
              }
            ],
        }
    },
    computed: {
        reverseFlag() {
            if (this.lang === 'ar' || this.lang === 'he') {
                return true
            }
            return false
        }
    },
    methods: {
        customClick(item) {
            // nativeService.alert(item.title)
            if (item.title === '周定时') {
              this.show = true;
            } else {
              this.show2 = true;
            }
        },
        customerOTAClick() {
          // 绑定该事件后可进行自定义操作。未绑定该事件则默认跳转固件升级页
          nativeService.toast('已绑定customerOTAClick事件，执行插件自定义操作')
        },
        chooseUnit({ unitId, chooseIndex }) {
          const modifyIndex = this.unitArr.findIndex(item => item.unitId === unitId);
          if (modifyIndex > -1) {
            this.$set(this.unitArr[modifyIndex], 'unitIndex', chooseIndex);
          }
        }
    },
    created() {
        nativeService.getLanguage().then((res) => {
            this.lang = res.language || 'en';
        });
    },
    mounted() {
    }
};
</script>
<style scoped>
.wrap {
  background-color: #f7f7f7;
}
.title-text {
  margin-left: 32px;
  font-size: 32px;
  color: #000000;
}
.marginRight32 {
  margin-right: 32px;
}
.currency-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 104px;
}
.reverse {
  flex-direction: row-reverse;
}
.cardBorderStyle {
  width: 622px;
  margin-left: 32px;
  height: 1px;
  background: #f2f2f2;
}
.right-img {
  width: 24px;
  height: 24px;
  margin-right: 32px;
}
.right-img-reverse {
  transform: rotateY(540deg);
  margin-right: 0;
  margin-left: 32px;
}
</style>

# 默认功能

功能名称 功能说明
设备信息 设备信息展示(设备图片、设备名称、设备品类、设备型号、设备sn；主人设备可编辑/修改设备名称；点击可复制设备型号、设备SN到剪切板)
电子说明书 根据ibos接口配置决定是否展示入口
常见问题 根据ibos接口配置决定是否展示入口
问题反馈 跳转App的设备FAQ进行问题反馈
设备分享 仅主人且非蓝牙直连设备展示分享入口和操作设备分享
插件版本号 由事业部传参
固件升级 设备OTA，有待升级设备展示红点(蓝牙直连设备不展示入口)
删除设备 云端删除设备接口，删除设备成功后回到APP首页
多语言 依赖事业部传入插件当前语言码，若未能匹配事业部传入的语言码，则以英文兜底。注：自定义功能翻译需事业部自行处理
家庭信息 美居v3.8、东芝v2.5后，支持家庭信息展示，主人设备显示家庭名称&房间名称（如有分配）；分享设备显示设备所属家庭名称

# Attributes

Prop Type Required Optional values(可选值) Default Description
languageType string Yes SmartHome/TSmartLife当前支持的所有语言码 en 语言码(根据国际美居/国际东芝语言码传入)，超出当前app范围内的语言或不传语言码，则以英文兜底
plugVersion string Yes - - 插件版本号
unitShow boolean No true/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 联系我们是否展示所有品牌的售后电话（已配置在后台的售后电话），^0.5.12
troubleshootingShow boolean No true/false false 智能诊断
networkInfoShow boolean No true/false true 网络信号强度
showOTARedDotCus boolean No true/false false 自定义固件升级是否显示小红点，仅在传入customerOTAClick时生效
unitArr Array No - [] 自定义单位设置
applianceCode String No - '' 自定义设备id，查询指定设备，兼容Android组合容器中子设备无法直接获取子设备信息

# Slots

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

插件更多页UI标注参考

# Events

事件名称 说明 回调参数
customerUnitClick 点击切换单位(℉/℃) index
customerOTAClick 针对“固件升级”支持可选绑定事件，绑定该事件后可进行自定义操作。未绑定该事件则默认跳转固件升级页 -
chooseUnit 切换单位事件回调 { unitId, chooseIndex }；unitId：对应unitArr中的unitId；chooseIndex：用户选中的单位下标

# BroadcastChannel

通过广播频道，抛出用户点击事件，供事业部执行自定义行为，如：埋点等；主要判断/跳转逻辑依然由组件内完成

const sMoreBroadcastChannel = new BroadcastChannel('sMoreBroadcastChannel')
sMoreBroadcastChannel.onmessage = event => {
  this.$bridge.log('sMoreBroadcastChannel', event.data);
// event.data结构
// {
//   messageEvent: 'sMoreBroadcastChannel',
//   messageContent: {
//     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地址-无后续动作

← 插件多语言(s-language) →