dolphin-weex-bc 0.0.36 → 0.0.38

package/packages/dof-bc-consumables/index.vue

@@ -1,119 +1,102 @@
 <template>
   <div class="material-wrapper">
-    <!-- <text class="title">{{ title }}</text> -->
-    <!-- <div class="outsideWrapper"></div> -->
-    <!-- <slider class="slider" :show-indicators="true" v-if="layoutMode == 'row'"> -->
-    <div
-      class="middleBox"
-      ref="recommend"
-      v-if="layoutMode == 'row'"
-      :style="{ height: dealDeviceMaterialList[0].consumables.length > 4 ? '272px' : '232px' }"
-    >
-      <scroller class="slider" scroll-direction="horizontal" @scroll="scrollEvent1">
-        <!-- <div class="material-list" v-for="(item, index) in dealDeviceMaterialList[0]" :key="index"> -->
-        <div class="recommendBox" ref="recommendBox">
-          <template v-if="dealDeviceMaterialList[0].consumables && dealDeviceMaterialList[0].consumables.length > 0">
-            <!-- <div class="material-title">
-                <image
-                  class="title-icon"
-                  :src="dealDeviceMaterialList[0].deviceInfo.deviceIcon ? dealDeviceMaterialList[0].deviceInfo.deviceIcon : ''"
-                  style="width:88px; height:88px;"
-                ></image>
-                <div class="title-content">
-                  <text class="title-txt1">{{ dealDeviceMaterialList[0].deviceInfo.deviceName }} | {{ dealDeviceMaterialList[0].deviceInfo.roomName }}</text>
-                  <text class="title-txt2" v-if="dealDeviceMaterialList[0].deviceInfo.isOnline == 1">在线</text>
-                  <text class="title-txt3" style="color:#F56428;" v-else>设备离线</text>
-                </div>
-              </div> -->
-            <div class="consumables-list" v-for="(item, index) in getSliderList" :key="index">
-              <div class="consumables-list1" v-for="(it, i) in item" :key="i">
-                <div
-                  class="material-item2"
-                  @click.stop="goDetail(it, dealDeviceMaterialList[0])"
-                  v-if="statusSlectedIndex == 0 ? true : it.remainingStatus == statusSlectedIndex"
-                >
-                  <template>
-                    <div class="item-left2">
-                      <template v-if="dealDeviceMaterialList[0].deviceInfo.isOnline == 1 && it.remainingValueType != 5">
-                        <template v-if="it.remainingValue === '0' || it.remainingValue > 0">
-                          <midea-wave-progress-view
-                            class="drag-slider1"
-                            :accessible="true"
-                            :ariaLabel="水波进度条"
-                            :accessibilityHint="水波进度条"
-                            :data="it.waveData"
-                            v-if="showMode == 'wave'"
-                          >
-                          </midea-wave-progress-view>
-                          <!-- <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1, ...{ progress: 1 - Number((it.remainingValue/it.total).toFixed(2)), text: ((Number((it.remainingValue/it.total).toFixed(2)))*100).toFixed(0) + '%' , completedColor: circleColorList[it.remainingStatus], textColor: circleColorList[it.remainingStatus] }}" v-else> </midea-circle-progress-view> -->
-
-                          <!-- <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1, ...{ progress: 1 - Number((it.remainingValue/it.total).toFixed(2)), text: ((Number((it.remainingValue/it.total).toFixed(2)))*100).toFixed(0) + '%' , backCircleColor: circleColorList[it.remainingStatus], textColor: circleColorList[it.remainingStatus], lineWidth: isIos?2.5:5 }}" v-else> </midea-circle-progress-view> -->
-                          <div class="progresscycle-wrapper1" v-else>
-                            <midea-progresscycle-view
-                              class="progresscycle1"
-                              :data="it.chartData"
-                              @progresscycleTap="goDetail(it, dealDeviceMaterialList[0])"
+    <template v-if="layoutMode == 'row'">
+      <div
+        :class="['middleBox', !showAddCartButton && insufficientGoodinfoList.length == 0 && 'middleBox-not-button', dealDeviceMaterialList[0].consumables.length <= 4 && 'middleBox-lfour']"
+        ref="recommend"
+      >
+        <scroller class="slider" scroll-direction="horizontal" @scroll="scrollEvent1">
+          <div class="recommendBox" ref="recommendBox">
+            <template v-if="dealDeviceMaterialList[0].consumables && dealDeviceMaterialList[0].consumables.length > 0">
+              <div
+                :class="[
+                  'consumables-list',
+                  dealDeviceMaterialList[0].consumables.length == 3 && 'consumables-list-ls-3',
+                  dealDeviceMaterialList[0].consumables.length == 2 && 'consumables-list-ls-2',
+                  dealDeviceMaterialList[0].consumables.length == 1 && 'consumables-list-ls-1'
+                ]"
+                v-for="(item, index) in getSliderList"
+                :key="index"
+              >
+                <div class="consumables-list1" v-for="(it, i) in item" :key="i">
+                  <div
+                    class="material-item2"
+                    @click.stop="goDetail(it, dealDeviceMaterialList[0])"
+                    v-if="statusSlectedIndex == 0 ? true : it.remainingStatus == statusSlectedIndex"
+                  >
+                    <template>
+                      <div class="item-left2">
+                        <template
+                          v-if="dealDeviceMaterialList[0].deviceInfo.isOnline == 1 && it.remainingValueType != 5"
+                        >
+                          <template v-if="it.remainingValue === '0' || it.remainingValue > 0">
+                            <template v-if="showMode == 'wave'">
+                              <image
+                                class="bg-circle2"
+                                resize="stretch"
+                                :src="showBgco(it)"
+                              ></image>
+                              <midea-wave-progress-view
+                              class="drag-slider1"
+                              :accessible="true"
+                              :ariaLabel="水波进度条"
+                              :accessibilityHint="水波进度条"
+                              :data="setWavePercentDetail(it)"
                             >
-                            </midea-progresscycle-view>
-                            <!-- <midea-progresscycle-view class="progresscycle" :data="chartData">
-                    </midea-progresscycle-view> -->
+                            </midea-wave-progress-view>
+                            </template>
 
-                            <!-- <div class="cricle-num-wrapper" v-if="isShow">
-                      <text :style="{color:  circleColorList[it.remainingStatus]}" class="cricle-num-txt">{{((it.remainingValue/it.total)*100).toFixed(0) }}%</text>
-                    </div> -->
-                          </div>
+                            <div class="progresscycle-wrapper1" v-else>
+                              <midea-progresscycle-view
+                                class="progresscycle1"
+                                :data="it.chartData"
+                                @progresscycleTap="goDetail(it, dealDeviceMaterialList[0])"
+                              >
+                              </midea-progresscycle-view>
+                            </div>
+                          </template>
+                          <template v-else>
+                            <div class="circle-noData1">
+                              <text class="noData-txt">- -</text>
+                            </div>
+                          </template>
                         </template>
                         <template v-else>
                           <div class="circle-noData1">
                             <text class="noData-txt">- -</text>
                           </div>
                         </template>
-                      </template>
-                      <template v-else>
-                        <div class="circle-noData1">
-                          <text class="noData-txt">- -</text>
-                        </div>
-                      </template>
-                    </div>
-                    <div class="item-right2">
-                      <text class="item-txt11">{{ it.name }}</text>
-
-                      <!-- <div class="item-right-txt">
-
-                    </div> -->
-                    </div>
-                  </template>
+                      </div>
+                      <div class="item-right2">
+                        <text class="item-txt11">{{ it.name }}</text>
+                      </div>
+                    </template>
+                  </div>
                 </div>
               </div>
-
-              <!-- <div class="consumables-list">
-              <div class="material-item2">
-                <text>6666</text>
-              </div>
-              <div class="material-item2">
-                <text>6666</text>
-              </div>
-              <div class="material-item2">
-                <text>6666</text>
-              </div>
-            </div> -->
-            </div>
-            <indicator class="indicator"></indicator>
-          </template>
-        </div>
-        <!-- </div> -->
-      </scroller>
-      <div class="recommendSlider" v-if="dealDeviceMaterialList[0].consumables.length > 4">
-        <div class="recommendSliderOut">
-          <div
-            class="recommendSliderInner"
-            :style="{ width: recommendSliderInnerWidth + 'px', left: recommendSliderInnerLeft + 'px' }"
-          ></div>
+              <indicator class="indicator"></indicator>
+            </template>
+          </div>
+        </scroller>
+        <div class="recommendSlider" v-if="dealDeviceMaterialList[0].consumables.length > 4">
+          <div class="recommendSliderOut">
+            <div
+              class="recommendSliderInner"
+              :style="{ width: recommendSliderInnerWidth + 'px', left: recommendSliderInnerLeft + 'px' }"
+            ></div>
+          </div>
         </div>
       </div>
-    </div>
+      <!-- 显示一键加购 -->
+      <template v-if="showAddCartButton && insufficientGoodinfoList.length > 0">
+        <div class="car-card-box">
+          <div class="car-card" @click="showGoodsList()">
+            <text class="car-card-text">立即购买</text>
+          </div>
+        </div>
+      </template>
+    </template>
 
-    <!-- </slider> -->
     <scroller
       class="scroll-wrapper"
       :style="{ height: columnBoxHeight + 'px' }"
@@ -124,48 +107,35 @@
       @loadmore="loadmore"
       v-else
     >
