index.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. import { connect } from 'herculex';
  2. import { queryForHotGoods } from './service';
  3. import { createSubscribe } from 'applet-page-component';
  4. Component(createSubscribe({
  5. onShow() {
  6. const {
  7. globalShopId
  8. } = this.data;
  9. const {
  10. globalShopId: stateShopId
  11. } = this.$store.stateConfig.$global;
  12. if (globalShopId === stateShopId) {
  13. this.initData();
  14. }
  15. }
  16. })(connect({
  17. mapStateToProps: {
  18. userInfo: state => state.$global.userInfo || {},
  19. globalShopId: state => state.$global.globalShopId || ''
  20. }
  21. })({
  22. props: {
  23. componentData: {},
  24. pageTemp: {}
  25. },
  26. data: {
  27. isReady: false,
  28. styleType: '1',
  29. fireImg: 'https://gw.alipayobjects.com/mdn/rms_0e8a29/afts/img/A*YzTkToro1WMAAAAAAAAAAAAAARQnAQ',
  30. styleConfig: null,
  31. hotGoodsList: null
  32. },
  33. didMount() {// if (this.data.globalShopId) {
  34. // this.initData();
  35. // }
  36. },
  37. didUpdate(preProps, preData) {
  38. // console.log(this.props);
  39. // // 初始渲染 没有globalShopId 等待门店更新
  40. // if (preData.globalShopId === '' && this.data.globalShopId) {
  41. // return this.initData();
  42. // }
  43. // // 切换门店
  44. // if (preData.globalShopId !== this.data.globalShopId && this.data.globalShopId !== '') {
  45. // return this.initData();
  46. // }
  47. if (preData.globalShopId !== this.data.globalShopId && this.data.globalShopId !== '') {
  48. return this.initData();
  49. }
  50. if (preProps.componentData.componentUUID !== this.props.componentData.componentUUID) {
  51. return this.initData();
  52. }
  53. },
  54. methods: {
  55. async initData() {
  56. const {
  57. globalShopId
  58. } = this.data;
  59. const {
  60. componentData: {
  61. componentExtInfo = {}
  62. }
  63. } = this.props;
  64. const {
  65. explosiveSort = 'SALES_VOLUME_DESC',
  66. size = 1,
  67. style = '1',
  68. explosiveType = 'HOT'
  69. } = componentExtInfo;
  70. try {
  71. // const hotGoodsList = goodsList;
  72. // 获取爆款商品列表
  73. const hotGoodsList = await queryForHotGoods({
  74. size,
  75. typeCode: explosiveType,
  76. shopId: globalShopId,
  77. sort: explosiveSort
  78. }); // 根据模板的style类型 确定渲染的样式配置
  79. const config = this.getStyleConfig(style);
  80. this.setData({
  81. styleType: style,
  82. hotGoodsList: style === '4' ? this.reloadList(hotGoodsList) : hotGoodsList,
  83. styleConfig: { ...config
  84. }
  85. });
  86. } catch (err) {
  87. console.log(err);
  88. }
  89. },
  90. // 样式4 需要重新组装数组
  91. reloadList(list) {
  92. const newList = [];
  93. list.forEach((ele, index) => {
  94. if (index % 3 === 0) {
  95. newList.push({
  96. bigItem: ele,
  97. smallList: [list[index + 1], list[index + 2]]
  98. });
  99. }
  100. });
  101. return newList;
  102. },
  103. onChangeStore(e) {
  104. const {
  105. storeId
  106. } = e;
  107. this.commitGlobal && this.commitGlobal({
  108. globalShopId: storeId,
  109. globalShop: { ...e
  110. }
  111. });
  112. my.setStorageSync({
  113. key: 'shopId',
  114. data: storeId
  115. });
  116. },
  117. loadPlugin() {
  118. my.loadPlugin({
  119. plugin: '2021002165686069@*',
  120. success: () => {
  121. // eslint-disable-next-line no-undef
  122. const plugin = requirePlugin('dynamic-plugin://2021002165686069');
  123. plugin.setEnv('dev');
  124. this.setData({
  125. isReady: true
  126. });
  127. },
  128. fail: res => {
  129. console.log(res);
  130. }
  131. });
  132. },
  133. getStyleConfig(styleType) {
  134. const pubConfig = {
  135. height: '164rpx',
  136. width: '164rpx',
  137. maxWidth: '686rpx',
  138. stockHight: '36rpx',
  139. nameFontSize: '40rpx',
  140. unitFontSize: '28rpx',
  141. priceFontSize: '35rpx',
  142. priceHeight: '48rpx',
  143. priceWidth: 'auto',
  144. outFlexDirection: 'column',
  145. innerFlexDirection: 'row',
  146. stockFontSize: '24rpx',
  147. nameMarginTop: '0rpx',
  148. nameMarginBtm: '28rpx',
  149. infoMarginLeft: '24rpx',
  150. boxMarginLeft: '0'
  151. };
  152. const strategy = {
  153. 1: () => ({ ...pubConfig
  154. }),
  155. 2: () => ({ ...pubConfig,
  156. height: '306rpx',
  157. width: '306rpx',
  158. maxWidth: '306rpx',
  159. stockHight: '40rpx',
  160. priceHeight: '55rpx',
  161. priceWidth: 'auto',
  162. stockFontSize: '20rpx',
  163. nameFontSize: '32rpx',
  164. unitFontSize: '24rpx',
  165. priceFontSize: '48rpx',
  166. outFlexDirection: 'row',
  167. innerFlexDirection: 'column',
  168. nameMarginTop: '16rpx',
  169. nameMarginBtm: '10rpx',
  170. infoMarginLeft: '0',
  171. boxMarginLeft: '26rpx'
  172. }),
  173. 3: () => ({ ...pubConfig,
  174. height: '204rpx',
  175. width: '204rpx',
  176. maxWidth: '204rpx',
  177. stockHight: '40rpx',
  178. priceHeight: 'auto',
  179. priceWidth: '100%',
  180. stockFontSize: '18rpx',
  181. nameFontSize: '28rpx',
  182. unitFontSize: '18rpx',
  183. priceFontSize: '36rpx',
  184. outFlexDirection: 'row',
  185. innerFlexDirection: 'column',
  186. nameMarginTop: '14rpx',
  187. nameMarginBtm: '8rpx',
  188. infoMarginLeft: '0',
  189. boxMarginLeft: '13rpx'
  190. }),
  191. 4: () => [{
  192. height: '456rpx',
  193. width: '456rpx',
  194. stockHight: '40rpx',
  195. maxWidth: '456rpx',
  196. priceHeight: 'auto',
  197. priceWidth: '100%',
  198. priceLine: '48rpx',
  199. stockFontSize: '24rpx',
  200. nameFontSize: '40rpx',
  201. unitFontSize: '26rpx',
  202. unitMargin: '24rpx',
  203. priceFontSize: '60rpx',
  204. outFlexDirection: 'row',
  205. innerFlexDirection: 'column',
  206. nameMarginTop: '14rpx',
  207. nameMarginBtm: '8rpx',
  208. infoMarginLeft: '0',
  209. boxMarginLeft: '13rpx'
  210. }, {
  211. height: '158rpx',
  212. width: '158rpx',
  213. stockHight: '36rpx',
  214. maxWidth: '158rpx',
  215. stockFontSize: '18rpx',
  216. priceHeight: 'auto',
  217. priceWidth: '100%',
  218. nameFontSize: '28rpx',
  219. unitFontSize: '18rpx',
  220. unitMargin: '24rpx',
  221. priceFontSize: '36rpx',
  222. outFlexDirection: 'row',
  223. innerFlexDirection: 'column',
  224. nameMarginTop: '8rpx',
  225. nameMarginBtm: '8rpx',
  226. infoMarginLeft: '0',
  227. boxMarginLeft: '13rpx'
  228. }]
  229. };
  230. return strategy[styleType]();
  231. }
  232. }
  233. })));