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