-      <!-- <text>{{ getSliderList }}</text> -->
       <template>
         <div class="material-wrapper">
-          <!-- <div class="material-list" v-for="(item, index) in deviceMaterialList" -->
-          <!-- <template v-if="deviceMaterialList.length>0"> -->
           <div class="material-list" v-for="(item, index) in dealDeviceMaterialList" :key="index">
             <template v-if="item.consumables && item.consumables.length > 0">
-              <!-- <div class="material-title">
-                <image
-                  class="title-icon"
-                  :src="item.deviceInfo.deviceIcon ? item.deviceInfo.deviceIcon : ''"
-                  style="width:88px; height:88px;"
-                ></image>
-                <div class="title-content">
-                  <text class="title-txt1">{{ item.deviceInfo.deviceName }} | {{ item.deviceInfo.roomName }}</text>
-                  <text class="title-txt2" v-if="item.deviceInfo.isOnline == 1">在线</text>
-                  <text class="title-txt3" style="color:#F56428;" v-else>设备离线</text>
-                </div>
-              </div> -->
               <div v-for="(it, i) in item.consumables" :key="i">
                 <div
                   class="material-item"
                   @click="goDetail(it, item)"
                   v-if="statusSlectedIndex == 0 ? true : it.remainingStatus == statusSlectedIndex"
                 >
-                  <!-- <text>{{ it.chartData }}</text> -->
                   <midea-progresscycle-view class="progresscycle" :data="it.chartData"> </midea-progresscycle-view>
                   <div class="item-left">
                     <template v-if="item.deviceInfo.isOnline == 1 && it.remainingValueType != 5">
                       <template v-if="it.remainingValue === '0' || it.remainingValue > 0">
-                        <midea-wave-progress-view
-                          class="drag-slider"
-                          :accessible="true"
-                          :ariaLabel="水波进度条"
-                          :accessibilityHint="水波进度条"
-                          :data="it.waveData"
-                          v-if="showMode == 'wave'"
-                        >
-                        </midea-wave-progress-view>
-                        <!-- <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1, ...{ progress: 1 - Number((it.remainingValue/it.total).toFixed(2)), text: ((Number((it.remainingValue/it.total).toFixed(2)))*100).toFixed(0) + '%' , completedColor: circleColorList[it.remainingStatus], textColor: circleColorList[it.remainingStatus] }}" v-else> </midea-circle-progress-view> -->
-
-                        <!-- <midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1, ...{ progress: 1 - Number((it.remainingValue/it.total).toFixed(2)), text: ((Number((it.remainingValue/it.total).toFixed(2)))*100).toFixed(0) + '%' , backCircleColor: circleColorList[it.remainingStatus], textColor: circleColorList[it.remainingStatus], lineWidth: isIos?2.5:5 }}" v-else> </midea-circle-progress-view> -->
+                        <template v-if="showMode == 'wave'">
+                          <image
+                            class="bg-circle2"
+                            resize="stretch"
+                            :src="showBgco(it)"
+                          ></image>
+                          <midea-wave-progress-view
+                            class="drag-slider"
+                            :accessible="true"
+                            :ariaLabel="水波进度条"
+                            :accessibilityHint="水波进度条"
+                            :data="setWavePercentDetail(it)"
+                          >
+                          </midea-wave-progress-view>
+                        </template>
                         <div class="progresscycle-wrapper" v-else>
                           <midea-progresscycle-view
                             class="progresscycle1"
@@ -191,46 +161,30 @@
                     <div class="item-right-txt">
                       <text class="item-txt1">{{ it.name }}</text>
                       <template v-if="item.deviceInfo.isOnline == 1 && it.remainingValueType != 5">
-                        <template v-if="it.classification != 3">
-                          <div class="item-txt2-row" v-if="it.remainingValue === '0' || it.remainingValue > 0">
-                            <text class="item-txt2" v-if="it.remainingStatus == 2" :style="{ color: '#8E969B' }"
-                              >余量充足，请放心使用</text
-                            >
-                            <text
-                              class="item-txt2"
-                              v-else-if="it.remainingStatus == 1 && it.remainingValueType != 4"
-                              :style="{ color: '#FFAA10' }"
-                              >即将用尽，建议及时补充或更换</text
-                            >
-                            <template v-else>
-                              <!-- <image class="warning-icon" src="./assets/img/material/icon_warning@3x.png" style="width:40px; height:40px; margin-right:8px;"></image> -->
-                              <text class="item-txt3">已用尽，请立即补充或更换</text>
-                            </template>
-                          </div>
-                          <div v-else>
-                            <text class="item-txt2" :style="{ color: '#8E969B' }">未获取到设备耗材数据</text>
-                          </div>
-                        </template>
-                        <!-- 10.1 清洁类型设备 -->
-                        <template v-else>
-                          <div class="item-txt2-row" v-if="it.remainingValue === '0' || it.remainingValue > 0">
-                            <text class="item-txt2" v-if="it.remainingStatus == 2" :style="{ color: '#8E969B' }"
-                              >洁净度良好，请放心使用</text
-                            >
-                            <text
-                              class="item-txt2"
-                              v-else-if="it.remainingStatus == 1 && it.remainingValueType != 4"
-                              :style="{ color: '#FFAA10' }"
-                              >有少量杂质，建议及时清洁或更换</text
-                            >
-                            <template v-else>
-                              <text class="item-txt3">存在较多杂质，请立即清洁或更换</text>
-                            </template>
-                          </div>
-                          <div v-else>
-                            <text class="item-txt2" :style="{ color: '#8E969B' }">未获取到设备耗材数据</text>
-                          </div>
-                        </template>
+                        <div class="item-txt2-row" v-if="it.remainingValue == 0 || it.remainingValue > 0">
+                        <text
+                          :class="['item-txt4', isDiablo && 'item-txt4-isDiablo']"
+                          v-if="it.remainingStatus == 2"
+                          >{{ it.classification == 3 ? '洁净度良好，请放心使用' : '余量充足，请放心使用' }}</text
+                        >
+                        <text
+                          :class="['item-txt5', isDiablo && 'item-txt5-isDiablo']"
+                          v-else-if="it.remainingStatus == 1 && it.remainingValueType != 4"
+                          >{{ it.classification == 3 ? '洁净度下降，请及时清洗' : '即将用尽，请及时补充或更换' }}</text
+                        >
+                        <text
+                          v-else
+                          :class="['item-txt3', isDiablo && 'item-txt3-isDiablo']"
+                          >{{
+                            it.classification == 3 ? '洁净度严重不足，请立即清洗' : '已用尽，请立即补充或更换'
+                          }}</text
+                        >
+                      </div>
+                      <div v-else>
+                        <text :class="['item-txt4', isDiablo && 'item-txt4-isDiablo']"
+                          >未获取到设备耗材数据</text
+                        >
+                      </div>
                       </template>
                       <template v-else>
                         <div>
@@ -241,10 +195,13 @@
                     <div class="item-right-arrow">
                       <div
                         class="btn-purhase"
-                        v-if="it.goodsInfo && it.goodsInfo.skulink"
-                        @click="buyGoods(it.goodsInfo.skulink, it, item.deviceInfo, it.goodsInfo)"
+                        v-if="it.btnType > 0"
+                        @click="buyGoods(it, item.deviceInfo, false)"
                       >
-                        <text class="txt-purhase">购买</text>
+                        <text v-if="it.btnType == 1" class="txt-purhase">购买</text>
+                        <text v-if="it.btnType == 2" class="txt-purhase">保养</text>
+                        <text v-if="it.btnType == 3" class="txt-purhase">更换</text>
+                        <text v-if="it.btnType == 4" class="txt-purhase">清洗</text>
                       </div>
                       <image class="arrow-icon" resize="stretch" :src="arrowIcon"></image>
                     </div>
@@ -254,11 +211,20 @@
               </div>
             </template>
           </div>
-          <!-- </template> -->
-          <!-- </div> -->
         </div>
       </template>
     </scroller>
+
+    <dof-material-add-card
+      :showAddCartPopup="showAddCartPopup"
+      :insufficientGoodinfoList="insufficientGoodinfoList"
+      :repeatProductCodesCount="repeatProductCodesCount"
+      :insufficientProductCodeJson="insufficientProductCodeJson"
+      :isDiablo="isDiablo"
+      channel="materialComponent"
+      @cancleShowAddCartPopup="cancleShowAddCartPopup"
+    >
+    </dof-material-add-card>
   </div>
 </template>
 
@@ -277,17 +243,13 @@ const stream = weex.requireModule('stream')
 const dom = weex.requireModule('dom')
 import { Bridge } from 'dolphin-native-bridge'
 import Icon from './settings/icon.base64'
