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

Author: YunaiV

src/components/DiyEditor/components/mobile/TitleBar/config.ts

@@ -1,11 +1,11 @@
-import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
+  // 背景图
+  bgImgUrl: string
   // 偏移
   marginLeft: number
-  // 偏移量
-  skew: number
   // 显示位置
   textAlign: 'left' | 'center'
   // 主标题
@@ -24,6 +24,8 @@ export interface TitleBarProperty {
   titleColor: string
   // 描述颜色
   descriptionColor: string
+  // 高度
+  height: number
   // 查看更多
   more: {
     // 是否显示查看更多
@@ -54,7 +56,8 @@ export const component = {
     descriptionWeight: 200,
     titleColor: 'rgba(50, 50, 51, 10)',
     descriptionColor: 'rgba(150, 151, 153, 10)',
-    skew: 0,
+    marginLeft: 0,
+    height: 40,
     more: {
       //查看更多
       show: false,

src/components/DiyEditor/components/mobile/TitleBar/index.vue

@@ -1,65 +1,57 @@
 <template>
-  <div
-    :style="{
-      background:
-        property.style.bgType === 'color' ? property.style.bgColor : `url(${property.style.bgImg})`,
-      backgroundSize: '100% 100%',
-      backgroundRepeat: 'no-repeat'
-    }"
-    class="title-bar"
-  >
-    <!-- 内容 -->
-    <div>
+  <div class="title-bar" :style="{ height: `${property.height}px` }">
+    <el-image v-if="property.bgImgUrl" :src="property.bgImgUrl" fit="cover" class="w-full" />
+    <div class="absolute left-0 top-0 w-full h-full flex flex-col justify-center">
       <!-- 标题 -->
       <div
-        v-if="property.title"
         :style="{
           fontSize: `${property.titleSize}px`,
           fontWeight: property.titleWeight,
           color: property.titleColor,
           textAlign: property.textAlign,
-          marginLeft: property.skew + 'px'
+          marginLeft: `${property.marginLeft}px`,
+          marginBottom: '4px'
         }"
+        v-if="property.title"
       >
         {{ property.title }}
       </div>
       <!-- 副标题 -->
       <div
-        v-if="property.description"
         :style="{
           fontSize: `${property.descriptionSize}px`,
           fontWeight: property.descriptionWeight,
           color: property.descriptionColor,
           textAlign: property.textAlign,
-          marginLeft: property.skew + 'px'
+          marginLeft: `${property.marginLeft}px`
         }"
-        class="m-t-8px"
+        v-if="property.description"
       >
         {{ property.description }}
       </div>
     </div>
     <!-- 更多 -->
     <div
+      class="more"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor
       }"
-      class="more"
     >
       <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>
 </template>
-<script lang="ts" setup>
+<script setup lang="ts">
 import { TitleBarProperty } from './config'
 
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' })
 
 defineProps<{ property: TitleBarProperty }>()
 </script>
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .title-bar {
   position: relative;
   width: 100%;

src/components/DiyEditor/components/mobile/TitleBar/property.vue

@@ -1,7 +1,12 @@
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <el-form :model="formData" :rules="rules" label-width="85px">
-      <el-card class="property-group" header="风格" shadow="never">
+    <el-form label-width="85px" :model="formData" :rules="rules">
+      <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-radio-group v-model="formData!.textAlign">
             <el-tooltip content="居左" placement="top">
@@ -16,76 +21,84 @@
             </el-tooltip>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="偏移量" prop="skew">
+        <el-form-item label="偏移量" prop="marginLeft" label-width="70px">
           <el-slider
-            v-model="formData.skew"
+            v-model="formData.marginLeft"
             :max="100"
             :min="0"
-            :step="1"
+            show-input
             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
+            input-size="small"
           />
         </el-form-item>
       </el-card>
-      <el-card class="property-group" header="主标题" shadow="never">
-        <el-form-item label="文字" label-width="40px" prop="title">
+      <el-card header="主标题" class="property-group" shadow="never">
+        <el-form-item label="文字" prop="title" label-width="40px">
           <InputWithColor
             v-model="formData.title"
             v-model:color="formData.titleColor"
-            maxlength="20"
             show-word-limit
+            maxlength="20"
           />
         </el-form-item>
-        <el-form-item label="大小" label-width="40px" prop="titleSize">
+        <el-form-item label="大小" prop="titleSize" label-width="40px">
           <el-slider
             v-model="formData.titleSize"
             :max="60"
             :min="10"
-            input-size="small"
             show-input
+            input-size="small"
           />
         </el-form-item>
-        <el-form-item label="粗细" label-width="40px" prop="titleWeight">
+        <el-form-item label="粗细" prop="titleWeight" label-width="40px">
           <el-slider
             v-model="formData.titleWeight"
-            :max="900"
             :min="100"
+            :max="900"
             :step="100"
-            input-size="small"
             show-input
+            input-size="small"
           />
         </el-form-item>
       </el-card>
-      <el-card class="property-group" header="副标题" shadow="never">
-        <el-form-item label="文字" label-width="40px" prop="description">
+      <el-card header="副标题" class="property-group" shadow="never">
+        <el-form-item label="文字" prop="description" label-width="40px">
           <InputWithColor
             v-model="formData.description"
             v-model:color="formData.descriptionColor"
-            maxlength="50"
             show-word-limit
+            maxlength="50"
           />
         </el-form-item>
-        <el-form-item label="大小" label-width="40px" prop="descriptionSize">
+        <el-form-item label="大小" prop="descriptionSize" label-width="40px">
           <el-slider
             v-model="formData.descriptionSize"
             :max="60"
             :min="10"
-            input-size="small"
             show-input
+            input-size="small"
           />
         </el-form-item>
-        <el-form-item label="粗细" label-width="40px" prop="descriptionWeight">
+        <el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
           <el-slider
             v-model="formData.descriptionWeight"
-            :max="900"
             :min="100"
+            :max="900"
             :step="100"
-            input-size="small"
             show-input
+            input-size="small"
           />
         </el-form-item>
       </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-checkbox v-model="formData.more.show" />
         </el-form-item>
@@ -98,7 +111,7 @@
               <el-radio value="all">文字+图标</el-radio>
             </el-radio-group>
           </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-form-item>
           <el-form-item label="跳转链接" prop="more.url">
@@ -109,7 +122,7 @@
     </el-form>
   </ComponentContainerProperty>
 </template>
-<script lang="ts" setup>
+<script setup lang="ts">
 import { TitleBarProperty } from './config'
 import { useVModel } from '@vueuse/core'
 // 导航栏属性面板
@@ -123,4 +136,4 @@ const formData = useVModel(props, 'modelValue', emit)
 const rules = {}
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped lang="scss"></style>