From 8af485a215aacdcef9103f883be0894059ba503e Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Wed, 25 Sep 2024 15:17:18 +0800
Subject: [PATCH] =?UTF-8?q?9=E3=80=81=E6=88=91=E7=9A=84=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E4=B8=8E=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4=E4=B8=8E?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=80=E8=A1=8C=E5=9B=9B=E5=88=97=E5=B9=B6?=
 =?UTF-8?q?=E4=B8=94=E4=B8=8D=E7=94=A8=E8=BD=AE=E6=92=AD=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E5=90=91=E4=B8=8B=E6=8E=92=E5=88=97=20=2010=E3=80=81=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=20=E8=90=A5=E9=94=80=E6=96=87=E7=AB=A0=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E6=A8=A1=E5=9D=97=E8=B0=83=E6=95=B4=E4=B8=BA=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=88=E6=97=A0=E6=B3=95=E9=80=89=E6=8B=A9=E6=9F=90?=
 =?UTF-8?q?=E4=B8=80=E7=AF=87=E6=96=87=E7=AB=A0=E5=8F=AA=E8=83=BD=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=85=A8=E9=83=A8=EF=BC=89=20=2011=E3=80=81=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=20=E8=A3=85=E4=BF=AE=E7=94=A8=E6=88=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/MenuList/index.vue      |  62 +++--
 .../components/mobile/MenuSwiper/index.vue    | 262 ++++++++++--------
 .../mobile/PromotionArticle/index.vue         |  68 ++++-
 .../src/components/DiyEditor/util.ts          |  10 +-
 4 files changed, 260 insertions(+), 142 deletions(-)

diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue
index 9a56fd9..f8f8f02 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue
@@ -1,31 +1,45 @@
 <template>
-  <div class="min-h-42px flex flex-col">
-    <div
-      v-for="(item, index) in property.list"
-      :key="index"
-      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">
-        <el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
-        <span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
-      </div>
-      <div class="item-center flex flex-row justify-center gap-4px">
-        <span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
-        <Icon icon="ep-arrow-right" color="#000" :size="16" />
-      </div>
-    </div>
-  </div>
+	<div class="min-h-42px flex flex-col">
+		<div v-for="(item, index) in property.list" :key="index"
+			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">
+				<el-image v-if="item.iconUrl" class="wh" :src="item.iconUrl" />
+				<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
+			</div>
+			<div class="item-center flex flex-row justify-center gap-4px">
+				<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
+				<Icon icon="ep-arrow-right" color="#000" :size="16" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { MenuListProperty } from './config'
-/** 列表导航 */
-defineOptions({ name: 'MenuList' })
-defineProps<{ property: MenuListProperty }>()
+	import { MenuListProperty } from './config'
+	/** 列表导航 */
+	defineOptions({ name: 'MenuList' })
+	defineProps<{ property : MenuListProperty }>()
 </script>
 
 <style scoped lang="scss">
