9、我的服务后台与小程序的图标大小调整与显示一行四列并且不用轮播直接向下排列
10、后台 营销文章装修模块调整为列表(无法选择某一篇文章只能显示全部) 11、后台 装修用户组件隐藏
This commit is contained in:
parent
dd810ca199
commit
8af485a215
@ -1,12 +1,9 @@
|
|||||||
<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"
|
|
||||||
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="flex flex-1 flex-row items-center gap-8px">
|
||||||
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
|
<el-image v-if="item.iconUrl" class="wh" :src="item.iconUrl" />
|
||||||
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
|
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-center flex flex-row justify-center gap-4px">
|
<div class="item-center flex flex-row justify-center gap-4px">
|
||||||
@ -18,14 +15,31 @@
|
|||||||
</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>
|
@ -1,69 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-carousel
|
<!-- <el-carousel :height="`${carouselHeight}px`" :autoplay="false" arrow="hover" indicator-position="outside">
|
||||||
:height="`${carouselHeight}px`"
|
|
||||||
:autoplay="false"
|
|
||||||
arrow="hover"
|
|
||||||
indicator-position="outside"
|
|
||||||
>
|
|
||||||
<el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
|
<el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
|
||||||
<div class="flex flex-row flex-wrap">
|
<div class="flex flex-row flex-wrap">
|
||||||
<div
|
<div v-for="(item, index) in page" :key="index"
|
||||||
v-for="(item, index) in page"
|
|
||||||
:key="index"
|
|
||||||
class="relative flex flex-col items-center justify-center"
|
class="relative flex flex-col items-center justify-center"
|
||||||
:style="{ width: columnWidth, height: `${rowHeight}px` }"
|
:style="{ width: columnWidth, height: `${rowHeight}px` }"> -->
|
||||||
>
|
|
||||||
<!-- 图标 + 角标 -->
|
<!-- 图标 + 角标 -->
|
||||||
<div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
|
<!-- <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`"> -->
|
||||||
<!-- 右上角角标 -->
|
<!-- 右上角角标 -->
|
||||||
<span
|
<!-- <span v-if="item.badge?.show"
|
||||||
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"
|
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 }"
|
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }">
|
||||||
>
|
|
||||||
{{ item.badge.text }}
|
{{ item.badge.text }}
|
||||||
</span>
|
</span>
|
||||||
<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
|
<el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
|
||||||
</div>
|
</div> -->
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<span
|
<!-- <span v-if="property.layout === 'iconText'" class="text-12px" :style="{
|
||||||
v-if="property.layout === 'iconText'"
|
|
||||||
class="text-12px"
|
|
||||||
:style="{
|
|
||||||
color: item.titleColor,
|
color: item.titleColor,
|
||||||
height: `${TITLE_HEIGHT}px`,
|
height: `${TITLE_HEIGHT}px`,
|
||||||
lineHeight: `${TITLE_HEIGHT}px`
|
lineHeight: `${TITLE_HEIGHT}px`
|
||||||
}"
|
}">
|
||||||
>
|
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</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>
|
</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,
|
||||||
() => {
|
() => {
|
||||||
// 计算列宽:每一列的百分比
|
// 计算列宽:每一列的百分比
|
||||||
@ -79,7 +93,7 @@ watch(
|
|||||||
// 清空分页
|
// 清空分页
|
||||||
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) {
|
||||||
@ -94,15 +108,42 @@ watch(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true, deep: true }
|
{ immediate: true, deep: true }
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
// 重写指示器样式,与 APP 保持一致
|
.title {
|
||||||
:root {
|
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 {
|
.el-carousel__indicator {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
||||||
.el-carousel__button {
|
.el-carousel__button {
|
||||||
--el-carousel-indicator-height: 6px;
|
--el-carousel-indicator-height: 6px;
|
||||||
--el-carousel-indicator-width: 6px;
|
--el-carousel-indicator-width: 6px;
|
||||||
@ -110,10 +151,11 @@ watch(
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-carousel__indicator.is-active {
|
.el-carousel__indicator.is-active {
|
||||||
.el-carousel__button {
|
.el-carousel__button {
|
||||||
--el-carousel-indicator-width: 12px;
|
--el-carousel-indicator-width: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user