营销：适配商城装修组件【优惠券】

src/components/DiyEditor/components/mobile/CouponCard/component.tsx

@@ -0,0 +1,78 @@
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
+import { floatToFixed2 } from '@/utils'
+import { formatDate } from '@/utils/formatTime'
+
+// 优惠值
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: CouponTemplateApi.CouponTemplateVO
+    }
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    // 折扣
+    let value = coupon.discountPercent + ''
+    let suffix = ' 折'
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice)
+      suffix = ' 元'
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    )
+  }
+})
+
+// 优惠描述
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: CouponTemplateApi.CouponTemplateVO
+    }
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    // 使用条件
+    const useCondition = coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : ''
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${coupon.discountPercent}折`
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    )
+  }
+})
+
+// 有效期
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: CouponTemplateApi.CouponTemplateVO
+    }
+  },
+  setup(props) {
+    const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD'
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
+    return () => <div>{text}</div>
+  }
+})

src/components/DiyEditor/components/mobile/CouponCard/config.ts

@@ -0,0 +1,47 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 商品卡片属性 */
+export interface CouponCardProperty {
+  // 列数
+  columns: number
+  // 背景图
+  bgImg: string
+  // 文字颜色
+  textColor: string
+  // 按钮样式
+  button: {
+    // 颜色
+    color: string
+    // 背景颜色
+    bgColor: string
+  }
+  // 间距
+  space: number
+  // 优惠券编号列表
+  couponIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'CouponCard',
+  name: '优惠券',
+  icon: 'ep:ticket',
+  property: {
+    columns: 1,
+    bgImg: '',
+    textColor: '#E9B461',
+    button: {
+      color: '#434343',
+      bgColor: ''
+    },
+    space: 0,
+    couponIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<CouponCardProperty>

src/components/DiyEditor/components/mobile/CouponCard/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+    <div
+      class="flex flex-row text-12px"
+      :style="{
+        gap: `${property.space}px`,
+        width: scrollbarWidth
+      }"
+    >
+      <div
+        class="box-content"
+        :style="{
+          background: property.bgImg
+            ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
+            : '#fff',
+          width: `${couponWidth}px`,
+          color: property.textColor
+        }"
+        v-for="(coupon, index) in couponList"
+        :key="index"
+      >
+        <!-- 布局1：1列-->
+        <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
+          <div class="flex flex-col justify-evenly gap-4px">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <!-- 优惠描述 -->
+            <CouponDiscountDesc :coupon="coupon" />
+            <!-- 有效期 -->
+            <CouponValidTerm :coupon="coupon" />
+          </div>
+          <div class="flex flex-col justify-evenly">
+            <div
+              class="rounded-20px p-x-8px p-y-2px"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局2：2列-->
+        <div
+          v-else-if="property.columns === 2"
+          class="m-l-16px flex flex-row justify-between p-8px"
+        >
+          <div class="flex flex-col justify-evenly gap-4px">
+            <!-- 优惠值 -->
+            <CouponDiscount :coupon="coupon" />
+            <div>{{ coupon.name }}</div>
+          </div>
+          <div class="flex flex-col">
+            <div
+              class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局3：3列-->
+        <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
+          <!-- 优惠值 -->
+          <CouponDiscount :coupon="coupon" />
+          <div>{{ coupon.name }}</div>
+          <div
+            class="rounded-20px p-x-8px p-y-2px"
+            :style="{
+              color: property.button.color,
+              background: property.button.bgColor
+            }"
+          >
+            立即领取
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponDiscount } from './component'
+import {
+  CouponDiscountDesc,
+  CouponValidTerm
+} from '@/components/DiyEditor/components/mobile/CouponCard/component'
+
+/** 商品卡片 */
+defineOptions({ name: 'CouponCard' })
+// 定义属性
+const props = defineProps<{ property: CouponCardProperty }>()
+// 商品列表
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+watch(
+  () => props.property.couponIds,
+  async () => {
+    if (props.property.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 手机宽度
+const phoneWidth = ref(375)
+// 容器
+const containerRef = ref()
+// 滚动条宽度
+const scrollbarWidth = ref('100%')
+// 优惠券的宽度
+const couponWidth = ref(375)
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, couponList.value.length],
+  () => {
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    couponWidth.value =
+      (phoneWidth.value * 0.95 - props.property.space * (props.property.columns - 1)) /
+      props.property.columns
+    // 显示滚动条
+    scrollbarWidth.value = `${
+      couponWidth.value * couponList.value.length +
+      props.property.space * (couponList.value.length - 1)
+    }px`
+  },
+  { immediate: true, deep: true }
+)
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+})
+</script>
+<style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/CouponCard/property.vue

@@ -0,0 +1,104 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="优惠券列表" class="property-group" shadow="never">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <el-text size="large" truncated>{{ coupon.name }}</el-text>
+          <el-text type="info" truncated>
+            <span v-if="coupon.usePrice > 0">满{{ floatToFixed2(coupon.usePrice) }}元，</span>
+            <span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type">
+              减{{ floatToFixed2(coupon.discountPrice) }}元
+            </span>
+            <span v-else> 打{{ coupon.discountPercent }}折 </span>
+          </el-text>
+        </div>
+        <el-form-item label-width="0">
+          <el-button @click="handleAddCoupon" type="primary" plain class="m-t-8px w-full">
+            <Icon icon="ep:plus" class="mr-5px" /> 添加
+          </el-button>
+        </el-form-item>
+      </el-card>
+      <el-card header="优惠券样式" class="property-group" shadow="never">
+        <el-form-item label="列数" prop="type">
+          <el-radio-group v-model="formData.columns">
+            <el-tooltip class="item" content="一列" placement="bottom">
+              <el-radio-button :label="1">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="二列" placement="bottom">
+              <el-radio-button :label="2">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button :label="3">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="背景图片" prop="bgImg">
+          <UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
+        </el-form-item>
+        <el-form-item label="文字颜色" prop="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </el-form-item>
+        <el-form-item label="按钮背景" prop="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </el-form-item>
+        <el-form-item label="按钮文字" prop="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </el-form-item>
+        <el-form-item label="间隔" prop="space">
+          <el-slider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </el-form-item>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+  <!-- 优惠券选择 -->
+  <CouponSelect ref="couponSelectDialog" v-model:multiple-selection="couponList" />
+</template>
+
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { floatToFixed2 } from '@/utils'
+import { PromotionDiscountTypeEnum } from '@/utils/constants'
+import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
+
+// 优惠券卡片属性面板
+defineOptions({ name: 'CouponCardProperty' })
+
+const props = defineProps<{ modelValue: CouponCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+// 优惠券列表
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+const couponSelectDialog = ref()
+// 添加优惠券
+const handleAddCoupon = () => {
+  couponSelectDialog.value.open()
+}
+watch(
+  () => couponList.value,
+  () => {
+    formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/components/mobile/ProductCard/config.ts

@@ -62,7 +62,7 @@ export interface ProductCardFieldProperty {
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'system-uicons:carousel',
+  icon: 'fluent:text-column-two-left-24-filled',
   property: {
     layoutType: 'oneColBigImg',
     fields: {

src/components/DiyEditor/components/mobile/ProductList/config.ts

@@ -41,7 +41,7 @@ export interface ProductListFieldProperty {
 export const component = {
   id: 'ProductList',
   name: '商品栏',
-  icon: 'system-uicons:carousel',
+  icon: 'fluent:text-column-two-24-filled',
   property: {
     layoutType: 'twoCol',
     fields: {

src/components/DiyEditor/components/mobile/ProductList/index.vue

@@ -1,13 +1,13 @@
 <template>
   <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
-   <!-- 商品网格 -->
+    <!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
       :style="{
         gridGap: `${property.space}px`,
         gridTemplateColumns,
-        width: scrollbarWidth,
-       }"
+        width: scrollbarWidth
+      }"
     >
       <!-- 商品 -->
       <div
@@ -63,11 +63,11 @@
   </el-scrollbar>
 </template>
 <script setup lang="ts">
-import { ProductListProperty } from "./config"
-import * as ProductSpuApi from "@/api/mall/product/spu"
+import { ProductListProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
 
 /** 商品卡片 */
-defineOptions({ name: "ProductList" })
+defineOptions({ name: 'ProductList' })
 // 定义属性
 const props = defineProps<{ property: ProductListProperty }>()
 // 商品列表
@@ -89,39 +89,42 @@ const containerRef = ref()
 // 商品的列数
 const columns = ref(2)
 // 滚动条宽度
-const scrollbarWidth = ref("100%")
+const scrollbarWidth = ref('100%')
 // 商品图大小
-const imageSize = ref("0")
+const imageSize = ref('0')
 // 商品网络列数
-const gridTemplateColumns = ref("")
+const gridTemplateColumns = ref('')
 // 计算布局参数
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
     // 计算列数
-    columns.value = props.property.layoutType === "twoCol" ? 2 : 3
-    // 提取手机宽度
+    columns.value = props.property.layoutType === 'twoCol' ? 2 : 3
     // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
-    const productWidth = (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
     // 商品图布局：2列时，左右布局 3列时，上下布局
-    imageSize.value = columns.value === 2 ? "64px" : `${productWidth}px`
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
     // 根据布局类型，计算行数、列数
-    if (props.property.layoutType === "horizSwiper") {
+    if (props.property.layoutType === 'horizSwiper') {
       // 单行显示
       gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`
       // 显示滚动条
-      scrollbarWidth.value = `${productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1)}px`
+      scrollbarWidth.value = `${
+        productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1)
+      }px`
     } else {
       // 指定列数
       gridTemplateColumns.value = `repeat(${columns.value}, auto)`
       // 不滚动
-      scrollbarWidth.value = "100%"
+      scrollbarWidth.value = '100%'
     }
   },
   { immediate: true, deep: true }
 )
 onMounted(() => {
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
 })
 </script>
 

src/components/DiyEditor/util.ts

@@ -111,7 +111,11 @@ export const PAGE_LIBS = [
   {
     name: '会员组件',
     extended: true,
-    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
   },
-  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+  {
+    name: '营销组件',
+    extended: true,
+    components: ['CombinationCard', 'SeckillCard', 'PointCard', 'CouponCard']
+  }
 ] as DiyComponentLibrary[]