Merge pull request '更新自定义页面积分页面' (#37) from Branch_csl into master

Reviewed-on: #37

yudao-admin-vue3/.env.local

@@ -4,12 +4,13 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:6127'
+#VITE_BASE_URL='https://zysc.fjptzykj.com'
+VITE_BASE_URL='http://192.168.1.12:6127'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
 # 上传路径
-VITE_UPLOAD_URL='http://localhost:6127/admin-api/infra/file/upload'
+VITE_UPLOAD_URL='https://zysc.fjptzykj.com/admin-api/infra/file/upload'
 
 # 接口地址
 VITE_API_URL=/admin-api

yudao-admin-vue3/src/api/mall/statistics/member.ts

@@ -121,3 +121,10 @@ export const getMemberRegisterCountList = (
     params: { times: [formatDate(beginTime), formatDate(endTime)] }
   })
 }
+
+// 获取自定义页面数据
+export const getDiyPage = () => {
+  return request.get({
+    url: '/promotion/diy-page/getDiyPage'
+  })
+}

yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue

@@ -3,40 +3,29 @@
 		<div class="h-500px flex gap-8px">
 			<!-- 左侧分组列表 -->
 			<el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
-        <el-button
-          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
-          :key="groupIndex"
-          :class="[
+				<template v-for="(group, groupIndex) in APP_LINK_GROUP_LIST">
+				<el-button v-if="groupIndex<7"  :key="groupIndex"  :class="[
             'm-r-16px m-l-0px! justify-start! w-90px',
             { active: activeGroup === group.name }
-          ]"
-          ref="groupBtnRefs"
-          :text="activeGroup !== group.name"
-          :type="activeGroup === group.name ? 'primary' : 'default'"
-          @click="handleGroupSelected(group.name)"
-        >
+          ]" ref="groupBtnRefs" :text="activeGroup !== group.name"
+					:type="activeGroup === group.name ? 'primary' : 'default'" @click="handleGroupSelected(group.name)">
 						{{ group.name }}
 				</el-button>
+				</template>
 			</el-scrollbar>
 			<!-- 右侧链接列表 -->
 			<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
 				<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
-			<template  v-if="activeGroup == group.name">
+					<template v-if="activeGroup == group.name && groupIndex<7">
 						<!-- 分组标题 -->
 						<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
 						<!-- 链接列表 -->
-				<el-tooltip
-				  v-for="(appLink, appLinkIndex) in group.links"
-				  :key="appLinkIndex"
-				  :content="appLink.path"
-				  placement="bottom"
-				  :show-after="300"
-				>
-				  <el-button
-				    class="m-b-8px m-r-8px m-l-0px!"
+						<el-tooltip v-for="(appLink, appLinkIndex) in group.links" :key="appLinkIndex"
+							:content="appLink.path" placement="bottom" :show-after="300">
+							
+							<el-button class="m-b-8px m-r-8px m-l-0px!"
 								:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
-				    @click="handleAppLinkSelected(appLink)"
-				  >
+								@click="handleAppLinkSelected(appLink)">
 								{{ appLink.name }}
 							</el-button>
 						</el-tooltip>
@@ -53,26 +42,41 @@
 	</Dialog>
 	<Dialog v-model="detailSelectDialog.visible" title="" width="50%">
 		<el-form class="min-h-200px">
-      <el-form-item
-        label="选择分类"
-        v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST"
-      >
-        <ProductCategorySelect
-          v-model="detailSelectDialog.id"
-          :parent-id="0"
-          @update:model-value="handleProductCategorySelected"
-        />
+			<el-form-item label="选择分类" v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST">
+				<ProductCategorySelect v-model="detailSelectDialog.id" :parent-id="0"
+					@update:model-value="handleProductCategorySelected" />
 			</el-form-item>
 		</el-form>
 	</Dialog>
 </template>
 <script lang="ts" setup>
 	import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
+	import * as MemberStatisticsApi from '@/api/mall/statistics/member'
 	import { ButtonInstance, ScrollbarInstance } from 'element-plus'
 	import { split } from 'lodash-es'
 	import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
 	import { getUrlNumberValue } from '@/utils'
