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](); } } })));