1 line
7.6 KiB
Plaintext
1 line
7.6 KiB
Plaintext
|
{"version":3,"file":"s-coupon-block.js","sources":["../../../../../../src/sheep/components/s-coupon-block/s-coupon-block.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3MtY291cG9uLWJsb2NrL3MtY291cG9uLWJsb2NrLnZ1ZQ"],"sourcesContent":["<!-- 装修营销组件：优惠券 -->\r\n<template>\r\n <scroll-view\r\n class=\"scroll-box\"\r\n scroll-x\r\n scroll-anchoring\r\n :style=\"[bgStyle, { marginLeft: `${data.space}px` }]\"\r\n >\r\n <view\r\n class=\"coupon-box ss-flex\"\r\n :style=\"couponList.length === 2 ? couponBoxStyleTwo : couponBoxStyleNormal\"\r\n >\r\n <view\r\n class=\"coupon-item\"\r\n :style=\"[couponBg, { marginLeft: `${data.space}px` }]\"\r\n v-for=\"(item, index) in couponList\"\r\n :key=\"index\"\r\n >\r\n <su-coupon\r\n :size=\"SIZE_LIST[columns - 1]\"\r\n :textColor=\"data.textColor\"\r\n background=\"\"\r\n :couponId=\"item.id\"\r\n :title=\"item.name\"\r\n :type=\"formatCouponDiscountType(item)\"\r\n :value=\"formatCouponDiscountValue(item)\"\r\n :sellBy=\"formatValidityType(item)\"\r\n >\r\n <template v-slot:btn>\r\n <!-- 两列时，领取按钮坚排 -->\r\n <button\r\n v-if=\"columns === 2\"\r\n @click.stop=\"onGetCoupon(item.id)\"\r\n class=\"ss-reset-button card-btn vertical\"\r\n :style=\"[btnStyles]\"\r\n >\r\n <view class=\"btn-text\">立即领取</view>\r\n </button>\r\n <button\r\n v-else\r\n class=\"ss-reset-button card-btn\"\r\n :style=\"[btnStyles]\"\r\n @click.stop=\"onGetCoupon(item.id)\"\r\n >\r\n 立即领取\r\n </button>\r\n </template>\r\n </su-coupon>\r\n </view>\r\n </view>\r\n </scroll-view>\r\n</template>\r\n\r\n<script setup>\r\nimport sheep from '@/sheep'\r\nimport CouponApi from '@/sheep/api/promotion/coupon'\r\nimport { ref, onMounted, computed } from 'vue'\r\nimport { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/sheep/util/const'\r\nimport { floatToFixed2, formatDate } from '@/sheep/util'\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\nconst { columns, button } = props.data\r\nconst SIZE_LIST = ['lg', 'md', 'xs']\r\nconst couponBg = {\r\n background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,\r\n}\r\nconst btnStyles = {\r\n background: button.bgColor,\r\n color: button.color,\r\n}\r\n// 两列优惠券时的排版方式\r\nconst couponBoxStyleNormal = {\r\n display: 'flex',\r\n 'justify-content': 'space-between',\r\n}\r\n// 非两列优惠券时的排版方式\r\nconst couponBoxStyleTwo = {\r\n display: 'flex',\r\n 'justify-content': 'space-around',\r\n}\r\n// 设置背景样式\r\nconst bgStyle = computed(() => {\r\n // 直接从 props.styles 解构\r\n const { bgType, bgImg, bgColor } = props.styles\r\n\r\n // 根据 bgType 返回相应的样式\r\n return {\r\n background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,\r\n }\r\n})\r\n// 格式化【折扣类型】\r\nconst formatCouponDiscountType = (coupon) => {\r\n if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {\r\n return 'reduce'\r\n }\r\n if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {\r\n return 'percent'\r\n }\r\n return `未知【${coupon.discountType}】`\r\n}\r\n\r\n// 格式化【折扣】\r\nconst formatCouponDiscountValue = (coupon) => {\r\n if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {\r\n return floatToFixed2(coupon.discountPrice)\r\n }\r\n if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {\r\n return coupon.discountPercent\r\n
|