Branch_chensl #117
@ -2,32 +2,33 @@
|
|||||||
<ComponentContainerProperty v-model="formData.style">
|
<ComponentContainerProperty v-model="formData.style">
|
||||||
<!-- 表单 -->
|
<!-- 表单 -->
|
||||||
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||||
<el-form-item label="每行数量" prop="column">
|
<!-- <el-form-item label="每行数量" prop="column">
|
||||||
<el-radio-group v-model="formData.column">
|
<el-radio-group v-model="formData.column">
|
||||||
<el-radio :label="3">3个</el-radio>
|
<el-radio :label="3">3个</el-radio>
|
||||||
<el-radio :label="4">4个</el-radio>
|
<el-radio :label="4">4个</el-radio>
|
||||||
<el-radio :label="5">5个</el-radio>
|
<el-radio :label="5">5个</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
|
|
||||||
<el-card header="菜单设置" class="property-group" shadow="never">
|
<el-card header="菜单设置" class="property-group" shadow="never">
|
||||||
<Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
|
<Draggable v-model="formData.list" handle="false">
|
||||||
<template #default="{ element }">
|
<template #default="{ element }">
|
||||||
<el-form-item label="图标" prop="iconUrl">
|
<!-- <el-form-item label="图标" prop="iconUrl">
|
||||||
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
|
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
|
||||||
<template #tip> 建议尺寸:44 * 44 </template>
|
<template #tip> 建议尺寸:44 * 44 </template>
|
||||||
</UploadImg>
|
</UploadImg>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="标题" prop="title">
|
<el-form-item label="标题" prop="title">
|
||||||
<InputWithColor v-model="element.title" v-model:color="element.titleColor" />
|
<!-- <InputWithColor v-model="element.title" v-model:color="element.titleColor" /> -->
|
||||||
|
<div>{{element.title}}</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="副标题" prop="subtitle">
|
<!-- <el-form-item label="副标题" prop="subtitle">
|
||||||
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
|
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="链接" prop="url">
|
<el-form-item label="链接" prop="url">
|
||||||
<AppLinkInput v-model="element.url" />
|
<AppLinkInput v-model="element.url" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="显示角标" prop="badge.show">
|
<!-- <el-form-item label="显示角标" prop="badge.show">
|
||||||
<el-switch v-model="element.badge.show" />
|
<el-switch v-model="element.badge.show" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<template v-if="element.badge.show">
|
<template v-if="element.badge.show">
|
||||||
@ -40,7 +41,7 @@
|
|||||||
<el-form-item label="背景颜色" prop="badge.bgColor">
|
<el-form-item label="背景颜色" prop="badge.bgColor">
|
||||||
<ColorInput v-model="element.badge.bgColor" />
|
<ColorInput v-model="element.badge.bgColor" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template> -->
|
||||||
</template>
|
</template>
|
||||||
</Draggable>
|
</Draggable>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -61,6 +62,46 @@ defineOptions({ name: 'MenuGridProperty' })
|
|||||||
const props = defineProps<{ modelValue : MenuGridProperty }>()
|
const props = defineProps<{ modelValue : MenuGridProperty }>()
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||||
|
if (formData.value.list.length == 1 || formData.value.list.length == 2 || formData.value.list.length == 3) {
|
||||||
|
formData.value = {
|
||||||
|
column: 3,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
title: "今日推荐",
|
||||||
|
url: '/pages/index/page?id=19'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "热门榜单",
|
||||||
|
url: '/pages/index/page?id=21'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "首发新品",
|
||||||
|
url: '/pages/index/page?id=22'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "促销单品",
|
||||||
|
url: '/pages/index/page?id=23'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
style: {
|
||||||
|
bgColor: "#fff",
|
||||||
|
bgType: "color",
|
||||||
|
borderBottomLeftRadius: 8,
|
||||||
|
borderBottomRightRadius: 8,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderTopLeftRadius: 8,
|
||||||
|
borderTopRightRadius: 8,
|
||||||
|
marginBottom: 8,
|
||||||
|
marginLeft: 8,
|
||||||
|
marginRight: 8,
|
||||||
|
padding: 0,
|
||||||
|
paddingBottom: 0,
|
||||||
|
paddingLeft: 0,
|
||||||
|
paddingRight: 0,
|
||||||
|
paddingTop: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
@ -69,10 +69,10 @@
|
|||||||
</draggable>
|
</draggable>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<!-- 手机底部导航 -->
|
<!-- 手机底部导航 -->
|
||||||
<!-- <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
|
<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
|
||||||
<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
|
<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
|
||||||
:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
|
:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
|
||||||
</div> -->
|
</div>
|
||||||
<!-- 固定布局的组件 操作按钮区 -->
|
<!-- 固定布局的组件 操作按钮区 -->
|
||||||
<div class="fixed-component-action-group">
|
<div class="fixed-component-action-group">
|
||||||
<el-tag v-if="showPageConfig" size="large"
|
<el-tag v-if="showPageConfig" size="large"
|
||||||
|
@ -10,11 +10,11 @@
|
|||||||
|
|
||||||
<div class="mainBottom">
|
<div class="mainBottom">
|
||||||
<div class='item' :class="currItem == 1 ? 'on': ''" @click="clickItem(1)">
|
<div class='item' :class="currItem == 1 ? 'on': ''" @click="clickItem(1)">
|
||||||
<img class="img" src="https://zysc.fjptzykj.com:3000/shangcheng/a7d0409cbf5335a2780409756914c530fc7c88bec85fc81302b53760d9be4a03.jpg" />
|
<img class="img" src="https://zysc.fjptzykj.com:3000/shangcheng/921278a710b8035ac2e4fd40a08f64e3652c5130c08c633b7e136714d57c1001.jpg" />
|
||||||
<div class="text">样式1</div>
|
<div class="text">样式1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='item' :class="currItem == 2 ? 'on': ''" @click="clickItem(2)">
|
<div class='item' :class="currItem == 2 ? 'on': ''" @click="clickItem(2)">
|
||||||
<img class="img" src="https://zysc.fjptzykj.com:3000/shangcheng/9096b2c04a6e46ea562999a93a1b975100c6b4557e680dcb31de6d3555407841.png" />
|
<img class="img" src="https://zysc.fjptzykj.com:3000/shangcheng/909ef630cff7cdc957962ae782ee9a882c86c35732140b1c9e013341fa559126.jpg" />
|
||||||
<div class="text">样式2</div>
|
<div class="text">样式2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -22,6 +22,14 @@
|
|||||||
<div class="le" style="background:rgb(66, 202, 77);"></div>
|
<div class="le" style="background:rgb(66, 202, 77);"></div>
|
||||||
<div class="ri">生鲜绿</div>
|
<div class="ri">生鲜绿</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="item" :class="currItem== 'pink' ? 'on': ''" @click="clickItem('pink')">
|
||||||
|
<div class="le" style="background:#ff448f;"></div>
|
||||||
|
<div class="ri">魅力粉</div>
|
||||||
|
</div>
|
||||||
|
<div class="item" :class="currItem== 'orange' ? 'on': ''" @click="clickItem('orange')">
|
||||||
|
<div class="le" style="background:#fe5c2d;"></div>
|
||||||
|
<div class="ri">活力橙</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mainBottom">
|
<div class="mainBottom">
|
||||||
<div class='item' v-show="currItem== ''">
|
<div class='item' v-show="currItem== ''">
|
||||||
@ -37,6 +45,14 @@
|
|||||||
<img class="img"
|
<img class="img"
|
||||||
src="https://zysc.fjptzykj.com:3000/shangcheng/0d0a7ab210afb5cee674e402ca3ec197a30523687acbec2e8e5f16fb52075e9b.jpg" />
|
src="https://zysc.fjptzykj.com:3000/shangcheng/0d0a7ab210afb5cee674e402ca3ec197a30523687acbec2e8e5f16fb52075e9b.jpg" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class='item' v-show="currItem== 'pink'">
|
||||||
|
<img class="img"
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/0d0a7ab210afb5cee674e402ca3ec197a30523687acbec2e8e5f16fb52075e9b.jpg" />
|
||||||
|
</div>
|
||||||
|
<div class='item' v-show="currItem== 'orange'">
|
||||||
|
<img class="img"
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/0d0a7ab210afb5cee674e402ca3ec197a30523687acbec2e8e5f16fb52075e9b.jpg" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,6 +82,10 @@
|
|||||||
setZtClass('lv')
|
setZtClass('lv')
|
||||||
}else if(currItem.value == 'blue'){
|
}else if(currItem.value == 'blue'){
|
||||||
setZtClass('blue')
|
setZtClass('blue')
|
||||||
|
}else if(currItem.value == 'pink'){
|
||||||
|
setZtClass('pink')
|
||||||
|
}else if(currItem.value == 'orange'){
|
||||||
|
setZtClass('orange')
|
||||||
}else{
|
}else{
|
||||||
setZtClass('')
|
setZtClass('')
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
||||||
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
||||||
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
||||||
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
|
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :showTabBar = "false">
|
||||||
<template #toolBarLeft>
|
<template #toolBarLeft>
|
||||||
<!-- <el-radio-group
|
<!-- <el-radio-group
|
||||||
v-model="selectedTemplateItem"
|
v-model="selectedTemplateItem"
|
||||||
|
Loading…
Reference in New Issue
Block a user