th_net_hospital_ali_mp/antbuilder/industry/abMall/components/hot-goods/index.js

import { connect } from 'herculex';
import { queryForHotGoods } from './service';
import { createSubscribe } from 'applet-page-component';
Component(createSubscribe({
  onShow() {
    const {
      globalShopId
    } = this.data;
    const {
      globalShopId: stateShopId
    } = this.$store.stateConfig.$global;

    if (globalShopId === stateShopId) {
      this.initData();
    }
  }

})(connect({
  mapStateToProps: {
    userInfo: state => state.$global.userInfo || {},
    globalShopId: state => state.$global.globalShopId || ''
  }
})({
  props: {
    componentData: {},
    pageTemp: {}
  },
  data: {
    isReady: false,
    styleType: '1',
    fireImg: 'https://gw.alipayobjects.com/mdn/rms_0e8a29/afts/img/A*YzTkToro1WMAAAAAAAAAAAAAARQnAQ',
    styleConfig: null,
    hotGoodsList: null
  },

  didMount() {// if (this.data.globalShopId) {
    //   this.initData();
    // }
  },

  didUpdate(preProps, preData) {
    // console.log(this.props);
    // // 初始渲染 没有globalShopId 等待门店更新
    // if (preData.globalShopId === '' && this.data.globalShopId) {
    //   return this.initData();
    // }
    // // 切换门店
    // if (preData.globalShopId !== this.data.globalShopId && this.data.globalShopId !== '') {
    //   return this.initData();
    // }
    if (preData.globalShopId !== this.data.globalShopId && this.data.globalShopId !== '') {
      return this.initData();
    }

    if (preProps.componentData.componentUUID !== this.props.componentData.componentUUID) {
      return this.initData();
    }
  },

  methods: {
    async initData() {
      const {
        globalShopId
      } = this.data;
      const {
        componentData: {
          componentExtInfo = {}
        }
      } = this.props;
      const {
        explosiveSort = 'SALES_VOLUME_DESC',
        size = 1,
        style = '1',
        explosiveType = 'HOT'
      } = componentExtInfo;

      try {
        // const hotGoodsList = goodsList;
        // 获取爆款商品列表
        const hotGoodsList = await queryForHotGoods({
          size,
          typeCode: explosiveType,
          shopId: globalShopId,
          sort: explosiveSort
        }); // 根据模板的style类型 确定渲染的样式配置

        const config = this.getStyleConfig(style);
        this.setData({
          styleType: style,
          hotGoodsList: style === '4' ? this.reloadList(hotGoodsList) : hotGoodsList,
          styleConfig: { ...config
          }
        });
      } catch (err) {
        console.log(err);
      }
    },

    // 样式4 需要重新组装数组
    reloadList(list) {
      const newList = [];
      list.forEach((ele, index) => {
        if (index % 3 === 0) {
          newList.push({
            bigItem: ele,
            smallList: [list[index + 1], list[index + 2]]
          });
        }
      });
      return newList;
    },

    onChangeStore(e) {
      const {
        storeId
      } = e;
      this.commitGlobal && this.commitGlobal({
        globalShopId: storeId,
        globalShop: { ...e
        }
      });
      my.setStorageSync({
        key: 'shopId',
        data: storeId
      });
    },

    loadPlugin() {
      my.loadPlugin({
        plugin: '2021002165686069@*',
        success: () => {
          // eslint-disable-next-line no-undef
          const plugin = requirePlugin('dynamic-plugin://2021002165686069');
          plugin.setEnv('dev');
          this.setData({
            isReady: true
          });
        },
        fail: res => {
          console.log(res);
        }
      });
    },

    getStyleConfig(styleType) {
      const pubConfig = {
        height: '164rpx',
        width: '164rpx',
        maxWidth: '686rpx',
        stockHight: '36rpx',
        nameFontSize: '40rpx',
        unitFontSize: '28rpx',
        priceFontSize: '35rpx',
        priceHeight: '48rpx',
        priceWidth: 'auto',
        outFlexDirection: 'column',
        innerFlexDirection: 'row',
        stockFontSize: '24rpx',
        nameMarginTop: '0rpx',
        nameMarginBtm: '28rpx',
        infoMarginLeft: '24rpx',
        boxMarginLeft: '0'
      };
      const strategy = {
        1: () => ({ ...pubConfig
        }),
        2: () => ({ ...pubConfig,
          height: '306rpx',
          width: '306rpx',
          maxWidth: '306rpx',
          stockHight: '40rpx',
          priceHeight: '55rpx',
          priceWidth: 'auto',
          stockFontSize: '20rpx',
          nameFontSize: '32rpx',
          unitFontSize: '24rpx',
          priceFontSize: '48rpx',
          outFlexDirection: 'row',
          innerFlexDirection: 'column',
          nameMarginTop: '16rpx',
          nameMarginBtm: '10rpx',
          infoMarginLeft: '0',
          boxMarginLeft: '26rpx'
        }),
        3: () => ({ ...pubConfig,
          height: '204rpx',
          width: '204rpx',
          maxWidth: '204rpx',
          stockHight: '40rpx',
          priceHeight: 'auto',
          priceWidth: '100%',
          stockFontSize: '18rpx',
          nameFontSize: '28rpx',
          unitFontSize: '18rpx',
          priceFontSize: '36rpx',
          outFlexDirection: 'row',
          innerFlexDirection: 'column',
          nameMarginTop: '14rpx',
          nameMarginBtm: '8rpx',
          infoMarginLeft: '0',
          boxMarginLeft: '13rpx'
        }),
        4: () => [{
          height: '456rpx',
          width: '456rpx',
          stockHight: '40rpx',
          maxWidth: '456rpx',
          priceHeight: 'auto',
          priceWidth: '100%',
          priceLine: '48rpx',
          stockFontSize: '24rpx',
          nameFontSize: '40rpx',
          unitFontSize: '26rpx',
          unitMargin: '24rpx',
          priceFontSize: '60rpx',
          outFlexDirection: 'row',
          innerFlexDirection: 'column',
          nameMarginTop: '14rpx',
          nameMarginBtm: '8rpx',
          infoMarginLeft: '0',
          boxMarginLeft: '13rpx'
        }, {
          height: '158rpx',
          width: '158rpx',
          stockHight: '36rpx',
          maxWidth: '158rpx',
          stockFontSize: '18rpx',
          priceHeight: 'auto',
          priceWidth: '100%',
          nameFontSize: '28rpx',
          unitFontSize: '18rpx',
          unitMargin: '24rpx',
          priceFontSize: '36rpx',
          outFlexDirection: 'row',
          innerFlexDirection: 'column',
          nameMarginTop: '8rpx',
          nameMarginBtm: '8rpx',
          infoMarginLeft: '0',
          boxMarginLeft: '13rpx'
        }]
      };
      return strategy[styleType]();
    }

  }
})));