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

Merge pull request '首页装修与小程序样式一致调整' (#107) from Branch_chensl into master

Browse Source 
Reviewed-on: #107
This commit is contained in:
root 2024-11-06 18:16:59 +08:00
commit eb4b68bd36
10 changed files with 492 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
<div <div
class="new-class flex flex-row text-12px" class="new-class flex-row text-12px"
:style="{ :style="{
gap: `${property.space}px`, gap: `${property.space}px`,
width: scrollbarWidth width: scrollbarWidth
@ -13,11 +13,13 @@
background: property.bgImg background: property.bgImg
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat` ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
: '#fff', : '#fff',
width: `${couponWidth}px`, width: `150px`,
padding: `10px 10px`,
color: property.textColor color: property.textColor
}" }"
v-for="(coupon, index) in couponList" v-for="(coupon, index) in couponList"
:key="index" :key="index"
style="padding-left: 0px;padding-right: 4px;"
> >
<!-- 布局1：1列--> <!-- 布局1：1列-->
<!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px"> <!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
@ -41,16 +43,17 @@
<!-- 布局2：2列--> <!-- 布局2：2列-->
<!-- v-else-if="property.columns === 2"s --> <!-- v-else-if="property.columns === 2"s -->
<div <div
class="m-l-16px flex flex-row justify-between" class="flex flex-row justify-between"
style=""
> >
<div class="flex flex-col justify-evenly gap-4px"> <div class="flex flex-col justify-evenly gap-4px" style="flex:1;">
<!-- 优惠值 --> <!-- 优惠值 -->
<CouponDiscount :coupon="coupon" /> <CouponDiscount :coupon="coupon" style="text-align:center;" />
<div>{{ coupon.name }}</div> <div style="text-align:center;">{{ coupon.name }}</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col" style="writing-mode: vertical-rl;">
<div <div
class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center" class="h-full w-20px rounded-20px text-center"
:style="{ :style="{
color: property.button.color, color: property.button.color,
background: property.button.bgColor background: property.button.bgColor
@ -138,8 +141,11 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.new-class{ .new-class{
margin-left: 10px; margin-left: 10px;
overflow-x:scroll;
white-space: nowrap;
.box-content{ .box-content{
margin-right:10px; margin-right:10px;
display:inline-block;
} }
} }
</style> </style>

13
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
View File

@ -3,7 +3,7 @@
<div <div
v-for="(item, index) in property.list" v-for="(item, index) in property.list"
:key="index" :key="index"
class="relative flex flex-col items-center p-b-14px p-t-20px" class="relative flex flex-col items-center"
:style="{ width: `${100 * (1 / property.column)}%` }" :style="{ width: `${100 * (1 / property.column)}%` }"
> >
<!-- 右上角角标 --> <!-- 右上角角标 -->
@ -14,11 +14,11 @@
> >
{{ item.badge.text }} {{ item.badge.text }}
</span> </span>
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" /> <el-image v-if="item.iconUrl" class="h-40px w-40px" :src="item.iconUrl" />
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }"> <span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
{{ item.title }} {{ item.title }}
</span> </span>
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }"> <span v-if="item.subtitle" class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
{{ item.subtitle }} {{ item.subtitle }}
</span> </span>
</div> </div>
@ -32,4 +32,9 @@ defineOptions({ name: 'MenuGrid' })
defineProps<{ property: MenuGridProperty }>() defineProps<{ property: MenuGridProperty }>()
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.items-center{
margin:5px 0;
}
</style>

80
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/config.ts Normal file
View File

@ -0,0 +1,80 @@
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
import { cloneDeep } from 'lodash-es'
/** 宫格导航属性 */
export interface MenuGridProperty {
// 列数
column: number
// 导航菜单列表
list: MenuGridItemProperty[]
// 组件样式
style: ComponentStyle
}
/** 宫格导航项目属性 */
export interface MenuGridItemProperty {
// 图标链接
iconUrl: string
// 标题
title: string
// 标题颜色
titleColor: string
// 副标题
subtitle: string
// 副标题颜色
subtitleColor: string
// 链接
url: string
// 角标
badge: {
// 是否显示
show: boolean
// 角标文字
text: string
// 角标文字颜色
textColor: string
// 角标背景颜色
bgColor: string
}
}
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
subtitle: '副标题',
subtitleColor: '#bbb',
badge: {
show: false,
textColor: '#fff',
bgColor: '#FF6000'
}
} as MenuGridItemProperty
import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
// 定义组件
export const component = {
id: 'MenuGridTow',
name: '魔方',
// icon: 'bi:grid-3x3-gap',
icon: logo,
property: {
column: 3,
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
style: {
bgType: 'color',
bgColor: '#fff',
marginBottom: 8,
marginLeft: 8,
marginRight: 8,
padding: 8,
paddingTop: 8,
paddingRight: 8,
paddingBottom: 8,
paddingLeft: 8,
borderRadius: 8,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderBottomRightRadius: 8,
borderBottomLeftRadius: 8
} as ComponentStyle
}
} as DiyComponent<MenuGridProperty>

201
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/index.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div class='new_czbk'>
<div class="t">
<text class="left-font">超值爆款</text>
<div class="sub">美好生活由此开始</div>
</div>
<div class="new-list">
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendBest',
});"> -->
<div class="item" >
<div class="nei">
<div class="l">
<div class="t">今日推荐</div>
<div class="c">店主诚意推荐品质商品</div>
<div class="b">
<!-- GO! -->
<img src="https://zysc.fjptzykj.com:3000/shangcheng/40a7582be7aeb5a6047415ab3a6728439a2798a4752ffcc1c063d66a534aa630.png"
class="img"/>
</div>
</div>
<div class="r">
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/c80faeeeb2d6dadcdbe7e6d1a4caa06869b94301612cdf157414a10559b38267.png"
class="img"/>
</div>
</div>
</div>
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendHot',
});"> -->
<div class="item">
<div class="nei">
<div class="l">
<div class="t">热门榜单</div>
<div class="c">店主诚意推荐品质商品</div>
<div class="b">
<!-- GO! -->
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/5c72fc99989bf0a7e59b57f519c76c9a98cb20478384e20b1b934aa8f80cc598.png"
class="img"/>
</div>
</div>
<div class="r">
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/904fd4848fde8025ccc17693662efd5b7bf5ec3f2656ecc7de407c8c46f910b2.png"
class="img"/>
</div>
</div>
</div>
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendNew',
});"> -->
<div class="item">
<div class="nei">
<div class="l">
<div class="t">首发新品</div>
<div class="c">新品上架等 你来拿</div>
<div class="b">
<!-- GO! -->
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/ebb2fc0512d1bd6a6d21a2c07f6603bfd2ea6f7e23377eb4cd8118d89d666589.png"
class="img"/>
</div>
</div>
<div class="r">
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/7c71cbf2c757418302ea9ef2952893c24e1d46c4cc35a821f56be0f315bcabb0.png"
class="img"/>
</div>
</div>
</div>
<!-- <div class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendGood',
});"> -->
<div class="item">
<div class="nei">
<div class="l">
<div class="t">促销单品</div>
<div class="c">综合评选好 产品</div>
<div class="b">
<!-- GO! -->
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/aac8baa7a6feb9ee3459d1cf75ba9a7e8bacb5d93c88ac95c1b0ecd29b847f96.png"
class="img"/>
</div>
</div>
<div class="r">
<img
src="https://zysc.fjptzykj.com:3000/shangcheng/8a61c35d82702c61f97ef3db43a8d6755b2eca3d78a22dbaa55851e815e96a23.png"
class="img" />
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { MenuGridProperty } from './config'
/** 宫格导航 */
defineOptions({ name: 'MenuGridTow' })
defineProps<{ property: MenuGridProperty }>()
</script>
<style scoped lang="scss">
.new_czbk {
width: 100%;
background: rgba(255, 229, 227);
border-radius: 5px;
margin: 0 auto;
padding: 5px 0;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
&>.t {
display: flex;
align-items: center;
padding:0 10px;
.left-font {
color: rgba(252, 60, 62);
font-size: 17px;
font-weight: 700;
}
.sub {
background: rgba(248, 79, 43);
color: white;
border-radius: 20px 0px 20px 0px;
padding: 0 13px;
margin-left: 10px;
font-size: 13px;
}
}
.new-list {
// width: 100%;
margin-right:10px;
.item {
float: left;
width: 50%;
.nei {
margin: 10px;
margin-right:0;
margin-bottom: 0;
background: white;
border-radius: 10px;
padding: 8px 10px;
display: flex;
.l {
width: 50%;
.t {
// font-size: 17px;
}
.c {
color: rgba(153, 153, 153);
font-size: 12px;
margin: 3px 0;
}
.b {
// display: flex;
// align-items: center;
// justify-content: space-around;
// background: #329cff;
// margin: 0 3px;
// border-radius: 15px;
// color: white;
// font-weight: 700;
// padding: 0px 9px;
// font-style: oblique;
.img {
width: 76%;
height: 20px;
}
}
}
.r {
width: 49%;
.img {
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>

66
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<el-form label-width="80px" :model="formData" class="m-t-8px">
<el-form-item label="每行数量" prop="column">
<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>
<el-card header="菜单设置" class="property-group" shadow="never">
<Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
<template #default="{ element }">
<el-form-item label="图标" prop="iconUrl">
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
<template #tip> 建议尺寸：44 * 44 </template>
</UploadImg>
</el-form-item>
<el-form-item label="标题" prop="title">
<InputWithColor v-model="element.title" v-model:color="element.titleColor" />
</el-form-item>
<el-form-item label="副标题" prop="subtitle">
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
</el-form-item>
<el-form-item label="链接" prop="url">
<AppLinkInput v-model="element.url" />
</el-form-item>
<el-form-item label="显示角标" prop="badge.show">
<el-switch v-model="element.badge.show" />
</el-form-item>
<template v-if="element.badge.show">
<el-form-item label="角标内容" prop="badge.text">
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>
</el-form-item>
<el-form-item label="背景颜色" prop="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" />
</el-form-item>
</template>
</template>
</Draggable>
</el-card>
</el-form>
</ComponentContainerProperty>
</template>
<script setup lang="ts">
import { usePropertyForm } from '@/components/DiyEditor/util'
import {
EMPTY_MENU_GRID_ITEM_PROPERTY,
MenuGridProperty
} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
/** 宫格导航属性面板 */
defineOptions({ name: 'MenuGridProperty' })
const props = defineProps<{ modelValue: MenuGridProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>
<style scoped lang="scss"></style>

2
yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
View File

@ -10,7 +10,7 @@
<div class="h-24px truncate leading-24px">{{ item.text }}</div> <div class="h-24px truncate leading-24px">{{ item.text }}</div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<Icon icon="ep:arrow-right" /> <!-- <Icon icon="ep:arrow-right" /> -->
</div> </div>
</template> </template>

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

@ -1,5 +1,23 @@
<template> <template>
<div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef"> <div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef">
<view class="new-fenlei">
<view class="list on">
<view class="t">首页新品</view>
<view class="b">最新出炉</view>
</view>
<view class="list">
<view class="t">精品推荐</view>
<view class="b">猜你喜欢</view>
</view>
<view class="list">
<view class="t">热门榜单</view>
<view class="b">好评如云</view>
</view>
<view class="list">
<view class="t">促销单品</view>
<view class="b">多买多销</view>
</view>
</view>
<div <div
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white" class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
:style="{ :style="{
@ -164,4 +182,44 @@ const calculateWidth = () => {
} }
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.new-fenlei {
width: 100%;
display: flex;
margin:10px 0;
justify-content: space-around;
.list {
width: 100%;
display:flex;
flex-wrap:wrap;
&.on{
.t {
color: #e93422;
}
.b {
background: #e93422;
color:white;
}
}
.t {
width:100%;
text-align: center;
font-size: 16px;
}
.b {
// background: rgba(255, 102, 7);
text-align: center;
color: rgba(153,153,153);
border-radius: 15px;
width: 63%;
margin: 0 auto;
font-size: 12px;
margin-top:5px;
}
}
}
</style>

18
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
View File

@ -27,8 +27,8 @@
:style="{ :style="{
gridGap: `${property.space}px`, gridGap: `${property.space}px`,
gridTemplateColumns, gridTemplateColumns,
width: scrollbarWidth
}" }"
style="padding:0 10px;padding-bottom: 8px;"
> >
<!-- 商品 --> <!-- 商品 -->
<div <div
@ -53,7 +53,7 @@
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" /> <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
<div <div
:class="[ :class="[
'flex flex-col gap-8px p-8px box-border', 'flex flex-col p-8px box-border',
{ {
'w-[calc(100%-64px)]': columns === 2, 'w-[calc(100%-64px)]': columns === 2,
'w-full': columns === 3 'w-full': columns === 3
@ -79,6 +79,7 @@
</span> </span>
</div> </div>
</div> </div>
<view class="sss">参与拼团</view>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
@ -145,9 +146,18 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sss {
width: 100%;
// margin-top: 10px;
padding: 3px;
font-size: 13px;
background: #e93422;
text-align: center;
color: white;
border-radius: 0px 0px 5px 5px;
}
.new-class{ .new-class{
padding: 10px; padding:0 0;
// width:42%; // width:42%;
} }

66
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
View File

@ -10,7 +10,12 @@
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" /> src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
<span class="new-text">限时秒杀</span> <span class="new-text">限时秒杀</span>
</div> </div>
<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span> <div style="color: rgba(255, 51, 35, 1); font-size:15px;" class="title-text">
<span class="time">05</span>:
<span class="time">00</span>:
<span class="time">00</span>
</div>
</div> </div>
<div class="item-center flex flex-row justify-center gap-4px"> <div class="item-center flex flex-row justify-center gap-4px">
<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span> <span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
@ -23,10 +28,8 @@
<!-- 商品网格 --> <!-- 商品网格 -->
<!-- gridGap: `${property.space}px`, --> <!-- gridGap: `${property.space}px`, -->
<div class="new-main" :style="{ <div class="new-main" :style="{
gridTemplateColumns,
gridTemplateColumns, }" style="padding:0 10px;">
width: scrollbarWidth
}">
<!-- 商品 --> <!-- 商品 -->
<!-- <!--
:style="{ :style="{
@ -44,19 +47,14 @@
</div> </div>
<!-- 商品封面图 --> <!-- 商品封面图 -->
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" /> <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
<div :class="[ <div>
'flex flex-col gap-8px p-8px box-border',
{
'w-[calc(100%-64px)]': columns === 2,
'w-full': columns === 3
}
]">
<!-- 商品名称 --> <!-- 商品名称 -->
<div v-if="property.fields.name.show" class="truncate text-12px" <div v-if="property.fields.name.show" class="truncate text-12px"
:style="{ color: property.fields.name.color }"> :style="{ color: property.fields.name.color }" style="margin: 5px 0;">
{{ spu.name }} {{ spu.name }}
</div> </div>
<div> <div style="display: flex;">
<div class="fff">抢</div>
<!-- 商品价格 --> <!-- 商品价格 -->
<span v-if="property.fields.price.show" class="text-12px" <span v-if="property.fields.price.show" class="text-12px"
:style="{ color: property.fields.price.color }"> :style="{ color: property.fields.price.color }">
@ -129,6 +127,24 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.fff {
padding: 1px 3px;
font-size: 8px;
background: #e93422;
color: white;
border-radius: 2px;
margin-right: 2px;
}
.time {
width: 20px;
height: 20px;
background: rgba(255, 237, 238, 1);
color: rgba(255, 51, 35, 1);
text-align: center;
padding: 0 3px;
}
:deep(.el-scrollbar__view) { :deep(.el-scrollbar__view) {
background-color: white; background-color: white;
border-radius: 12px; border-radius: 12px;
@ -136,27 +152,35 @@
.new-class { .new-class {
width: 33%; width: 33%;
padding: 10px; border-radius: 8px 8px 8px 0px;
padding-bottom: 10px;
// padding: 10px;
// width:42%; // width:42%;
} }
.new-main { .new-main {
display: flex; display: flex;
gap: 8px;
grid-template-columns: repeat(3, auto);
padding: 0px 10px 8px;
padding-bottom: 10px;
} }
:deep(.el-image) { // :deep(.el-image) {
width: 100% !important; // width: 100% !important;
} // }
.wh { .wh {
position: relative; position: relative;
padding-right: 10px; padding-right: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
.new-text1{
width:30px; .new-text1 {
width: 30px;
} }
.new-text{
.new-text {
font-weight: 700; font-weight: 700;
} }
} }

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

@ -118,7 +118,8 @@ export const PAGE_LIBS = [
'MenuGrid', 'MenuGrid',
'MenuList', 'MenuList',
'Popover', 'Popover',
'FloatingActionButton' 'FloatingActionButton',
"MenuGridTow"
] ]
}, },
{ {