Skip to content

phsl / admin

Go to a project
Commit 541694c9 by YunaiV
Options

fix：【商城】店铺装修-标题栏：之前 bgImgUrl 不对的问题（彻底修复）

parent 45325603
Showing with 57 additions and 49 deletions
src/components/DiyEditor/components/mobile/TitleBar/config.ts
import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util' import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 标题栏属性 */ /** 标题栏属性 */
export interface TitleBarProperty { export interface TitleBarProperty {
// 背景图
bgImgUrl: string
// 偏移 // 偏移
marginLeft: number marginLeft: number
// 偏移量
skew: number
// 显示位置 // 显示位置
textAlign: 'left' | 'center' textAlign: 'left' | 'center'
// 主标题 // 主标题
...@@ -24,6 +24,8 @@ export interface TitleBarProperty { ...@@ -24,6 +24,8 @@ export interface TitleBarProperty {
titleColor: string titleColor: string
// 描述颜色 // 描述颜色
descriptionColor: string descriptionColor: string
// 高度
height: number
// 查看更多 // 查看更多
more: { more: {
// 是否显示查看更多 // 是否显示查看更多
...@@ -54,7 +56,8 @@ export const component = { ...@@ -54,7 +56,8 @@ export const component = {
descriptionWeight: 200, descriptionWeight: 200,
titleColor: 'rgba(50, 50, 51, 10)', titleColor: 'rgba(50, 50, 51, 10)',
descriptionColor: 'rgba(150, 151, 153, 10)', descriptionColor: 'rgba(150, 151, 153, 10)',
skew: 0, marginLeft: 0,
height: 40,
more: { more: {
//查看更多 //查看更多
show: false, show: false,
......
src/components/DiyEditor/components/mobile/TitleBar/index.vue
<template> <template>
<div <div class="title-bar" :style="{ height: `${property.height}px` }">
:style="{ <el-image v-if="property.bgImgUrl" :src="property.bgImgUrl" fit="cover" class="w-full" />
background: <div class="absolute left-0 top-0 w-full h-full flex flex-col justify-center">
property.style.bgType === 'color' ? property.style.bgColor : `url(${property.style.bgImg})`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}"
class="title-bar"
>
<!-- 内容 -->
<div>
<!-- 标题 --> <!-- 标题 -->
<div <div
v-if="property.title"
:style="{ :style="{
fontSize: `${property.titleSize}px`, fontSize: `${property.titleSize}px`,
fontWeight: property.titleWeight, fontWeight: property.titleWeight,
color: property.titleColor, color: property.titleColor,
textAlign: property.textAlign, textAlign: property.textAlign,
marginLeft: property.skew + 'px' marginLeft: `${property.marginLeft}px`,
marginBottom: '4px'
}" }"
v-if="property.title"
> >
{{ property.title }} {{ property.title }}
</div> </div>
<!-- 副标题 --> <!-- 副标题 -->
<div <div
v-if="property.description"
:style="{ :style="{
fontSize: `${property.descriptionSize}px`, fontSize: `${property.descriptionSize}px`,
fontWeight: property.descriptionWeight, fontWeight: property.descriptionWeight,
color: property.descriptionColor, color: property.descriptionColor,
textAlign: property.textAlign, textAlign: property.textAlign,
marginLeft: property.skew + 'px' marginLeft: `${property.marginLeft}px`
}" }"
class="m-t-8px" v-if="property.description"
> >
{{ property.description }} {{ property.description }}
</div> </div>
</div> </div>
<!-- 更多 --> <!-- 更多 -->
<div <div
class="more"
v-show="property.more.show" v-show="property.more.show"
:style="{ :style="{
color: property.descriptionColor color: property.descriptionColor
}" }"
class="more"
> >
<span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span> <span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
<Icon v-if="property.more.type !== 'text'" icon="ep:arrow-right" /> <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script setup lang="ts">
import { TitleBarProperty } from './config' import { TitleBarProperty } from './config'
/** 标题栏 */ /** 标题栏 */
...@@ -59,7 +51,7 @@ defineOptions({ name: 'TitleBar' }) ...@@ -59,7 +51,7 @@ defineOptions({ name: 'TitleBar' })
defineProps<{ property: TitleBarProperty }>() defineProps<{ property: TitleBarProperty }>()
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.title-bar { .title-bar {
position: relative; position: relative;
width: 100%; width: 100%;
......
src/components/DiyEditor/components/mobile/TitleBar/property.vue
<template> <template>
<ComponentContainerProperty v-model="formData.style"> <ComponentContainerProperty v-model="formData.style">
<el-form :model="formData" :rules="rules" label-width="85px"> <el-form label-width="85px" :model="formData" :rules="rules">
<el-card class="property-group" header="风格" shadow="never"> <el-card header="风格" class="property-group" shadow="never">
<el-form-item label="背景图片" prop="bgImgUrl">
<UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
<template #tip>建议尺寸 750*80</template>
</UploadImg>
</el-form-item>
<el-form-item label="标题位置" prop="textAlign"> <el-form-item label="标题位置" prop="textAlign">
<el-radio-group v-model="formData!.textAlign"> <el-radio-group v-model="formData!.textAlign">
<el-tooltip content="居左" placement="top"> <el-tooltip content="居左" placement="top">
...@@ -16,76 +21,84 @@ ...@@ -16,76 +21,84 @@
</el-tooltip> </el-tooltip>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="偏移量" prop="skew"> <el-form-item label="偏移量" prop="marginLeft" label-width="70px">
<el-slider <el-slider
v-model="formData.skew" v-model="formData.marginLeft"
:max="100" :max="100"
:min="0" :min="0"
:step="1" show-input
input-size="small" input-size="small"
/>
</el-form-item>
<el-form-item label="高度" prop="height" label-width="70px">
<el-slider
v-model="formData.height"
:max="200"
:min="20"
show-input show-input
input-size="small"
/> />
</el-form-item> </el-form-item>
</el-card> </el-card>
<el-card class="property-group" header="主标题" shadow="never"> <el-card header="主标题" class="property-group" shadow="never">
<el-form-item label="文字" label-width="40px" prop="title"> <el-form-item label="文字" prop="title" label-width="40px">
<InputWithColor <InputWithColor
v-model="formData.title" v-model="formData.title"
v-model:color="formData.titleColor" v-model:color="formData.titleColor"
maxlength="20"
show-word-limit show-word-limit
maxlength="20"
/> />
</el-form-item> </el-form-item>
<el-form-item label="大小" label-width="40px" prop="titleSize"> <el-form-item label="大小" prop="titleSize" label-width="40px">
<el-slider <el-slider
v-model="formData.titleSize" v-model="formData.titleSize"
:max="60" :max="60"
:min="10" :min="10"
input-size="small"
show-input show-input
input-size="small"
/> />
</el-form-item> </el-form-item>
<el-form-item label="粗细" label-width="40px" prop="titleWeight"> <el-form-item label="粗细" prop="titleWeight" label-width="40px">
<el-slider <el-slider
v-model="formData.titleWeight" v-model="formData.titleWeight"
:max="900"
:min="100" :min="100"
:max="900"
:step="100" :step="100"
input-size="small"
show-input show-input
input-size="small"
/> />
</el-form-item> </el-form-item>
</el-card> </el-card>
<el-card class="property-group" header="副标题" shadow="never"> <el-card header="副标题" class="property-group" shadow="never">
<el-form-item label="文字" label-width="40px" prop="description"> <el-form-item label="文字" prop="description" label-width="40px">
<InputWithColor <InputWithColor
v-model="formData.description" v-model="formData.description"
v-model:color="formData.descriptionColor" v-model:color="formData.descriptionColor"
maxlength="50"
show-word-limit show-word-limit
maxlength="50"
/> />
</el-form-item> </el-form-item>
<el-form-item label="大小" label-width="40px" prop="descriptionSize"> <el-form-item label="大小" prop="descriptionSize" label-width="40px">
<el-slider <el-slider
v-model="formData.descriptionSize" v-model="formData.descriptionSize"
:max="60" :max="60"
:min="10" :min="10"
input-size="small"
show-input show-input
input-size="small"
/> />
</el-form-item> </el-form-item>
<el-form-item label="粗细" label-width="40px" prop="descriptionWeight"> <el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
<el-slider <el-slider
v-model="formData.descriptionWeight" v-model="formData.descriptionWeight"
:max="900"
:min="100" :min="100"
:max="900"
:step="100" :step="100"
input-size="small"
show-input show-input
input-size="small"
/> />
</el-form-item> </el-form-item>
</el-card> </el-card>
<el-card class="property-group" header="查看更多" shadow="never"> <el-card header="查看更多" class="property-group" shadow="never">
<el-form-item label="是否显示" prop="more.show"> <el-form-item label="是否显示" prop="more.show">
<el-checkbox v-model="formData.more.show" /> <el-checkbox v-model="formData.more.show" />
</el-form-item> </el-form-item>
...@@ -98,7 +111,7 @@ ...@@ -98,7 +111,7 @@
<el-radio value="all">文字+图标</el-radio> <el-radio value="all">文字+图标</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-show="formData.more.type !== 'icon'" label="更多文字" prop="more.text"> <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
<el-input v-model="formData.more.text" /> <el-input v-model="formData.more.text" />
</el-form-item> </el-form-item>
<el-form-item label="跳转链接" prop="more.url"> <el-form-item label="跳转链接" prop="more.url">
...@@ -109,7 +122,7 @@ ...@@ -109,7 +122,7 @@
</el-form> </el-form>
</ComponentContainerProperty> </ComponentContainerProperty>
</template> </template>
<script lang="ts" setup> <script setup lang="ts">
import { TitleBarProperty } from './config' import { TitleBarProperty } from './config'
import { useVModel } from '@vueuse/core' import { useVModel } from '@vueuse/core'
// 导航栏属性面板 // 导航栏属性面板
...@@ -123,4 +136,4 @@ const formData = useVModel(props, 'modelValue', emit) ...@@ -123,4 +136,4 @@ const formData = useVModel(props, 'modelValue', emit)
const rules = {} const rules = {}
</script> </script>
<style lang="scss" scoped></style> <style scoped lang="scss"></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment