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

@@ -1,210 +1,215 @@
 <template>
-  <Dialog v-model="dialogVisible" title="选择链接" width="65%">
+	<Dialog v-model="dialogVisible" title="选择链接" width="65%">
-    <div class="h-500px flex gap-8px">
+		<div class="h-500px flex gap-8px">
-      <!-- 左侧分组列表 -->
+			<!-- 左侧分组列表 -->
-      <el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
+			<el-scrollbar wrap-class="h-full" ref="groupScrollbar" view-class="flex flex-col">
-        <el-button
+				<template v-for="(group, groupIndex) in APP_LINK_GROUP_LIST">
-          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+				<el-button v-if="groupIndex<7"  :key="groupIndex"  :class="[
-          :key="groupIndex"
-          :class="[
             'm-r-16px m-l-0px! justify-start! w-90px',
             { active: activeGroup === group.name }
-          ]"
+          ]" ref="groupBtnRefs" :text="activeGroup !== group.name"
-          ref="groupBtnRefs"
+					:type="activeGroup === group.name ? 'primary' : 'default'" @click="handleGroupSelected(group.name)">
-          :text="activeGroup !== group.name"
+						{{ group.name }}
-          :type="activeGroup === group.name ? 'primary' : 'default'"
+				</el-button>
-          @click="handleGroupSelected(group.name)"
+				</template>
-        >
+			</el-scrollbar>
-          {{ group.name }}
+			<!-- 右侧链接列表 -->
-        </el-button>
+			<el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
-      </el-scrollbar>
+				<div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
-      <!-- 右侧链接列表 -->
+					<template v-if="activeGroup == group.name && groupIndex<7">
-      <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
+						<!-- 分组标题 -->
-        <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
+						<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
-			<template  v-if="activeGroup == group.name">
+						<!-- 链接列表 -->
-				<!-- 分组标题 -->
+						<el-tooltip v-for="(appLink, appLinkIndex) in group.links" :key="appLinkIndex"
-				<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+							:content="appLink.path" placement="bottom" :show-after="300">
-				<!-- 链接列表 -->
-				<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)"
-				  >
-				    {{ appLink.name }}
-				  </el-button>
-				</el-tooltip>
-			</template>
 							
-        </div>
+							<el-button class="m-b-8px m-r-8px m-l-0px!"
-      </el-scrollbar>
+								:type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
-    </div>
+								@click="handleAppLinkSelected(appLink)">
-    <!-- 底部对话框操作按钮 -->
+								{{ appLink.name }}
-    <template #footer>
+							</el-button>
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+						</el-tooltip>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+					</template>
-    </template>
+
-  </Dialog>
+				</div>
-  <Dialog v-model="detailSelectDialog.visible" title="" width="50%">
+			</el-scrollbar>
-    <el-form class="min-h-200px">
+		</div>
-      <el-form-item
+		<!-- 底部对话框操作按钮 -->
-        label="选择分类"
+		<template #footer>
-        v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST"
+			<el-button type="primary" @click="handleSubmit">确 定</el-button>
-      >
+			<el-button @click="dialogVisible = false">取 消</el-button>
-        <ProductCategorySelect
+		</template>
-          v-model="detailSelectDialog.id"
+	</Dialog>
-          :parent-id="0"
+	<Dialog v-model="detailSelectDialog.visible" title="" width="50%">
-          @update:model-value="handleProductCategorySelected"
+		<el-form class="min-h-200px">
-        />
+			<el-form-item label="选择分类" v-if="detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST">
-      </el-form-item>
+				<ProductCategorySelect v-model="detailSelectDialog.id" :parent-id="0"
-    </el-form>
+					@update:model-value="handleProductCategorySelected" />
-  </Dialog>
+			</el-form-item>
+		</el-form>
+	</Dialog>
 </template>
 <script lang="ts" setup>
-import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
+	import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM, AppLink } from './data'
-import { ButtonInstance, ScrollbarInstance } from 'element-plus'
+	import * as MemberStatisticsApi from '@/api/mall/statistics/member'
-import { split } from 'lodash-es'
+	import { ButtonInstance, ScrollbarInstance } from 'element-plus'
-import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+	import { split } from 'lodash-es'
-import { getUrlNumberValue } from '@/utils'
+	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' })
+	// 选中的分组，默认选中第一个
+	const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
+	// 选中的 APP 链接
+	const activeAppLink = ref({} as AppLink)
 
