!18 商城装修

Merge pull request !18 from 疯狂的世界/master-vue3
2023-11-24 14:36:08 +00:00 · 2023-11-24 14:36:08 +00:00 · 6513b48429
parent e7b1834536 92e164747a
commit 6513b48429
9 changed files with 283 additions and 167 deletions
--- a/sheep/api/promotion/coupon.js
+++ b/sheep/api/promotion/coupon.js
@ -0,0 +1,12 @@
+import request from '@/sheep/request';
+
+export default {
+    // 获得优惠劵模板列表
+    getCouponTemplateListByIds: (ids) => {
+        return request({
+            url: '/app-api/promotion/coupon-template/list-by-ids',
+            method: 'GET',
+            params: { ids }
+        });
+    }
+}
--- a/sheep/components/s-block-item/s-block-item.vue
+++ b/sheep/components/s-block-item/s-block-item.vue
@ -31,7 +31,7 @@
    <!-- 商品组件：商品卡片 -->
    <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
    <!-- 商品组件：商品栏 -->
-    <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
+    <s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />

    <!-- 营销组件：拼团 -->
    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
@ -42,7 +42,7 @@
    <!-- 营销组件：小程序直播 -->
    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
    <!-- 营销组件：优惠券 -->
-    <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles" />
+    <s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />

    <!-- 会员组件：会员卡片 -->
    <s-user-card v-if="type === 'userCard'" />
--- a/sheep/components/s-coupon-block/s-coupon-block.vue
+++ b/sheep/components/s-coupon-block/s-coupon-block.vue
@ -1,126 +1,54 @@
 <!-- 优惠券组  -->
 <template>
-  <view>
-    <!-- 样式1 -->
-    <view class="lg-coupon-wrap" v-if="mode == 1">
-      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
-        <view class="coupon-box ss-flex">
-          <view
-            class="coupon-item"
-            :style="[couponBg, { marginLeft: data.space + 'px' }]"
-            v-for="(item, index) in couponList"
-            :key="index"
-          >
-            <su-coupon
-              size="lg"
-              :textColor="data.fill.color"
-              background=""
-              :couponId="item.id"
-              :title="item.amount_text"
-              :value="item.amount"
-              :surplus="item.stock"
-              :type="item.type"
-              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
-                0,
-                10,
-              )}`"
+  <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+    <view class="coupon-box ss-flex">
+      <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="item.name"
+          :type="formatCouponDiscountType(item)"
+          :value="formatCouponDiscountValue(item)"
+          :sellBy="formatValidityType(item)"
+        >
+          <template v-slot:btn>
+            <!-- 两列时，领取按钮坚排 -->
+            <button
+              v-if="columns === 2"
+              @click.stop="onGetCoupon(item.id)"
+              class="ss-reset-button card-btn vertical"
+              :style="[btnStyles]"
            >
-              <template v-slot:btn>
-                <button
-                  class="ss-reset-button card-btn"
-                  :style="[btnStyles]"
-                  @click.stop="onGetCoupon(item.id)"
-                >
-                  {{ item.get_status_text }}
-                </button>
-              </template>
-            </su-coupon>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-    <!-- 样式2 -->
-    <view class="md-coupon-wrap" v-if="mode == 2">
-      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
-        <view class="coupon-box ss-flex">
-          <view
-            class="coupon-item"
-            :style="[couponBg, { marginLeft: data.space + 'px' }]"
-            v-for="(item, index) in couponList"
-            :key="index"
-          >
-            <su-coupon
-              size="md"
-              :textColor="data.fill.color"
-              background=""
-              :title="item.amount_text"
-              :value="item.amount"
-              :surplus="item.stock"
-              :couponId="item.id"
-              :type="item.type"
-              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
-                0,
-                10,
-              )}`"
+              <view class="btn-text">立即领取</view>
+            </button>
+            <button
+              v-else
+              class="ss-reset-button card-btn"
+              :style="[btnStyles]"
+              @click.stop="onGetCoupon(item.id)"
            >
-              <template v-slot:btn>
-                <button
-                  @click.stop="onGetCoupon(item.id)"
-                  class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
-                  :style="[btnStyles]"
-                >
-                  <view class="btn-text">{{ item.get_status_text }}</view>
-                </button>
-              </template>
-            </su-coupon>
-          </view>
-        </view>
-      </scroll-view>
+              立即领取
+            </button>
+          </template>
+        </su-coupon>
+      </view>
    </view>
-    <!-- 样式3 -->
-    <view class="xs-coupon-wrap" v-if="mode == 3">
-      <scroll-view class="scroll-box" scroll-x scroll-anchoring>
-        <view class="coupon-box ss-flex">
-          <view
-            class="coupon-item"
-            :style="[couponBg, { marginLeft: data.space + 'px' }]"
-            v-for="(item, index) in couponList"
-            :key="index"
-          >
-            <su-coupon
-              size="xs"
-              :textColor="data.fill.color"
-              background=""
-              :title="item.amount_text"
-              :value="item.amount"
-              :surplus="item.stock"
-              :couponId="item.id"
-              :type="item.type"
-              :sellBy="`${item.get_start_time.substring(0, 10)} 至 ${item.get_end_time.substring(
-                0,
-                10,
-              )}`"
-            >
-              <template v-slot:btn>
-                <button
-                  class="ss-reset-button card-btn"
-                  :style="[btnStyles]"
-                  @click.stop="onGetCoupon(item.id)"
-                >
-                  {{ item.get_status_text }}
-                </button>
-              </template>
-            </su-coupon>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-  </view>
+  </scroll-view>
 </template>

 <script setup>
  import sheep from '@/sheep';
+  import TemplateApi from '@/sheep/api/promotion/coupon';
  import { ref, onMounted } from 'vue';
+  import {CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum} from "@/sheep/util/const";
+  import {floatToFixed2, formatDate} from "@/sheep/util";

  const props = defineProps({
    data: {
@ -132,14 +60,48 @@
      default: () => ({}),
    },
  });
-  const { mode, button } = props.data;
+  const { columns, button } = props.data;
+  const SIZE_LIST = ['lg', 'md', 'xs']
  const couponBg = {
-    background: `url(${sheep.$url.cdn(props.data.fill.bgImage)}) no-repeat top center / 100% 100%`,
+    background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
  };
  const btnStyles = {
    background: button.bgColor,
    color: button.color,
  };
+
+  // 格式化【折扣类型】
+  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 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 couponList = ref([]);
  //立即领取优惠券
  async function onGetCoupon(id) {
@ -149,15 +111,16 @@
        title: msg,
        icon: 'none',
      });
-    } else {
-      let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
-      couponList.value = [...data.data];
+      return
    }
+    await getCouponTemplateList()
  }
-  onMounted(async () => {
-    let { data } = await sheep.$api.coupon.list({ ids: props.data.couponIds.join(',') });
-    // couponList.value = [...data.data, ...data.data, ...data.data, ...data.data];
-    couponList.value = [...data.data];
+  const getCouponTemplateList = async () => {
+    const { data } = await TemplateApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+    couponList.value = data;
+  }
+  onMounted(() => {
+    getCouponTemplateList()
  });
 </script>

@ -168,25 +131,21 @@
    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;
    }
  }
-  .md-coupon-wrap {
-    .card-btn {
-      width: 50rpx;
-      height: 140rpx;
-      margin: auto 0;
-      margin-right: 20rpx;
-
-      .btn-text {
-        font-size: 24rpx;
-        text-align: center;
-        writing-mode: vertical-lr;
-        writing-mode: tb-lr;
-      }
-    }
-  }
 </style>
--- a/sheep/components/s-goods-column/s-goods-column.vue
+++ b/sheep/components/s-goods-column/s-goods-column.vue
@ -11,7 +11,7 @@
      <view v-if="tagStyle.show" class="tag-icon-box">
        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
      </view>
-      <image class="xs-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFit"></image>
+      <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
      <view
        v-if="goodsFields.title?.show || goodsFields.price?.show"
        class="xs-goods-content ss-flex-col ss-row-around"
@ -39,7 +39,7 @@
      <view v-if="tagStyle.show" class="tag-icon-box">
        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
      </view>
-      <image class="sm-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image>
+      <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>

      <view
        v-if="goodsFields.title?.show || goodsFields.price?.show"
@ -65,7 +65,7 @@
      <view v-if="tagStyle.show" class="tag-icon-box">
        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
      </view>
-      <image class="md-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="widthFix"></image>
+      <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
      <view
        class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
        :id="elId"
@ -141,7 +141,7 @@
      <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
        <view class="tag-icon">拼团</view>
      </view>
-      <image class="lg-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image>
+      <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
      <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
        <view>
          <view
@ -204,7 +204,7 @@
        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
      </view>

-      <image class="sl-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image>
+      <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>

      <view class="sl-goods-content">
        <view>
--- a/sheep/components/s-goods-shelves/s-goods-shelves.vue
+++ b/sheep/components/s-goods-shelves/s-goods-shelves.vue
@ -1,8 +1,8 @@
 <template>
  <view>
-    <!-- 1  两张图片并排 图片坐文案右 -->
+    <!-- 布局1. 两列商品，图片左文案右 -->
    <view
-      v-if="mode === 1"
+      v-if="layoutType === 'twoCol'"
      class="goods-xs-box ss-flex ss-flex-wrap"
      :style="[{ margin: '-' + data.space + 'rpx' }]"
    >
@ -19,10 +19,10 @@
        <s-goods-column
          class="goods-card"
          size="xs"
-          :goodsFields="goodsFields"
+          :goodsFields="productFields"
          :tagStyle="tagStyle"
          :data="item"
-          :titleColor="goodsFields.title?.color"
+          :titleColor="productFields.title?.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
          :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@ -30,9 +30,9 @@
        ></s-goods-column>
      </view>
    </view>
-    <!-- 2  三张商品卡片并排 图片上文案下 -->
+    <!-- 布局. 三列商品：图片上文案下 -->
    <view
-      v-if="mode === 2"
+      v-if="layoutType === 'threeCol'"
      class="goods-sm-box ss-flex ss-flex-wrap"
      :style="[{ margin: '-' + data.space + 'rpx' }]"
    >
@ -49,10 +49,10 @@
        <s-goods-column
          class="goods-card"
          size="sm"
-          :goodsFields="goodsFields"
+          :goodsFields="productFields"
          :tagStyle="tagStyle"
          :data="item"
-          :titleColor="goodsFields.title?.color"
+          :titleColor="productFields.title?.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@ -60,8 +60,8 @@
      </view>
    </view>

-    <!-- 3 商品卡片并排 轮播 -->
-    <view v-if="mode === 3" class="">
+    <!-- 布局3. 一行商品，水平滑动 -->
+    <view v-if="layoutType === 'horizSwiper'" class="">
      <scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
        <view class="goods-box ss-flex">
          <view
@ -73,10 +73,10 @@
            <s-goods-column
              class="goods-card"
              size="sm"
-              :goodsFields="goodsFields"
+              :goodsFields="productFields"
              :tagStyle="tagStyle"
              :data="item"
-              :titleColor="goodsFields.title?.color"
+              :titleColor="productFields.title?.color"
              :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
              @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
            ></s-goods-column>
@ -89,12 +89,11 @@

 <script setup>
  /**
-   * 商品栏s-goods-column
-   *
-   * @description style 1:横向两个，左图右内容 2：横向三个，上图下内容 3：左右滚动
+   * 商品栏
   */
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, computed } from 'vue';
  import sheep from '@/sheep';
+  import SpuApi from "@/sheep/api/product/spu";

  const props = defineProps({
    data: {
@ -106,15 +105,35 @@
      default() {},
    },
  });
-  const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data;
+  const { layoutType, tagStyle, spuIds } = props.data;
  let { marginLeft, marginRight } = props.styles;
  const goodsList = ref([]);
  onMounted(async () => {
-    if (goodsIds.length > 0) {
-      let { data } = await sheep.$api.goods.ids({ ids: goodsIds.join(',') });
+    if (spuIds.length > 0) {
+      let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
      goodsList.value = data;
    }
  });
+
+  // 商品字段配置，todo @owen 字段名称与服务端对齐，这里先转换，后期重构时再修改
+  const productFields = computed(()  => {
+    return {
+      title: props.data.fields.name,
+      subtitle: props.data.fields.introduction,
+      price: props.data.fields.price,
+      original_price: props.data.fields.marketPrice,
+      stock: props.data.fields.stock,
+      salesCount: props.data.fields.salesCount,
+    }
+  })
+
+  // 角标，todo @owen 规范命名，这里先转换，后期重构时再修改
+  const badge = computed(() => {
+    return {
+      show: props.data.badge.show,
+      src: props.data.badge.imgUrl,
+    }
+  })
 </script>

 <style lang="scss" scoped>
--- a/sheep/components/s-tabbar/s-tabbar.vue
+++ b/sheep/components/s-tabbar/s-tabbar.vue
@ -1,5 +1,5 @@
 <template>
-  <view class="u-page__item" v-if="tabbar?.items.length > 0">
+  <view class="u-page__item" v-if="tabbar?.items?.length > 0">
    <su-tabbar
      :value="path"
      :fixed="true"
--- a/sheep/ui/su-coupon/su-coupon.vue
+++ b/sheep/ui/su-coupon/su-coupon.vue
@ -43,7 +43,7 @@
        </view>
        <view class="ss-m-b-28">
          <view class="title-text ss-m-b-10">{{ props.title }}</view>
-          <view class="surplus-text">仅剩：{{ props.surplus }}张</view>
+          <view class="surplus-text" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
        </view>
      </view>
      <view class="card-right ss-flex ss-row-center">
@ -82,7 +82,7 @@
            {{ state.stateMap[props.state] }}
          </button>
        </slot>
-        <view class="surplus-text ss-m-t-24">仅剩：{{ props.surplus }}张</view>
+        <view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
      </view>
    </view>
  </view>
@ -159,7 +159,7 @@
    },
    surplus: {
      type: [Number, String],
-      default: 1000,
+      default: 0,
    },
    type: {
      type: String,
--- a/sheep/util/const.js
+++ b/sheep/util/const.js
@ -0,0 +1,47 @@
+// ========== MALL - 营销模块 ==========
+
+/**
+ * 优惠类型枚举
+ */
+export const PromotionDiscountTypeEnum = {
+    PRICE: {
+        type: 1,
+        name: '满减'
+    },
+    PERCENT: {
+        type: 2,
+        name: '折扣'
+    }
+}
+
+/**
+ * 优惠劵模板的有限期类型的枚举
+ */
+export const CouponTemplateValidityTypeEnum = {
+    DATE: {
+        type: 1,
+        name: '固定日期可用'
+    },
+    TERM: {
+        type: 2,
+        name: '领取之后可用'
+    }
+}
+
+/**
+ * 营销的商品范围枚举
+ */
+export const PromotionProductScopeEnum = {
+    ALL: {
+        scope: 1,
+        name: '通用劵'
+    },
+    SPU: {
+        scope: 2,
+        name: '商品劵'
+    },
+    CATEGORY: {
+        scope: 3,
+        name: '品类劵'
+    }
+}
--- a/sheep/util/index.js
+++ b/sheep/util/index.js
@ -0,0 +1,79 @@
+import dayjs from "dayjs";
+
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param {number | string | undefined} num 整数
+ * @return {number} 分数
+ */
+export const formatToFraction = (num) => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  return parseFloat((parsedNumber / 100).toFixed(2))
+}
+
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param {number | string | undefined} num 整数
+ * @return {string} 分数
+ */
+export const floatToFixed2 = (num) => {
+  let str = '0.00'
+  if (typeof num === 'undefined') {
+    return str
+  }
+  const f = formatToFraction(num)
+  const decimalPart = f.toString().split('.')[1]
+  const len = decimalPart ? decimalPart.length : 0
+  switch (len) {
+    case 0:
+      str = f.toString() + '.00'
+      break
+    case 1:
+      str = f.toString() + '.0'
+      break
+    case 2:
+      str = f.toString()
+      break
+  }
+  return str
+}
+
+/**
+ * 将一个分数转换为整数
+ *
+ * @param {number | string | undefined} num 分数
+ * @return {number} 整数
+ */
+export const convertToInteger = (num) => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  // TODO 分转元后还有小数则四舍五入
+  return Math.round(parsedNumber * 100)
+}
+
+
+
+/**
+ * 时间日期转换
+ * @param {dayjs.ConfigType} date 当前时间，new Date() 格式
+ * @param {string} format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
+ * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
+ * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
+ * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @returns {string} 返回拼接后的时间字符串
+ */
+export function formatDate(date, format) {
+  // 日期不存在，则返回空
+  if (!date) {
+    return ''
+  }
+  // 日期存在，则进行格式化
+  if (format === undefined) {
+    format = 'YYYY-MM-DD HH:mm:ss'
+  }
+  return dayjs(date).format(format)
+}