1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"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;"} |