yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue

@@ -23,11 +23,8 @@
               <div>
                 <div class="drag-placement">组件放置区域</div>
                 <div class="component">
-                  <!-- <Icon :icon="element.icon" :size="32" /> -->
+                  <Icon :icon="element.icon" :size="32" />
-				  <div>
+                  <span class="mt-4px text-12px">{{ element.name }}</span>
-					  <img :src="element.icon" />
-				  </div>
-                  <span class="text-12px">{{ element.name }}</span>
                 </div>
               </div>
             </template>
@@ -145,9 +142,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
   .component.active,
   .component:hover {
-    // color: var(--el-color-white);
+    color: var(--el-color-white);
-    // background: var(--el-color-primary);
+    background: var(--el-color-primary);
-    background: #f6f6f6;
 
     .el-icon {
       color: var(--el-color-white);

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

@@ -26,13 +26,12 @@ export interface CarouselItemProperty {
   // 跳转链接
   url: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-09.png'
+
 // 定义组件
 export const component = {
   id: 'Carousel',
   name: '轮播图',
-  // icon: 'system-uicons:carousel',
+  icon: 'system-uicons:carousel',
-  icon: logo,
   property: {
     type: 'default',
     indicator: 'dot',

yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/component.tsx

@@ -67,8 +67,7 @@ export const CouponValidTerm = defineComponent({
             coupon.validEndTime,
             'YYYY-MM-DD'
           )}`
-        // : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
-        : `领取后 ${coupon.fixedEndTerm} 天内可用`
     return () => <div>{text}</div>
   }
 })

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

@@ -22,13 +22,12 @@ export interface CouponCardProperty {
   // 组件样式
   style: ComponentStyle
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-19.png'
+
 // 定义组件
 export const component = {
   id: 'CouponCard',
   name: '优惠券',
-  // icon: 'ep:ticket',
+  icon: 'ep:ticket',
-  icon: logo,
   property: {
     columns: 1,
     bgImg: '',

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

@@ -13,13 +13,12 @@ export interface DividerProperty {
   // 类型
   borderType: 'solid' | 'dashed' | 'dotted' | 'none'
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-12.png'
+
 // 定义组件
 export const component = {
   id: 'Divider',
   name: '分割线',
-  // icon: 'tdesign:component-divider-vertical',
+  icon: 'tdesign:component-divider-vertical',
-  icon: logo,
   property: {
     height: 30,
     lineWidth: 1,

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

@@ -21,13 +21,12 @@ export interface FloatingActionButtonItemProperty {
   // 文字颜色
   textColor: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-07.png'
+
 // 定义组件
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',
-  // icon: 'tabler:float-right',
+  icon: 'tabler:float-right',
-  icon: logo,
   position: 'fixed',
   property: {
     direction: 'vertical',

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

@@ -25,13 +25,12 @@ export interface HotZoneItemProperty {
   // 左
   left: number
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-14.png'
+
 // 定义组件
 export const component = {
   id: 'HotZone',
   name: '热区',
-  // icon: 'tabler:hand-click',
+  icon: 'tabler:hand-click',
-  icon: logo,
   property: {
     imgUrl: '',
     list: [] as HotZoneItemProperty[],

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

@@ -9,13 +9,12 @@ export interface ImageBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-08.png'
+
 // 定义组件
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  // icon: 'ep:picture',
+  icon: 'ep:picture',
-  icon: logo,
   property: {
     imgUrl: '',
     url: '',

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

@@ -29,13 +29,12 @@ export interface MagicCubeItemProperty {
   // 左
   left: number
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-13.png'
+
 // 定义组件
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
-  // icon: 'bi:columns',
+  icon: 'bi:columns',
-  icon: logo,
   property: {
     borderRadiusTop: 0,
     borderRadiusBottom: 0,

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

@@ -49,13 +49,12 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuGridItemProperty
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
+
 // 定义组件
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
-  // icon: 'bi:grid-3x3-gap',
+  icon: 'bi:grid-3x3-gap',
-  icon: logo,
   property: {
     column: 3,
     list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],

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

@@ -6,7 +6,6 @@
         <el-radio-group v-model="formData.column">
           <el-radio :label="3">3个</el-radio>
           <el-radio :label="4">4个</el-radio>
-          <el-radio :label="5">5个</el-radio>
         </el-radio-group>
       </el-form-item>
 

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

@@ -31,13 +31,12 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitle: '副标题',
   subtitleColor: '#bbb'
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-05.png'
+
 // 定义组件
 export const component = {
   id: 'MenuList',
   name: '列表导航',
-  // icon: 'fa-solid:list',
+  icon: 'fa-solid:list',
-  icon: logo,
   property: {
     list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
     style: {

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

@@ -46,13 +46,12 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
     bgColor: '#FF6000'
   }
 } as MenuSwiperItemProperty
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-03.png'
+
 // 定义组件
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',
-  // icon: 'bi:grid-3x2-gap',
+  icon: 'bi:grid-3x2-gap',
-  icon: logo,
   property: {
     layout: 'iconText',
     row: 1,

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

@@ -21,13 +21,12 @@ export interface NoticeContentProperty {
   // 链接地址
   url: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-02.png'
+
 // 定义组件
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  // icon: 'ep:bell',
+  icon: 'ep:bell',
-  icon: logo,
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [

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

@@ -13,13 +13,12 @@ export interface PopoverItemProperty {
   // 显示类型：仅显示一次、每次启动都会显示
   showType: 'once' | 'always'
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-06.png'
+
 // 定义组件
 export const component = {
   id: 'Popover',
   name: '弹窗广告',
-  // icon: 'carbon:popup',
+  icon: 'carbon:popup',
-  icon: logo,
   position: 'fixed',
   property: {
     list: [{ showType: 'once' }]

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

@@ -57,13 +57,12 @@ export interface ProductCardFieldProperty {
   // 颜色
   color: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-15.png'
+
 // 定义组件
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  // icon: 'fluent:text-column-two-left-24-filled',
+  icon: 'fluent:text-column-two-left-24-filled',
-  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {

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

@@ -36,13 +36,12 @@ export interface ProductListFieldProperty {
   // 颜色
   color: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-16.png'
+
 // 定义组件
 export const component = {
   id: 'ProductList',
   name: '商品栏',
-  // icon: 'fluent:text-column-two-24-filled',
+  icon: 'fluent:text-column-two-24-filled',
-  icon: logo,
   property: {
     layoutType: 'twoCol',
     fields: {

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

@@ -7,13 +7,12 @@ export interface PromotionArticleProperty {
   // 组件样式
   style: ComponentStyle
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-20.png'
+
 // 定义组件
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',
-  // icon: 'ph:article-medium',
+  icon: 'ph:article-medium',
-  icon: logo,
   property: {
     style: {
       bgType: 'color',

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

@@ -37,13 +37,12 @@ export interface PromotionCombinationFieldProperty {
   // 颜色
   color: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-17.png'
+
 // 定义组件
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',
-  // icon: 'mdi:account-group',
+  icon: 'mdi:account-group',
-  icon: logo,
   property: {
     layoutType: 'oneCol',
     fields: {

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

@@ -58,13 +58,12 @@ export interface PromotionPointFieldProperty {
   // 颜色
   color: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-21.png'
+
 // 定义组件
 export const component = {
   id: 'PromotionPoint',
   name: '积分商城',
-  // icon: 'ep:present',
+  icon: 'ep:present',
-  icon: logo,
   property: {
     layoutType: 'oneColBigImg',
     fields: {

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

@@ -36,13 +36,12 @@ export interface PromotionSeckillFieldProperty {
   // 颜色
   color: string
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-18.png'
+
 // 定义组件
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',
-  // icon: 'mdi:calendar-time',
+  icon: 'mdi:calendar-time',
-  icon: logo,
   property: {
     activityId: undefined,
     layoutType: 'oneCol',

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

@@ -15,12 +15,12 @@ export interface SearchProperty {
 
 // 文字位置
 export type PlaceholderPosition = 'left' | 'center'
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-01.png'
+
 // 定义组件
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: logo,
+  icon: 'ep:search',
   property: {
     height: 28,
     showScan: false,

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

@@ -38,13 +38,12 @@ export interface TitleBarProperty {
   // 组件样式
   style: ComponentStyle
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-10.png'
+
 // 定义组件
 export const component = {
   id: 'TitleBar',
   name: '标题栏',
   icon: 'material-symbols:line-start',
-  icon: logo,
   property: {
     title: '主标题',
     description: '副标题',

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

@@ -1,115 +1,29 @@
 <template>
-	<div class="flex flex-col" style="    margin-bottom: 27px;">
+  <div class="flex flex-col">
-
+    <div class="flex items-center justify-between p-x-18px p-y-24px">
-		<div class="new-main">
-			<div class="flex items-center justify-between p-x-18px p-y-24px " style="padding-bottom:15px;">
       <div class="flex flex-1 items-center gap-16px">
         <el-avatar :size="60">
           <Icon icon="ep:avatar" :size="60" />
         </el-avatar>
-					<span class="text-18px font-bold">用户名称</span>
+        <span class="text-18px font-bold">芋道源码</span>
       </div>
       <Icon icon="tdesign:qrcode" :size="20" />
     </div>
-
+    <div
-			<div class="new-usercard" style="z-index: 9999;">
-				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
-					<div class="value-box ss-flex ss-col-bottom">
-						<div class="value-text ss-line-1">0.00</div>
-						<div class="unit-text ss-m-l-6">
-							<!-- 元 -->
-						</div>
-					</div>
-					<div class="menu-title ss-m-t-28">余额</div>
-				</div>
-
-				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
-					<div class="value-box ss-flex ss-col-bottom">
-						<div class="value-text">0</div>
-						<div class="unit-text ss-m-l-6">
-							<!-- 张 -->
-						</div>
-					</div>
-					<div class="menu-title ss-m-t-28">优惠券</div>
-				</div>
-				<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
-					<div class="value-box ss-flex ss-col-bottom">
-						<div class="value-text">0</div>
-						<div class="unit-text ss-m-l-6">
-							<!-- 个 -->
-						</div>
-					</div>
-					<div class="menu-title ss-m-t-28">积分</div>
-				</div>
-			</div>
-
-			<div class="new-bottom">
-				<img src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
-					alt="" />
-				<div class="btn">
-					立即开通
-				</div>
-			</div>
-		</div>
-		<!-- <div
       class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
     >
       <span class="color-#ff690d">点击绑定手机号</span>
       <span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
-    </div> -->
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-	import { UserCardProperty } from './config'
+import { UserCardProperty } from './config'
 
-	/** 用户卡片 */
+/** 用户卡片 */
-	defineOptions({ name: 'UserCard' })
+defineOptions({ name: 'UserCard' })
-	// 定义属性
+// 定义属性
-	defineProps<{ property : UserCardProperty }>()
+defineProps<{ property: UserCardProperty }>()
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-	.new-main {
-		position: relative;
-		background: url('@/assets/imgs/userCar/seckilbg.png') no-repeat;
-		background-size: cover;
-		padding-bottom: 53px;
-
-		.value-box {
-			margin-bottom: 6px;
-		}
-
-		.new-usercard {
-			width: 100%;
-			display: flex;
-			justify-content: space-around;
-		}
-
-		div {
-			text-align: center;
-			color: white;
-		}
-
-		.new-bottom {
-			position: absolute;
-			bottom: -28px;
-			width: 100%;
-			z-index: 999999999999999;
-
-			img {
-				width: 92%;
-			}
-
-			.btn {
-				position: absolute;
-				bottom: 19px;
-				right: 29px;
-				background: white;
-				border-radius: 12px;
-				padding: 4px 8px;
-				font-size: 14px;
-				color: #946d2d;
-			}
-		}
-	}
-</style>

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

@@ -1,6 +1,5 @@
 <template>
-  <!-- <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" /> -->
+  <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" />
-  <el-image src="  https://zysc.fjptzykj.com:3000/shangcheng/0ba158a1a2de7d39c6cec22cfe54736237438f63893b09c7453b5b5e3482f826.png" />
 </template>
 <script setup lang="ts">
 import { UserOrderProperty } from './config'

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

@@ -17,13 +17,12 @@ export interface VideoPlayerStyle extends ComponentStyle {
   // 视频高度
   height: number
 }
-import logo from '@/assets/imgs/DiyEditorImges/组件图标-11.png'
+
 // 定义组件
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  // icon: 'ep:video-play',
+  icon: 'ep:video-play',
-  icon: logo,
   property: {
     videoUrl: '',
     posterUrl: '',

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

@@ -31,7 +31,7 @@
     <!-- 中心区域 -->
     <el-container class="editor-container">
       <!-- 左侧：组件库（ComponentLibrary） -->
-			<ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0 && isShow" />
+      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
       <!-- 中心：设计区域（ComponentContainer） -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
         <!-- 手机顶部 -->
@@ -39,54 +39,94 @@
           <!-- 手机顶部状态栏 -->
           <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
           <!-- 手机顶部导航栏 -->
-					<ComponentContainer v-if="showNavigationBar" :component="navigationBarComponent"
+          <ComponentContainer
-						:show-toolbar="false" :active="selectedComponent?.id === navigationBarComponent.id"
+            v-if="showNavigationBar"
-						@click="handleNavigationBarSelected" class="cursor-pointer!" />
+            :component="navigationBarComponent"
+            :show-toolbar="false"
+            :active="selectedComponent?.id === navigationBarComponent.id"
+            @click="handleNavigationBarSelected"
+            class="cursor-pointer!"
+          />
         </div>
         <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
-				<div v-for="(component, index) in pageComponents" :key="index"
+        <div
-					@click="handleComponentSelected(component, index)">
+          v-for="(component, index) in pageComponents"
-					<component v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
+          :key="index"
-						:is="component.id" :property="component.property" />
+          @click="handleComponentSelected(component, index)"
+        >
+          <component
+            v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
+            :is="component.id"
+            :property="component.property"
+          />
         </div>
         <!-- 手机页面编辑区域 -->
-				<el-scrollbar height="100%" wrap-class="editor-design-center page-prop-area"
+        <el-scrollbar
-					view-class="phone-container" :view-style="{
+          height="100%"
+          wrap-class="editor-design-center page-prop-area"
+          view-class="phone-container"
+          :view-style="{
             backgroundColor: pageConfigComponent.property.backgroundColor,
             backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
-					  }">
+          }"
-					<draggable class="page-prop-area drag-area" v-model="pageComponents" item-key="index"
+        >
-						:animation="200" filter=".component-toolbar" ghost-class="draggable-ghost"
+          <draggable
-						:force-fallback="true" group="component" @change="handleComponentChange">
+            class="page-prop-area drag-area"
+            v-model="pageComponents"
+            item-key="index"
+            :animation="200"
+            filter=".component-toolbar"
+            ghost-class="draggable-ghost"
+            :force-fallback="true"
+            group="component"
+            @change="handleComponentChange"
+          >
             <template #item="{ element, index }">
-							<ComponentContainer v-if="!element.position || element.position === 'center'"
+              <ComponentContainer
-								:component="element" :active="selectedComponentIndex === index" :can-move-up="index > 0"
+                v-if="!element.position || element.position === 'center'"
+                :component="element"
+                :active="selectedComponentIndex === index"
+                :can-move-up="index > 0"
                 :can-move-down="index < pageComponents.length - 1"
                 @move="(direction) => handleMoveComponent(index, direction)"
-								@copy="handleCopyComponent(index)" @delete="handleDeleteComponent(index)"
+                @copy="handleCopyComponent(index)"
-								@click="handleComponentSelected(element, index)" />
+                @delete="handleDeleteComponent(index)"
+                @click="handleComponentSelected(element, index)"
+              />
             </template>
           </draggable>
         </el-scrollbar>
         <!-- 手机底部导航 -->
         <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
-					<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
+          <ComponentContainer
-						:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
+            :component="tabBarComponent"
+            :show-toolbar="false"
+            :active="selectedComponent?.id === tabBarComponent.id"
+            @click="handleTabBarSelected"
+          />
         </div>
         <!-- 固定布局的组件 操作按钮区 -->
         <div class="fixed-component-action-group">
-					<el-tag v-if="showPageConfig" size="large"
+          <el-tag
+            v-if="showPageConfig"
+            size="large"
             :effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
             :type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
-						@click="handleComponentSelected(pageConfigComponent)">
+            @click="handleComponentSelected(pageConfigComponent)"
+          >
             <Icon :icon="pageConfigComponent.icon" :size="12" />
             <span>{{ pageConfigComponent.name }}</span>
           </el-tag>
           <template v-for="(component, index) in pageComponents" :key="index">
-						<el-tag v-if="component.position === 'fixed'" size="large" closable
+            <el-tag
+              v-if="component.position === 'fixed'"
+              size="large"
+              closable
               :effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
               :type="selectedComponent?.uid === component.uid ? '' : 'info'"
-							@click="handleComponentSelected(component)" @close="handleDeleteComponent(index)">
+              @click="handleComponentSelected(component)"
+              @close="handleDeleteComponent(index)"
+            >
               <Icon :icon="component.icon" :size="12" />
               <span>{{ component.name }}</span>
             </el-tag>
@@ -95,8 +135,11 @@
       </div>
       <!-- 右侧：属性面板（ComponentContainerProperty） -->
       <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
-				<el-card shadow="never" body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+        <el-card
-					class="h-full">
+          shadow="never"
+          body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+          class="h-full"
+        >
           <!-- 组件名称 -->
           <template #header>
             <div class="flex items-center gap-8px">
@@ -104,10 +147,15 @@
               <span>{{ selectedComponent?.name }}</span>
             </div>
           </template>
-					<el-scrollbar class="m-[calc(0px-var(--el-card-padding))]"
+          <el-scrollbar
-						view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property">
+            class="m-[calc(0px-var(--el-card-padding))]"
-						<component :key="selectedComponent?.uid || selectedComponent?.id"
+            view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
-							:is="selectedComponent?.id + 'Property'" v-model="selectedComponent.property" />
+          >
+            <component
+              :key="selectedComponent?.uid || selectedComponent?.id"
+              :is="selectedComponent?.id + 'Property'"
+              v-model="selectedComponent.property"
+            />
           </el-scrollbar>
         </el-card>
       </el-aside>
@@ -117,7 +165,10 @@
   <!-- 预览弹框 -->
   <Dialog v-model="previewDialogVisible" title="预览" width="700">
     <div class="flex justify-around">
-			<IFrame class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!" :src="previewUrl" />
+      <IFrame
+        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
+        :src="previewUrl"
+      />
       <div class="flex flex-col">
         <el-text>手机扫码预览</el-text>
         <Qrcode :text="previewUrl" logo="/logo.gif" />
@@ -126,45 +177,45 @@
   </Dialog>
 </template>
 <script lang="ts">
-	// 注册所有的组件
+// 注册所有的组件
-	import { components } from './components/mobile/index'
+import { components } from './components/mobile/index'
-	export default {
+export default {
   components: { ...components }
-	}
+}
 </script>
 <script lang="ts" setup>
-	import draggable from 'vuedraggable'
+import draggable from 'vuedraggable'
-	import ComponentLibrary from './components/ComponentLibrary.vue'
+import ComponentLibrary from './components/ComponentLibrary.vue'
-	import { cloneDeep, includes } from 'lodash-es'
+import { cloneDeep, includes } from 'lodash-es'
-	import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
+import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
-	import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
+import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
-	import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
+import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
-	import { isString } from '@/utils/is'
+import { isString } from '@/utils/is'
-	import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
+import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
-	import { componentConfigs } from '@/components/DiyEditor/components/mobile'
+import { componentConfigs } from '@/components/DiyEditor/components/mobile'
-	import { array, oneOfType } from 'vue-types'
+import { array, oneOfType } from 'vue-types'
-	import { propTypes } from '@/utils/propTypes'
+import { propTypes } from '@/utils/propTypes'
 
-	/** 页面装修详情页 */
+/** 页面装修详情页 */
-	defineOptions({ name: 'DiyPageDetail' })
+defineOptions({ name: 'DiyPageDetail' })
 
-	// 左侧组件库
+// 左侧组件库
-	const componentLibrary = ref()
+const componentLibrary = ref()
-	// 页面设置组件
+// 页面设置组件
-	const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
+const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
-	// 顶部导航栏
+// 顶部导航栏
-	const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
+const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
-	// 底部导航菜单
+// 底部导航菜单
-	const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
 
-	// 选中的组件，默认选中顶部导航栏
+// 选中的组件，默认选中顶部导航栏
-	const selectedComponent = ref<DiyComponent<any>>()
+const selectedComponent = ref<DiyComponent<any>>()
-	// 选中的组件索引
+// 选中的组件索引
-	const selectedComponentIndex = ref<number>(-1)
+const selectedComponentIndex = ref<number>(-1)
-	// 组件列表
+// 组件列表
-	const pageComponents = ref<DiyComponent<any>[]>([])
+const pageComponents = ref<DiyComponent<any>[]>([])
-	// 定义属性
+// 定义属性
-	const props = defineProps({
+const props = defineProps({
   // 页面配置，支持Json字符串
   modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
   // 标题
@@ -178,14 +229,12 @@
   // 是否显示页面配置
   showPageConfig: propTypes.bool.def(true),
   // 预览地址：提供了预览地址，才会显示预览按钮
-		previewUrl: propTypes.string.def(''),
+  previewUrl: propTypes.string.def('')
-		//是否显示左侧导航栏
+})
-		isShow:propTypes.bool.def(true),
-	})
 
-	// 监听传入的页面配置
+// 监听传入的页面配置
-	// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
-	watch(
+watch(
   () => props.modelValue,
   () => {
     const modelValue = isString(props.modelValue)
@@ -200,15 +249,15 @@
       const component = componentConfigs[item.id]
       return { ...component, property: item.property }
     })
-			console.log(modelValue, "pageComponents.value")
+	console.log(modelValue,"pageComponents.value")
   },
   {
     immediate: true
   }
-	)
+)
 
-	// 保存
+// 保存
-	const handleSave = () => {
+const handleSave = () => {
   const pageConfig = {
     page: pageConfigComponent.value.property,
     navigationBar: navigationBarComponent.value.property,
@@ -226,41 +275,41 @@
   emits('update:modelValue', modelValue)
   // 发送保存通知
   emits('save', pageConfig)
-	}
+}
 
-	// 处理页面选中：显示属性表单
+// 处理页面选中：显示属性表单
-	const handlePageSelected = (event : any) => {
+const handlePageSelected = (event: any) => {
   if (!props.showPageConfig) return
 
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (includes(event?.target?.classList, 'page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent))
   }
-	}
+}
 
-	/**
+/**
  * 选中组件
  *
  * @param component 组件
  * @param index 组件的索引
  */
-	const handleComponentSelected = (component : DiyComponent<any>, index : number = -1) => {
+const handleComponentSelected = (component: DiyComponent<any>, index: number = -1) => {
   selectedComponent.value = component
   selectedComponentIndex.value = index
-	}
+}
 
-	// 选中顶部导航栏
+// 选中顶部导航栏
-	const handleNavigationBarSelected = () => {
+const handleNavigationBarSelected = () => {
   handleComponentSelected(unref(navigationBarComponent))
-	}
+}
 
-	// 选中底部导航菜单
+// 选中底部导航菜单
-	const handleTabBarSelected = () => {
+const handleTabBarSelected = () => {
   handleComponentSelected(unref(tabBarComponent))
-	}
+}
 
-	// 组件变动（拖拽）
+// 组件变动（拖拽）
-	const handleComponentChange = (dragEvent : any) => {
+const handleComponentChange = (dragEvent: any) => {
   // 新增，即从组件库拖拽添加组件
   if (dragEvent.added) {
     const { element, newIndex } = dragEvent.added
@@ -271,38 +320,38 @@
     // 保持选中
     selectedComponentIndex.value = newIndex
   }
-	}
+}
 
-	// 交换组件
+// 交换组件
-	const swapComponent = (oldIndex : number, newIndex : number) => {
+const swapComponent = (oldIndex: number, newIndex: number) => {
   ;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
     pageComponents.value[newIndex],
     pageComponents.value[oldIndex]
   ]
   // 保持选中
   selectedComponentIndex.value = newIndex
-	}
+}
 
-	/** 移动组件（上移、下移） */
+/** 移动组件（上移、下移） */
-	const handleMoveComponent = (index : number, direction : number) => {
+const handleMoveComponent = (index: number, direction: number) => {
   const newIndex = index + direction
   if (newIndex < 0 || newIndex >= pageComponents.value.length) return
 
   swapComponent(index, newIndex)
-	}
+}
 
-	/** 复制组件 */
+/** 复制组件 */
-	const handleCopyComponent = (index : number) => {
+const handleCopyComponent = (index: number) => {
   const component = cloneDeep(pageComponents.value[index])
   component.uid = new Date().getTime()
   pageComponents.value.splice(index + 1, 0, component)
-	}
+}
 
-	/**
+/**
  * 删除组件
  * @param index 当前组件index
  */
-	const handleDeleteComponent = (index : number) => {
+const handleDeleteComponent = (index: number) => {
   // 删除组件
   pageComponents.value.splice(index, 1)
   if (index < pageComponents.value.length) {
@@ -317,28 +366,28 @@
     // 3. 组件全部删除之后，显示页面设置
     handleComponentSelected(unref(pageConfigComponent))
   }
-	}
+}
 
-	// 工具栏操作
+// 工具栏操作
-	const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
+const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
 
-	// 注入无感刷新页面函数
+// 注入无感刷新页面函数
-	const reload = inject<() => void>('reload')
+const reload = inject<() => void>('reload')
-	// 重置
+// 重置
-	const handleReset = () => {
+const handleReset = () => {
   if (reload) reload()
   emits('reset')
-	}
+}
 
-	// 预览
+// 预览
-	const previewDialogVisible = ref(false)
+const previewDialogVisible = ref(false)
-	const handlePreview = () => {
+const handlePreview = () => {
   previewDialogVisible.value = true
   emits('preview')
-	}
+}
 
-	// 设置默认选中的组件
+// 设置默认选中的组件
-	const setDefaultSelectedComponent = () => {
+const setDefaultSelectedComponent = () => {
   if (props.showPageConfig) {
     selectedComponent.value = unref(pageConfigComponent)
   } else if (props.showNavigationBar) {
@@ -346,22 +395,22 @@
   } else if (props.showTabBar) {
     selectedComponent.value = unref(tabBarComponent)
   }
-	}
+}
 
-	watch(
+watch(
   () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
   () => setDefaultSelectedComponent()
-	)
+)
 
-	onMounted(() => setDefaultSelectedComponent())
+onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
-	/* 手机宽度 */
+/* 手机宽度 */
-	$phone-width: 375px;
+$phone-width: 375px;
-	$toolbar-height: 42px;
+$toolbar-height: 42px;
 
-	/* 根节点样式 */
+/* 根节点样式 */
-	.editor {
+.editor {
   display: flex;
   height: 100%;
   margin: calc(0px - var(--app-content-padding));
@@ -397,7 +446,10 @@
 
   /* 中心操作区 */
   .editor-container {
-			height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - $toolbar-height );
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
+        $toolbar-height
+    );
 
     /* 右侧属性面板 */
     .editor-right {
@@ -496,7 +548,6 @@
         :deep(.el-tag) {
           box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
           border: none;
-
           .el-tag__content {
             width: 100%;
             display: flex;
@@ -511,5 +562,5 @@
       }
     }
   }
-	}
+}
 </style>

yudao-admin-vue3/src/views/mall/promotion/coupon/formatter.ts

@@ -28,8 +28,7 @@ export const validityTypeFormat = (row: CouponTemplateVO) => {
     return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
   }
   if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
-    // return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
+    return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
-    return `领取后 ${row.fixedEndTerm + 1} 天内可用`
   }
   return '未知【' + row.validityType + '】'
 }

yudao-admin-vue3/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

@@ -38,7 +38,7 @@
       <el-form-item label="优惠类型" prop="discountType">
         <el-radio-group v-model="formData.discountType">
           <el-radio
-            v-for="dict in filteredDictOptions()"
+            v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
             :key="dict.value"
             :label="dict.value"
           >
@@ -151,10 +151,10 @@
       </el-form-item>
       <el-form-item
         v-if="formData.validityType === CouponTemplateValidityTypeEnum.TERM.type"
-        label="有效日期"
+        label="领取日期"
         prop="fixedStartTerm"
       >
-        <!-- 第
+        第
         <el-input-number
           v-model="formData.fixedStartTerm"
           :min="0"
@@ -162,13 +162,13 @@
           class="mx-2"
           placeholder="0 为今天生效"
         />
-        至 -->
+        至
         <el-input-number
           v-model="formData.fixedEndTerm"
-          :min="1"
+          :min="0"
           :precision="0"
           class="mx-2"
-          placeholder="请输入有效天数"
+          placeholder="请输入结束天数"
         />
         天有效
       </el-form-item>
@@ -215,7 +215,7 @@ const formData = ref({
   validTimes: [],
   validStartTime: undefined,
   validEndTime: undefined,
-  fixedStartTerm: 0,
+  fixedStartTerm: undefined,
   fixedEndTerm: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
   productScopeValues: [], // 商品范围：值为 品类编号列表 或 商品编号列表 ，用于提交
@@ -255,7 +255,6 @@ const open = async (type: string, id?: number) => {
       const data = await CouponTemplateApi.getCouponTemplate(id)
       formData.value = {
         ...data,
-        fixedEndTerm: data.fixedEndTerm - data.fixedStartTerm + 1, // 显示时总天数（实际需要+1）
         discountPrice: formatToFraction(data.discountPrice),
         discountPercent:
           data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
@@ -284,7 +283,6 @@ const submitForm = async () => {
   try {
     const data = {
       ...formData.value,
-      fixedEndTerm: (formData.value.fixedEndTerm || 0) + formData.value.fixedStartTerm - 1, // 得到结束的天数
       discountPrice: convertToInteger(formData.value.discountPrice),
       discountPercent:
         formData.value.discountPercent !== undefined
@@ -337,7 +335,7 @@ const resetForm = () => {
     validTimes: [],
     validStartTime: undefined,
     validEndTime: undefined,
-    fixedStartTerm: 0,
+    fixedStartTerm: undefined,
     fixedEndTerm: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
     productScopeValues: [],
@@ -385,12 +383,6 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
       break
   }
 }
-/** 暂时隐藏掉字典中的折扣 */
-function filteredDictOptions() {
-    return getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE).filter(
-      dict => dict.value !== 2 // 过滤掉 value 为 2 的选项
-    );
-}
 </script>
 
 <style lang="scss" scoped></style>

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue

@@ -2,7 +2,7 @@
 	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
 		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
 		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
-		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :isShow="false">
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
 		<template #toolBarLeft>
 			<!-- <el-radio-group
         v-model="selectedTemplateItem"