root/allLikeMall
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

9、我的服务后台与小程序的图标大小调整与显示一行四列并且不用轮播直接向下排列 #16

Merged
root merged 1 commits from Branch_csl into master 2024-09-25 15:22:06 +08:00
Conversation 0 Commits 1 Files Changed 4 +260 -142
4 changed files with 260 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/index.vue
View File

@ -1,31 +1,45 @@
<template> <template>
<div class="min-h-42px flex flex-col"> <div class="min-h-42px flex flex-col">
<div <div v-for="(item, index) in property.list" :key="index"
v-for="(item, index) in property.list" class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
:key="index" <div class="flex flex-1 flex-row items-center gap-8px">
class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px" <el-image v-if="item.iconUrl" class="wh" :src="item.iconUrl" />
> <span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
<div class="flex flex-1 flex-row items-center gap-8px"> </div>
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" /> <div class="item-center flex flex-row justify-center gap-4px">
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span> <span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
</div> <Icon icon="ep-arrow-right" color="#000" :size="16" />
<div class="item-center flex flex-row justify-center gap-4px"> </div>
<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span> </div>
<Icon icon="ep-arrow-right" color="#000" :size="16" /> </div>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { MenuListProperty } from './config' import { MenuListProperty } from './config'
/** 列表导航 */ /** 列表导航 */
defineOptions({ name: 'MenuList' }) defineOptions({ name: 'MenuList' })
defineProps<{ property: MenuListProperty }>() defineProps<{ property : MenuListProperty }>()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.item + .item { .item+.item {
border-top: 1px solid #eee; 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> </style>

260
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
View File

@ -1,119 +1,161 @@
<template> <template>
<el-carousel <!-- <el-carousel :height="`${carouselHeight}px`" :autoplay="false" arrow="hover" indicator-position="outside">
:height="`${carouselHeight}px`" <el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
:autoplay="false" <div class="flex flex-row flex-wrap">
arrow="hover" <div v-for="(item, index) in page" :key="index"
indicator-position="outside" class="relative flex flex-col items-center justify-center"
> :style="{ width: columnWidth, height: `${rowHeight}px` }"> -->
<el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex"> <!-- 图标 + 角标 -->
<div class="flex flex-row flex-wrap"> <!-- <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`"> -->
<div <!-- 右上角角标 -->
v-for="(item, index) in page" <!-- <span v-if="item.badge?.show"
:key="index" class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
class="relative flex flex-col items-center justify-center" :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
:style="{ width: columnWidth, height: `${rowHeight}px` }" {{ item.badge.text }}
> </span>
<!-- 图标 + 角标 --> <el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
<div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`"> </div> -->
<!-- 右上角角标 --> <!-- 标题 -->
<span <!-- <span v-if="property.layout === 'iconText'" class="text-12px" :style="{
v-if="item.badge?.show" color: item.titleColor,
class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px" height: `${TITLE_HEIGHT}px`,
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }" lineHeight: `${TITLE_HEIGHT}px`
> }">
{{ item.badge.text }} {{ item.title }}
</span> </span>
<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" /> </div>
</div> </div>
<!-- 标题 --> </el-carousel-item>
<span </el-carousel> -->
v-if="property.layout === 'iconText'" <view class="title">
class="text-12px" 我的服务
:style="{ </view>
color: item.titleColor, <view class="newList">
height: `${TITLE_HEIGHT}px`,
lineHeight: `${TITLE_HEIGHT}px` <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}">
> <!-- 图标 + 角标 -->
{{ item.title }} <div class="relative" :class="`h-24px w-24px`">
</span> <!-- 右上角角标 -->
</div> <span v-if="item.badge?.show"
</div> class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
</el-carousel-item> :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
</el-carousel> {{ 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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { MenuSwiperProperty, MenuSwiperItemProperty } from './config' import { MenuSwiperProperty, MenuSwiperItemProperty } from './config'
/** 菜单导航 */ /** 菜单导航 */
defineOptions({ name: 'MenuSwiper' }) defineOptions({ name: 'MenuSwiper' })
const props = defineProps<{ property: MenuSwiperProperty }>() const props = defineProps<{ property : MenuSwiperProperty }>()
// 标题的高度 // 标题的高度
const TITLE_HEIGHT = 20 const TITLE_HEIGHT = 20
// 图标的高度 // 图标的高度
const ICON_SIZE = 42 const ICON_SIZE = 42
// 垂直间距：一行上下的间距 // 垂直间距：一行上下的间距
const SPACE_Y = 16 const SPACE_Y = 16
// 分页 // 分页
const pages = ref<MenuSwiperItemProperty[][]>([]) const pages = ref<MenuSwiperItemProperty[][]>([])
// 轮播图高度 // 轮播图高度
const carouselHeight = ref(0) const carouselHeight = ref(0)
// 行高 // 行高
const rowHeight = ref(0) const rowHeight = ref(0)
// 列宽 // 列宽
const columnWidth = ref('') const columnWidth = ref('')
watch( watch(
() => props.property, () => props.property,
() => { () => {
// 计算列宽：每一列的百分比 // 计算列宽：每一列的百分比
columnWidth.value = `${100 * (1 / props.property.column)}%` columnWidth.value = `${100 * (1 / props.property.column)}%`
// 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2 // 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
rowHeight.value = rowHeight.value =
(props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2 (props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2
// 计算轮播的高度：行数 * 行高 // 计算轮播的高度：行数 * 行高
carouselHeight.value = props.property.row * rowHeight.value carouselHeight.value = props.property.row * rowHeight.value
// 每页数量：行数 * 列数 // 每页数量：行数 * 列数
const pageSize = props.property.row * props.property.column const pageSize = props.property.row * props.property.column
// 清空分页 // 清空分页
pages.value = [] pages.value = []
// 每一页的菜单 // 每一页的菜单
let pageItems: MenuSwiperItemProperty[] = [] let pageItems : MenuSwiperItemProperty[] = []
for (const item of props.property.list) { for (const item of props.property.list) {
// 本页满员，新建下一页 // 本页满员，新建下一页
if (pageItems.length === pageSize) { if (pageItems.length === pageSize) {
pageItems = [] pageItems = []
} }
// 增加一页 // 增加一页
if (pageItems.length === 0) { if (pageItems.length === 0) {
pages.value.push(pageItems) pages.value.push(pageItems)
} }
// 本页增加一个 // 本页增加一个
pageItems.push(item) pageItems.push(item)
} }
}, },
{ immediate: true, deep: true } { immediate: true, deep: true }
) )
</script> </script>
<style lang="scss"> <style lang="scss">
// 重写指示器样式，与 APP 保持一致 .title {
:root { padding: 10px 20px;
.el-carousel__indicator { height: 20px;
padding-top: 0; line-height: 20px;
padding-bottom: 0; font-size: 12px;
.el-carousel__button { font-weight: 600;
--el-carousel-indicator-height: 6px; // border-bottom: 1px solid #dcdcdc;
--el-carousel-indicator-width: 6px; margin-bottom:20px;
--el-carousel-indicator-out-color: #ff6000; }
border-radius: 6px; .new_menu {
} display: flex;
} flex-wrap: wrap;
.el-carousel__indicator.is-active {
.el-carousel__button { .new_items {
--el-carousel-indicator-width: 12px; 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> </style>

68
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/index.vue
View File

@ -1,7 +1,27 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { PromotionArticleProperty } from './config' import { PromotionArticleProperty } from './config'
import * as ArticleApi from '@/api/mall/promotion/article/index' import * as ArticleApi from '@/api/mall/promotion/article/index'
@ -15,7 +35,9 @@ watch(
() => props.property.id, () => props.property.id,
async () => { async () => {
if (props.property.id) { 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> </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>

10
yudao-admin-vue3/src/components/DiyEditor/util.ts
View File

@ -135,11 +135,11 @@ export const PAGE_LIBS = [
] ]
}, },
{ name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] }, { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] },
{ // {
name: '用户组件', // name: '用户组件',
extended: true, // extended: true,
components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'] // components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon']
}, // },
{ {
name: '营销组件', name: '营销组件',
extended: true, extended: true,