-
+import dofMaterialAddCard from '../dof-material-add-card/index'
+import MaterialEvent from '../material-event/index'
 import { DofOverlay, DofPopup, DofButton, DofIpxBar, DofMinibar, DofIcon, Utils, DofCell } from 'dolphin-weex-ui'
 
 export default {
   components: {
-    // DofMinibar,
-    // DofIcon,
-    // DofPopup,
-    // DofButton,
-    // DofOverlay,
-    // DofCell
+    dofMaterialAddCard
   },
   // mixins: [base],
   props: {
@@ -306,85 +268,35 @@ export default {
     columnBoxHeight: {
       type: Number,
       default: 1200 // 列展示高度
+    },
+    isDiablo: {
+      type: Boolean,
+      default: false
+    },
+    showAddCartButton: {
+      type: Boolean,
+      default: false
+    },
+    needBackground: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-      title: '999',
-      isIos: weex.config.env.platform == 'iOS' ? true : false,
-      leftButton: './assets/img/material/menu_back_black@3x.png',
-      blackCellBg: {
-        'background-color': '#000000'
-      },
-      newArr: [1, 2, 3, 4],
-      chartJson: {
-        frontWaveColor: '#adcafb', //已完成后的颜色默认#FFFFFF
-        backWaveColor: '#cfdffa',
-        animate: true,
-        backgroundColor: '#F9F9F9', //背景色 默认为#000000
-        progress: 0.3, // 进度 [0 ... 1]
-        textFont: 18, //字体大小，默认为14
-        text: '', //文本 默认为空
-        textColor: '#267AFF' //文本颜色，默认#FFFFFF
-      },
-      deviceList: [],
-      deviceIdList: [],
+      showAddCartPopup: false,
+      insufficientGoodinfoList: [],
+      repeatProductCodesCount: {},
+      insufficientProductCodeJson: {},
+      applianceCodes: '',
       deviceMaterialList: [],
-      barOpacity: 0,
-      needAuthDeviceIdList: [],
-      circleColorList: ['#F56428', '#FFAA10', '#00A4F2'],
-      common: {
-        completedColor: '#f9f9f9', //已完成后的颜色默认#FFFFFF
-        backgroundColor: '#ffffff', //背景色 默认为#000000
-        backCircleColor: '#f9f9f9', //进度背景色，默认为#3d3d3f
-        lineWidth: 5, //线宽 默认为2
-        textFont: 12 //字体大小，默认为14
-      },
-      chartJson1: {
-        progress: 0, // 进度 0 -1
-        text: '', //文本 默认为空
-        textColor: '#00A4F2' //文本颜色，默认#FFFFFF
-      },
-      isBottomShow4: false,
-      isBottomShow2: false,
-      isBottomShow: false,
-      bgOpacity: 1,
-      isShow: true,
-      intervalHandler: null,
-      step: 5,
-      chartData: {
-        completedColor: '#00a4f2', //环形进度条未完成后的颜色默认#267AFF
-        incompletedColor: '#f9f9f9', //环形进度条未完成后的颜色，默认透明
-        thickness: 3, //环形进度条宽度，默认4
-        cornerRadius: 44, //环形的半径，默认是width/2
-        totalCounter: 100, //环形进度条的最大值，默认是360
-        progressCounter: 80, //设置进度值，默认是从0-360, 默认为0
-        autoProgress: false, //设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
-        clockwise: false, //环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
-        startingSlice: 360, //环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
-        pointShow: false, //环形进度中的进度球是否需要显示，默认不显示
-        pointRadius: 8, //默认是环形进度宽度的一半
-        pointColor: '#FFFFFF', //环形进度中的进度球颜色
-        duration: 1000
-      },
-      // applianceSetsList: [],
-      listPage: {
-        pageNo: 1,
-        pageSize: 30
-      },
-      hasNext: false,
-      allList: [],
-      isFilterShow: false,
-      statusList: ['全部状态', '不足', '充足'],
       statusSlectedIndex: 0, // 0'全部状态', 1'不足', 2'充足'
-      filterTopOffset: 400,
-      isError: false,
-      from: '',
-      homegroupId: '',
-      applianceCode: '',
       deviceInfo: {},
       notSmartList: [],
       arrowIcon: Icon.icon_arrow,
+      bgcoOne: Icon.bgco_one,
+      bgcoTwo: Icon.bgco_two,
+      bgcoThree: Icon.bgco_three,
       recommendList: [],
       recommendSliderWidth: 0,
       recommendSliderInnerWidth: 0,
@@ -394,36 +306,9 @@ export default {
   computed: {
     dealDeviceMaterialList: function() {
       return this.deviceMaterialList
-      /* if (this.statusSlectedIndex == 1) {
-        let list = []
-        list = this.deviceMaterialList.filter(item => {
-          let hasItem = item.consumables.find(it => {
-            return it.remainingStatus == 1
-          })
-          if (hasItem) {
-            return hasItem
-          }
-        })
-        return list
-      } else if (this.statusSlectedIndex == 2) {
-        let list = []
-        list = this.deviceMaterialList.filter(item => {
-          let hasItem = item.consumables.find(it => {
-            return it.remainingStatus == 2
-          })
-
-          if (hasItem) {
-            return hasItem
-          }
-        })
-        return list
-      } else {
-        return this.deviceMaterialList.slice(0, this.listPage.pageNo * this.listPage.pageSize)
-      } */
     },
     getSliderList: function() {
       console.log('this.deviceMaterialList0000===' + JSON.stringify(this.deviceMaterialList))
-
       let newArr = []
       if (this.deviceMaterialList.length > 0) {
         if (this.deviceMaterialList[0].consumables.length > 4) {
@@ -449,811 +334,497 @@ export default {
       newArr.forEach((item, index) => {
         console.log(`getSliderList${index}====${JSON.stringify(item)}`)
       })
-
       return newArr
-    }
+    },
   },
-  watch: {},
-  created() {
-    console.log('666666666666')
-    // nativeService.toast('7777777')
-    // this.$bridge.showToast('7777777')
-    // 页面埋点
-    /* let trackParam = {
-      event: 'user_page_view',
-      eventParams: {
-        page_name: '耗材列表',
-        page_id: 'consumables_list',
-        module: '耗材管理'
-      }
-    }
-    nativeService.trackEvent(trackParam)
-    this.from = nativeService.getParameters('from') || '' */
-
-    this.getDeviceInfo()
-    // this.getHomegroupList()
 
-    // return
-    /* if (this.from == 'pluginMenu') {
-      this.homegroupId = nativeService.getParameters('homegroupId') || ''
-      this.applianceCode = nativeService.getParameters('applianceCode') || ''
-      console.log('applianceCode000====' + this.applianceCode)
-
-      // 更多页跳转
-      this.getDeviceInfo()
+  created() {
+    console.log('docbcaaaaaaaaaaaaa')
+    if (this.deviceId) {
+      this.applianceCodes = this.deviceId
+      this.getMaterialDetail()
     } else {
-      this.getHomegroupList()
+      this.getDefalutDeviceInfo()
     }
-    this.getNotSmartList() */
-
-    // this.getUpkeepShopInfo()
-
-    // this.getUpkeepShopInfo()
-
-    // this.queryBatchMaterial()
-    // this.getProductModel()
+    // this.getDeviceInfo()
   },
   methods: {
-    // 0. 获取家庭列表V2
-    async getHomegroupList() {
-      const title = 'toast测试',
-        duration = 3000,
-        bgStyle = 'black'
-      this.$bridge
-        .showToast(title, duration)
-        .then(res => {
-          //   this.$toast(res)
-        })
-        .catch(err => {
-          //   this.$toast(err)
-        })
+    async getMaterialDetail() {
+      try {
+        const params = {
+          applianceCodes: [this.applianceCodes],
+          remainingStatusSet: ['0', '1', '2']
+        }
+        const options = {
+          needBackground: this.needBackground,
+          isDiablo: this.isDiablo
+        }
+        console.log('获取参数：'+ JSON.stringify(params))
+        this.deviceMaterialList = await MaterialEvent.getMaterialDetail(params, options)
+        console.log('获取到的耗材的数量2:'+this.deviceMaterialList.length)
+        this.handleChartData(this.deviceMaterialList)
+        this.queryInsufficientGoodsProductCodes(this.deviceMaterialList)
+        this.getInnerWidth()
+      } catch (error) {
+        console.log('打印的错误信息' + JSON.stringify(error))
+        // if (error.errorMessage && error.errorMessage != '网络错误') {
+        //   nativeService.toast(error.errorMessage)
+        // }
+      }
+    },
 
-      console.log('家庭2333333333' + JSON.stringify(this.$bridge.sendCentralCloudRequest))
+    handleChartData(val) {
+      let tempVal = JSON.parse(JSON.stringify(val))
+      tempVal.forEach(item => {
+        item.consumables.forEach(it => {
+          it.chartData = MaterialEvent.setChartData(it, {
+            isDiablo: this.isDiablo,
+            needBackground: this.needBackground,
+            isComponent: true
+          })
+        })
+      })
+      this.deviceMaterialList = tempVal
+    },
 
+    getDefalutDeviceInfo() {
       this.$bridge
-        .sendCentralCloudRequest(
-          '/v2/homegroup/list/get',
-          {
-            method: 'POST', //POST/GET, 默认POST
-            headers: {}, //请求header
-            data: {
-              stamp: new Date().getTime(),
-              reqId: utils.generateUUID()
-            } //请求参数
-          }
-          // { isShowLoading: false }
-        )
-        .then(res => {
-          console.log('获取家庭列表======:' + JSON.stringify(res))
-
-          if (res.code == 0) {
-            let list = res.data.homeList.map(item => {
-              return {
-                homegroupId: item.homegroupId
-              }
-            })
-            this.homegroupList = list
-            console.log('家庭列表result====' + JSON.stringify(this.homegroupList))
-
-            this.getDeviceList()
-          }
+        .getDeviceInfo({ applianceCode: this.deviceId })
+        .then(resp1 => {
+          console.log('getDeviceInfo==res==' + JSON.stringify(resp1))
+          this.applianceCodes = resp1.result.deviceId
+          this.getMaterialDetail()
         })
         .catch(err => {
-          // this.$toast(err)
-          console.log('wifi版本号获取失败' + JSON.stringify(err))
+          console.log('err====' + JSON.stringify(err))
         })
     },
-    // 1.获取用户所有设备列表
-    getDeviceList() {
-      // nativeService.showLoading()
-      const params = {
-        familyId: '', //家庭id,
-        roomId: '' //房间id
-      }
-      this.$bridge
-        .getDeviceList()
-        .then(res => {
-          // this.toastInput(JSON.stringify(res))
-          console.log('getDeviceInfo: ' + JSON.stringify(res))
-          // nativeService.alert('获取设备列表成功：' + JSON.stringify(res))
-          // return
-          let list = res.list instanceof Array ? res.list : JSON.parse(JSON.stringify(res))
-          this.deviceList = list
-          /* this.deviceList.forEach((item, index) => {
-          console.log('device' + index + '====' + JSON.stringify(item));
-
-        }) */
-
-          this.deviceIdList = list.map(item => item.deviceId)
-          console.log('设备id列表deviceIdList: ' + JSON.stringify(this.deviceIdList))
-          /* this.applianceSetsList = list.map(item => {
-          // console.log('item===' + JSON.stringify(item));
-
-          return{
-          a0: item.deviceSubType,
-          applianceCode: item.deviceId,
-          sn8: item.deviceSn8,
-          spid: item.smartProductId,
-          applianceType: item.deviceType,
-        }})
-        console.log('设备耗材列表applianceSetsList: ' + JSON.stringify(this.applianceSetsList)) */
-          console.log('获取设备列表成功333：' + JSON.stringify(this.deviceList))
-
-          // this.deviceList.forEach(item => {
-          // console.log('item=========' + JSON.stringify(item.deviceSn));
-
-          // })
-
-          // nativeService.alert(JSON.stringify(this.deviceIdList))
+   
+    // 跳转耗材详情
+    goDetail(item, device) {
+      console.log('跳转前itemmmm===' + JSON.stringify(item))
+      console.log('跳转前device===' + JSON.stringify(device.deviceInfo))
+      // item.replacementMethodInfo = {}
+      // item.purchaseInfo = {}
 
-          // console.log('拼接后数组000：', JSON.stringify(this.deviceList));
-          // nativeService.alert(JSON.stringify(this.deviceMaterialList))
+      utils.setItem('previous_materialDetail', item)
+      utils.setItem('previous_deviceInfo', device.deviceInfo)
+      let consumables = [item]
+      utils.setItem('previous_consumables', consumables)
 
-          this.queryBatchMaterial()
-          // nativeService.hideLoading();
-        })
-        .catch(error => {
-          // nativeService.hideLoading()
-          // nativeService.toast(err.msg)
-          // this.$alert('获取设备列表失败：' + JSON.stringify(error))
-        })
+      let url = 'customer-service/materialDetail.js?from=externalPage'
+      let params = {
+        type: 'jumpWeex',
+        param: {
+          url: url,
+          viewTag: 'maintenance',
+        }
+      }
+      console.log(JSON.stringify(params))
+      routerModule.goToMeijuPage(params)
     },
-    // 2.1批量获取设备耗材余量
-    queryBatchMaterial(isFirstLoad = false) {
-      console.log('批量获取设备耗材余量222222222' + JSON.stringify(this.homegroupList))
-      // console.log('批量设备3333===' + JSON.stringify(utils.queryBatchMaterialByHomeGroupList()))
-
-      // return new Promise((reslove, reject) => {
-      // nativeService.queryBatchMaterial({
-      utils
-        .queryBatchMaterialByHomeGroupList(
-          {
-            homeGroupInfoList: this.homegroupList,
-            /* applianceSets: [
-            {applianceCode: '177021372139629',
-            sn8: '750004D2',
-            a0: '0',
-            spid: '10007459',
-            applianceType: "0xB8"}
-            ], */
-            remainingStatusSet: [0, 1, 2] // 余量状态, 0-已耗尽, 1-余量不足, 2-余量充足
-          },
-          {
-            isShowLoading: false
-          }
-        )
-        .then(async res => {
-          console.log('请求成功88888888888')
-
-          console.log('耗材余量：' + JSON.stringify(res))
-          if (res.code == 0) {
-            let allData = res.data
-            let result = []
-            allData.forEach(item1 => {
-              console.log('item444=====' + JSON.stringify(item1.applianceConsumablesList))
-
-              if (item1.applianceConsumablesList.length > 0) {
-                result = result.concat(item1.applianceConsumablesList)
-              }
-            })
-            console.log('合并后数组3333===' + JSON.stringify(result))
-
-            if (result && result.length == 0) return
-            // 遍历余量数组，相同设备id设备信息添加入该数组
-            result.forEach(item => {
-              let index = this.deviceList.findIndex(it => item.applianceCode == it.deviceId)
-              console.log('device' + index + '====' + JSON.stringify(this.deviceList[index]))
-
-              if (index != -1) {
-                item.deviceId = this.deviceList[index].deviceId
-                // item.isOnline = this.deviceList[index].isOnline
-
-                // console.log('item=======isOnline' + JSON.stringify(item));
-                item.deviceInfo = this.deviceList[index]
-                // console.log('item=======deviceInfo' + JSON.stringify(item.deviceInfo));
-              }
-            })
-            console.log('耗材余量result 000：' + JSON.stringify(result))
-            this.needAuthDeviceIdList = result.map(item => item.deviceId)
-            // 批量
-            let authList = await this.getDeviceAuth()
-            console.log('authList1111===' + JSON.stringify(authList))
-
-            let newList = result.filter(x =>
-              authList.some(
-                y =>
-                  y.applianceCode == x.applianceCode &&
-                  (y.status == 0 || y.status == 3) &&
-                  x.consumables &&
-                  x.consumables.length > 0
-              )
-            )
-            console.log('newList=======' + JSON.stringify(newList))
-
-            // newArr2 = arr2.filter(x => !arr1.some(y => y.id === x.id));
-
-            // this.deviceMaterialList = result
-
-            if (newList.length > 30) {
-              this.hasNext = true
-            }
-
-            this.deviceMaterialList = newList
-            /* this.deviceMaterialEnough = newList.forEach(item => {
-              // item.consumables[].remainingStatus == 2
-              item.consumables.forEach
-              return
-            })
-            this.deviceMaterialLack = newList */
-
-            let tmpcodeList = []
-            let circleColorList = ['#F56428', '#FFAA10', '#00A4F2']
-            this.deviceMaterialList.forEach((item, index) => {
-              item.consumables.forEach((it, i) => {
-                if (it.productCode && it.productCode != 0) tmpcodeList.push(it.productCode)
-                this.$set(this.deviceMaterialList[index].consumables[i], 'chartData', {
-                  ...this.chartData,
-                  ...{
-                    progressCounter: Number((it.remainingValue / it.total) * 100),
-                    completedColor: circleColorList[it.remainingStatus],
-                    textColor: circleColorList[it.remainingStatus]
-                  },
-                  text: Math.floor((it.remainingValue / it.total > 1 ? 1 : it.remainingValue / it.total) * 100) + '%',
-                  textSize: 12
-                  // cornerRadius: this.isIos ? 44 : 88,
-                  // thickness: this.isIos ? 3 : 6
-                })
-                /* it.chartData = {
-                  ...this.chartData,
-                  ...{
-                    progressCounter: Number((it.remainingValue / it.total) * 100),
-                    completedColor: circleColorList[it.remainingStatus],
-                    textColor: circleColorList[it.remainingStatus]
-                  },
-                  text: Math.floor((it.remainingValue / it.total) * 100) + '%',
-                  textSize: 12
-                } */
-              })
-            })
-            let codeList = [...new Set(tmpcodeList)]
-            console.log('codeList9999===' + JSON.stringify(codeList))
-
-            // return
-            if (codeList && codeList.length > 20) {
-              let groupNum = Math.ceil(codeList.length / 20)
-              console.log('groupNum====' + groupNum)
 
-              for (let index = 0; index < groupNum; index++) {
-                // const element = groupNum[index];
-
-                this.getUpkeepShopInfo(codeList.slice(index * 20, (index + 1) * 20))
-              }
-            } else {
-              this.getUpkeepShopInfo(codeList)
-            }
-            this.getInnerWidth()
+    // 购买商品跳转
+    buyGoods(it, deviceInfo) {
+      // 1购买
+      if (it.btnType == 1) {
+        let activeUrl = it.purchaseInfo ? it.purchaseInfo.linkUrl : ''
+        let searchLinkUrl = it.purchaseInfo ? it.purchaseInfo.searchLinkUrl : ''
+        if (searchLinkUrl) {
+          MaterialEvent.handleSearchLinkUrlJump(searchLinkUrl)
+        } else if (it.purchaseInfo && it.purchaseInfo.skuId) {
+          this.goToGoodsDetail(it.purchaseInfo)
+        } else if (it.goodsInfo && (it.goodsInfo.skulink || it.goodsInfo.skuId)) {
+          this.goToGoodsDetail(it.goodsInfo)
+        } else {
+          if (activeUrl) {
+            this.goodsjumpWebViewNew(activeUrl)
           }
-        })
-        .catch(err => {
-          console.log('请求余量失败：err' + JSON.stringify(err))
-          this.$bridge.showToast(err.msg)
-          // nativeService.toast(err.msg)
-          this.isError = true
-        })
-      // })
+        }
+      } else if (it.btnType == 2) {
+        this.jumpNewService(0, deviceInfo)
+      } else if (it.btnType == 3) {
+        this.jumpNewService(1, deviceInfo)
+      } else if (it.btnType == 4) {
+        this.goCleanService(it, deviceInfo)
+      }
     },
-    // 2.2 获取单独设备耗材余量信息
-    async queryBatchMaterialSingle(isFirstLoad = false) {
-      console.log('批量获取设备耗材余量222222222' + JSON.stringify(this.homegroupList))
 
+    goodsjumpWebViewNew(url) {
+      url = encodeURI(url)
       let params = {
-        applianceCodes: [this.deviceInfo.deviceId],
-        homegroupId: this.deviceInfo.homeId,
-        remainingStatusSet: [0, 1, 2] // 余量状态, 0-已耗尽, 1-余量不足, 2-余量充足
+        type: 'jumpWebViewNew',
+        param: {
+          url: url,
+          needNavi: '1',
+          isHideNavBar: '0'
+        }
       }
-      console.log('单个耗材获取2.2===' + JSON.stringify(params))
-
-      // return new Promise((reslove, reject) => {
-      // nativeService.queryBatchMaterial({
-      utils
-        .queryBatchMaterialByHomeId(params, {
-          isShowLoading: false
-        })
-        .then(async res => {
-          console.log('请求成功99999999999999999999999999')
-
-          console.log('耗材余量222：' + JSON.stringify(res))
-          if (res.code == 0) {
-            let allData = res.data
-            let result = allData[0]
-            console.log('耗材余量result3333====' + JSON.stringify(result))
-            // await this.getDeviceInfo()
-            result.deviceInfo = this.deviceInfo
-            console.log('耗材余量deviceInfo4444====' + JSON.stringify(this.deviceInfo))
-            console.log('耗材余量result5555====' + JSON.stringify(result))
-
-            result.consumables.forEach((item, index) => {
-              console.log('consumables===item==' + JSON.stringify(item))
-            })
-
-            /* allData.forEach(item1 => {
-              console.log('item444=====' + JSON.stringify(item1.applianceConsumablesList));
-
-              if( item1.applianceConsumablesList.length > 0 ) {
-                result = result.concat(item1.applianceConsumablesList)
-
-              }
-            })
-            console.log('合并后数组3333===' + JSON.stringify(result)); */
-
-            // return
-            /*             if( result && result.length == 0 ) return
-            // 遍历余量数组，相同设备id设备信息添加入该数组
-            result.forEach(item => {
-
-              let index = this.deviceList.findIndex(it => item.applianceCode == it.deviceId )
-              console.log('device' + index + '====' + JSON.stringify(this.deviceList[index]));
-
-              if( index!=-1 ){
-                item.deviceId = this.deviceList[index].deviceId
-                // item.isOnline = this.deviceList[index].isOnline
-
-                // console.log('item=======isOnline' + JSON.stringify(item));
-                item.deviceInfo = this.deviceList[index]
-                // console.log('item=======deviceInfo' + JSON.stringify(item.deviceInfo));
-
-              }
-
-            })
-            console.log('耗材余量result 000：' + JSON.stringify(result))
-            this.needAuthDeviceIdList = result.map(item => item.deviceId)
-            // 批量
-            let authList = await this.getDeviceAuth()
-            console.log('authList1111===' + JSON.stringify(authList));
-
-            let newList = result.filter(x => authList.some(y => (y.applianceCode == x.applianceCode && (y.status == 0 || y.status == 3) && (x.consumables && x.consumables.length>0) )))
-            console.log('newList=======' + JSON.stringify(newList)); */
-
-            // newArr2 = arr2.filter(x => !arr1.some(y => y.id === x.id));
-
-            // this.deviceMaterialList = result
-
-            /* if( newList.length > 30 ) {
-              this.hasNext = true
-            } */
-
-            this.deviceMaterialList = [result]
-
-            /* this.deviceMaterialEnough = newList.forEach(item => {
-              // item.consumables[].remainingStatus == 2
-              item.consumables.forEach
-              return
-            })
-            this.deviceMaterialLack = newList */
-
-            let tmpcodeList = []
-            let circleColorList = ['#F56428', '#FFAA10', '#00A4F2']
-            this.deviceMaterialList.forEach((item, index) => {
-              item.consumables.forEach((it, i) => {
-                if (it.productCode && it.productCode != 0) tmpcodeList.push(it.productCode)
-                this.$set(this.deviceMaterialList[index].consumables[i], 'chartData', {
-                  ...this.chartData,
-                  ...{
-                    progressCounter: Number(
-                      (it.remainingValue / it.total > 1 ? 1 : it.remainingValue / it.total) * 100
-                    ),
-                    completedColor:
-                      it.remainingValueType == 4 && it.remainingStatus == 1
-                        ? circleColorList[0]
-                        : circleColorList[it.remainingStatus],
-                    textColor:
-                      it.remainingValueType == 4 && it.remainingStatus == 1
-                        ? circleColorList[0]
-                        : circleColorList[it.remainingStatus]
-                  },
-                  text: Math.floor((it.remainingValue / it.total > 1 ? 1 : it.remainingValue / it.total) * 100) + '%',
-                  textSize: 12,
-                  animate: true
-                  // cornerRadius: this.isIos ? 44 : 66,
-                  // thickness: this.isIos ? 3 : 6
-                  // duration: 1000
-                })
-                this.$set(this.deviceMaterialList[index].consumables[i], 'waveData', this.setWavePercent(it))
-                /* it.chartData = {
-                  ...this.chartData,
-                  ...{
-                    progressCounter: Number((it.remainingValue / it.total) * 100),
-                    completedColor: circleColorList[it.remainingStatus],
-                    textColor: circleColorList[it.remainingStatus]
-                  },
-                  text: Math.floor((it.remainingValue / it.total) * 100) + '%',
-                  textSize: 12
-                } */
-                console.log('consumables66666666==' + JSON.stringify(it))
-                console.log('consumables-remainingStatus==' + JSON.stringify(it.remainingStatus))
-              })
-            })
-            let codeList = [...new Set(tmpcodeList)]
-            console.log('codeList9999===' + JSON.stringify(codeList))
-
-            // return
-            if (codeList && codeList.length > 20) {
-              let groupNum = Math.ceil(codeList.length / 20)
-              console.log('groupNum====' + groupNum)
-
-              for (let index = 0; index < groupNum; index++) {
-                // const element = groupNum[index];
-
-                this.getUpkeepShopInfo(codeList.slice(index * 20, (index + 1) * 20))
-              }
-            } else {
-              this.getUpkeepShopInfo(codeList)
-            }
+      routerModule.goToMeijuPage(params)
+    },
 
-            this.getInnerWidth()
+     //跳商品详情页
+    goToGoodsDetail(goodsInfo) {
+      if (goodsInfo.skuId) {
+        this.$bridge.goToPage({
+          type: 'jumpElecBusinessWeexNew',
+          param: {
+            url: '/dist/v2/pages/product/product_details.js?skuId=' + goodsInfo.skuId + '&entrance=consumables',
+            needNavi: '1'
           }
         })
-        .catch(err => {
-          console.log('请求余量失败：err' + JSON.stringify(err))
-          // nativeService.toast(err.msg)
-          this.$bridge.showToast(err.msg)
-          this.isError = true
+      } else {
+        this.$bridge.goToPage({
+          type: 'jumpElecBusiness',
+          param: {
+            url: goodsInfo.skulink,
+            needNavi: '1'
+          }
         })
-      // })
+      }
     },
-    // 3.获取指定设备确权状态
-    getDeviceAuth(isFirstLoad = false) {
-      console.log('确权id列表===' + JSON.stringify(this.needAuthDeviceIdList))
-      console.log('确权222' + JSON.stringify(Utils.timeFormat(+new Date(), 'YYYYMMDDhhmmss')))
 
-      return new Promise((reslove, reject) => {
-        let params = {
-          applianceCodeList: this.needAuthDeviceIdList
+    jumpNewService(type, deviceInfo) {
+      const sitUrl = 'https://weixincs.midea.com/apps/midea-service-meiju-sit/?pathName=appointment'
+      const prodUrl = 'https://cs.midea.com/c-css/front/wechat/midea-service-meiju/?pathName=appointment'
+      const url = weex.config.env.appEnv == 'prod' ? prodUrl : sitUrl
+      const routePath = type == 1 ? '/maintain' : '/maintenance'
+      this.$bridge.goToPage({
+        type: 'jumpWebViewNew',
+        param: {
+          url: `${url}${routePath}&serialNo=${deviceInfo.deviceSn}&spid=${deviceInfo.smartProductId}`,
+          needNavi: 0,
+          isShowLoading: true,
+          isShowRenderLoading: true,
+          params: {
+            enableScrollBar: 'NO',
+            enableSafeArea: 'NO'
+          }
         }
-        utils
-          .getDeviceAuth(
-            {
-              applianceCodeList: this.needAuthDeviceIdList,
-              stamp: Utils.timeFormat(+new Date(), 'YYYYMMDDhhmmss'),
-              reqId: utils.generateUUID()
-            },
-            {
-              isShowLoading: !isFirstLoad
-            }
-          )
-          .then(res => {
-            console.log('设备确权列表555===' + JSON.stringify(res))
-            reslove(res.data.applianceAuthList)
-          })
-          .catch(err => {
-            console.log('设备确权列表666===' + JSON.stringify(err))
-            reject(err)
-          })
       })
     },
-    // 4.批量获取耗材购买链接
-    // 获取滤芯商品信息 测试账号：13005364612
-    async getUpkeepShopInfo(codeList) {
-      console.log('进来了3333')
-      // nativeService.showLoading()
-      let env = weex.config.env.appEnv
-      let url = 'https://mp-sit.smartmidea.net/mas/v5/app/proxy'
-      if (env == 'prod') url = 'https://mp-prod.smartmidea.net/mas/v5/app/proxy'
-      url = url + '?alias=/next/mfop_item/getskuinfobyitemcodelist1'
-      // let codeList = []
-      // codeList.push(this.materialDetail.code)
-
-      /* let tmpcodeList = []
-      this.deviceMaterialList.forEach(item => {
-        item.consumables.forEach(item => {
-          if( item.productCode && item.productCode!=0 ) tmpcodeList.push(item.productCode)
-
-        })
-      })
-      let codeList = [...new Set(tmpcodeList)] */
-
-      // let codeList = ['21012500003057']
-      // let codeList = ['21012500003057','21012500001356','21012500001377', '21012500002621','21012500001836', '21012500003477', '21012500003057']
-      // let codeList = ["21012500003057","21012500000485","21012500001377","21012500002776","21012500002619","21012500002620","21012500002957","21012500002621","21012500002256","21012500002487","21012500000481","21012500000483","21012500003160","21012500002797","21012500003337","21012500003477"]
-      console.log('滤芯商品列表codeList===' + JSON.stringify(codeList))
 
-      // 测试用
-      // codeList.push("31031040002524")
-      let bizargs = JSON.stringify({ itemcodelist: codeList })
-      let nonceid = utils.generateUUID()
-      let appid = '1sic3jya0q0qlg20kl5460hmsd7jxbz8'
-      let key = 'TUgNo2kpXQ8TUdGOjP88ljF7UX9mvSof'
-      let version = '1.0'
-      let sign = md5(`appid=${appid}&bizargs=${bizargs}&nonceid=${nonceid}&source=&version=${version}&key=${key}`)
-      /* let requestParam = {
-        appid: appid,
-        nonceid: nonceid,
-        version: version,
-        sign: sign,
-        bizargs: bizargs
-      } */
-      let requestParam = {
-        /* appid: '1sic3jya0q0qlg20kl5460hmsd7jxbz8',
-        nonceid: '8503c243-8e76-47ec-ab4a-a3e57bc903fc',
-        version: '1.0',
-        sign: '80f92dd038fbf3e5810454824c9d016e',
-        bizargs: {"itemcodelist":["31031040002524"]} */
-        appid: appid,
-        nonceid: nonceid,
-        version: version,
-        sign: sign,
-        bizargs: bizargs
+    goCleanService(it, deviceInfo) {
+      if (it.serviceSupport && it.serviceSupport.washingService && it.serviceSupport.washingService.enable) {
+        let activeUrl = it.serviceSupport.washingService.serviceUrl
+        let searchLinkUrl = it.serviceSupport.washingService.searchLinkUrl
+        if (searchLinkUrl) {
+          MaterialEvent.handleSearchLinkUrlJump(searchLinkUrl)
+        } else if (it.serviceSupport.washingService.skuId) {
+          this.goToGoodsDetail(it.serviceSupport.washingService)
+        } else if (
+          it.washingServiceGoodsInfo &&
+          (it.washingServiceGoodsInfo.skulink || it.washingServiceGoodsInfo.skuId)
+        ) {
+          this.goToGoodsDetail(it.washingServiceGoodsInfo)
+        } else {
+          this.goodsjumpWebViewNew(activeUrl)
+        }
       }
-      console.log('请求商品链接requestParam===' + JSON.stringify(requestParam))
-
-      let postBody = `appid=${requestParam.appid}&nonceid=${requestParam.nonceid}&version=${requestParam.version}&sign=${requestParam.sign}&bizargs=${requestParam.bizargs}`
-      // const formData = new FormData()
-      /* const formData = new FormData()
-      Object.keys(requestParam).forEach((key) => {
-          formData.append(key, requestParam[key])
-      }) */
-      console.log('postBody===' + postBody)
-
-      let that = this
-      await stream.fetch(
-        {
-          method: 'POST',
-          // url: 'https://sitm.midea.cn/next/mfop_item/getskuinfobyitemcodelist',
-          // url: 'https://mp-sit.smartmidea.net/mas/v5/app/proxy?alias=/next/mfop_item/getskuinfobyitemcodelist1',
-          url,
-          // url: 'https://m.midea.cn/next/mfop_item/getskuinfobyitemcodelist',
-          type: 'json',
-          body: postBody
-        },
-        function(req) {
-          console.log('req1111===' + JSON.stringify(req))
-          // nativeService.hideLoading()
-          if (req.ok) {
-            console.log('req进来了222==' + JSON.stringify(req.data))
-            let data = req.data.data
-            // 商品信息返回为空不展示
-            if (JSON.stringify(data) == '{}') return
-
-            let list = data.skuinfolist
-
-            list.forEach((item, index) => {
-              console.log(`商品item==${index}==` + JSON.stringify(item))
-              let goodsIndex = -1
-              that.deviceMaterialList.forEach((it, i) => {
-                goodsIndex = it.consumables.findIndex(itt => {
-                  // console.log('耗材itt33333====' + JSON.stringify(itt));
-
-                  return itt.productCode == item.itemcode
-                })
-                if (goodsIndex != -1) {
-                  // it.consumables[goodsIndex].goodsInfo = item
-                  that.$set(that.deviceMaterialList[i].consumables[goodsIndex], 'goodsInfo', item)
-                  console.log('耗材item44444====' + JSON.stringify(item))
-                }
-                // console.log('商品itemmm===' + JSON.stringify(it));
-              })
-            })
-            // nativeService.alert(that.deviceMaterialList)
-
-            /* that.deviceMaterialList.forEach(item => {
-            // console.log('itemmmmmmmmmmmmm===' + JSON.stringify(item));
-            item.consumables.forEach(itt => {
-              console.log('itt======' + JSON.stringify(itt));
-              if( itt.code == '21012500001836' ) {
-                nativeService.alert(itt.goodsInfo)
+    },
 
-              }
-            })
+    setWavePercent(item) {
+      return MaterialEvent.setWavePercent(item, this.isDiablo, this.needBackground, { needChangeColor: true })
+    },
 
-            // console.log('itemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm===' + JSON.stringify(item));
-          }) */
-            // nativeService.alert(that.deviceMaterialList)
+    // 设置波浪百分比
+    setWavePercentDetail(item) {
+      if( item.remainingValue || item.remainingValue == 0 ){
+        let percent = this.dealDeviceMaterialList[0].deviceInfo.isOnline == 1 ? item.percent / 100 : 0
+        let type = item.remainingStatus
+        let percentTxt = item.percent
+        let textColorList = ['#F56428', '#FFAA10', '#ffffff']
+        let frontColorList = ['#fd895c', '#ffd262', '#49c4fc']
+        let backColorList = ['#f56b35', '#ffb823', '#4baeff']
+
+        // 判断显示类型
+        if( item.remainingValueType == 4 ) {
+          percent = item.remainingStatus == 2 ?0.8 : 0.1
+          percentTxt = type == 2 ? '充足' : '不足'
+          textColorList = ['#FF6A4C', '#FF6A4C', '#00A4F2']
+          frontColorList = ['#fd895c', '#fd895c', '#49c4fc']
+          backColorList = ['#f56b35', '#f56b35', '#4baeff']
+        }
 
-            // nativeService.alert(list)
-            // 商品状态（1---下架    2---上架）
-            // 下架商品不展示
-            /* if (list[0].state == 1) return
-            that.hasPurchase = true
-            // 购买展示页面埋点
-            let trackParam = {
-              event: 'user_page_view',
-              eventParams: {
-                page_name: '商品展示',
-                page_id: 'product_display',
-                module: '耗材管理',
-                // widget_name: '商品展示',
-                // widget_id: 'product_display',
-                ext_info: {
-                  plugin_type: that.deviceInfo.deviceTypeName || ''
-                }
-              }
-            }
-            // nativeService.alert(JSON.stringify(trackParam))
-            nativeService.trackEvent(trackParam)
+        if( percent > 0.2 && percent <= 0.5 ){
+          textColorList = ['#00A4F2', '#00A4F2', '#00A4F2']
+        }
 
-            that.shopDetail = list[0]
-            console.log('商品详情：：' + JSON.stringify(that.shopDetail)) */
-          }
-          /* if(!req.ok){
-        self.postResult = "request failed";
-      }else{
-        console.log('get:'+JSON.stringify(req));
-        self.postResult = JSON.stringify(req.data);
-      } */
-        },
-        function(response) {
-          // console.log('get in progress:'+response.length);
-          // self.postResult = "bytes received:"+response.length;
-          // nativeService.hideLoading()
-          console.log('req222===' + JSON.stringify(response))
+        console.log('最终的wave：'+ JSON.stringify({
+          frontWaveColor: frontColorList[type], //已完成后的颜色默认#FFFFFF
+          backWaveColor: backColorList[type],
+          animate: true,
+          backgroundColor: '', //背景色 默认为#000000
+          progress: percent < 0.01 && percent != 0 ? 0.01 : percent, //s 进度 [0 ... 1]
+          textFont: 12, //字体大小，默认为14
+          text: percentTxt, //文本 默认为空
+          textColor: textColorList[type], //文本颜色，默认#FFFFFF
+          unit: '%', //单位
+          unitTextSize: 8, //单位字体大小，默认为12
+          unitTextColor: textColorList[type], //单位文本颜色，默认#267AFF
+          unitAlignType: 'bottom', //单位对齐文本的方式，top顶部 center居中(默认值) bottom底部
+          duration: 1000
+        }))
+
+        return {
+          frontWaveColor: frontColorList[type], //已完成后的颜色默认#FFFFFF
+          backWaveColor: backColorList[type],
+          animate: true,
+          backgroundColor: '', //背景色 默认为#000000
+          progress: percent < 0.01 && percent != 0 ? 0.01 : percent, //s 进度 [0 ... 1]
+          textFont: 12, //字体大小，默认为14
+          text: percentTxt, //文本 默认为空
+          textColor: textColorList[type], //文本颜色，默认#FFFFFF
+          unit: '%', //单位
+          unitTextSize: 8, //单位字体大小，默认为12
+          unitTextColor: textColorList[type], //单位文本颜色，默认#267AFF
+          unitAlignType: 'bottom', //单位对齐文本的方式，top顶部 center居中(默认值) bottom底部
+          duration: 1000
         }
-      )
-    },
-    // 获取单个设备信息
-    getDeviceInfo() {
-      // return new Promise((resolve, reject) => {
-      this.$bridge
-        .getDeviceInfo({ applianceCode: this.deviceId })
-        .then(resp1 => {
-          // this.$bridge.showToast(JSON.stringify(resp1))
-          console.log('getDeviceInfo==res==' + JSON.stringify(resp1))
-          this.deviceInfo = resp1.result
-          this.queryBatchMaterialSingle()
-          // nativeService.toast(JSON.stringify(this.deviceInfo))
-          // resolve()
-        })
-        .catch(err => {
-          // this.$bridge.showToast(JSON.stringify(err))
-          console.log('err====' + JSON.stringify(err))
-          // reject()
-        })
-      // })
-    },
-    // 设置波浪百分比
-    setWavePercent(item) {
-      // remainingStatus 0-已耗尽，1-余量不足，2-余量充足
-      let percent = Number(item.remainingValue / item.total)
-      // let type = item.remainingValue > item.lowLevelAlertThreshold?0:((item.remainingValue <= item.lowLevelAlertThreshold && item.remainingValue!=0)?1:2)
-      let type = item.remainingStatus
 
-      // let textColorList = ['#00A4F2', '#FFAA10', '#F56428']
-      // let frontColorList = ['#9fdaf5', '#FFAA10', '#F56428']
-      // let backColorList = ['#c7e8f7', '#fcc77c', '#fc9791']
-      let textColorList = ['#F56428', '#FFAA10', '#00A4F2']
-      let frontColorList = ['#F56428', '#fdbd49', '#9fdaf5']
-      let backColorList = ['#fc9791', '#fcd184', '#c7e8f7']
-      let percentTxt = ''
-      // 判断显示类型
-      if (item.remainingValueType == 4) {
-        percentTxt = item.remainingStatus == 2 ? '充足' : '不足'
-        percent = item.remainingStatus == 2 ? 0.4 : 0.05
-        textColorList = ['#F56428', '#F56428', '#00A4F2']
-        frontColorList = ['#F56428', '#F56428', '#9fdaf5']
-        backColorList = ['#fc9791', '#fc9791', '#c7e8f7']
-      } else {
-        percentTxt = Math.floor(percent * 100) + '%'
+      }else {
+        return {
+          backgroundColor: '#e9f1ff', //背景色 默认为#000000
+          frontWaveColor: '#e9f1ff', //已完成后的颜色默认#FFFFFF
+          backWaveColor: '#e9f1ff',
+          progress: 0,
+          animate: false,
+          text: '', //文本 默认为空
+        }
       }
+    },
 
-      return {
-        frontWaveColor: frontColorList[type], //已完成后的颜色默认#FFFFFF
-        backWaveColor: backColorList[type],
-        animate: true,
-        backgroundColor: '#F9F9F9', //背景色 默认为#000000
-        progress: percent, // 进度 [0 ... 1]
-        textFont: 11, //字体大小，默认为14
-        text: percentTxt, //文本 默认为空
-        textColor: textColorList[type], //文本颜色，默认#FFFFFF
-        duration: 1000
+    showGoodsList() {
+      this.showAddCartPopup = true
+      let trackParam = {
+        event: 'user_behavior_event',
+        eventParams: {
+          page_name: '耗材信息页',
+          page_id: 'page_consumables_information',
+          event_name: 'user_behavior_event',
+          module: '插件耗材组件',
+          widget_name: '点击立即购买',
+          widget_id: 'click_buy_Now',
+        }
       }
+      this.$bridge.trackEvent(trackParam)
     },
-    // 跳转前节流
-    /* goDetailThrottle: throttle(
-      function(item, device) {
-        console.log('goDetailThrottle1111111')
 
-        this.goDetail(item, device)
-      },
-      2000,
-      { leading: true, trailing: false }
-    ), */
-    // 跳转耗材详情
-    goDetail(item, device) {
-      console.log('跳转前itemmmm===' + JSON.stringify(item))
-      console.log('跳转前device===' + JSON.stringify(device.deviceInfo))
-      item.replacementMethodInfo = {}
-      item.purchaseInfo = {}
-
-      utils.setItem('previous_materialDetail', item)
-      utils.setItem('previous_deviceInfo', device.deviceInfo)
-
-      // let url = `customer-service/materialDetail.js?materialDetail=${encodeURIComponent(
-      //   JSON.stringify(item)
-      // )}&deviceInfo=${encodeURIComponent(JSON.stringify(device.deviceInfo))}`
-      let url = 'customer-service/materialDetail.js?from=externalPage'
-      let params = {
-        type: 'jumpWeex',
-        param: {
-          url: url,
-          viewTag: 'maintenance',
-          bgColor: this.isColmo ? '#000000' : '#ffffff',
-          pageBackgroundColor: this.isColmo ? '#000000' : '#ffffff'
+    async queryInsufficientGoodsProductCodes(insufficientMaterialList) {
+      let tempGoodsProductCodes = []
+      let skuIdList = []
+      let insufficientProductCodeJson = {}
+      let isServiceSupportProductCodeArr = []
+      insufficientMaterialList.forEach(item => {
+        item.consumables.forEach(item1 => {
+          console.log('耗材不足的商品c：' + JSON.stringify(item1.purchaseInfo))
+          // if(item1.purchaseInfo && item1.purchaseInfo.purchaseEnable && item1.purchaseInfo.skuId){
+          //   skuIdList.push(item1.purchaseInfo.skuId)
+          // }
+          if (
+            item1.purchaseInfo &&
+            item1.purchaseInfo.purchaseEnable &&
+            item1.purchaseInfo.productCodes &&
+            Array.isArray(item1.purchaseInfo.productCodes) &&
+            item1.purchaseInfo.productCodes.length > 0
+          ) {
+            if (item1.purchaseInfo.productCodes[0] != '') {
+              insufficientProductCodeJson[item1.purchaseInfo.productCodes[0]] = this.judgeInsufficientProductCode(
+                item1,
+                item
+              )
+              tempGoodsProductCodes.push(item1.purchaseInfo.productCodes[0])
+            }
+          }
+          console.log('耗材不足的商品c：' + JSON.stringify(item1.serviceSupport))
+          // if(item1.serviceSupport && item1.serviceSupport.washingService && item1.serviceSupport.washingService.enable && item1.serviceSupport.washingService.skuId){
+          //   skuIdList.push(item1.serviceSupport.washingService.skuId)
+          // }
+          if (
+            item1.serviceSupport &&
+            item1.serviceSupport.washingService &&
+            item1.serviceSupport.washingService.enable &&
+            item1.serviceSupport.washingService.productCode
+          ) {
+            insufficientProductCodeJson[
+              item1.serviceSupport.washingService.productCode
+            ] = this.judgeInsufficientProductCode(item1, item)
+            isServiceSupportProductCodeArr.push(item1.serviceSupport.washingService.productCode)
+          }
+        })
+        //去重清洗单个设备清洗服务中的商品code
+        tempGoodsProductCodes.push(...new Set(isServiceSupportProductCodeArr))
+      })
+      console.log('耗材不足的商品1c：' + JSON.stringify(tempGoodsProductCodes))
+      console.log('耗材不足的商品2c：' + JSON.stringify(skuIdList))
+      console.log('耗材不足的商品3c：' + JSON.stringify(insufficientProductCodeJson))
+      let repeatProductCodesCount = {}
+      tempGoodsProductCodes.forEach(item => {
+        if (repeatProductCodesCount[item]) {
+          repeatProductCodesCount[item]++
+        } else {
+          repeatProductCodesCount[item] = 1
         }
+      })
+      let goodsProductCodes = [...new Set(tempGoodsProductCodes)]
+      let skuinfolist = []
+      if (goodsProductCodes && goodsProductCodes.length > 20) {
+        let groupNum = Math.ceil(goodsProductCodes.length / 20)
+        for (let index = 0; index < groupNum; index++) {
+          try {
+            const resSuccessMap = await this.querySkuIdByItemCodes(
+              goodsProductCodes.slice(index * 20, (index + 1) * 20)
+            )
+            this.handleSkuinfolist(skuinfolist, resSuccessMap, goodsProductCodes)
+          } catch (error) {
+            continue
+          }
+        }
+      } else {
+        try {
+          if (goodsProductCodes.length > 0) {
+            const resSuccessMap = await this.querySkuIdByItemCodes(goodsProductCodes)
+            this.handleSkuinfolist(skuinfolist, resSuccessMap, goodsProductCodes)
+          }
+        } catch (error) {}
       }
-      console.log(JSON.stringify(params))
-      routerModule.goToMeijuPage(params)
-      // this.$bridge.goToPage(params)
 
-      // utils.setItem('materialDetail', item)
+      console.log('获取到的商品信息1c：' + JSON.stringify(skuinfolist))
+
+      //通过商城编码查询新商品skuId
+      // let itemCodeList = skuinfolist.map(item=>item.itemcode)
+      // try {
+      //   const resSkuIdList = await this.querySkuIdByItemCodes(itemCodeList)
+      //   if(resSkuIdList.code == '000000'){
+      //     skuinfolist.forEach(item => {
+      //       if(resSkuIdList.data && resSkuIdList.data.successMap){
+      //         item.skuId = resSkuIdList.data.successMap[item.itemcode] ? resSkuIdList.data.successMap[item.itemcode].skuId : ''
+      //       }
+      //     })
+      //   }
+      // } catch (error) {
+
+      // }
+
+      this.repeatProductCodesCountAddSkuid(skuinfolist, skuIdList, repeatProductCodesCount)
+
+      if (skuinfolist.length > 0 || skuIdList.length > 0) {
+        this.showAddCart = true
+        this.insufficientGoodinfoList = skuinfolist
+        this.insufficientProductCodeJson = insufficientProductCodeJson
+      } else {
+        this.showAddCart = false
+      }
     },
-    // 购买商品跳转
-    buyGoods(url, materialDetail, deviceInfo) {
-      // console.log('goodsInfo=====' + JSON.stringify(goodsInfo));
 
-      // 购买事件埋点
-      /* if( materialDetail ){
-        if( isNosmart ){
-          let trackParam = {
-            event: 'user_behavior_event',
-            eventParams: {
-              page_name: '耗材列表',
-              page_id: 'consumables_list',
-              event_name: 'user_behavior_event',
-              module: '耗材管理',
-              widget_name: '配件购买点击',
-              widget_id: 'accessory_click',
-              ext_info: {
-                plugin_type: deviceInfo.deviceTypeName || '',
-                sn8: deviceInfo.deviceSn8 || '',
-                spid: deviceInfo.smartProductId || '',
-                A0: deviceInfo.deviceSubType || '',
-                name: materialDetail.name,
-                remainingValue: materialDetail.remainingValue,
+    //处理商品信息
+    handleSkuinfolist(skuinfolist, resSuccessMap, codeList) {
+      if (resSuccessMap.code == '000000') {
+        codeList.forEach(item => {
+          if (resSuccessMap.data && resSuccessMap.data.successMap) {
+            if (resSuccessMap.data.successMap[item] && resSuccessMap.data.successMap[item].skuId) {
+              console.log('获取到的图片信息c：' + JSON.stringify(resSuccessMap.data.successMap[item].mainPicList))
+              if (
+                resSuccessMap.data.successMap[item].mainPicList &&
+                resSuccessMap.data.successMap[item].mainPicList.length > 0
+              ) {
+                resSuccessMap.data.successMap[item].mainPicList.forEach(item1 => {
+                  console.log('获取到的图片信息c：' + JSON.stringify(item1))
+                  if (item1.imageSort == 1) {
+                    resSuccessMap.data.successMap[item].picInfo = item1.imageUrl
+                  }
+                })
               }
+              skuinfolist.push(resSuccessMap.data.successMap[item])
             }
           }
-          console.log('非智埋点===trackParam==' + JSON.stringify(trackParam));
+        })
+      }
+    },
 
-          nativeService.trackEvent(trackParam)
-        }else {
-          let trackParam = {
-            event: 'user_behavior_event',
-            eventParams: {
-              page_name: '耗材列表',
-              page_id: 'consumables_list',
-              module: '耗材管理',
-              widget_name: '购买',
-              widget_id: 'buy',
-              ext_info: {
-                plugin_type: deviceInfo.deviceTypeName || '',
-                sn8: deviceInfo.deviceSn8 || '',
-                spid: deviceInfo.smartProductId || '',
-                A0: deviceInfo.deviceSubType || '',
-                name: materialDetail.name,
-                remainingValue: materialDetail.remainingValue,
-              }
-            }
+    repeatProductCodesCountAddSkuid(skuinfolist, skuIdList, repeatProductCodesCount) {
+      let newSkuIdList = [] //剔除已经有商品信息的数据，用此去请求新的商品信息接口
+      skuIdList.forEach(item => {
+        let hasSkuInfo = false
+        skuinfolist.forEach(item1 => {
+          if (item == item1.skuId) {
+            repeatProductCodesCount[item1.itemcode]++
+            hasSkuInfo = true
           }
-          console.log('管理页-购买商品埋点====' + JSON.stringify(trackParam));
-          nativeService.trackEvent(trackParam)
-
+        })
+        if (!hasSkuInfo) {
+          newSkuIdList.push(item)
         }
+      })
+      this.repeatProductCodesCount = repeatProductCodesCount
+    },
 
+    judgeInsufficientProductCode(consumable, device) {
+      if (
+        (consumable.remainingStatus == 1 || consumable.remainingStatus == 0) &&
+        consumable.remainingValue != null &&
+        device.deviceInfo &&
+        device.deviceInfo.isOnline == 1 &&
+        consumable.remainingValueType != 5
+      ) {
+        return true
+      }
+      return false
+    },
 
-      } */
-
-      this.$bridge.goToPage({
-        type: 'jumpElecBusiness',
-        param: {
-          // url: 'midea-meiju://com.midea.meiju/main?type=jumpElecBusiness&url=https://m.midea.cn/detail/index?itemid=10000000010010731003999'
-          // url: 'https://m.midea.cn/detail/index?itemid=10000000010010731003999',
-          url,
-          needNavi: '1'
+    async querySkuIdByItemCodes(itemCodeList) {
+      return new Promise(async (resolve, reject) => {
+        try {
+          const res = await utils.querySkuIdByItemCodes(
+            {
+              restParams: {
+                itemCodeList: [...new Set(itemCodeList)]
+              }
+            },
+            {
+              isShowLoading: false
+            }
+          )
+          console.log('获取商品id成功c：' + JSON.stringify(res))
+          resolve(res)
+        } catch (error) {
+          console.log('获取商品id失败c：' + JSON.stringify(error))
+          reject(error)
         }
       })
     },
+
+    cancleShowAddCartPopup() {
+      this.showAddCartPopup = false
+      let trackParam = {
+        event: 'user_behavior_event',
+        eventParams: {
+          page_name: '耗材购买弹窗',
+          page_id: 'consumables_purchase_pop-up',
+          event_name: 'user_behavior_event',
+          module: '插件耗材组件',
+          widget_name: '关闭弹窗',
+          widget_id: 'click_to_close_pop-up',
+        }
+      }
+      this.$bridge.trackEvent(trackParam)
+    },
+
+    showBgco(item){
+      const bgcoArr = [this.bgcoOne,this.bgcoTwo,this.bgcoThree]
+      return bgcoArr[item.remainingStatus]
+    },
+
     scrollEvent1(e) {
       // console.log('scrollEvent===' + JSON.stringify(e))
-      this.recommendSliderInnerLeft = -(32 / this.recommendSliderWidth) * e.contentOffset.x
+      console.log('偏移量'+ (this.recommendSliderWidth - (686 + -e.contentOffset.x)))
+      if(this.recommendSliderWidth - (686 + -e.contentOffset.x) < 30){
+        // 判断滚动后离尾端距离小于30则滑动条直接到最右边
+        this.recommendSliderInnerLeft = 16
+      }else{
+        this.recommendSliderInnerLeft = -(32 / this.recommendSliderWidth) * (e.contentOffset.x)
+      }
+      
       console.log('recommendSliderInnerLeft===' + this.recommendSliderInnerLeft)
     },
     getInnerWidth() {
@@ -1262,6 +833,7 @@ export default {
       setTimeout(() => {
         dom.getComponentRect(this.$refs.recommendBox, data => {
           this.recommendSliderWidth = data.size.width
+          console.log('元素的宽度'+this.recommendSliderWidth)
           this.recommendSliderInnerWidth = 32
           console.log('recommendSliderWidth====' + this.recommendSliderWidth)
           console.log('recommendSliderInnerWidth====' + this.recommendSliderInnerWidth)
@@ -1273,3 +845,4 @@ export default {
 </script>
 
 <style src="./assets/css/index.css" />
+<style src="./assets/css/index_diablo.css" />