-
+	// 假设你要追加的数据是一个新的对象
+	const userComparison = ref([])
+	/** 查询会员用户数量对照卡片数据 */
+	const GetDiyPage = async () => {
+		userComparison.value = await MemberStatisticsApi.getDiyPage()
+		const arry = userComparison.value.map(link => {
+			return {
+				name: link.name,
+				path: `/pages/index/page?id=${link.id}`
+			};
+		});
+		userComparison.value = {
+			name: '自定义页面',
+			links:arry
+		}
+		APP_LINK_GROUP_LIST.push(userComparison.value);
+		// userComparison.value = APP_LINK_GROUP_LIST 
+		//  userComparison.value = APP_LINK_GROUP_LIST.push({qq:1})
+		console.log(APP_LINK_GROUP_LIST, 'userComparison.value')
+	}
+	GetDiyPage()
 	// APP 链接选择弹框
 	defineOptions({ name: 'AppLinkSelectDialog' })
 	// 选中的分组，默认选中第一个
@@ -107,6 +111,7 @@ defineExpose({ open })
 	const handleAppLinkSelected = (appLink : AppLink) => {
 		if (!isSameLink(appLink.path, activeAppLink.value.path)) {
 			activeAppLink.value = appLink
+			console.log(activeAppLink.value,activeAppLink.value.path,"activeAppLink.value")
 		}
 		switch (appLink.type) {
 			case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:

yudao-admin-vue3/src/components/AppLinkInput/data.ts

@@ -250,30 +250,31 @@ export const APP_LINK_GROUP_LIST = [
         path: '/pages/user/user_vip/index'
       }
     ]
-  },
-  {
-    name: '自定义页面',
-    links: [
-      {
-        name: '促销页面',
-        path: 'ss'
-      },
-      {
-        name: '关于我们',
-        path: '/pages/pay/recharge-lo'
-      },
-      {
-        name: '产品与服务',
-        path: '/pages/pay/recharge-l'
-      },
-      {
-        name: '自定义页面',
-        path: '/pages/pay/recharge-'
-      },
-      {
-        name: '个人中心',
-        path: '/pages/pay/recharge'
-      }
-    ]
   }
+  // ,
+  // {
+  //   name: '自定义页面',
+  //   links: [
+  //     {
+  //       name: '促销页面',
+  //       path: 'ss'
+  //     },
+  //     {
+  //       name: '关于我们',
+  //       path: '/pages/pay/recharge-lo'
+  //     },
+  //     {
+  //       name: '产品与服务',
+  //       path: '/pages/pay/recharge-l'
+  //     },
+  //     {
+  //       name: '自定义页面',
+  //       path: '/pages/pay/recharge-'
+  //     },
+  //     {
+  //       name: '个人中心',
+  //       path: '/pages/pay/recharge'
+  //     }
+  //   ]
+  // }
 ] as AppLinkGroup[]

yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/property.vue

@@ -23,7 +23,7 @@
         </el-form-item>
       </el-card>
       <el-card header="优惠券样式" class="property-group" shadow="never">
-        <el-form-item label="列数" prop="type">
+        <!-- <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">
@@ -41,7 +41,7 @@
               </el-radio-button>
             </el-tooltip>
           </el-radio-group>
