feat: 初始化项目配置和样式- 添加项目环境变量配置文件 (.env)

- 创建代码忽略文件列表 (.gitignore) - 设置代码格式化规则 (.prettierrc)- 添加各种样式文件，包括背景、边框、按钮、卡片等组件样式 - 创建暗黑主题样式文件 - 添加表单和代码样式文件
2025-09-12 09:53:45 +08:00
commit b91b273686
582 changed files with 90552 additions and 0 deletions
@@ -0,0 +1,192 @@
+<!-- 装修营销组件：优惠券  -->
+<template>
+  <scroll-view
+    class="scroll-box"
+    scroll-x
+    scroll-anchoring
+    :style="[bgStyle, { marginLeft: `${data.space}px` }]"
+  >
+    <view
+      class="coupon-box ss-flex"
+      :style="couponList.length === 2 ? couponBoxStyleTwo : couponBoxStyleNormal"
+    >
+      <view
+        class="coupon-item"
+        :style="[couponBg, { marginLeft: `${data.space}px` }]"
+        v-for="(item, index) in couponList"
+        :key="index"
+      >
+        <su-coupon
+          :size="SIZE_LIST[columns - 1]"
+          :textColor="data.textColor"
+          background=""
+          :couponId="item.id"
+          :title="formatCouponTitle(item)"
+          :type="formatCouponDiscountType(item)"
+          :value="formatCouponDiscountValue(item)"
+          :sellBy="formatValidityType(item)"
+          :surplus="item.totalCount === -1 ? -1 : item.totalCount - item.takeCount"
+        >
+          <template v-slot:btn>
+            <!-- 两列时，领取按钮坚排 -->
+            <button
+              v-if="columns === 2"
+              @click.stop="onGetCoupon(item.id)"
+              class="ss-reset-button card-btn vertical"
+              :style="[btnStyles]"
+            >
+              <view class="btn-text">立即领取</view>
+            </button>
+            <button
+              v-else
+              class="ss-reset-button card-btn"
+              :style="[btnStyles]"
+              @click.stop="onGetCoupon(item.id)"
+            >
+              立即领取
+            </button>
+          </template>
+        </su-coupon>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+  import sheep from '@/sheep';
+  import CouponApi from '@/sheep/api/promotion/coupon';
+  import { ref, onMounted, computed } from 'vue';
+  import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/sheep/helper/const';
+  import { floatToFixed2, formatDate } from '@/sheep/helper/utils';
+  import { formatDiscountPercent } from '@/sheep/hooks/useGoods';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const { columns, button } = props.data;
+  const SIZE_LIST = ['lg', 'md', 'xs'];
+  const couponBg = {
+    background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
+  };
+  const btnStyles = {
+    background: button.bgColor,
+    color: button.color,
+  };
+  // 两列优惠券时的排版方式
+  const couponBoxStyleNormal = {
+    display: 'flex',
+    'justify-content': 'space-between',
+  };
+  // 非两列优惠券时的排版方式
+  const couponBoxStyleTwo = {
+    display: 'flex',
+    'justify-content': 'space-around',
+  };
+  // 设置背景样式
+  const bgStyle = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles;
+
+    // 根据 bgType 返回相应的样式
+    return {
+      background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
+    };
+  });
+  // 格式化【折扣类型】
+  const formatCouponDiscountType = (coupon) => {
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return 'reduce';
+    }
+    if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return 'percent';
+    }
+    return `未知【${coupon.discountType}】`;
+  };
+
+  // 格式化【折扣】
+  const formatCouponDiscountValue = (coupon) => {
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      return floatToFixed2(coupon.discountPrice);
+    }
+    if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+      return formatDiscountPercent(coupon.discountPercent);
+    }
+    return `未知【${coupon.discountType}】`;
+  };
+
+  // 格式化【有效期限】
+  const formatValidityType = (row) => {
+    if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+      return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`;
+    }
+    if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+      return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`;
+    }
+    return '未知【' + row.validityType + '】';
+  };
+
+  // 格式化【优惠券标题】
+  const formatCouponTitle = (coupon) => {
+    return `满${floatToFixed2(coupon.usePrice)}元${
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? ',减' + floatToFixed2(coupon.discountPrice) + '元'
+        : ',打' + formatDiscountPercent(coupon.discountPercent) + '折'
+    }`;
+  };
+
+  const couponList = ref([]);
+  // 立即领取优惠券
+  async function onGetCoupon(id) {
+    const { error, msg } = await CouponApi.takeCoupon(id);
+    if (error === 0) {
+      uni.showToast({
+        title: msg,
+        icon: 'none',
+      });
+      return;
+    }
+    await getCouponTemplateList();
+  }
+  const getCouponTemplateList = async () => {
+    const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+    couponList.value = data;
+  };
+  onMounted(() => {
+    getCouponTemplateList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .card-btn {
+    width: 140rpx;
+    height: 50rpx;
+    border-radius: 25rpx;
+    font-size: 24rpx;
+    line-height: 50rpx;
+
+    &.vertical {
+      width: 50rpx;
+      height: 140rpx;
+      margin: auto 20rpx auto 0;
+
+      .btn-text {
+        font-size: 24rpx;
+        text-align: center;
+        writing-mode: vertical-lr;
+      }
+    }
+  }
+
+  .coupon-item {
+    &:nth-of-type(1) {
+      margin-left: 0 !important;
+    }
+  }
+</style>