{"version":3,"file":"s-goods-card.js","sources":["../../../../../../src/sheep/components/s-goods-card/s-goods-card.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3MtZ29vZHMtY2FyZC9zLWdvb2RzLWNhcmQudnVl"],"sourcesContent":["<!-- 装修商品组件：商品卡片 -->\r\n<template>\r\n  <!-- 商品卡片 -->\r\n  <view>\r\n    <!-- 布局1. 单列大图（上图，下内容）-->\r\n    <view\r\n      v-if=\"layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length\"\r\n      class=\"goods-sl-box\"\r\n    >\r\n      <view\r\n        class=\"goods-box\"\r\n        v-for=\"item in state.goodsList\"\r\n        :key=\"item.id\"\r\n        :style=\"[{ marginBottom: data.space * 2 + 'rpx' }]\"\r\n      >\r\n        <s-goods-column\r\n          class=\"\"\r\n          size=\"sl\"\r\n          :goodsFields=\"data.fields\"\r\n          :tagStyle=\"data.badge\"\r\n          :data=\"item\"\r\n          :titleColor=\"data.fields.name?.color\"\r\n          :subTitleColor=\"data.fields.introduction.color\"\r\n          :topRadius=\"data.borderRadiusTop\"\r\n          :bottomRadius=\"data.borderRadiusBottom\"\r\n          @click=\"sheep.$router.go('/modules/mall/goods/index', { id: item.id })\"\r\n        >\r\n          <!-- 购买按钮 -->\r\n          <template v-slot:cart>\r\n            <button class=\"ss-reset-button cart-btn\" :style=\"[buyStyle]\">\r\n              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}\r\n            </button>\r\n          </template>\r\n        </s-goods-column>\r\n      </view>\r\n    </view>\r\n\r\n    <!-- 布局2. 双列（每一列：上图，下内容）-->\r\n    <view\r\n      v-if=\"layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length\"\r\n      class=\"goods-md-wrap ss-flex ss-flex-wrap ss-col-top\"\r\n    >\r\n      <view class=\"goods-list-box\">\r\n        <view\r\n          class=\"left-list\"\r\n          :style=\"[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]\"\r\n          v-for=\"item in state.leftGoodsList\"\r\n          :key=\"item.id\"\r\n        >\r\n          <s-goods-column\r\n            class=\"goods-md-box\"\r\n            size=\"md\"\r\n            :goodsFields=\"data.fields\"\r\n            :tagStyle=\"data.badge\"\r\n            :data=\"item\"\r\n            :titleColor=\"data.fields.name?.color\"\r\n            :subTitleColor=\"data.fields.introduction.color\"\r\n            :topRadius=\"data.borderRadiusTop\"\r\n            :bottomRadius=\"data.borderRadiusBottom\"\r\n            :titleWidth=\"330 - marginLeft - marginRight\"\r\n            @click=\"sheep.$router.go('/modules/mall/goods/index', { id: item.id })\"\r\n            @getHeight=\"calculateGoodsColumn($event, 'left')\"\r\n          >\r\n            <!-- 购买按钮 -->\r\n            <template v-slot:cart>\r\n              <button class=\"ss-reset-button cart-btn\" :style=\"[buyStyle]\">\r\n                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}\r\n              </button>\r\n            </template>\r\n          </s-goods-column>\r\n        </view>\r\n      </view>\r\n      <view class=\"goods-list-box\">\r\n        <view\r\n          class=\"right-list\"\r\n          :style=\"[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]\"\r\n          v-for=\"item in state.rightGoodsList\"\r\n          :key=\"item.id\"\r\n        >\r\n          <s-goods-column\r\n            class=\"goods-md-box\"\r\n            size=\"md\"\r\n            :goodsFields=\"data.fields\"\r\n            :tagStyle=\"data.badge\"\r\n            :data=\"item\"\r\n            :titleColor=\"data.fields.name?.color\"\r\n            :subTitleColor=\"data.fields.introduction.color\"\r\n            :topRadius=\"data.borderRadiusTop\"\r\n            :bottomRadius=\"data.borderRadiusBottom\"\r\n            :titleWidth=\"330 - marginLeft - marginRight\"\r\n            @click=\"sheep.$router.go('/modules/mall/goods/index', { id: item.id })\"\r\n            @getHeight=\"calculateGoodsColumn($event, 'right')\"\r\n          >\r\n            <!-- 购买按钮 -->\r\n            <template v-slot:cart>\r\n              <button class=\"ss-reset-button cart-btn\" :style=\"[buyStyle]\">\r\n                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}\r\n              </button>\r\n            </template>\r\n          </s-goods-column>\r\n        </view>\r\n      </view>\r\n    </view>\r\n\r\n    <!-- 布局3. 单列小图（左图，右内容） -->\r\n    <view\r\n      v-if=\"layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length\"\r\n      class=\"goods-lg-box\"\r\n    >\r\n      <view\r\n        class=\"goods-box\"\r\n        :style=\"[{ marginBottom: data.space + 'px' }]\"\r\n        v-for=\"item in state.goodsList\"\r\n        :key=\"item.id\"\r\n      >\r\n        <s-goods-column\r\n          class=\"goods-card\"\r\n          size=\"lg\"\r\n          :goodsFields=\"data.fields\"\r\n          :data=\"item\"\r\n          :tagStyle=\"data.badge\"\r\n          :titleColor=\"data.fields.name?.color\"\r\n          :subTitleColor=\"data.fields.introduction.color\"\r\n          :topRadius=\"data.borderRadiusTop\"\r\n          :bottomRadius=\"data.borderRadiusBottom\"\r\n          @tap=\"sheep.$router.go('/modules/mall/goods/index', { id: item.id })\"\r\n        >\r\n          <!-- 购买按钮 -->\r\n          <template v-slot:cart>\r\n            <button class=\"ss-reset-button cart-btn\" :style=\"[buyStyle]\">\r\n              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}\r\n            </button>\r\n          </template>\r\n        </s-goods-column>\r\n      </view>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 商品卡片\r\n */\r\nimport { computed, reactive, onMounted } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport SpuApi from '@/sheep/api/product/spu'\r\n\r\n// 布局类型\r\nconst LayoutTypeEnum = {\r\n  // 单列大图\r\n  ONE_COL_BIG_IMG: 'oneColBigImg',\r\n  // 双列\r\n  TWO_COL: 'twoCol',\r\n  // 单列小图\r\n  ONE_COL_SMALL_IMG: 'oneColSmallImg',\r\n}\r\n\r\nconst state = reactive({\r\n  goodsList: [],\r\n  leftGoodsList: [],\r\n  rightGoodsList: [],\r\n})\r\nconst props = defineProps({\r\n  data: {\r\n    type: Object,\r\n    default() {},\r\n  },\r\n  styles: {\r\n    type: Object,\r\n    default() {},\r\n  },\r\n})\r\n\r\nconst { layoutType, btnBuy, spuIds } = props.data ?? {}\r\nconst { marginLeft, marginRight } = props.styles ?? {}\r\n\r\n// 购买按钮样式\r\nconst buyStyle = computed(() => {\r\n  if (btnBuy.type === 'text') {\r\n    // 文字按钮：线性渐变背景颜色\r\n    return {\r\n      background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,\r\n    }\r\n  }\r\n  if (btnBuy.type === 'img') {\r\n    // 图片按钮\r\n    return {\r\n      width: '54rpx',\r\n      height: '54rpx',\r\n      background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,\r\n      backgroundSize: '100% 100%',\r\n    }\r\n  }\r\n})\r\n\r\n// region 商品瀑布流布局\r\n// 下一个要处理的商品索引\r\nlet count = 0\r\n// 左列的高度\r\nlet leftHeight = 0\r\n// 右列的高度\r\nlet rightHeight = 0\r\n\r\n/**\r\n * 计算商品在左列还是右列\r\n * @param height 商品的高度\r\n * @param where 添加到哪一列\r\n */\r\nfunction calculateGoodsColumn(height = 0, where = 'left') {\r\n  // 处理完\r\n  if (!state.goodsList[count]) return\r\n  // 增加列的高度\r\n  if (where === 'left') leftHeight += height\r\n  if (where === 'right') rightHeight += height\r\n  // 添加到矮的一列\r\n  if (leftHeight <= rightHeight) {\r\n    state.leftGoodsList.push(state.goodsList[count])\r\n  } else {\r\n    state.rightGoodsList.push(state.goodsList[count])\r\n  }\r\n  // 计数\r\n  count++\r\n}\r\n// endregion\r\n\r\n/**\r\n * 根据商品编号列表，获取商品列表\r\n * @param ids 商品编号列表\r\n * @return {Promise<undefined>} 商品列表\r\n */\r\nasync function getGoodsListByIds(ids) {\r\n  const { data } = await SpuApi.getSpuListByIds(ids)\r\n  return data\r\n}\r\n\r\n// 初始化\r\nonMounted(async () => {\r\n  // 加载商品列表\r\n  state.goodsList = await getGoodsListByIds(spuIds.join(','))\r\n  // 只有双列布局时需要\r\n  if (layoutType === LayoutTypeEnum.TWO_COL) {\r\n    // 分列\r\n    calculateGoodsColumn()\r\n  }\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.goods-md-wrap {\r\n  width: 100%;\r\n}\r\n\r\n.goods-list-box {\r\n  box-sizing: border-box;\r\n  width: 50%;\r\n  .left-list {\r\n    &:nth-last-child(1) {\r\n      margin-bottom: 0 !important;\r\n    }\r\n  }\r\n  .right-list {\r\n    &:nth-last-child(1) {\r\n      margin-bottom: 0 !important;\r\n    }\r\n  }\r\n}\r\n\r\n.goods-box {\r\n  &:nth-last-of-type(1) {\r\n    margin-bottom: 0 !important;\r\n  }\r\n}\r\n\r\n.goods-md-box,\r\n.goods-sl-box,\r\n.goods-lg-box {\r\n  position: relative;\r\n\r\n  .cart-btn {\r\n    position: absolute;\r\n    right: 20rpx;\r\n    bottom: 18rpx;\r\n    z-index: 11;\r\n    height: 50rpx;\r\n    padding: 0 20rpx;\r\n    font-size: 24rpx;\r\n    line-height: 50rpx;\r\n    color: #fff;\r\n    border-radius: 25rpx;\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/components/s-goods-card/s-goods-card.vue'\nwx.createComponent(Component)"],"names":["reactive","computed","sheep","SpuApi","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoJA,UAAM,iBAAiB;AAAA;AAAA,MAErB,iBAAiB;AAAA;AAAA,MAEjB,SAAS;AAAA;AAAA,MAET,mBAAmB;AAAA,IACrB;AAEA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,WAAW,CAAE;AAAA,MACb,eAAe,CAAE;AAAA,MACjB,gBAAgB,CAAE;AAAA,IACpB,CAAC;AACD,UAAM,QAAQ;AAWd,UAAM,EAAE,YAAY,QAAQ,OAAQ,KAAG,WAAM,SAAN,YAAc,CAAE;AACvD,UAAM,EAAE,YAAY,YAAW,KAAK,WAAM,WAAN,YAAgB,CAAE;AAGtD,UAAM,WAAWC,cAAQ,SAAC,MAAM;AAC9B,UAAI,OAAO,SAAS,QAAQ;AAE1B,eAAO;AAAA,UACL,YAAY,6BAA6B,OAAO,YAAY,KAAK,OAAO,UAAU;AAAA,QACnF;AAAA,MACF;AACD,UAAI,OAAO,SAAS,OAAO;AAEzB,eAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YAAY,OAAOC,kBAAM,KAAK,IAAI,OAAO,MAAM,CAAC;AAAA,UAChD,gBAAgB;AAAA,QACjB;AAAA,MACF;AAAA,IACH,CAAC;AAID,QAAI,QAAQ;AAEZ,QAAI,aAAa;AAEjB,QAAI,cAAc;AAOlB,aAAS,qBAAqB,SAAS,GAAG,QAAQ,QAAQ;AAExD,UAAI,CAAC,MAAM,UAAU,KAAK;AAAG;AAE7B,UAAI,UAAU;AAAQ,sBAAc;AACpC,UAAI,UAAU;AAAS,uBAAe;AAEtC,UAAI,cAAc,aAAa;AAC7B,cAAM,cAAc,KAAK,MAAM,UAAU,KAAK,CAAC;AAAA,MACnD,OAAS;AACL,cAAM,eAAe,KAAK,MAAM,UAAU,KAAK,CAAC;AAAA,MACjD;AAED;AAAA,IACF;AAQA,aAAe,kBAAkB,KAAK;AAAA;AACpC,cAAM,EAAE,KAAM,IAAG,MAAMC,sBAAAA,OAAO,gBAAgB,GAAG;AACjD,eAAO;AAAA,MACT;AAAA;AAGAC,kBAAAA,UAAU,MAAY;AAEpB,YAAM,YAAY,MAAM,kBAAkB,OAAO,KAAK,GAAG,CAAC;AAE1D,UAAI,eAAe,eAAe,SAAS;AAEzC,6BAAsB;AAAA,MACvB;AAAA,IACH,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnPD,GAAG,gBAAgB,SAAS;"}