-        </el-form-item>
+        </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>
@@ -85,7 +85,7 @@ defineOptions({ name: 'CouponCardProperty' })
 const props = defineProps<{ modelValue: CouponCardProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
-
+formData.value.columns = '3';
 // 优惠券列表
 const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
 const couponSelectDialog = ref()

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue

@@ -7,8 +7,9 @@
 				<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
 					<div class="flex flex-1 flex-row items-center gap-8px">
 						<div class="wh">
-							<img
-								src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
+							<img class="new-text1"
+								src="https://zysc.fjptzykj.com:3000/shangcheng/2f2be070c60ceb9466af937ff9dd8917ad2ee02f774dbac48fbb9e73bfc688d0.png" />
+							<span class="new-text">拼团活动</span>
 						</div>
 						<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
 					</div>
@@ -158,6 +159,14 @@ onMounted(() => {
 	.wh {
 		position: relative;
 		padding-right: 10px;
+		display: flex;
+		align-items: center;
+		.new-text1{
+			width:30px;
+		}
+		.new-text{
+			font-weight: 700;	
+		}
 	}
 	
 	.wh::after {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue

@@ -99,6 +99,7 @@ defineOptions({ name: 'PromotionCombinationProperty' })
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
+formData.value.layoutType = 'threeCol';
 // 活动列表
 const activityList = ref<CombinationActivityApi.CombinationActivityVO>([])
 onMounted(async () => {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts

@@ -0,0 +1,96 @@
+import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
+
+/** 积分商城属性 */
+export interface PromotionPointProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: PromotionPointFieldProperty
+    // 商品简介
+    introduction: PromotionPointFieldProperty
+    // 商品价格
+    price: PromotionPointFieldProperty
+    // 市场价
+    marketPrice: PromotionPointFieldProperty
+    // 商品销量
+    salesCount: PromotionPointFieldProperty
+    // 商品库存
+    stock: PromotionPointFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 按钮
+  btnBuy: {
+    // 类型：文字 | 图片
+    type: 'text' | 'img'
+    // 文字
+    text: string
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string
+    // 图片按钮：图片地址
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 秒杀活动编号
+  activityIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 商品字段
+export interface PromotionPointFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionPoint',
+  name: '积分商城',
+  icon: 'ep:present',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' }
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即兑换',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: ''
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<PromotionPointProperty>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div ref="containerRef" :class="`box-content min-h-30px w-full flex flex-row flex-wrap`">
+    <div
+      v-for="(spu, index) in spuList"
+      :key="index"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`
+      }"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+    >
+      <!-- 角标 -->
+      <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
+        <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        :class="[
+          'h-140px',
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-140px': property.layoutType === 'oneColSmallImg'
+          }
+        ]"
+      >
+        <el-image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+      </div>
+      <div
+        :class="[
+          ' flex flex-col gap-8px p-8px box-border',
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
+          }
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          :class="[
+            'text-14px ',
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
+            }
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          :style="{ color: property.fields.introduction.color }"
+          class="truncate text-12px"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 积分 -->
+          <span
+            v-if="property.fields.price.show"
+            :style="{ color: property.fields.price.color }"
+            class="text-16px"
+          >
+            {{ spu.point }}积分
+            {{ !spu.pointPrice || spu.pointPrice === 0 ? '' : `+${fenToYuan(spu.pointPrice)}元` }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            :style="{ color: property.fields.marketPrice.color }"
+            class="ml-4px text-10px line-through"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-12px">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }">
+            库存{{ spu.pointTotalStock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-8px right-8px">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
+          }"
+          class="rounded-full p-x-12px p-y-4px text-12px text-white"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <el-image
+          v-else
+          :src="property.btnBuy.imgUrl"
+          class="h-28px w-28px rounded-full"
+          fit="cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { PromotionPointProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { PointActivityApi, PointActivityVO, SpuExtension0 } from '@/api/mall/promotion/point'
+import { fenToYuan } from '@/utils'
+
+/** 积分商城卡片 */
+defineOptions({ name: 'PromotionPoint' })
+// 定义属性
+const props = defineProps<{ property: PromotionPointProperty }>()
+// 商品列表
+const spuList = ref<SpuExtension0[]>([])
+const spuIdList = ref<number[]>([])
+const pointActivityList = ref<PointActivityVO[]>([])
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的积分商城组件，是没有活动ID的
+      const activityIds = props.property.activityIds
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取积分商城活动详情列表
+        pointActivityList.value = await PointActivityApi.getPointActivityListByIds(activityIds)
+
+        // 获取积分商城活动的 SPU 详情列表
+        spuList.value = []
+        spuIdList.value = pointActivityList.value.map((activity) => activity.spuId)
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value)
+        }
+
+        // 更新 SPU 的最低兑换积分和所需兑换金额
+        pointActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId)
+          if (spu) {
+            spu.pointStock = activity.stock
+            spu.pointTotalStock = activity.totalStock
+            spu.point = activity.point
+            spu.pointPrice = activity.price
+          }
+        })
+      }
+    } catch (error) {
+      console.error('获取积分商城活动细节或 SPU 细节时出错:', error)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : props.property.space + 'px'
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : props.property.space + 'px'
+
+  return { marginLeft, marginTop }
+}
+
+// 容器
+const containerRef = ref()
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%'
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`
+  }
+  return { width }
+}
+</script>
+
+<style lang="scss" scoped></style>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/property.vue

@@ -0,0 +1,154 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form :model="formData" label-width="80px">
+      <el-card class="property-group" header="积分商城活动" shadow="never">
+        <PointShowcase v-model="formData.activityIds" />
+      </el-card>
+      <el-card class="property-group" header="商品样式" shadow="never">
+        <el-form-item label="布局" prop="type">
+          <el-radio-group v-model="formData.layoutType">
+            <el-tooltip class="item" content="单列大图" placement="bottom">
+              <el-radio-button value="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button value="oneColSmallImg">
+                <Icon icon="fluent:text-column-two-left-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="双列" placement="bottom">
+              <el-radio-button value="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <!--<el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </el-tooltip>-->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="商品名称" prop="fields.name.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.name.color" />
+            <el-checkbox v-model="formData.fields.name.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品简介" prop="fields.introduction.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <el-checkbox v-model="formData.fields.introduction.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品价格" prop="fields.price.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.price.color" />
+            <el-checkbox v-model="formData.fields.price.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="市场价" prop="fields.marketPrice.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <el-checkbox v-model="formData.fields.marketPrice.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品销量" prop="fields.salesCount.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <el-checkbox v-model="formData.fields.salesCount.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品库存" prop="fields.stock.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <el-checkbox v-model="formData.fields.stock.show" />
+          </div>
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="角标" shadow="never">
+        <el-form-item label="角标" prop="badge.show">
+          <el-switch v-model="formData.badge.show" />
+        </el-form-item>
+        <el-form-item v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <template #tip> 建议尺寸：36 * 22</template>
+          </UploadImg>
+        </el-form-item>
+      </el-card>
+      <el-card class="property-group" header="按钮" shadow="never">
+        <el-form-item label="按钮类型" prop="btnBuy.type">
+          <el-radio-group v-model="formData.btnBuy.type">
+            <el-radio-button value="text">文字</el-radio-button>
+            <el-radio-button value="img">图片</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <el-form-item label="按钮文字" prop="btnBuy.text">
+            <el-input v-model="formData.btnBuy.text" />
+          </el-form-item>
+          <el-form-item label="左侧背景" prop="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </el-form-item>
+          <el-form-item label="右侧背景" prop="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </el-form-item>
+        </template>
+        <template v-else>
+          <el-form-item label="图片" prop="btnBuy.imgUrl">
+            <UploadImg v-model="formData.btnBuy.imgUrl" height="56px" width="56px">
+              <template #tip> 建议尺寸：56 * 56</template>
+            </UploadImg>
+          </el-form-item>
+        </template>
+      </el-card>
+      <el-card class="property-group" header="商品样式" shadow="never">
+        <el-form-item label="上圆角" prop="borderRadiusTop">
+          <el-slider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="下圆角" prop="borderRadiusBottom">
+          <el-slider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+        <el-form-item label="间隔" prop="space">
+          <el-slider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </el-form-item>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script lang="ts" setup>
+import { PromotionPointProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import PointShowcase from '@/views/mall/promotion/point/components/PointShowcase.vue'
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionPointProperty' })
+
+const props = defineProps<{ modelValue: PromotionPointProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style lang="scss" scoped></style>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue

@@ -6,8 +6,9 @@
 					<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
 						<div class="flex flex-1 flex-row items-center gap-8px">
 							<div class="wh">
-								<img
-									src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
+								<img class="new-text1"
+									src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
+								<span class="new-text">限时秒杀</span>
 							</div>
 							<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
 						</div>
@@ -150,6 +151,14 @@
 	.wh {
 		position: relative;
 		padding-right: 10px;
+		display: flex;
+		align-items: center;
+		.new-text1{
+			width:30px;
+		}
+		.new-text{
+			font-weight: 700;	
+		}
 	}
 
 	.wh::after {

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/property.vue

@@ -14,7 +14,7 @@
         </el-form-item>
       </el-card>
       <el-card header="商品样式" class="property-group" shadow="never">
-        <el-form-item label="布局" prop="type">
+        <!-- <el-form-item label="布局" prop="type">
           <el-radio-group v-model="formData.layoutType">
             <el-tooltip class="item" content="单列" placement="bottom">
               <el-radio-button label="oneCol">
@@ -27,7 +27,7 @@
               </el-radio-button>
             </el-tooltip>
           </el-radio-group>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="商品名称" prop="fields.name.show">
           <div class="flex gap-8px">
             <ColorInput v-model="formData.fields.name.color" />
@@ -99,6 +99,7 @@ defineOptions({ name: 'PromotionSeckillProperty' })
 const props = defineProps<{ modelValue: PromotionSeckillProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
+formData.value.layoutType = "threeCol"
 // 活动列表
 const activityList = ref<SeckillActivityApi.SeckillActivityVO>([])
 onMounted(async () => {

yudao-admin-vue3/src/components/DiyEditor/util.ts

@@ -146,7 +146,7 @@ export const PAGE_LIBS = [
     components: [
       'PromotionCombination',
       'PromotionSeckill',
-      // 'PromotionPoint',
+      'PromotionPoint',
       'CouponCard',
       'PromotionArticle'
     ]