-.item + .item {
-  border-top: 1px solid #eee;
-}
-</style>
+	.item+.item {
+		border-top: 1px solid #eee;
+	}
+
+	.wh {
+		width: 77px;
+		height: 20px;
+		position: relative;
+		padding-right: 10px;
+		&::after{
+			position:absolute;
+			content:'';
+			top:50%;
+			right:0;
+			width:1px;
+			height:57%;
+			border-right:1px solid #ababab;
+			transform: translateY(-50%);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
index f8e2bbc..2cc2726 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
@@ -1,119 +1,161 @@
 <template>
-  <el-carousel
-    :height="`${carouselHeight}px`"
-    :autoplay="false"
-    arrow="hover"
-    indicator-position="outside"
-  >
-    <el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
-      <div class="flex flex-row flex-wrap">
-        <div
-          v-for="(item, index) in page"
-          :key="index"
-          class="relative flex flex-col items-center justify-center"
-          :style="{ width: columnWidth, height: `${rowHeight}px` }"
-        >
-          <!-- 图标 + 角标 -->
-          <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
-            <!-- 右上角角标 -->
-            <span
-              v-if="item.badge?.show"
-              class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
-              :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
-            >
-              {{ item.badge.text }}
-            </span>
-            <el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
-          </div>
-          <!-- 标题 -->
-          <span
-            v-if="property.layout === 'iconText'"
-            class="text-12px"
-            :style="{
-              color: item.titleColor,
-              height: `${TITLE_HEIGHT}px`,
-              lineHeight: `${TITLE_HEIGHT}px`
-            }"
-          >
-            {{ item.title }}
-          </span>
-        </div>
-      </div>
-    </el-carousel-item>
-  </el-carousel>
+	<!-- <el-carousel :height="`${carouselHeight}px`" :autoplay="false" arrow="hover" indicator-position="outside">
+		<el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
+			<div class="flex flex-row flex-wrap">
+				<div v-for="(item, index) in page" :key="index"
+					class="relative flex flex-col items-center justify-center"
+					:style="{ width: columnWidth, height: `${rowHeight}px` }"> -->
+					<!-- 图标 + 角标 -->
+					<!-- <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`"> -->
+						<!-- 右上角角标 -->
+						<!-- <span v-if="item.badge?.show"
+							class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
+							:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
+							{{ item.badge.text }}
+						</span>
+						<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
+					</div> -->
+					<!-- 标题 -->
+					<!-- <span v-if="property.layout === 'iconText'" class="text-12px" :style="{
+					  color: item.titleColor,
+					  height: `${TITLE_HEIGHT}px`,
+					  lineHeight: `${TITLE_HEIGHT}px`
+					}">
+						{{ item.title }}
+					</span>
+				</div>
+			</div>
+		</el-carousel-item>
+	</el-carousel> -->
+	<view class="title">
+		我的服务
+	</view>
+	<view class="newList">
+		
+		<view class="new_menu" v-for="(page, pageIndex) in pages" :key="pageIndex">
+			<view v-for="(item, index) in page" :key="index" class="new_items" :style="{ width: columnWidth}">
+				<!-- 图标 + 角标 -->
+				<div class="relative" :class="`h-24px w-24px`">
+					<!-- 右上角角标 -->
+					<span v-if="item.badge?.show"
+						class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
+						:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
+						{{ item.badge.text }}
+					</span>
+					<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
+				</div>
+				<!-- 标题 -->
+				<span v-if="property.layout === 'iconText'" class="text-12px new_title" :style="{
+				  color: item.titleColor,
+				  height: `${TITLE_HEIGHT}px`,
+				  lineHeight: `${TITLE_HEIGHT}px`
+				}">
+					{{ item.title }}
+				</span>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup lang="ts">
-import { MenuSwiperProperty, MenuSwiperItemProperty } from './config'
-/** 菜单导航 */
-defineOptions({ name: 'MenuSwiper' })
-const props = defineProps<{ property: MenuSwiperProperty }>()
-// 标题的高度
-const TITLE_HEIGHT = 20
-// 图标的高度
-const ICON_SIZE = 42
-// 垂直间距：一行上下的间距
-const SPACE_Y = 16
+	import { MenuSwiperProperty, MenuSwiperItemProperty } from './config'
+	/** 菜单导航 */
+	defineOptions({ name: 'MenuSwiper' })
+	const props = defineProps<{ property : MenuSwiperProperty }>()
+	// 标题的高度
+	const TITLE_HEIGHT = 20
+	// 图标的高度
+	const ICON_SIZE = 42
+	// 垂直间距：一行上下的间距
+	const SPACE_Y = 16
 
-// 分页
-const pages = ref<MenuSwiperItemProperty[][]>([])
-// 轮播图高度
-const carouselHeight = ref(0)
-// 行高
-const rowHeight = ref(0)
-// 列宽
-const columnWidth = ref('')
-watch(
-  () => props.property,
-  () => {
-    // 计算列宽：每一列的百分比
-    columnWidth.value = `${100 * (1 / props.property.column)}%`
-    // 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
-    rowHeight.value =
-      (props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2
-    // 计算轮播的高度：行数 * 行高
-    carouselHeight.value = props.property.row * rowHeight.value
+	// 分页
+	const pages = ref<MenuSwiperItemProperty[][]>([])
+	// 轮播图高度
+	const carouselHeight = ref(0)
+	// 行高
+	const rowHeight = ref(0)
+	// 列宽
+	const columnWidth = ref('')
+	watch(
+		() => props.property,
+		() => {
+			// 计算列宽：每一列的百分比
+			columnWidth.value = `${100 * (1 / props.property.column)}%`
+			// 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
+			rowHeight.value =
+				(props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2
+			// 计算轮播的高度：行数 * 行高
+			carouselHeight.value = props.property.row * rowHeight.value
 
-    // 每页数量：行数 * 列数
-    const pageSize = props.property.row * props.property.column
-    // 清空分页
-    pages.value = []
-    // 每一页的菜单
-    let pageItems: MenuSwiperItemProperty[] = []
-    for (const item of props.property.list) {
-      // 本页满员，新建下一页
-      if (pageItems.length === pageSize) {
-        pageItems = []
-      }
-      // 增加一页
-      if (pageItems.length === 0) {
-        pages.value.push(pageItems)
-      }
-      // 本页增加一个
-      pageItems.push(item)
-    }
-  },
-  { immediate: true, deep: true }
-)
+			// 每页数量：行数 * 列数
+			const pageSize = props.property.row * props.property.column
+			// 清空分页
+			pages.value = []
+			// 每一页的菜单
+			let pageItems : MenuSwiperItemProperty[] = []
+			for (const item of props.property.list) {
+				// 本页满员，新建下一页
+				if (pageItems.length === pageSize) {
+					pageItems = []
+				}
+				// 增加一页
+				if (pageItems.length === 0) {
+					pages.value.push(pageItems)
+				}
+				// 本页增加一个
+				pageItems.push(item)
+			}
+		},
+		{ immediate: true, deep: true }
+	)
 </script>
 
 <style lang="scss">
-// 重写指示器样式，与 APP 保持一致
-:root {
-  .el-carousel__indicator {
-    padding-top: 0;
-    padding-bottom: 0;
-    .el-carousel__button {
-      --el-carousel-indicator-height: 6px;
-      --el-carousel-indicator-width: 6px;
-      --el-carousel-indicator-out-color: #ff6000;
-      border-radius: 6px;
-    }
-  }
-  .el-carousel__indicator.is-active {
-    .el-carousel__button {
-      --el-carousel-indicator-width: 12px;
-    }
-  }
-}
-</style>
+	.title {
+		padding: 10px 20px;
+		height: 20px;
+		line-height: 20px;
+		font-size: 12px;
+		font-weight: 600;
+		// border-bottom: 1px solid #dcdcdc;
+		margin-bottom:20px;
+	}
+	.new_menu {
+		display: flex;
+		flex-wrap: wrap;
+
+		.new_items {
+			width: 25%;
+			margin-bottom: 20px;
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
+			.new_title{
+				width:100%;
+				text-align: center;
+			}
+		}
+	}
+
+	// 重写指示器样式，与 APP 保持一致
+	:root {
+		.el-carousel__indicator {
+			padding-top: 0;
+			padding-bottom: 0;
+
+			.el-carousel__button {
+				--el-carousel-indicator-height: 6px;
+				--el-carousel-indicator-width: 6px;
+				--el-carousel-indicator-out-color: #ff6000;
+				border-radius: 6px;
+			}
+		}
+
+		.el-carousel__indicator.is-active {
+			.el-carousel__button {
+				--el-carousel-indicator-width: 12px;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
index e003b08..7e69ddb 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
@@ -1,7 +1,27 @@
 <template>
-  <div class="min-h-30px" v-html="article?.content"></div>
+  <div class="min-h-30px" >
+	  <view class="floxt">
+	  	<view class="addClass" v-for="(item, index) in article?.list" :key="index" >
+	  		<view class="image">
+	  			<img
+	  				:src="item.picUrl"
+	  				alt="" />
+	  		</view>
+	  		<view class="text">
+	  			<view class="top">
+	  				{{item.title}}
+	  			</view>
+	  			<view class="bottom">
+	  				<!-- {{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }} -->
+					{{ formatDate(item.createTime) }}
+	  			</view>
+	  		</view>
+	  	</view>
+	  </view>
+  </div>
 </template>
 <script setup lang="ts">
+	import { formatDate } from '@/utils/formatTime'
 import { PromotionArticleProperty } from './config'
 import * as ArticleApi from '@/api/mall/promotion/article/index'
 
@@ -15,7 +35,9 @@ watch(
   () => props.property.id,
   async () => {
     if (props.property.id) {
-      article.value = await ArticleApi.getArticle(props.property.id)
+      // article.value = await ArticleApi.getArticle(props.property.id)
+      article.value = await ArticleApi.getArticlePage()
+	  console.log(article.value,"article.value");
     }
   },
   {
@@ -24,4 +46,44 @@ watch(
 )
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	.floxt {
+		width: 100%;
+		.addClass {
+			background:white;
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			margin:8px 0;
+			// padding: 40px;
+			// padding-right: 0;
+			// height: 200px;
+			.image {
+				width: 130px;
+				height: 81px;
+				margin-right: 18px;
+				padding:8px 8px;
+				display:flex;
+				img{
+					width: 100%;
+					height: 100%;
+				}
+			}
+	
+			.text {
+				display: flex;
+				width: 100%;
+				// text-align: center;
+				padding:20px 20px;
+				flex:1;
+				flex-direction: column;
+				justify-content: space-between;
+				.bottom{
+					color: #999;
+					font-size: 12px;
+				}
+				
+			}
+		}
+	}
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/util.ts b/yudao-admin-vue3/src/components/DiyEditor/util.ts
index fac26e7..c75945f 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/util.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/util.ts
@@ -135,11 +135,11 @@ export const PAGE_LIBS = [
     ]
   },
   { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
-  {
-    name: '用户组件',
-    extended: true,
-    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
-  },
+  // {
+  //   name: '用户组件',
+  //   extended: true,
+  //   components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
+  // },
   {
     name: '营销组件',
     extended: true,
-- 
2.45.2