-// APP 链接选择弹框
+	/** 打开弹窗 */
-defineOptions({ name: 'AppLinkSelectDialog' })
+	const dialogVisible = ref(false)
-// 选中的分组，默认选中第一个
+	const open = (link : string) => {
-const activeGroup = ref(APP_LINK_GROUP_LIST[0].name)
+		activeAppLink.value.path = link
-// 选中的 APP 链接
+		dialogVisible.value = true
-const activeAppLink = ref({} as AppLink)
 
-/** 打开弹窗 */
+		// 滚动到当前的链接
-const dialogVisible = ref(false)
+		const group = APP_LINK_GROUP_LIST.find((group) =>
-const open = (link: string) => {
+			group.links.some((linkItem) => {
-  activeAppLink.value.path = link
+				const sameLink = isSameLink(linkItem.path, link)
-  dialogVisible.value = true
+				if (sameLink) {
+					activeAppLink.value = { ...linkItem, path: link }
+				}
+				return sameLink
+			})
+		)
+		if (group) {
+			// 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+			nextTick(() => handleGroupSelected(group.name))
+		}
+	}
+	defineExpose({ open })
 
-  // 滚动到当前的链接
+	// 处理 APP 链接选中
-  const group = APP_LINK_GROUP_LIST.find((group) =>
+	const handleAppLinkSelected = (appLink : AppLink) => {
-    group.links.some((linkItem) => {
+		if (!isSameLink(appLink.path, activeAppLink.value.path)) {
-      const sameLink = isSameLink(linkItem.path, link)
+			activeAppLink.value = appLink
-      if (sameLink) {
+			console.log(activeAppLink.value,activeAppLink.value.path,"activeAppLink.value")
-        activeAppLink.value = { ...linkItem, path: link }
+		}
-      }
+		switch (appLink.type) {
-      return sameLink
+			case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
-    })
+				detailSelectDialog.value.visible = true
-  )
+				detailSelectDialog.value.type = appLink.type
-  if (group) {
+				// 返显
-    // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+				detailSelectDialog.value.id =
-    nextTick(() => handleGroupSelected(group.name))
+					getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
-  }
+				break
-}
+			default:
-defineExpose({ open })
+				break
+		}
+	}
 
-// 处理 APP 链接选中
+	// 处理绑定值更新
-const handleAppLinkSelected = (appLink: AppLink) => {
+	const emit = defineEmits<{
-  if (!isSameLink(appLink.path, activeAppLink.value.path)) {
+		change : [link: string]
-    activeAppLink.value = appLink
+		appLinkChange : [appLink: AppLink]
-  }
+	}>()
-  switch (appLink.type) {
+	const handleSubmit = () => {
-    case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST:
+		dialogVisible.value = false
-      detailSelectDialog.value.visible = true
+		emit('change', activeAppLink.value.path)
-      detailSelectDialog.value.type = appLink.type
+		emit('appLinkChange', activeAppLink.value)
-      // 返显
+	}
-      detailSelectDialog.value.id =
-        getUrlNumberValue('id', 'http://127.0.0.1' + activeAppLink.value.path) || undefined
-      break
-    default:
-      break
-  }
-}
 
-// 处理绑定值更新
+	// 分组标题引用列表
-const emit = defineEmits<{
+	const groupTitleRefs = ref<HTMLInputElement[]>([])
-  change: [link: string]
+	/**
-  appLinkChange: [appLink: AppLink]
+	 * 处理右侧链接列表滚动
-}>()
+	 * @param scrollTop 滚动条的位置
-const handleSubmit = () => {
+	 */
-  dialogVisible.value = false
+	const handleScroll = ({ scrollTop } : { scrollTop : number }) => {
-  emit('change', activeAppLink.value.path)
+		const titleEl = groupTitleRefs.value.find((titleEl : HTMLInputElement) => {
-  emit('appLinkChange', activeAppLink.value)
+			// 获取标题的位置信息
-}
+			const { offsetHeight, offsetTop } = titleEl
+			// 判断标题是否在可视范围内
+			return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
+		})
+		// 只需处理一次
+		if (titleEl && activeGroup.value !== titleEl.textContent) {
+			activeGroup.value = titleEl.textContent || ''
+			// 同步左侧的滚动条位置
+			scrollToGroupBtn(activeGroup.value)
+		}
+	}
 
-// 分组标题引用列表
+	// 右侧滚动条
-const groupTitleRefs = ref<HTMLInputElement[]>([])
+	const linkScrollbar = ref<ScrollbarInstance>()
-/**
+	// 处理分组选中
- * 处理右侧链接列表滚动
+	const handleGroupSelected = (group : string) => {
- * @param scrollTop 滚动条的位置
+		activeGroup.value = group
- */
+		// const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
-const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
+		// if (titleRef) {
-  const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
+		//   // 滚动分组标题
-    // 获取标题的位置信息
+		//   linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
-    const { offsetHeight, offsetTop } = titleEl
+		// }
-    // 判断标题是否在可视范围内
+	}
-    return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight
-  })
-  // 只需处理一次
-  if (titleEl && activeGroup.value !== titleEl.textContent) {
-    activeGroup.value = titleEl.textContent || ''
-    // 同步左侧的滚动条位置
-    scrollToGroupBtn(activeGroup.value)
-  }
-}
 
-// 右侧滚动条
+	// 分组滚动条
-const linkScrollbar = ref<ScrollbarInstance>()
+	const groupScrollbar = ref<ScrollbarInstance>()
-// 处理分组选中
+	// 分组引用列表
-const handleGroupSelected = (group: string) => {
+	const groupBtnRefs = ref<ButtonInstance[]>([])
-  activeGroup.value = group
+	// 自动滚动分组按钮，确保分组按钮保持在可视区域内
-  // const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
+	const scrollToGroupBtn = (group : string) => {
-  // if (titleRef) {
+		const groupBtn = groupBtnRefs.value
-  //   // 滚动分组标题
+			.map((btn : ButtonInstance) => btn['ref'])
-  //   linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
+			.find((ref : Node) => ref.textContent === group)
-  // }
+		if (groupBtn) {
-}
+			groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
+		}
+	}
 
-// 分组滚动条
+	// 是否为相同的链接（不比较参数，只比较链接）
-const groupScrollbar = ref<ScrollbarInstance>()
+	const isSameLink = (link1 : string, link2 : string) => {
-// 分组引用列表
+		return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
-const groupBtnRefs = ref<ButtonInstance[]>([])
+	}
-// 自动滚动分组按钮，确保分组按钮保持在可视区域内
-const scrollToGroupBtn = (group: string) => {
-  const groupBtn = groupBtnRefs.value
-    .map((btn: ButtonInstance) => btn['ref'])
-    .find((ref: Node) => ref.textContent === group)
-  if (groupBtn) {
-    groupScrollbar.value?.setScrollTop(groupBtn.offsetTop)
-  }
-}
 
-// 是否为相同的链接（不比较参数，只比较链接）
+	// 详情选择对话框
-const isSameLink = (link1: string, link2: string) => {
+	const detailSelectDialog = ref<{
-  return split(link1, '?', 1)[0] === split(link2, '?', 1)[0]
+		visible : boolean
-}
+		id ?: number
-
+		type ?: APP_LINK_TYPE_ENUM
-// 详情选择对话框
+	}>({
-const detailSelectDialog = ref<{
+		visible: false,
-  visible: boolean
+		id: undefined,
-  id?: number
+		type: undefined
-  type?: APP_LINK_TYPE_ENUM
+	})
-}>({
+	// 处理详情选择
-  visible: false,
+	const handleProductCategorySelected = (id : number) => {
-  id: undefined,
+		const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
-  type: undefined
+		// 修改 id 参数
-})
+		url.searchParams.set('id', `${id}`)
-// 处理详情选择
+		// 排除域名
-const handleProductCategorySelected = (id: number) => {
+		activeAppLink.value.path = `${url.pathname}${url.search}`
-  const url = new URL(activeAppLink.value.path, 'http://127.0.0.1')
+		// 关闭对话框
-  // 修改 id 参数
+		detailSelectDialog.value.visible = false
-  url.searchParams.set('id', `${id}`)
+		// 重置 id
-  // 排除域名
+		detailSelectDialog.value.id = undefined
-  activeAppLink.value.path = `${url.pathname}${url.search}`
+	}
-  // 关闭对话框
-  detailSelectDialog.value.visible = false
-  // 重置 id
-  detailSelectDialog.value.id = undefined
-}
 </script>
 <style lang="scss" scoped></style>

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
+							<img class="new-text1"
-								src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
+								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
+								<img class="new-text1"
-									src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
+									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'
     ]